Marquee jQuery Plug-in Released!

Posted by Dan on May 20, 2009 @ 3:43 PM

My current employer (Giva, Inc) has released another jQuery plug-in today called the Marquee jQuery Plug-in. The jQuery Marquee plug-in converts a list element (<ul /> or <ol />) into an ESPN-style scrolling marquee. Messages are scrolled in from top or bottom (based on the yScroll option) and longer messages will then ticker to the left in order to show the full message.

The Marquee jQuery Plug-in has an example you can look at or you can see several different marquees in different configurations on the Giva Labs - Marquee Example Page.

Categories: jQuery

26 Comments

  • Sweet!
  • Hey Dan,
    After looking for a marquee plugin like this for a few months, I've just stumbled across yours and love it!

    Is there a way to cycle through the list using a "Next" and "Previous" button of some sort?

    I'm looking to replicate the marquee effect on the BBC news website.

    Great work!
  • @Rob:

    There is no next/previous functionality exposed. You could pretty easily expose the showNext() function by adding something like:

    this.next = function (){
     showNext();
    }

    To the code. You could hack the showNext() function to allow you to advance backwards/forwards through the messages.

    If you get your mods working, let me know and I'll look at adding it to the codebase!
  • Thanks for this code. This code help me so much.
  • Hi, very fine work.

    I tried start using it with jquery 1.3.2 but it doesn't work.
    Then i tried with 1.2.6 and it work as from plans.

    It is already perfect, but can tou make it work with 1.3.2?
    As 1.3.2 ha better performance then 1.3.0 and 1.3.0 better than 1.2.6.

    Thanks a lot.
  • @John:

    The plug-in works fine with v1.3.2. The example page is using v1.3.2:
    http://www.givainc.com/labs/marquee_example.htm

    There are several changes in jQuery's selector engine, so perhaps the problem is actual with the selectors you're using. The plug-in definitely does work with v1.3.2 as you can see from the example page.
  • You are right!
    I reset the 1.3.2 and now it works perfectly.
    I don' know what happened before.

    Great thanks. Supercool work!
  • @John:

    Glad you got it working!
  • Is there any way to center the text in the marquee?
  • @Amy:

    If you gave the "ul.marquee li" CSS an explicit width, you could use the "text-align: center" declaration to center the text.

    However, this will only work with short messages that aren't longer than the UL.
  • Thank you Dan!!!
  • Hey Dan,
    Is there a way to show more than one <li> at a time.

    E.g. it shows
    <li>news item 1</li>
    <li>new item 2</li>
    then it scrolls on and shows the next two:
    <li>news item 3</li>
    <li>news item 4</li>

    Many thanks :-)
  • @Dan:

    No, it's designed to show just one item at a time. There are other scrolling plug-ins designed for showing multiple items. This particular plug-in doesn't lend itself to multiple lines because of the varying length of lines and the way the scrolling occurs.
  • I am trying to use this on a page that also uses the "easing" plugin but I get

    Message: Object doesn't support this property or method
    Line: 143
    Char: 192
    Code: 0

    Is there a solution to this?
  • @Gordan:

    Can you post an example?
  • I have just found that there is a more up to date version of "easing" here (1.3) http://gsgd.co.uk/sandbox/jquery/easing/

    I then had to change the "LavaLamp" call to use the new function names.

    All appears to be OK now ... sorry to disturb you!
  • @Gordan:

    Glad you got your issue resolved!
  • Love the freedom this plugin gives, but has anyone had any luck implementing the prev and next controls mentioned by rob?

    As im trying and trying, but failing and failing.
  • @Alex:

    What are the problems you're having? The plug-in definitely was not designed for manual navigation and you'd definitely get overlapping navigation if you next/prev too fast. If you really need manual navigation, I suggest you look into something like the jQuery Cycle plug-in that is designed for manual navigation.
  • Yeah, It's just it's such a nice plug-in to use and perfect for what I am after. I have already fixed the overlapping issue with a CSS fix, as the problem come around during a tab cycle through different marquees.

    Well, looking at the code, I would of thought the showNext(); function would pretty much do the trick when looking to cycle through when you call upon it. Pretty much like you thought above. So I have done so, using the same method used when pause and resume come into play. I defined the function as simply "next". But still having no luck.
  • @Alex:

    Try using the finish() method instead, but you'll need to pass in a reference to the currently scrolling <li> item.
  • Love the marquee. Used it on several sites. First time I have had a problem with it. It just won't scroll. Pretty much a cut and paste from a working site and now nothing! No errors reported in FF. I even added an "alert" to the marquee.js file to make sure it was being called (it was). Suggestions on what to look for?
  • Nevermind. Cut and paste error - missed the definition in the CSS
  • Doesn't work in Jquery 1.4.4
  • @Dan:

    I just tested the example page w/jQuery v1.4.4 and it worked fine for me. Why do you say it's not working in jQuery v1.4.4? Are you sure the problem isn't elsewhere in your code?
  • Doesn't work in Jquery 1.7.1

Add Comment

Leave this field empty