Solved

onmouseover vs. click

Posted on 2013-01-21
7
220 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
Technology Partners: 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 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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

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 a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

710 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