Scrolling text content using jQuery (and not using marquee)
In the 90’s, a couple of much abused HTML tags were blink and marquee. There was a plethora of table-based yucky looking pages with such “effects”. Very few website developers actually used marquees because they needed to make something aesthetic or useful. It was mostly clients who cited “business sense” and believed things jumping around unnecessary will draw attention to the site. Fortunately, the marquee tag was deprecated by W3C and it began to get phased out as development of standards-based websites started to gain momentum. Unfortunately however, despite a considerable dip, there are clients who still swear by “something blinking” and “something scrolling” on their website and simply refuse to believe that attention can be drawn in more pleasing and less irritating ways. In case you are trapped in such a situation and cannot reason with your boss or client who demands for a cable TV ad-like scroll effect and yet want to write perfectly valid code, jQuery can come to your rescue and offer a working solution. Follow along this simple tutorial:
The HTML :

Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

As you can see above, all you need is a div with class called scroll and another div inside it with a class scrollingtext applied. All the text (and everything else) you want to be scrolling from right to left needs to be written inside the scrollingtext div. Yep, that’s all!
—
The dash of jQuery you need (needless to say, include the jQuery library before):

$(document).ready(function() {

$(‘.scrollingtext’).bind(‘marquee’, function() {
var ob = $(this);
var tw = ob.width();
var ww = ob.parent().width();
ob.css({ right: -tw });
ob.animate({ right: ww }, 20000, ‘linear’, function() {
ob.trigger(‘marquee’);
});
}).trigger(‘marquee’);

});

And the minimum CSS you can’t make this work without :

You can obviously add as much style you need to this basic bit to make things pretty.

.scroll{
width:430px;
height:21px;
overflow:hidden;
position:relative;
}

.scrollingtext{
white-space:nowrap;
position:absolute;
}

You can find a demo of such jQuery-based marquee at the following URL :
http://blog.codez.in/post-files/scroll.html

Latest posts by Smarajit Dasgupta

  • Share/Bookmark