Solved

jquery expand a box from center

Posted on 2012-03-28
13
1,424 Views
Last Modified: 2012-03-30
Hello Experts,

I placed a circled-bullets on a photo using <DIV> with absolute position and background color (in CSS).

The script below, when the user hover on the circled-bullet, expends the circle width and height and change the opacity of the photo.

Everything works fine :-)

Currently the circle-bullet expends from left bottom and i need it to expend from the center. Can you help me? Please remember that each circle-bullet is in a DIV using an absolute position.

Thank you!

$('.map-bullet').mouseenter(function() {
		$('#standort-img').fadeTo(5000, 0.8);
		      $(this).animate({width: 40, height: 38}, 5000);
	 }).mouseleave(function() {
		 $(this).animate({width: 17, height: 16}, 5000);
		 $('#standort-img').fadeTo('fast', 1.0);
		});
});

Open in new window

0
Comment
Question by:Refael
[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
  • 7
  • 6
13 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37780101
If the divs are absolute position, all you need to do is animate the top and left to half of the amount they are expanding by. Example: Assuming a div is positioned top:100px and left:100px then 38 - 16 = 22, so animate the div up 11px to top:89px. Do the same math for the width and your script would look like this:
$('.map-bullet').mouseenter(function() {
		$('#standort-img').fadeTo(5000, 0.8);
		      $(this).animate({width: 40, height: 38, top: 89, left: 89}, 5000);
	 }).mouseleave(function() {
		 $(this).animate({width: 17, height: 16, top: 100, left: 100}, 5000);
		 $('#standort-img').fadeTo('fast', 1.0);
		});
});

Open in new window


Of course, if you have multiple divs, you will have to calculate on the fly and use variables for top and left.
0
 

Author Comment

by:Refael
ID: 37780126
tommyBoy, Hi
I have no clue how to "calculate on the fly and use variables for top and left".
I have 15 div each have a different absolute position.
The initial size of the circle is width: 17px, height: 16px and it should expend 1.5 larger. I also try to keep the numbers on the circle centered vertically and horizontally.... long way to heaven for me....
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37781090
See if this gets you any closer. If not, you will need to post some code so I can fully understand your markup.
$(document).ready(function(){
    var $position;
    $('.map-bullet').mouseenter(function() {
        $position = $(this).position();
		$('.standort-img').fadeTo(5000, 0.8);
		      $(this).animate({width: 40, height: 40, top: ($position.top - (24/2)), left: ($position.left -(24/2))}, 5000);
	 }).mouseleave(function() {
		 $(this).animate({width: 16, height: 16,top: $position.top, left: $position.left}, 5000);
		 $('.standort-img').fadeTo('fast', 1.0);
	 });
});

Open in new window


My test markup:
<div class="map-bullet" style="top:100px;left:100px"><img class="standort-img" src="images/red.jpg" alt="" /></div>
<div class="map-bullet" style="top:150px;left:150px"><img class="standort-img" src="images/red.jpg" alt="" /></div>
<div class="map-bullet" style="top:200px;left:200px"><img class="standort-img" src="images/red.jpg" alt="" /></div>
<div class="map-bullet" style="top:250px;left:250px"><img class="standort-img" src="images/red.jpg" alt="" /></div>

Open in new window


My CSS:
.map-bullet
{
    width:16px;
    height:16px;
    background-color:#000;
    position:absolute;
}
.standort-img
{
    width:17px;
    height:16px;
    display:none
}
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Refael
ID: 37781124
The standort-img is the large photo the circles are on.
I simply using the fadeTo to have a better focus on the circle when the user hover it.

The map-bullet class are the circles and here are the classes:

#standort-img {
	z-index:1;
	width:948px;
	height:384px;	
}

.map-bullet {
	display:block;
	position:absolute;
	width:17px;
	height:16px;
	color:#000000;
	text-align:center;
	background-color:#CDB687;
	z-index:2;	
}
.map-bullet:hover {
	z-index:3;
	padding:10px;	
	cursor:pointer;	
}

Open in new window

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37781156
My sample should give you enough information to adjust your code as needed. I need to leave for a 3 hour commute. This will have to wait until later or someone picks up where I left off, they have my blessing, very sorry.
0
 

Author Comment

by:Refael
ID: 37781321
Hi tommyBoy,

Thank you!

I have tried only by taking this two lines of scripts:
" var $position;"
"...... top: ($position.top - (24/2)), left: ($position.left -(24/2))}, 5000);"

first i think there is an error in the second line ....
and unfortunately it does not seem to work.
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 37782586
It may not work because your situation is slightly different, but if you copy this markup to a new htm file and test, you will see that the concept is good and there are no errors in the script.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>      
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
    var $position;
    $('.map-bullet').mouseenter(function() {
        $position = $(this).position();
		$('.standort-img').fadeTo(5000, 0.8);
		      $(this).animate({width: 40, height: 40, top: ($position.top - (24/2)), left: ($position.left -(24/2))}, 5000);
	 }).mouseleave(function() {
		 $(this).animate({width: 16, height: 16,top: $position.top, left: $position.left}, 5000);
		 $('.standort-img').fadeTo('fast', 1.0);
	 });
});
 </script>
 <style type="text/css">
 
.map-bullet
{
    width:16px;
    height:16px;
    background-color:#000;
    position:absolute;
}
.standort-img
{
    width:17px;
    height:16px;
    display:none;
    margin:auto
}
    </style>
</head>
<body>
<div class="map-bullet" style="top:100px;left:100px"><img class="standort-img" src="images/red.jpg" alt="" /></div>
<div class="map-bullet" style="top:150px;left:150px"><img class="standort-img" src="images/red.jpg" alt="" /></div>
<div class="map-bullet" style="top:200px;left:200px"><img class="standort-img" src="images/red.jpg" alt="" /></div>
<div class="map-bullet" style="top:250px;left:250px"><img class="standort-img" src="images/red.jpg" alt="" /></div>
</body>
</html>

Open in new window

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37785408
Any progress?
0
 

Author Comment

by:Refael
ID: 37789723
Hi tommyBoy,

It works great. I think the problem was the size of the bullet and the position division.
Yet still i am not sure i got it completely to the center.

Can you explain the below?

In you script the initial size of the bullet is: 16x16
You increase the bullet to: 40x40
Then you divide: 24/2

Why 24/2?

I think the issue is here?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37789774
16 x 16 To 40 x 40
You want the center of the two squares to remain at the same point, so you divide the difference between the dimensions of the bigger square and the dimensions of the smaller square by 2. That's how far up and to the left you need to animate the bigger square as it grows.
0
 

Author Comment

by:Refael
ID: 37789791
tommyBoy thank you so much!
0
 

Author Closing Comment

by:Refael
ID: 37789792
Simply an Expert!
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37789808
Thanks, that's very nice of you to say.
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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

752 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