Solved

jquery expanding div problem

Posted on 2010-11-24
10
600 Views
Last Modified: 2013-11-11
I have an expending div, using jQuery. When you hover over the div (which holds an image) it expands to show some instructional text.

The problem is, that if you exit by moving your mouse down over the newly exposed text and out of the expanded area, it doesn't collapse. If I move the mouse out of the original image throught the top or sides, it collapses nicely, but if I move the mouse down, or to the left or right of the newly exposed text, it doesn't collapse.

Any idea what I am doing wrong?

Here is the jQuery

<script type="text/javascript">
 
                        $(document).ready(function(){
 
                                $("#expanderInst").hover(
                                        //function on mouse over
                                        function(){
                                                $(this)
                                                        .stop()
                                                        .animate({height : "150px", width : "285px"},400);
                                        },
 
                                        //function on mouse out
                                        function(){
                                                $(this)
                                                        .stop()
                                                        .animate({"height" : "85px", width : "285px"}, 400);
 
                                        }
                                );

                        });
 
                </script>

Here is the inline code

 <div id="expansion_wrapper2" > 
<div id="expanderInst" style="height: 85px; background: #fff; background-image: url(images/box_background_5.jpg);border: 4px solid #8CB8DB; overflow-y: hidden; overflow-x: hidden; width:285px;  4px; text-algin:left;  "  ><center>

<img id="imageidInst" src="http://www.somesite.com/images/slider_help_cover.jpg" width="285" height="85" style="  " /><br clear="all"><div style="padding: 8px;"><span style='font-size: 14px; font-style:normal'>Use the sliders below to reveal your best choice</span>.</div> <br>

</div><!--- expanderInst --->

                </div><br clear="all"> <!--- expansion_wrapper --->
0
Comment
Question by:birwin
[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
  • 3
  • 3
  • 2
10 Comments
 
LVL 16

Expert Comment

by:jmatix
ID: 34210022
You have an extra </div> closing tag. Cleaned up as below. Modified JS is attached:

div id="expansion_wrapper2" > 
<div id="expanderInst" style="height: 85px; background: #fff; background-image: url(images/box_background_5.jpg);border: 4px solid #8CB8DB; overflow-y: hidden; overflow-x: hidden; width:285px;  4px; text-algin:left;  "  ><center>

<img id="imageidInst" src="http://www.somesite.com/images/slider_help_cover.jpg" width="285" height="85" style="  " /><br clear="all"><div style="padding: 8px;"><span style='font-size: 14px; font-style:normal'>Use the sliders below to reveal your best choice</span>.<br>

</div><!--- expanderInst --->
</div><br clear="all"> <!--- expansion_wrapper --->
<script type="text/javascript"> 
 
$(document).ready(function(){ 

        $("#expansion_wrapper2").hover( 
                //function on mouse over 
                function(){ 
                        $('#expanderInst') 
                                .stop() 
                                .animate({height : "150px"},400); 
                }, 

                //function on mouse out 
                function(){ 
                        $('#expanderInst') 
                                .stop() 
                                .animate({"height" : "85px"}, 400); 

                } 
        ); 

}); 

</script>

Open in new window

0
 
LVL 16

Expert Comment

by:jmatix
ID: 34210072
Discard my previous post. There was no extra </div>. I cleaned up the code a bit. See below:
<script type="text/javascript"> 
 
$(document).ready(function(){ 

        $("#expanderInst *").hover( 
                //function on mouse over 
                function(){ 
                        $('#expanderInst') 
                                .stop() 
                                .animate({height : "150px"},400); 
                }, 

                //function on mouse out 
                function(){ 
                        $('#expanderInst') 
                                .stop() 
                                .animate({"height" : "85px"}, 400); 

                } 
        ); 

}); 

</script>
<center>
<div id="expansion_wrapper2"> 
<div id="expanderInst" style="height: 85px; background: #fff; background-image: url(images/box_background_5.jpg);border: 4px solid #8CB8DB; overflow: hidden; width:285px;  4px; text-align:left;  "  >
<img id="imageidInst" src="http://www.somesite.com/images/slider_help_cover.jpg" style="height: 85px; width:285px;" />
<div style="padding: 8px;">
<span style='font-size: 14px; font-style:normal'>Use the sliders below to reveal your best choice</span>
</div>
</div><!--- expanderInst --->

</div><!--- expansion_wrapper --->
</center>

Open in new window

0
 
LVL 6

Author Comment

by:birwin
ID: 34210716
Hi jmatix:

Thank you for the code. It seems to be much better at recognizing the mouse out, and collapses if the mouse is moved right or left from anywhere on the expanded content. It is hit and miss when the mouse is pulled strait down, but collapses immediately if the mouse is pulled from the parent element (which is a <td>

The problem is that if the mouse is placed on the area into which the div expands, it expands the div - even if the mouse hasn't touched the original, smaller div. Therefore it is unusable, since there is copy and checkboxes that are covered as soon as the mouse strays into the area that the expanded div eventually will cover.

Do you any ideas on how to prevent that?

Thanks

Brian
0
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
LVL 16

Expert Comment

by:jmatix
ID: 34263594
I removed the wrapper <div>. See if it is better. In IE the image shivers a bit when you approach it from below. I don't know why.


<script type="text/javascript" src="../JS/jquery.js"></script>
<script type="text/javascript"> 
 
$(document).ready(function(){ 

        $("#expanderInst").hover( 
                //function on mouse over 
                function(){ 
                        $('#expanderInst') 
                                .stop() 
                                .animate({height : "150px"},400); 
                }, 

                //function on mouse out 
                function(){ 
                        $('#expanderInst') 
                                .stop() 
                                .animate({"height" : "85px"}, 400); 

                } 
        ); 

}); 

</script>
<center>
<div id="expanderInst" style="height: 85px; background: #fff; background-image: url(images/box_background_5.jpg);border: 4px solid #8CB8DB; overflow: hidden; width:285px;  4px; text-align:left;  "  >
<img id="imageidInst" src="../images/Waterlilies.jpg" style="height: 85px; width:285px;" />
<div style="padding: 8px;">
<span style='font-size: 14px; font-style:normal'>Use the sliders below to reveal your best choice</span>
</div>
</div><!--- expanderInst --->

</center>

Open in new window

0
 
LVL 6

Author Comment

by:birwin
ID: 34263988
Thank you for the code.

I tried it in my "real life" site, and this code does collapse when the mouse is dragged down, but it now pushes down all of the other elemenets on the page when it opens. I was hoping that it would overlay the existing elements, as it did previously.
0
 
LVL 18

Accepted Solution

by:
Sudaraka Wijesinghe earned 500 total points
ID: 34264674
I tested the original code you posted, it worked fine on FF and Chrome, but had a problem with IE mainly because of the unclosed center tag.
Also, having the border around the DIV you animate was making the it jump around when animating, I suggest you wrap around another DIV with a border around the #expanderInst DIV to overcome.
<html>

<head>
<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
 
                        $(document).ready(function(){
 
                                $("#expanderInst").hover(
                                        //function on mouse over
                                        function(){
                                                $(this)
                                                        .stop()
                                                        .animate({height : "150px", width : "285px"},400);
                                        },
 
                                        //function on mouse out
                                        function(){
                                                $(this)
                                                        .stop()
                                                        .animate({"height" : "85px", width : "285px"}, 400);
 
                                        }
                                );

                        });
 
                </script>
</head>

<body>

<div id="expansion_wrapper2">
	<div style="border: 4px solid #8CB8DB; width:285px;">
	<div id="expanderInst" style="height: 85px; background-color: #fff; background-image: url(box_background_5.jpg); width:285px; overflow: hidden; text-algin:left;  "  >
		<img id="imageidInst" src="slider_help_cover.jpg" width="285" height="85" style="  " /><br clear="all">
		<div style="padding: 8px;"><span style='font-size: 14px; font-style:normal'>Use the sliders below to reveal your best choice</span>.</div><br>
	</div><!--- expanderInst --->
	</div>
</div><br clear="all"> <!--- expansion_wrapper --->

</body>

</html>

Open in new window

(Please note that I have changes script/image paths to test locally)

Also, other than these issues there could be other HTML or CSS that might be interrupting the behavior of this piece of code, we could help you better of you post a link to you "real life" site where this piece of code is in.
0
 
LVL 6

Author Closing Comment

by:birwin
ID: 34264823
Thank you. That worked perfectly.
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34264882
Glad to help. Thanks for the points.
0

Featured Post

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
The viewer will learn how to count occurrences of each item in an array.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

627 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