CODEWITHSUNDEEP
jquerycssalignment
CyberJunkie
CyberJunkie

Reputation: 22674

jquery vertical align 2 divs

This is what I'm trying to achieve

alt text

I have a fluid tooltip and a button. Their width is determined by the text and div padding. The text can vary. That said how would it be possible to vertically align them via Jquery?

The reason I want to use jquery is to avoid using tables and excessive HTML.

I tried the width() function but it doesn't give the exact width. I suppose one should get the padding too?

Lastly, I'm terrible with numbers.. I'm not sure what formula can be used but I suspect maybe dividing both div widths by 2 and somehow centering the middles?

EDIT: When clicking the button, the tooltip appears and is absolute not to interfere/push other divs.

EDIT: Work in progress jsfiddle.net/Aezb6

Upvotes: 4

Views: 1378

Answers (3)

Sebastian Patane Masuelli
Sebastian Patane Masuelli

Reputation: 4247

http://jsfiddle.net/SebastianPataneMasuelli/Aezb6/1/

you just needed to divide center_it by 2 to get the halfway point of the tooltip.

Upvotes: 1

Alex
Alex

Reputation: 137

See this example:

var item = $(".tooltip");
var container = $("#container");

var position = item.position();

var mytop = position.top - container.height() + $(document).scrollTop();
var myleft = position.left - container.width() + $(document).scrollLeft();

// Correct relative coordinates for IE and WebKIT
if($.browser.msie || $.browser.webkit){
    mytop = position.top - container.height();
    myleft = position.left - container.width();
}

container.offset({top: mytop, left: myleft});

Upvotes: 1

kobe
kobe

Reputation: 15835

Get the width of the calloutdiv//

widthCallout=$('#calloutdivWidth'); // this is dynamic

divide this by width of push button which is constant.

get left :

left= widthCallout/pushbuttonwidth

you can play around with paddingLeft value + or - which gives you exactly the center :

Upvotes: 2

Related Questions