• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1520
  • Last Modified:

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

0
Refael
Asked:
Refael
  • 7
  • 6
1 Solution
 
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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now