<marquee> element lives! - Emulating the behavior of the old marquee element with CoffeeScript/JavaScript

marquee.coffee

# https://gist.github.com/eric1234/548690

class @Marquee

  constructor: (@element, @options={}) ->
    @clean @element
    @stopped = true

    # Set defaults
    @options['duration'] or= 30
    @options['wrapAround'] = true unless 'wrapAround' of @options
    @options['direction'] or= 'forward'

    # If everything fits don't bother with all this mess
    return if this.element.scrollWidth == this.element.clientWidth

    # Create wrapping container to scroll the marquee in.
    # Adapted from Prototype's wrap method.
    @container = document.createElement 'div'
    @container.className = 'marquee-wrapper'
    @element.parentNode.replaceChild @container, @element if @element.parentNode
    @container.appendChild @element

    # Move some of the relevant marquee styles to this wrapper.
    @container.style.width = @element.clientWidth+'px'
    @container.style.height = @element.clientHeight+'px'
    @container.style.overflow = 'hidden'

    # Keep in mind how big it was so we know when to reset
    @originalWidth = @element.scrollWidth

    # Make it look like it is wrapping around by duping content
    if @options.wrapAround
      trimmed = element.innerHTML.trim()
      @element.innerHTML = trimmed + trimmed + trimmed

    # Size restrictions/clipping moved to wrapper, remove from element
    @element.style.width = @element.scrollWidth+'px'
    @element.style.height = @element.scrollHeight+'px'
    @element.style.overflow = 'auto'

    @container.scrollLeft = @originalWidth if @options.wrapAround

  # Will start the marquee moving.
  #
  # If no argument is given it will move until it gets to the end of the
  # content. If wrapAround is enabled it will reset and do another move to the
  # end of the content creating a never-ending scrolling of the content.
  #
  # If a distance is given then it will only move that far then stop.
  #
  # If a distance is given then the onFinish is called when the
  # animation ends. If no distance is given then onFinish is called
  # every time the animation resets.
  move: (distance=null, onFinish=->) ->
    @stopped = false

    to = if distance?
      distance
    else
      @originalWidth

    ending_position = if @options.direction is 'forward'
        @container.scrollLeft + to
      else
        @container.scrollLeft - to

    if @options.wrapAround
      if ending_position > 2 * @originalWidth
        @container.scrollLeft -= @originalWidth
        ending_position -= @originalWidth
      if ending_position < 0
        @container.scrollLeft += @originalWidth
        ending_position += @originalWidth
    start_position = @container.scrollLeft

    callback = if @options.wrapAround && !distance
      =>
        onFinish()
        unless @stopped
          @container.scrollLeft = start_position
          @animation = Marquee.tween @container, @options.duration, ending_position, callback
    else
      =>
        @stopped = true
        onFinish()
    @animation = Marquee.tween @container, @options.duration, ending_position, callback

  # Stops all animation so you can issue new move commands.
  stop: ->
    @stopped = true
    Marquee.stop @animation if @animation

  clean: (node) ->
    to_remove = []
    for c in node.childNodes
      if c.nodeType is 8 || (c.nodeType is 3 && !/S/.test(c.nodeValue))
        to_remove.push c
      else if c.nodeType is 1
        @clean c
    for n in to_remove
      n.parentNode.removeChild n

# To actually do the moving we farm this out to a callback. This way the actual
# movement can be handled by a library like morpheus which is designed as a
# single high-performance loop using constant speed animation and the
# requestAnimationFrame standard.
#
# This should be replaced by a function that actually does the work.
Marquee = @Marquee
Marquee.tween = (element, duration, target_scroll, oncomplete) ->
  # By default implement a stupid "animation" that just move it without
  # any in-between stages.
  element.scrollLeft = target_scroll
  oncomplete()
Marquee.stop = (animation) ->

# Adapted from
# http://stackoverflow.com/questions/498970/#answer-8522376
unless String::trim
  String::trim = -> @replace /^\s+|\s+$/g,''

usage.html

<!DOCTYPE html>
<html>

<head>
  <style>
    #test {
      font-size: 3em;
      width: 10em;
      height: 1.5em;
      overflow: hidden;
      white-space: nowrap;
    }
  </style>
</head>

<div id="test">
  The quick brown fox jumps over the lazy dog
</div>

<script src="marquee.js"></script>
<script src="morpheus.js"></script>
<script>
  Marquee.tween = function(element, duration, end, onComplete) {
    morpheus.tween(duration*1000, function(position) {
      element.scrollLeft = position
    }, onComplete, function(p) {return p}, element.scrollLeft, end)
  }
  marquee = new Marquee(document.getElementById('test'));
  marquee.move();
</script>

</html>

Do you miss the old days of having text move across the screen in a jerky, hard to click manor? Sure IE still support marquee but the other browsers only support it in quirks mode. And how long before they drop it completely?

With the above script you can have all the joy of a marquee just like it was 1998. The implementation of this script was partially inspired by The Silky Smooth Marquee which suggested using scrollLeft to move the content instead of CSS to avoid causing the browser to repaint the content.

The real use case for this is to move a bunch of sponsor logos across the bottom of a non-profit site.

Made the following updates:

• Converted to coffeescript
• Remove dependency on Prototype
• Removed complicated/inaccurate duration param and replaced with frequency and moveBy. Might one day implement something more complicated that will really animate at a constant speed.
• Removed play/pause and auto-pausing on hover and replaced with simple callback to provide more flexibility. The old behavior is easily emulated via the callback.
• Added option to allow wrap-around to be enabled or disabled.
• Added option so that it can scroll either direction.

Updated again. Replaced timeout animation with hook for real animation library to do tweening.

Minor bug fixes and provided default "animation"

Hi, I hope it is ok to ask here, but I was looking for a prototype marquee and this looked great - except I see you updated to coffeescript. Would you still have the old prototype code and be willing to repost it?

Thanks

The old code is still available under a previous revision. But the new code will work with prototype/scriptaculous. All you need to do is provide the Script.aculo.us tween effect in the callback and you can use the latest code.