Menu
I'm trying to find a very simple and smooth, lightweight javascript or jquery marquee. I already tried silk marquee or something, but it wouldn't work with the application I was using. So the simpler and shorter, the better - and easier to debug. Does anybody know of a easy to implement javascript replacement for the marquee?
Pastebin
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script type="text/javascript"> var tWidth='300px'; // width (in pixels) var tHeight='25px'; // height (in pixels) var tcolour='#ffffcc'; // background colour: var moStop=true; // pause on mouseover (true or false) var fontfamily = 'arial,sans-serif'; // font for content var tSpeed=3; // scroll speed (1 = slow, 5 = fast) // enter your ticker content here (use \/ and \' in place of / and ' respectively) var content='Are you looking for loads of useful information <a href="http:\/\/javascript.about.com\/">About Javascript<\/a>? Well now you\'ve found it.'; var cps=-tSpeed; var aw, mq; var fsz = parseInt(tHeight) - 4; function startticker(){if (document.getElementById) {var tick = '<div style="position:relative;width:'+tWidth+';height:'+tHeight+';overflow:hidden;background-color:'+tcolour+'"'; if (moStop) tick += ' onmouseover="cps=0" onmouseout="cps=-tSpeed"'; tick +='><div id="mq" style="position:absolute;right:0px;top:0px;font-family:'+fontfamily+';font-size:'+fsz+'px;white-space:nowrap;"><\/div><\/div>'; document.getElementById('ticker').innerHTML = tick; mq = document.getElementById("mq"); mq.style.right=(10+parseInt(tWidth))+"px"; mq.innerHTML='<span id="tx">'+content+'<\/span>'; aw = document.getElementById("tx").offsetWidth; lefttime=setInterval("scrollticker()",50);}} function scrollticker(){mq.style.right = (parseInt(mq.style.right)>(-10 - aw)) ? mq.style.right = parseInt(mq.style.right)+cps+"px": parseInt(tWidth)+10+"px";} window.onload=startticker; </script> </head> <body> <div id="ticker"> this is a simple scrolling text! </div> </body> </html> 
711
jQuery Marquee-like Content Scrolling Plugins: js is an alternative to marquee tag, which is an old and non-standard HTML element, that causes text/image/element to scroll up, down, left or right automatically.
The Marquee Element This element is obsolete and should not be used. Browser support for this element is limited and using it may produce unexpected results.
One of the big reason why marquee is deprecated is because the element is a 'presentation' element. HTML is a markup language (hence the name Hyper Text Markup Language), and is concerned with the structure of the website. Marquee element is not concerned about the structure, but is only used for presentation purposes.
A marquee is used to move text from right to left, left to right, up and down and down and up.
hiya simple demo from recommendations in above comments: http://jsfiddle.net/FWWEn/
with pause functionality on mouseover: http://jsfiddle.net/zrW5q/
hope this helps, have a nice one, cheers!
html
<h1>Hello World!</h1> <h2>I'll marquee twice</h2> <h3>I go fast!</h3> <h4>Left to right</h4> <h5>I'll defer that question</h5> Jquery code
(function($) { $.fn.textWidth = function(){ var calc = '<span style="display:none">' + $(this).text() + '</span>'; $('body').append(calc); var width = $('body').find('span:last').width(); $('body').find('span:last').remove(); return width; }; $.fn.marquee = function(args) { var that = $(this); var textWidth = that.textWidth(), offset = that.width(), width = offset, css = { 'text-indent' : that.css('text-indent'), 'overflow' : that.css('overflow'), 'white-space' : that.css('white-space') }, marqueeCss = { 'text-indent' : width, 'overflow' : 'hidden', 'white-space' : 'nowrap' }, args = $.extend(true, { count: -1, speed: 1e1, leftToRight: false }, args), i = 0, stop = textWidth*-1, dfd = $.Deferred(); function go() { if(!that.length) return dfd.reject(); if(width == stop) { i++; if(i == args.count) { that.css(css); return dfd.resolve(); } if(args.leftToRight) { width = textWidth*-1; } else { width = offset; } } that.css('text-indent', width + 'px'); if(args.leftToRight) { width++; } else { width--; } setTimeout(go, args.speed); }; if(args.leftToRight) { width = textWidth*-1; width++; stop = offset; } else { width--; } that.css(marqueeCss); go(); return dfd.promise(); }; })(jQuery); $('h1').marquee(); $('h2').marquee({ count: 2 }); $('h3').marquee({ speed: 5 }); $('h4').marquee({ leftToRight: true }); $('h5').marquee({ count: 1, speed: 2 }).done(function() { $('h5').css('color', '#f00'); }) If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
