Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 290
  • Last Modified:

jquery expand and align

Hello Experts,

I really need a help from an expert here!

I have a photo. On that photo i placed a circles with numbers using css absolute positions.
When the user mouse-over a circle the circle expands around 1.5 times (e.g. the initial size of a circle is 16px on 16px and it grows to 24px on 24px.

The problem.....

The number on the circles are horizontally center-aligned using the css text-align:center.
When the circle expands the numbers should also be vertically align.

I tried varied options using padding-top and or increasing line-height but nothing seem to work smoothly.

Here is just a part of the script i am using to expand the circle. If you have a good idea i would be thankful!

  var $position;
  $('.map-bullet').mouseenter(function(){
    $position = $(this).position();

    $(this).stop().animate({
       width: 24,
       height: 24,
       top: ($position.top - (8/2)), left: ($position.left -(8/2))}, 100);
	
}).mouseleave(function() {

   $(this).stop().animate({
        width: 16,
       height: 16,
       top: $position.top, left: $position.left}, 100);

Open in new window

0
Refael
Asked:
Refael
1 Solution
 
Tom BeckCommented:
You were on the right track with line-height, however, as the circle expands, you must also increase the line-height then set it back to 16 on mouseleave.

var $position;
    $('.map-bullet').mouseenter(function(){
        $position = $(this).position();

        $(this).stop().animate({
            width: 24,
            height: 24,
            top: ($position.top - (8/2)), left: ($position.left -(8/2)), 'line-height':'24px'}, 100);
      
    }).mouseleave(function() {

        $(this).stop().animate({
            width: 16,
            height: 16,
            top: $position.top, left: $position.left, 'line-height':'16px'}, 100);
    });
0
 
RefaelAuthor Commented:
Thank you!
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

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