Solved

onmouseover vs. click

Posted on 2013-01-21
7
211 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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Suggested Solutions

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

708 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now