Solved

jquery expand a box from center

Posted on 2012-03-28
13
1,369 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
  • 7
  • 6
13 Comments
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
Comment Utility
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
Comment Utility
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
 

Author Comment

by:Refael
Comment Utility
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
Comment Utility
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
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
Comment Utility
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
Comment Utility
Any progress?
0
 

Author Comment

by:Refael
Comment Utility
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
Comment Utility
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
Comment Utility
tommyBoy thank you so much!
0
 

Author Closing Comment

by:Refael
Comment Utility
Simply an Expert!
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
Thanks, that's very nice of you to say.
0

Featured Post

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

Join & Write a Comment

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…
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
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…

772 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

10 Experts available now in Live!

Get 1:1 Help Now