Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

jquery expand a box from center

Posted on 2012-03-28
13
Medium Priority
?
1,447 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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 

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 2000 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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

688 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