I'm using this jQuery script to animate a scrolling bar of twitter updates http://the-taylors.org/blog/2010/03/15/liscroll-jquery-news-ticker-customisation-with-next-previous-play/
Its all working fine except the width of the Div (class=liScroll-ticker) that holds the UL is incorrectly calculated - its too small and the list elements are not remaining on the same line as a result.
I think I've narrowed it down to this line in the script:
$stripItems.each(function(i) {
stripWidth += jQuery(this, i).width();
});
$strip.width(stripWidth);
I read in another thread on here that injecting a [span] element might allow me to measure the width of that rather than the text. Does anyone have any idea how to insert that into the script above, or if that is even the correct approach?
Thanks for any help!
UPDATE
It seems that the way I am styling the text is increasing the width and the script does not add on the extra pixels.
I tried using the outerWidth()
method on both stripWidth
and accumulatedWidth
with no success.
I also tried wrapping the contents of each <li>
in a <span>
and measuring that instead, and while it did return a different value it was still incorrect. Likewise with a <div>
.
I'm fairly confused!! Am I even correct in thinking that the margins, padding, font-size and font-weight attributes are causing the problem? Or is it that I have <span>
elements inside the <li>
's that aren't being measured?
Here is a demonstration of the problem: http://jsfiddle.net/martynr/ExcBr/9/