Solved

jquery expanding div problem

Posted on 2010-11-24
10
594 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Creating a slider 12 33
JavaScript Scope issue 4 18
How to refactor edit/delete jQuery to include else statements 5 26
onOpen 14 38
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

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

20 Experts available now in Live!

Get 1:1 Help Now