Very Simple Very Smooth JavaScript Marquee

Question

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   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt   lt head gt   lt script type  text javascript  gt  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  lt a href  http     javascript about com    gt About Javascript lt   a gt   Well now you  ve found it     var cps -tSpeed  var aw  mq  var fsz   parseInt tHeight  - 4  function startticker   if  document getElementById   var tick     lt div style  position relative width   tWidth   height   tHeight   overflow hidden background-color   tcolour      if  moStop  tick      onmouseover  cps 0  onmouseout  cps -tSpeed    tick     gt  lt div id  mq  style  position absolute right 0px top 0px font-family   fontfamily   font-size   fsz  px white-space nowrap   gt  lt   div gt  lt   div gt    document getElementById  ticker   innerHTML   tick  mq   document getElementById  mq    mq style right  10 parseInt tWidth    px   mq innerHTML   lt span id  tx  gt   content   lt   span gt    aw   document getElementById  tx   offsetWidth  lefttime setInterval  scrollticker    50     function scrollticker   mq style right    parseInt mq style right  gt  -10 - aw     mq style right   parseInt mq style right  cps  px   parseInt tWidth  10  px    window onload startticker   lt  script gt   lt  head gt   lt body gt   lt div id  ticker  gt      this is a simple scrolling text   lt  div gt   lt  body gt   lt  html gt

User · Answer

I ve made very simple function for marquee  See  http   jsfiddle net vivekw pHNpk 2  It pauses on mouseover  amp  resumes on mouseleave  Speed can be varied  Easy to understand   function marquee a  b    var width   b width    var start pos   a width    var end pos   -width   function scroll         if  b position   left  lt   -width            b css  left   start pos           scroll              else           time    parseInt b position   left  10  - end pos                 10000    start pos - end pos       Increase or decrease speed by changing value 10000         b animate                left   -width            time   linear   function                 scroll                         b css        width   width       left   start pos     scroll a  b   b mouseenter function            Remove these lines     b stop                           b clearQueue                 if you don t want                                  b mouseleave function            marquee to pause     scroll a  b                                                   on mouse over      document  ready function         marquee     display        text        Enter name of container element  amp  marquee element

User · Answer

Responsive resist jQuery marquee simple plugin  Tutorial       start plugin      function               fn marque   function options  callback                   check callback              if typeof callback     function                    callback call this                 else                  console log  second argument  callback  is not a function                       throw  callback must be a function     only if callback for some reason is required                    return this    only if callback for some reason is required                              set and overwrite default functions             var defOptions     extend                   speedPixelsInOneSecound  150    speed will behave same for different screen where duration will be different for each size of the screen                 select      message div                    clickSelect         selector that on click will redirect user      optional                  clickUrl           to this url   optional                 options                  Run marque plugin             var windowWidth     window  width                var textWidth   defOptions select outerWidth                var duration    windowWidth   textWidth    1000   defOptions speedPixelsInOneSecound              var startingPosition    windowWidth   textWidth               var curentPosition    windowWidth   textWidth               var speedProportionToLocation   curentPosition   startingPosition              defOptions select css   right   - textWidth                 defOptions select show                var animation                function marquee animation                   curentPosition    windowWidth   defOptions select outerWidth                     speedProportionToLocation   curentPosition   startingPosition                  animation   defOptions select animate   right   windowWidth  px    duration   speedProportionToLocation   linear   function                         defOptions select css   right   - textWidth                                                   var play   setInterval marquee  200                  add onclick behaviour             if defOptions clickSelect        amp  amp  defOptions clickUrl                         defOptions clickSelect click function                        window location href   defOptions clickUrl                                                return this                    jQuery        end plugin    Use this custom  jQuery plugin as bellow     use example   window  marque       speedPixelsInOneSecound  150     spped pixels secound     select      message div       select an object on which you want to apply marquee effects      clickSelect      message       select clicable object  optional      clickUrl   services php     define redirection url  optional

User · Answer

My text marquee for more text  and position absolute enabled  http   jsfiddle net zrW5q 2075    function        fn textWidth   function     var calc   document createElement  span      calc  text   this  text       calc  css     position   absolute     visibility   hidden     height   auto     width   auto      white-space    nowrap         body   append calc   var width     calc  width      calc  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 css  overflow       hidden             that css  text-indent   width    px            return false            if   that length  return dfd reject         if  width  lt   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             h1   marquee       h1   marquee       h1   mouseover function                 this  removeAttr  style       mouseout function            this  marquee           jQuery

User · Answer

The following works   http   jsfiddle net xAGRJ 4   The problem with your original code was you are calling scrollticker   by passing a string to setInterval  where you should just pass the function name and treat it as a variable   lefttime   setInterval scrollticker  50     instead of   lefttime   setInterval  scrollticker     50

User · Answer

I just created a simple jQuery plugin for that  Try it     https   github com aamirafridi jQuery Marquee

User · Answer

I made my own version  based in the code presented above by  Tats innit   The difference is the pause function  Works a little better in that aspect    function       var timeVar  width 0     fn textWidth   function          var calc     lt span style  display none  gt       this  text       lt  span gt           body   append calc       var width      body   find  span last   width           body   find  span last   remove        return width        fn marquee   function  args        var that     this       if  width    0    width   that width           var textWidth   that textWidth    offset   that width    i   0  stop   textWidth   -1  dfd     Deferred            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  pause  false    args        function go             if   that length  return dfd reject            if  width  lt   stop                i                if  i  lt   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 width-2                    if  args pause    false    timeVar   setTimeout function      go      args speed              if  args pause    true    clearTimeout timeVar                  if  args leftToRight            width   textWidth   -1          width            stop   offset        else           width--            that css marqueeCss        timeVar   setTimeout function      go      100        return dfd promise          jQuery     usage   for start      Text1   marquee    pause      Text1   marquee   pause  true     resume      Text1   marquee   pause  false

User · 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   lt h1 gt Hello World  lt  h1 gt   lt h2 gt I ll marquee twice lt  h2 gt   lt h3 gt I go fast  lt  h3 gt   lt h4 gt Left to right lt  h4 gt   lt h5 gt I ll defer that question lt  h5 gt     Jquery code    function                fn textWidth   function                 var calc     lt span style  display none  gt       this  text       lt  span gt                    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

User · Answer

Why write custom jQuery code for Marquee    just use a plugin for jQuery - marquee   and use it like in the example below   First include      lt script type  text javascript  src    cdn jsdelivr net jquery marquee 1 3 1 jquery marquee min js  gt  lt  script gt    and then      proporcional speed counter  for responsive fluid use  var widths       marquee   width   var duration   widths   7       marquee   marquee         speed in milliseconds of the marquee     duration  duration     for responsive fluid use       duration  8000     for fixed container       gap in pixels between the tickers     gap      marquee   width          time in milliseconds before the marquee will start animating     delayBeforeStart  0         left  or  right      direction   left         true or false - should the marquee be duplicated to show an effect of continues flow     duplicated  true       If you can make it simpler and better I dare you all people     Don t make your life more difficult than it should be  More about this plugin and its functionalities at  http   aamirafridi com jquery jquery-marquee-plugin

[javascript] Very Simple, Very Smooth, JavaScript Marquee

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to marquee