Solved

jquery expanding div problem

Posted on 2010-11-24
10
595 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
  • 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
 
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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

867 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

22 Experts available now in Live!

Get 1:1 Help Now