Solved

jquery expanding div problem

Posted on 2010-11-24
10
599 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
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

 
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

Monthly Recap

May was a big month for new releases from Linux Academy! Take a look at what our team built recently in our blog. You can access the newest releases from our blog.

Question has a verified solution.

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

When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
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.

729 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