Solved

onmouseover vs. click

Posted on 2013-01-21
7
217 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
  • 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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 500 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

803 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