Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

onmouseover vs. click

Posted on 2013-01-21
7
Medium Priority
?
222 Views
Last Modified: 2013-01-21
Hi,
I’m using the following combined with a CSS file to expand and contract a div.
<script type="text/javascript">
          $(document).ready(function () {
              $("DIV.ContainerPanel > DIV.collapsePanelHeader > DIV.ArrowExpand").toggle(
         function () {
             $(this).parent().next("div.Content").show("medium");
             $(this).attr("class", "ArrowClose");
         },
         
          function () {
              $(this).parent().next("div.Content").slideUp("fast");
              $(this).attr("class", "ArrowExpand");
          });
      });
    }
    </script>

It works beautifully. I’d just like it to execute onmouseover (open) and onmouseout(close)

Thank you
0
Comment
Question by:thenrich
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38802739
this'll probably work, but I can't test it without a link to your page:

    <script type="text/javascript">
          $(function () {
              $("DIV.ContainerPanel > DIV.collapsePanelHeader > DIV.ArrowExpand").on({

              mouseenter : 
                function () {
                    $(this).parent().next("div.Content").show("medium");
                    $(this).attr("class", "ArrowClose");
                    },

              mouseleave :   
                function () {
                    $(this).parent().next("div.Content").slideUp("fast");
                    $(this).attr("class", "ArrowExpand");
                    }
               });
            });
    </script>

Open in new window

0
 
LVL 5

Author Comment

by:thenrich
ID: 38802836
well I don't have the site out anywhere but if you could show me in the context of my own site that would be great.

www.ogtechllc.com - any one of the service pages are using jQuery for expanded div's
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38803006
this will work on your services page:

$(".ContainerPanel").mouseenter(function(){
                $(this).find(".Content").show("medium");
                  $(this).find(".ArrowExpand").attr("class", "ArrowClose");
            }).mouseleave(function(){
                $(this).find(".Content").slideUp("fast");
                $(this).find(".ArrowClose").attr("class", "ArrowExpand");
            });

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 5

Author Comment

by:thenrich
ID: 38803110
I've reduced the script to this:

 <script type="text/javascript">
        $(document).ready(function () {
            $("DIV.ContainerPanel > DIV.collapsePanelHeader > DIV.ArrowExpand").mouseenter(

         function () {
             $(this).parent().next("div.Content").show("medium");
             $(this).attr("class", "ArrowClose");
         });
    </script>

I've had no luck. Am I missing something?
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 38803247
why did you reduce the script?

Did you try what I posted? It will works on your Services page.
Here it is again in its entirety:

<script type="text/javascript">
$(function () {
$(".ContainerPanel").mouseenter(function(){
                $(this).find(".Content").show("medium");
                $(this).find(".ArrowExpand").attr("class", "ArrowClose");
            }).mouseleave(function(){
                $(this).find(".Content").slideUp("fast");
                $(this).find(".ArrowClose").attr("class", "ArrowExpand");
            });
});
</script>

Open in new window

0
 
LVL 5

Author Closing Comment

by:thenrich
ID: 38803282
Yup that did it!

For whatever reason I could not get it to function the first time.

You’re a gentleman and scholar. Thx again!
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38803298
:-.)
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question