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

  • Phillip Senn's Gravatar
    Phillip Senn
    Sweet!
  • Rob's Gravatar
    Rob
    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!
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @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!
  • Andres's Gravatar
    Andres
    Thanks for this code. This code help me so much.
  • John karmak's Gravatar
    John karmak
    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.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @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.
  • John Karmak's Gravatar
    John Karmak
    You are right!
    I reset the 1.3.2 and now it works perfectly.
    I don' know what happened before.

    Great thanks. Supercool work!
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @John:

    Glad you got it working!
  • Amy's Gravatar
    Amy
    Is there any way to center the text in the marquee?
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @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.
  • Amy's Gravatar
    Amy
    Thank you Dan!!!
  • Dan Price's Gravatar
    Dan Price
    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 G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @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.
  • Gordon's Gravatar
    Gordon
    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?
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Gordan:

    Can you post an example?
  • Gordon's Gravatar
    Gordon
    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!
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Gordan:

    Glad you got your issue resolved!
  • Alex Hughes's Gravatar
    Alex Hughes
    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.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @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.
  • Alex Hughes's Gravatar
    Alex Hughes
    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.
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @Alex:

    Try using the finish() method instead, but you'll need to pass in a reference to the currently scrolling <li> item.
  • Marc's Gravatar
    Marc
    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?
  • Marc's Gravatar
    Marc
    Nevermind. Cut and paste error - missed the definition in the CSS
  • Dan Kwai's Gravatar
    Dan Kwai
    Doesn't work in Jquery 1.4.4
  • Dan G. Switzer, II's Gravatar
    Dan G. Switzer, II
    @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?
  • arash's Gravatar
    arash
    Doesn't work in Jquery 1.7.1

Comments for this entry have been disabled.