Question

117

Very Simple, Very Smooth, JavaScript Marquee

rated 0 times [ 120] [ 3] / answers: 1 / hits: 199513 / 12 Years ago, fri, may 11, 2012, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

danar

Add To Favorites

Follow

Total Points: 271

Total Questions: 94

Total Answers: 93

Location: Ecuador

Member since Thu, Jun 4, 2020

4 Years ago

danar questions

1 Update parent state based on props and onClick from child in React

Tue, Aug 3, 21, 00:00, 3 Years ago

1 Getting TikTok Followers Usernames

Sat, Mar 20, 21, 00:00, 3 Years ago

1 What does the error Failed to register a ServiceWorker: The document is in an invalid state. mean?

Wed, Jul 22, 20, 00:00, 4 Years ago

1 Vuetify v-file-input with icon only

Wed, Jun 10, 20, 00:00, 4 Years ago

1 Uncaught ReferenceError: initializeApp is not defined

Tue, Jun 2, 20, 00:00, 4 Years ago

View All

answered 12 Years ago tiffany · Accepted Answer

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'); })