Jamie Lomas

jquery auto marquee scroller

On a recent project i decided to use a little Jquery to tidy up how product title's were being displayed.
Submiting a long title via the content management system would stretch the products containing div element, I am sure at some point a client will add a super long title and mess up the whole layout so what are my options? I could just limit the characters (no fair!), add overflow hidden to the div (to easy), allow the div to stretch (this would look awfully) or allow two lines of text and hope they don't enter a longer title nope, nope, nope none of these solutions did it for me so i thought why not scroll the text? But obviously I didn't want all the title's to scroll, so then i came up with the idea of using Jquery to scroll only title's that are longer than the given area.

If you take a look at the demo below you will see that the top div scrolls and the second stays static this is because Jquery is detecting the span element within the given class and checking to see if it has a greater width than the area, if the area is greater it will wrap the span with a marquee. I know the marquee tag is a non-standard HTML element and deprecated by the W3C but its a staring point for a better Jquery solution, i will post a full W3C compliant solution when I finish it.
I have updated the code with a Jquery W3C compliant solution that remove's the use of the marquee tag, thanks to jScroller by Markus Bordihn it was simple to make this update.
You will need the jScroller.js you can download here.

demo

Javascript

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jscroller.js"></script>
<script type="text/javascript">
$(function(){
$('.box').each(function(){
      var $thisBox=$(this);
      var $span= $thisBox.find('span');
      if( $thisBox.width() < $span.width() )
      $jScroller.add($thisBox,$span,"left",5);
      $jScroller.start();
})
});
</script>

css

.box { width:600px; line-height:14px; font-size:14px; overflow:hidden; height:14px; border:solid 1px #ccc; position:relative}
.box span {white-space:nowrap}

html

   <span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</span>



   <span>Sed ut perspiciatis unde </span>