Getting the width of a partly hidden div in scrollable list (demo avail.)?

Question

This is drivning me nuts...

I have a list of file names and I only want to scroll vertically so if the file name (=div) is wider than the list itself I want to "bring out" the full div to display the name.

You can see this i action here: http://j25.wasen.net/index.php/news

I have solved this by creating a clone of the div on hover and add it to the body and setting a very high zIndex on it. That is a clone div will appear on top of everything but in the same position as the original div.

I can't really see why but for some reason the div's with a width smaller than the list displays in the wrong position. Items that exceeds the width shows up in the right place though.

I figured to make a check if the div containing the name exceeds the width of the list and only then create the clone, and this is also when it is only needed.

However I can not get the true width of the div. I have added Console.log statements so the width it catches is showed.

I check the width of the div attached to the body (=the clone) and not the div (partly hidden) in the list...

How can I get the true width of the div?

Thanks!

Answer 1

Your general premise is good. See this example. To do this I

1. Create a clone of the hovered list item
2. Use offset to position it properly
3. On mouseleave remove the hovered element

Hover caused unnecessary flashing. Thus the reason for the separate event handling.

http://jsfiddle.net/5zErQ/

var $clone;
$('li').mouseenter( function() {
  $clone = $('<span />', {text: $(this).text(), class:'temp'});
  $clone.css({position:'absolute', top:$(this).offset().top, left:$(this).offset().left});
  $('body').append($clone);
});

$('body').on('mouseleave', 'span', function() {
  $(this).remove();
});

Answer 2

Download the firebug plugin for Mozilla. Once installed you can right click on any element to see its styles and layout etc.

Select the layout tab, bottom right, if you hover over your div you will see the element dimensions including any margins and padding.

Download it here: https://getfirebug.com/

Hope that helps.