0

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!

Anders
  • 3,198
  • 1
  • 20
  • 43
  • I'm not seeing what you are talking about at the referenced link. – mrtsherman Jan 10 '13 at 18:55
  • Using Chrome, even with a not moving mouse, this clone div keeps going on & off (folders on top are worse than the links on the bottom). What about using a "tooltip" instead a clone div" – MikeD Jan 10 '13 at 18:58
  • You can see what I mean if you hover the mouse on the folders and files in the list to the right. – Anders Jan 11 '13 at 19:48
  • I tried a few different tooltips but they added so much overhead with additional jQuery packages so I didn't much fancy the idea... Anyhow I would still have the same issue to detect which items needs the tooltip as my problem is knowing which texts are too long to fit the width on the list... – Anders Jan 11 '13 at 19:49

2 Answers2

0

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.

Mick Jones
  • 517
  • 4
  • 19
  • Debugging is not the issue, I do that in Chrome just fine. The problem I am having is trying to figure out the true width of the div inside the main list div. – Anders Jan 11 '13 at 19:50
0

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();
});
mrtsherman
  • 39,342
  • 23
  • 87
  • 111
  • Although I have problems getting it working on my sample page: http://j25.wasen.net/index.php/news The left position is off on objects that are not wider than the list and the "remove" code is not really working that well for me as in your sample... :( – Anders Jan 28 '13 at 17:11
  • I now managed to solve the "flickering" but now I need help with sorting out why some objects are pushed to the right... Any pointers? – Anders Jan 28 '13 at 18:04
  • @Anders - it looks like you have some testing code in place. Whenever I mouse over a list item a popup dialog is thrown. – mrtsherman Jan 28 '13 at 21:18
  • @Anders - Try removing 'relative' from your body? Or try using `position` instead of `offset`. I suspect that there is a parent with relative, static, or fixed positioning that causes offset to fail. http://jsfiddle.net/5zErQ/1/ – mrtsherman Jan 28 '13 at 21:25
  • Sorry, guessing at this point. Or try using `fixed` instead of `absolute` in the original code example. http://jsfiddle.net/5zErQ/4/ – mrtsherman Jan 28 '13 at 21:27
  • You got me in the right direction! I have added "display: inline-block;" to the DIV's and that is now working fine. The issue with the wrong positioning is also history now. There is a slight offset in 1 pixel but I think that is from the border of the outer DIV... – Anders Jan 29 '13 at 08:19