CSS, Jquery - Width of absolutely positioned div returned as 0

Question

I'm trying to run some conditional javascript to position a div such that, if a marker is clicked that is on the right hand side of a photo, the marker tooltip will be positioned to the left of the marker, otherwise it will be to the right of the marker. So, if the marker is on the right, I instruct the tooltip to be positioned at the marker's position().left, minus the width of the tooltip. However the tooltip width always changes, depending on the text inside, and calling jquery's width() function does not return a proper width. Any ideas on how to fix this? Here's the example:

http://bit.ly/IkbWl6

and here's my code:

var tagPos = $photo_tag.position();
if (isNarrow == true){
    var photoWidth = $('#photo_box').width();
    if (tagPos.left > photoWidth/2){
        var brandWidth = $('.brand_name').width(); //MH - NOT WORKING
        $brand_name_container.css({'left' : tagPos.left-brandWidth, 'top' : tagPos.top+brandAdjTop});
    } else {
        $brand_name_container.css({'left' : tagPos.left+brandAdjLeft, 'top' : tagPos.top+brandAdjTop});
    }
}

i didn't see a `.brand_name_relative` class in the html of the link you posted? — dm03514, Apr 25 '12 at 14:20
See if this helps: http://stackoverflow.com/questions/10277323 — Dagg Nabbit, Apr 25 '12 at 14:22

score 2 · Accepted Answer · answered Apr 25 '12 at 14:22

2

Just in case, but is your tooltip visible at the moment you request it's width ? The tooltip must be visible to get rendered by the render engine, without that it won't have any size.

You may do something like that for example

$('#mytooltip').show(0);
width = $('#mytooltip').width();
$('#mytooltip').hide(0);

this will be sufficient for the rendering to happen but it won't have the time to be really displayed to the users.

answered Apr 25 '12 at 14:22

malko

2,292
18
26

I thought so too, so I actually moved the display portion of my code above everything else, but that still didn't seem to solve the problem. – mheavers Apr 25 '12 at 14:29

CSS, Jquery - Width of absolutely positioned div returned as 0

1 Answers1