jquery expand a box from center

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

RefaelAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
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
RefaelAuthor Commented:
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
Tom BeckCommented:
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

RefaelAuthor Commented:
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
Tom BeckCommented:
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
RefaelAuthor Commented:
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
Tom BeckCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Tom BeckCommented:
Any progress?
0
RefaelAuthor Commented:
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
Tom BeckCommented:
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
RefaelAuthor Commented:
tommyBoy thank you so much!
0
RefaelAuthor Commented:
Simply an Expert!
0
Tom BeckCommented:
Thanks, that's very nice of you to say.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.