Solved

jquery expanding div problem

Posted on 2010-11-24
10
598 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
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Technology Resume 7 71
null, truthy, falsey confusion 25 33
Put javascript to get dropdown value 3 22
WordPress navigation menus: how to change color when clicked 10 22
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

730 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