246

jQuery Marquee Plugin with CSS3 Support

Share Button
Please check github for details about new updates.

Also the plugin is now hosted on jsDelivr.com(CDN).

Recently I been working on a project where a static text message needs to be animated similar to non-standard HTML marquee tag.

Googling gives me quite few jQuery plugins but they got so many options and complex html layout/structure was needed for the plugin to work. I decided to make a simple jQuery plugin which can scroll the text either left, right, up or down.

Github:


IMPORTANT NOTE:

I am removing details about options & events from this blog post as github has all the details so its hard to maintain both. Here I will list few examples to show you how to use the plugin with different options:

Examples:

Here is the list of some examples. You can open each pen below in new window and play around it. Also you can click HTML, CSS or JS tab to see the relevant code.

Basic example with default options

HTML:

First include the plugin.

Content inside the main wrapper can have html.

CSS:

JS:

Demo:

Click the Edit button shown below to open the demo in new window.

See the Pen LGolj by Aamir Afridi (@aamirafridi) on CodePen.

Starting plugin with options

See the Pen qgutw by Aamir Afridi (@aamirafridi) on CodePen.

Using options as data attributes

See the Pen Hblqv by Aamir Afridi (@aamirafridi) on CodePen.

Mixing data attributes and JS options

Check HTML tab for data attributes options and JS for options provided when applying the plugin. This is useful if you want to start all marquees with default options using JS and then if you want to have different option for certain marquee element using data attributes. Keep in mind that data attributes will take precedence over options provided using JS. Check this example where I define direction using both JS and data attributes.

See the Pen jiwtI by Aamir Afridi (@aamirafridi) on CodePen.

Events

See the Pen shqKg by Aamir Afridi (@aamirafridi) on CodePen.

CSS3 vs jQuery

See the Pen txDLe by Aamir Afridi (@aamirafridi) on CodePen.

Direction

See the Pen ifJqE by Aamir Afridi (@aamirafridi) on CodePen.

Duplicated

See the Pen ywHsk by Aamir Afridi (@aamirafridi) on CodePen.

pauseOnHover

See the Pen oEnvk by Aamir Afridi (@aamirafridi) on CodePen.

resumeOnHover (the other way around)

Question on github: “There is some way to do the opposite of “pauseOnHover”, leave the text stopped until you hover on it, and when you mouseout it comes back to normal? Just like spotify does in their app.”

See the Pen FhugI by Aamir Afridi (@aamirafridi) on CodePen.

Pause & Resume methods

See the Pen cshID by Aamir Afridi (@aamirafridi) on CodePen.

Toggle method

See the Pen rzKuj by Aamir Afridi (@aamirafridi) on CodePen.

Destroy method

See the Pen EimIs by Aamir Afridi (@aamirafridi) on CodePen.

Change marquee with ajax content

Due to no ‘Access-Control-Allow-Origin’ issue, please click here to open pen in new window to see it in action.

Help:

Help me by reporting any bugs in the comments section below or github. Also if you have an idea to improve the plugin please do let me know in comments below.

Share Button
  • Evens

    What a Perfect timming, this was published on Jan 15 and it become really handy for me yesterday since it was a requirement for one of my projects. Many thanks for this great plugin.

    • http://www.aamirafridi.com Aamir Afridi

      I am glad you liked it. If you see any issues, please create an issue on github.
      :)

  • http://www.1stclassmedia.co.uk Mark

    Nice clean plugin, how would you recommend applying multiple entries into the marquee? (Apologies if you have already addressed this)

    • http://www.aamirafridi.com Aamir Afridi

      I assume it should just work. Create a demo on jsfiddle if you think its not :)

  • Roni

    Great plugin.
    However, i am trying but it does not work properly with dynamic texts.
    There are some prediction to support this feature?
    grateful,
    Roni

    • http://www.aamirafridi.com Aamir Afridi

      Sorry what exactly do you mean by dynamic text?

  • Michael

    Hello Aamir, thank you for this plugin.
    If you have a text scrolling from right to left, is it possible to choose at which position (how many pixels from the left) it starts ?
    This would be great to have the beginning of the text appearing at the right of the marquee, instead of starting already at the left.
    Thanks and best regards.

    • http://www.aamirafridi.com Aamir Afridi

      It makes a lot of sense :)
      Can you please create an issue on github and I will add that feature soon I get some time :)
      https://github.com/aamirafridi/jQuery.Marquee/issues/new

      • http://www.gcoban.com/ Gökhan Çoban

        Did you add this feature?

        • http://www.aamirafridi.com/ Aamir Afridi

          Not yet, too busy at work :(

  • Guillermo

    Any chances that you add support for vertical scroll? (up-down / down-up)

  • Alon

    Thanks for this plugin, it’s helped me a lot.

    • http://www.aamirafridi.com Aamir Afridi

      I am glad it helped you Alon :)

  • http://iamjunn.com Emerald Junn

    Can I use this in twitter. How?

    • http://www.aamirafridi.com Aamir Afridi

      Sorry, what do you mean by that?

  • Juan M

    Thanks for this nice plugin, I’m implementing it now in a project I have, but the pauseOnHover options is not working in IE7/8/9, have you noticed it?

    I tested in the demo site for the sake of it, and it doesn’t work either.

    • http://www.aamirafridi.com Aamir Afridi

      Hi,

      Have a look at this https://github.com/tobia/Pause/issues/4

      Try to download the jQuery pause plugin to your local js folder and than include the file. It should work in all browsers including IE*

      If you try to include github raw file directly, in Chrome due to some reasons, it will load the file as text file instead of script so thats why the demo was failing. You can check the demo source that I am now using the local copy of pause plugin and the demo is now working in all browsers.

      • Juan M

        Hi Aamir, you are absolutelly correct!.. After downloading and including the pause plugin locally, it started working as expected in all browsers.

        Thanks again!

        • http://www.aamirafridi.com Aamir Afridi

          I just discovered http://rawgithub.com/ which you can use to include jQuery pause plugin :)

  • Gasp

    Hi,
    nice plugin it is exactly what I am llooking for but all the Pause, Pause on hover and Resume functions on your demo page (http://jquery.aamirafridi.com/jquerymarquee/) are not working in Chrome v27 and on IE9.
    Actually it only works in Firefox.
    I hope you ‘ll correct this
    regards

  • VJ

    It’s a very nice plugin. Just wanted to know can we change the options like direction, speed etc on the go after initialization?

    • http://www.aamirafridi.com Aamir Afridi

      No, you cannot control the speed or direction after you apply the plugin.

  • http://www.ia.uk.com Darren

    Thanks for making this plugin available.

    The jQuery plugins directory (http://plugins.jquery.com/marquee/) is showing the minimum requirement as jQuery 1.6.4. However the use of the ‘on’ function to bind the events means it should be 1.7.

    In case anybody else is puzzling over that one!

    • http://www.aamirafridi.com Aamir Afridi

      Thank you for pointing this out. I will make the correction

  • Anoneemous

    Looks like an awesome marquee scroller. WISH LIST – can you add an option to load external content (every X minutes)?

  • http://www.facebook.com/rehanhussain321 Rehan Hussain

    Nice work.

  • larry

    great job,
    I am looking to use multiple marquees, but not at the same time. I want one to start, then make it hidden, start the second one and so on. Is this possible?

    • http://www.aamirafridi.com Aamir Afridi

      Hide 2nd marquee. You can use the ‘finished’ callback on first marquee to hide it and than show the 2nd marquee and apply marquee plugin on it.

  • Stuart Pinfold

    Hi, Can you give an example of calling the “finished” event in jQuery? Where should this go? Here’s what I have:

    $(function()
    {
    $(‘#scrollerContent’).marquee(
    {
    speed: 11000,
    delayBeforeStart: 0,
    direction: ‘right’,
    }).finished(hello);
    });

    function hello()
    {
    alert(“Complete”);
    }

    …which I thought should alert “Completed” when the ticker stops. Am I wrong?

    • http://www.aamirafridi.com Aamir Afridi

      Try:

      $(‘#scrollerContent’).marquee(
      {
      //options….
      })
      .bind(‘finished’, function(){ alert(‘Hello’) });

  • http://www.fuzzfree.com Antonis FuzzFree

    Hi! Thanks a lot for this great plugin. A feature I see missing: there is no LOOP, marquee stops after all entries are displayed.

    Thank you!

  • http://www.fuzzfree.com Antonis FuzzFree

    Loops works… hmm… seems to be a bug with Firefox… after some minutes it stops. Chrome is ok. Firefox console/edbugger does not display any error.

    • http://www.aamirafridi.com Aamir Afridi

      A jsfiddle demo will be helpful to see the issue :)

  • http://www.emimassage.pl Lukasz

    Hi Aamir. tell me what happend in my website? http://www.emimassage.pl i using Your plugin and download this
    https://github.com/aamirafridi/jQuery.Marquee
    pls tell me what happend? this license is not GPL?

    • http://www.aamirafridi.com Aamir Afridi

      Its working. What are you expecting. If you want marquee to be scroll in the website area, just give it a width and align it to the middle in CSS.

  • http://www.eliotdill.com Eliot

    Hi Aamir,
    Thanks for the great plugin. I’m trying to get the content within the marquee to reload from a web service every so many seconds (setTimeout). It seems when you change the content in the marquee div with .html(“”) or .append(“”) the marquee stops scrolling.

    Any ideas on a proper way to do this?

    Thanks,

    • http://www.aamirafridi.com Aamir Afridi

      Hi Eliot, never thought of that. Actually plugin do calculations based on the width of the text node. If the text length is same than you can try something like this http://jsfiddle.net/aamir/jc7F3/44/

      If you are using duplicated option to true than you have to add new html (in the way I showed you in above example) to both divs the plugin creates.

  • maju

    Hi,
    When duplicated and the text is much shorter than the main div – plugin should duplicate it more times, because now it works not properelly

    • http://www.aamirafridi.com Aamir Afridi

      If your text is much smaller than you don’t need to marquee it :)
      Otherwise it just work fine but doesn’t look good. Check this http://jsfiddle.net/aamir/jc7F3/49/

  • http://www.razztech.net wassem

    hi
    thank your for this plugin , i can’t make it work correctly with ul li liste see here http://methaqmedia.com/portal/

    • http://www.aamirafridi.com Aamir Afridi

      Hi Wassem,

      It does work. Please make sure you learn how to use a plugin properly. Don’t mix Javascript in your HTML.

      You are applying plugin to all LIs which is wrong. Just apply to the parent. I have created the demo based on html you have. Have a look http://jsfiddle.net/aamir/jc7F3/50/

      • http://www.razztech.net wassem

        thank you very much for this fiddle and for your kindness :)

  • Raja

    I think i should be Missing something . The Error i get on the console is Uncaught TypeError: Object [object Object] has no method ‘marquee’ .

    The Script is not working on my local machine . even the index.html from your download bundle remains idle on different browsers(No scrolling text) .

    Below is my Script

    var text= $.noConflict();
    text(function () {
    text('.marquee').marquee({
    speed: 5000,
    gap: 50,
    delayBeforeStart: 0,
    direction: 'right',
    duplicated: true,
    pauseOnHover: true
    });
    });

    My Sample Text

    Note: Other JQuery Lib installed works perfect .

  • Davs

    Hi Aamir!
    Thank you for the plugin, I am using it in a ajax updated div (the text chage every 20 seconds), and not working, only work in not-realtime updated divs. Can you bring me a little help. Thanks in advance

    • http://www.aamirafridi.com Aamir Afridi

      I am working on the ‘update’ method so when you change the text, you will need to use this method to re-apply the plugin.

      • Davs

        Thanks for the quick reply! I’ll wait for that update. Greetings from Colombia!

        • aamirafridi

          Check the demos now in the above post.

          • Davs

            I will place a link back to this page in my web, thank you very much. Greetings from Colombia

  • Ali

    Hello Aamir,
    I show alert after finishing scroll by using following. It works only in mozilla firefox and internet explorer.

    Qmax

    function myevent(){
    //location.reload();
    alert(“Hello Ali”);
    }

    Ali

    I need to do it in every browser including midori.
    I tried to do it by using your plugin, I’m not getting result, Please help me. Thanks!

  • Gregor Bösenberg

    Is there a possibility to check if a text is longer than the container? If so, it should scroll, if not then he should only be displayed.

    • http://www.aamirafridi.com Aamir Afridi

      Yes it is possible. It is a good idea. This feature is not included yet so can please create a feature request on github repo?

      • Gregor Bösenberg

        I have no github account :(

  • reza

    hello
    i use this code in my site
    and in marquee tag i have a string
    but i have a ajax code that update content of one of my divs in marquee tag
    now, i said to your code that when marquee finished call ajax function and update that div but it not work correctly
    plz help me

    • http://www.aamirafridi.com Aamir Afridi

      Hi, many people has requested this feature so I am going to work on it soon and will let you know.

  • Eric

    Hi there.

    I tried your code, but unfortunately I did not have success. The marquee always stops after 5 seconds although I configure all in the right way. I also use some other plugins. Are there any incompatibilities you know so far?
    I have tried all with jsfiddle. There my code works.

    Regards,
    Eric

    • Eric

      edit:
      I use jquery mobile 1.3.2 and jquery 1.10.2

      • http://www.aamirafridi.com Aamir Afridi

        If you give me the link, I might help you :)

  • http://siptv.eu needz

    Aamir,

    Thanks for your work! Especially the new CSS3 support..

    But there’s one thing I noticed about duration: earlier, it would correctly calculate the length of text and make it travel faster or slower based on the length of text, so longer text flies faster, shorter text is slower.

    Now the speed of marquee is the same no matter the length, so you have to tweak the speed every time now. Am I missing something or is there something to tweak? Already tried all the options, even turning the CSS3 off.. whenever I roll back to earlier version of plugin, everything works just fine.

    Thanks!

    • http://siptv.eu needz

      Just to comment a little more.. it seems that the duration actually changes in inspector, but the difference is not as obvious as it was before.. hmm.

    • http://siptv.eu needz

      Sorry, the question is closed, just lowered the duration twice and looks good for now. Best marquee plug-in ever! :)

      • http://www.aamirafridi.com Aamir Afridi

        :)

  • Help

    Hi Aamir,

    first of all: great work!

    I implemented the plugin within my site and it seems to work fine. After I reopend my site it stops working. Everytime I clean up my cache it works again fine. Do you know that problem?

    Regards

    • Help

      I guess the reason is due to double entry of the key values within the header.

    • Help

      Last Comment: The margin left value in keyframe is 0.

      • http://www.aamirafridi.com Aamir Afridi

        This information is not enough for me to help you.
        Please create a demo or paste the link where I can see the problem.

  • Josh

    Hey Aamir,

    I’m having an issue with the container holding the marquee and i’m not sure what’s causing it. It’s becoming very frustrating.

    Essentially, the container is stretching way too far, causing the animation to flash across.

    I don’t want to state a width because I want the container to stretch to whatever its siblings width is.

    I’ve created a fiddle to display what’s happening. In the fiddle, i’ve included the exact html included on my own webpage.

    I assume there’s an issue with the css of one of the other elements, but what?

    http://jsfiddle.net/uz9pG/

    Thanks

    • http://www.aamirafridi.com Aamir Afridi

      Check this http://jsfiddle.net/aamir/uz9pG/3/
      You have added the html from inspector I guess thats why it got the markup which jQuery.marquee plugin adds to your default marquee element. Use the above example.

      • Josh

        I got it working.

        Thank you for your hard work and the best marquee plugin on the net.

      • Josh

        If I were to suggest one improvement, it would be with the “duplicated” mode. Currently, if enabled, the content will automatically be started from the center. Perhaps add another option to set where the content will start.

        Also, when duplicated is enabled, the content will appear out of no where when the text isn’t long enough. Can this be fixed from the plugin’s side? I would like this modification.

        • http://www.aamirafridi.com Aamir Afridi

          ‘duplicated’ option is now fixed. Check the examples in this blog post.

  • http://www.mfrair.com Hillcreative

    Love the marquee… I have an RSS feed inputing text to scroll. Problem is that when the text length changes so does the speed of the scroll. Any way to calculate the speed so it is a constant no matter how much text is in the scroll?

    • http://www.mfrair.com Hillcreative

      Came up with a quick answer used jQuery to detect the size of the RSS feed (the 200 is just a multiplier to get the duration close)

      var rssLen = $(‘.marquee’).text().length*200;

      • http://www.aamirafridi.com Aamir Afridi

        So it solved your problem?

        • http://www.mfrair.com Hillcreative

          Unfortunately no, as the function does not seem to be linear. The text moves faster and faster the more is added to the RSS. I would suggest a speed function in your marquee that is a constant regardless to the size of the content. This would be useful for any dynamic content that changes. Thanks! Mitch Hill

          • http://www.aamirafridi.com Aamir Afridi

            I have added ‘destroy’ method which can be used in your situation. Check the last example in this blog.

  • Martha Yip

    Thanks much for your nice jQuery Marquee Plugin. Is it plugin free to use in commerical projects?

    • http://www.aamirafridi.com Aamir Afridi

      Absolutely :)

  • Pingback: Download ThemeForest - Warta - News/Magazine Site Template | Seo Tools Download

  • Pingback: Warta – News, magazine site template | PAD

  • Josh

    Hey Aamir,

    The plugin is very scratchy when using it with Safari. It works, it just doesn’t slide as fluently as with the other browsers.

    • http://www.aamirafridi.com Aamir Afridi

      Hi Josh,

      You are absolutely right. I have just downloaded Safari and the animations are not smooth.

      I think its the browser itself which causes the problem. For example check this example http://www.impressivewebs.com/demo-files/css3-animated-scene/ both in safari and chrome and you will see the difference.

      If you google, you will see people suggesting
      /* force hardware acceleration */
      -webkit-transform: translateZ(0);

      You can try google to find some answer (let me know if you find anything that can improve the animations smoothness)
      Try google for ‘keyframe animations in safari not smooth’

  • Pingback: Warta - News/Magazine Site Template (Corporate) - Themeforest

  • Ritesh

    hii Amir, I think there is problem with jquery , in line something like ,

    y.clone().appendTo(r) . It Should be like y.clone(true).appendTo(r)

    • http://www.aamirafridi.com/ Aamir Afridi

      Hi Ritesh,

      I am sure its .clone() only because I have no events attached to the element so I don’t need .clone(true).

      Since I create this element inside the plugin, so I know for sure there are no events attached to $el element.

      • Ritesh

        HI Amir, You are true but when it is used along with colorbox, it creates problem. I have images under marquee which open in pop using colorbox.

        If i am using duplicated true, then only i need to make clone(true). Otherwise it work good without clone(true). So i find main problem is duplicated: true.

        If i make it false i dont need to make clone(true) to get pop up working.

        • http://www.aamirafridi.com/ Aamir Afridi

          You are absolutely right :)
          Bug is now fixed and pushed to github
          Thanks.

  • Danny_Wobble

    Hi, I’m having a problem with the marquee in IE8 and IE11 (unable to test in other versions of IE. For some reason the text is flying past in about 1 second and I can’t figure out why. Can anyone help please? Link to site is here: http://generation-media.co.uk/dev/

    • http://www.aamirafridi.com/ Aamir Afridi

      Hi Danny,

      I had a look and I see the problem you are having.

      I just tested it in IE8 and the example is working as you can see and test http://codepen.io/aamirafridi/pen/LGolj in IE8.

      The only problem I can see is that you are using overflow:hidden on .rss-feed-con not .rss-feed. Just follow exactly shown in examples above (in this blog post or github page). Make sure you attach CSS to the same element on which you are applying the marquee plugin.

      If this doesn’t work than just copy paste exact html, css and js from one of the examples above on your page and than do your changes one by one until you see the same problem.
      For me all the examples show above does work in IE8.

  • Jim Zook

    Hey Aamir,
    What are the options for updating text?
    I changed some text directly in the html code via my ftp program and it appears to have retarded the action. I have 7 text sections scrolling and it no longer scrolls past 3 text sections on iPhone or Chrome.
    That is exactly how the html tag marquee performed.
    Looks like I may have broken the script action somehow.
    Thx Aamir,
    Jim

    • http://www.aamirafridi.com/ Aamir Afridi

      Hi Jim,

      If you want to update the text, use destroy method with the combination of ‘finished’ event. Please check this demo http://codepen.io/aamirafridi/pen/ayBmF

  • Miha

    Hey,
    Yesterday I spent about 5-6 hours searching for simple solution to scroll partner images in div and I can assure you, there is no plugin that is as simple as this one and has only 1 file to include. Thank you, very nice work!
    Although I’m having some troubles with start may-b someone already found solution; I have duration set to 15000, the scroll div is 1040px wide and it takes about 10 seconds to start scrolling. Any idea why ? delayBeforeStart is set to 0 and duplicated is true. This is happening in all browsers, anyone had same problem ?

    • http://www.aamirafridi.com/ Aamir Afridi

      Please use this example http://jsfiddle.net/aamir/jc7F3/105/ and produce the issue you have. I cannot suggest anything unless I see the problem you are facing :)

      • Miha

        Here’s it is-> http://jsfiddle.net/jc7F3/151/ , but, try running this in FF or chrome, in jsfiddle its running normal as it should :)

        • http://www.aamirafridi.com/ Aamir Afridi

          If you cannot produce the problem on jsfiddle, you can give me the URL where you have the issue. You can email me the link if you want at aamirafridi@gmail.com

    • Waqas Sarfraz

      Hi,

      I am facing same problem :( Have you solve this issue ? please help me.

      Thanks in advance.

  • Guest

    Hey,

    Great work. I’ve been having problems with the length of the marquee text. If it is much shorter than the marquee width and I have duplicate set to true, it duplicates it and scrolls once then sort of “snaps” to the left of the marquee, to what I assume is the new width it has calculated. To get around this, in my php code where I assemble the text for the marquee I simply checked the length of the text and duplicated it myself until it is longer than the marquee width. This seems to fix the problem.

    So, for example.

    while(strlen($marqueetxt) < 916){
    $marqueetxt.=$marqueetxt;
    }

    //where 916 is the width of the marquee

    Maybe you can build this in using javascript so that this duplication problem with short text can be fixed. :)

  • jeq214

    Thank you so much for helping me fix the marquee. The images scroll across flawlessly. Great job!

    • http://www.aamirafridi.com/ Aamir Afridi

      Thanks for the bug you pointed out in your email you sent me :)

  • alee

    hi,请问下可以动态改变滚动方向吗,谢谢

    • http://www.aamirafridi.com/ Aamir Afridi

      检查此链接https://github.com/aamirafridi/jQuery.Marquee/issues/20

      • alee

        so good,thk.

      • alee

        非常感谢,欢迎来中国玩,我请客。

  • Alexander V. O.

    Hi, thanks for a great plugin. Very easy to use. I was wondering if it was possible to start the animation with the text being IN view, as opposed to out of view.

    As it is by default the text is off screen and is then scrolled in to view, and then out again.

    But what I would like is for the text to start being in view and then scroll out of view (and then entering again, and so on).

    Thank you in advance!

    • http://www.aamirafridi.com/ Aamir Afridi

      Hi,
      At the moment the answer is no. I tried to follow how marquee tag works.

      I will keep this in mind to make an option for this in future versions.
      Thanks.

      • Alexander V. O.

        Okay, thanks for the reply though!

  • sariel

    this plugin breaks when you use hard-coded print media css. Anyone have any luck finding a fix for this?

    • sariel

      Nevermind. I just put the @media print{} rule in my root css and it solved my issue.

    • http://www.aamirafridi.com/ Aamir Afridi

      Can you please explain this a bit more?

  • Muhammed Saajid

    i tried to add items into the marquee dynamically but the scrolling is not continuous so please give me the code
    my code is

    Xplode The Official VX7

    function myFunction()
    {
    var c = prompt(“Enter Something As Contents Of The New Event To Be Created”, c);
    document.getElementById(“demo”).value=c;
    }

    Pause/Resume







    • http://www.aamirafridi.com/ Aamir Afridi

      Please goto jsfiddle.net and create a fiddle there with all your code :)

      • Muhammed Saajid

        i dont know what i need to do iam a HTML starter

        • http://www.aamirafridi.com/ Aamir Afridi

          Your code is not helping. I have no idea what are you trying to do.

          • Muhammed Saajid

            i am trying to do add text / images while the code is running i implemented it but it breaks after new element and start over again from first so it is not continuous.

          • http://www.aamirafridi.com/ Aamir Afridi

            Sorry I cannot help you with this much information.
            If you trying to apply marquee plugin and afterwards add content to marquee than this plugin will not work properly. Before adding content you have to use destroy method and re-apply plugin. Check the examples show above.
            You can create a simple demo on jsfiddle to explain your problem or upload your demo somewhere and give me the link.

          • Muhammed Saajid

            ok i will give it tomorrow the file is now not with me

          • Muhammed Saajid

            thanks, i got the solution thank you for your valuable information this plugin is very helpful for me

  • Muhammed Saajid

    can you give me the edited code as i told like?

  • gh’r

    might want to stop using rawgithub for you data and just use a static text file on your server, your getting alot of traffic, dont weird things to happen: http://rawgithub.com/stats.html

  • Bill

    Is it possible to add images from a mysql database?

    • http://www.aamirafridi.com/ Aamir Afridi

      Just load the images from database to your html and than apply the marquee plugin.

  • challengeYasuni

    hello
    i’m loading a different random text each time the page loads with the following:

    var textarray = [
    "text 1",
    "text 2",
    "text 3",
    "text 4"
    ];
    function RndText() {
    var rannum= Math.floor(Math.random()*textarray.length);
    document.getElementById(‘ShowText’).innerHTML=textarray[rannum];
    }
    onload = function() { RndText();
    }

    __________________________
    is there anyway i can trigger the next random text to load each time one has completed scrolling past….?

    Many thanks
    and many thanks for this plugin !

    • http://www.aamirafridi.com/ Aamir Afridi

      You can do that using the plugin destroy method but I will not recommend that as its expensive on to destroy and re-apply plugin on each scroll complete.

      Here is the demo: http://codepen.io/aamirafridi/pen/ayBmF

    • challengeYasuni

      many thanks Aamir !
      very kind.
      i’m not certain what the consequences of repeatedly re-applying the plug-in will be…but maybe i’ll find out the hard way!
      thank you for all again.

  • F-GTRS

    Hello Aamir and thx a lot for your plugin.

    I hope you’ll help me find an answer to this little problem I can’t fix cause I’m too noob for this..

    I’d simply like the plugin to be able to restart when clicking a button. I mean after clicking, I’d like the whole text to get back to its start.

    Hope you’ll find a solution.

    Thx again.

    • http://www.aamirafridi.com/ Aamir Afridi

      Please look for the destroy method above. So on your button click event, use destroy method and than apply the plugin again.
      Let me know if that solves your problem.

      • F-GTRS

        Wow you’re a king, it works !
        Thank you !!

      • F-GTRS

        Ups, I should have waited before answering so quickly.

        Pause on hover now works half the time : first time I click, it doesn’t work, second time it works, third time it doesn’t work, and so on..

        Do you understand why ?

        Here’s a link where you can see it (bottom of the page, reload button on the left side) : http://www.pronostics-formule1.fr/V5FAQ/

        Thx in advance Aamir. For me it’s time to go to bed. Cheers.

        • http://www.aamirafridi.com/ Aamir Afridi

          Please get the latest version from github. I fixed this bug recently :)

          • F-GTRS

            Actually I had latest minified version, and it did not work.

            So I took the uncompressed one, pulled it into YUI compressor and uploaded it.

            And now it works. :)

            Thank you VERY much for your work and assistance. That’s great. Cheers.

          • http://www.aamirafridi.com/ Aamir Afridi

            You are absolutely right. Thanks for pointing this out. I forgot to add the fix in minified version. Done https://github.com/aamirafridi/jQuery.Marquee/commit/f20d70c169e39b996fd7b56fc1afa2e8033a5bf7 :)

  • Scott Grodberg

    Hey Aamir, good job on the plugin. Nice config. I like it

    • http://www.aamirafridi.com/ Aamir Afridi

      :) thanks

  • https://www.bitcoin.co.id/ ngkong

    Thanks for your great plugin. Do you have any idea how to change marquee text without need to destroy the marquee. I use duplicate method and try to make marquee doesn’t reset. Thanks

    • http://www.aamirafridi.com/ Aamir Afridi

      You cannot.

  • David

    Hi Aamir,

    I really like the simplicity and lightweightness of your plugin. I used it to display an image slide show on an artist’s website, see http://www.birbee.nl/.
    Now a small problem arises there. If you load the page for the first time, the marquee runs for the specified duration (10,000ms in this case) and starts over again. Then if you reload the same page, the marquee runs as expected, namely the complete DIV.

    Any idea how to solve this? Help would be much appreciated!

    Best and happy Eastern,
    David

    • http://www.aamirafridi.com/ Aamir Afridi

      Sorry for replying late as I was on holidays.

      Your main div ‘slideshow’ is positioned absolute. Create another div inside slideshow div and than follow my blog to apply css and js.

  • LouisB

    Hi Aamir,
    Would you consider making a option where you could preload the next text, as when the option duplicated is on but with a different text. I know that for now we can use the “finished” event in association with the method “destroy” but there’s a long gap before the text “finishes” plus if we use ajax to generate the text, there’s some time before the request complete.
    Would be awesome :D
    Anyway thanks for this awesome plugin :)

    • LouisB

      For exemple add an event “started”, wich would be pretty much the same as finished but triggered at the beggining of the scrolling and would permit to call a method “next” in wich you could choose the next text and duration (for when the text hasn’t the same length as the first element). I don’t know if it’s even possible but if you can do it easily, it would be appreciated

  • MacGoose

    Using Ajax to change the text and trying to have multiple marquees, I have an issue when doing destroy. Is it possible to have multiple marquees using Ajax?

    • http://www.aamirafridi.com/ Aamir Afridi

      Sorry for replying late as I was on holidays.

      Can you show your example/code? If you use same css class for all marquees and than destroy them using that css class, all of them will be destroyed.

  • Alexander V. O.

    Hi, once again, really great plugin. I was wondering though, is there any way, any extra plugins or something, you can do to make the scrolling more smooth? Sometimes the text seems to be vibrating a little bit?
    Any help is greatly appreciated. Best, A.

    • http://www.aamirafridi.com/ Aamir Afridi

      Sorry for replying late as I was on holidays.

      The plugin supports both CSS3 and jQuery as fallback. CSS3 is much smoother than jQuery animate. I cannot find a more smoother way to animate other than css3.

  • Aaron Pope

    There is a bug in the current version of chrome. If you have the marquee set to width: 100% you will have artifacts trailing the marquee. To fix this bug you may set the following CSS

    .js-marquee {
    padding-right:1px;
    }

    so the div overwrites the trailing artifacts left by the jQuery Animate or CSS3 transition.

    solution found from

    http://stackoverflow.com/questions/9674267/fix-blue-line-on-google-chrome?rq=1

    • http://www.aamirafridi.com/ Aamir Afridi

      Good catch :)

    • Paul Hauner

      Awesome, I was having this problem too. This fixed it.
      Artefacts looked like semicolons ;;;;;;;;;;;;;;;;;;;;

  • Neil

    Hi ,

    I have implemented your code in the below way. Could you please let me know where I have made a mistake please.

    $(function () {
    $(‘.marquee’).marquee({
    duration: 5000
    });
    });

    fxgfdgfdgfdadasdeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeghhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhasdsahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    asdsahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhasdsahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    asdsahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhadasdasdsahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    asdsahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    asdsahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    asdsahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    asdsahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh

    • makrem

      $(function () {
      $(‘#marquee’).marquee({
      duration: 5000
      });
      });
      put # not . in the jquery selector :p

      • Neil

        I tried this I still get the following errors:

        1)

        ReferenceError: jQuery is not defined

        })(jQuery);jquery.marquee.js (line 403)TypeError:

        2)

        $(…).marquee is not a function

        duration: 5000

        • neil

          Okay Thanks….I got that working…

          Now new issue, I am unable to use onhover pause functionality in IE8.

          Could you please suggest something for that?

          • http://www.aamirafridi.com/ Aamir Afridi

            For IE8 and other browsers which does not support CSS3 animations, you need ‘pause’ plugin. Please read the docs for pauseOnHover option https://github.com/aamirafridi/jQuery.Marquee

  • molly

    Hello

    Using setInterval Marquee. I have changed the number to 7000 which has increased the length of the scroll, but I want the speed of scrolling increased!

    var $mq = $(‘.marquee, .marquee2′).marquee();

    setInterval(function () {

    $(‘.marquee2′).marquee(‘toggle’);

    }, 7000);

    Any ideas?

    • http://www.aamirafridi.com/ Aamir Afridi

      Check the docs for ‘duration’ option.

      In the above blog post, look for ‘Starting plugin with options’ section.

  • neil

    Now new issue, I am unable to use onhover pause functionality in IE8.(IE8 doesnt support CSS3 i think)

    Could you please suggest something for that?

    • http://www.aamirafridi.com/ Aamir Afridi

      I replied your previous comment below.

  • Pingback: Creating my first WordPress widget | PablosBrain

  • babyewok

    Hi, I want the marquee content to be visible and left aligned in the marquee at the start and then to start scrolling left rather than having an empty box with the text entering from the right and scrolling left. How do I do this?

    • http://www.aamirafridi.com/ Aamir Afridi

      At the moment this option is not available. Please goto github project and create an issue as feature request there. https://github.com/aamirafridi/jQuery.Marquee/issues/new

      • horace

        isn’t this a bit overcomplicated?

        using this line after initialization seems to work flawlessly for me:

        $(“.js-marquee-wrapper”).css(“margin-left”, “15px”);

        • http://www.aamirafridi.com/ Aamir Afridi

          Can you please update the fiddle provided above with your example so I can have a look.

          • horace
          • horace

            but now i noticed that it only should be used with the duplicated option.

          • fccotech

            Safari sometimes fails to position the wrapper, this wil fix it:

            $(‘.marquee’).bind(‘beforeStarting’, function(){
            $(“.js-marquee-wrapper”).css(“margin-left”, “0px”);
            }).marquee({
            delayBeforeStart: 0,
            direction: ‘left’,
            duplicated: true
            });

  • Guest

    Hi, wow! nice plugin! thanks a lot!

    • http://www.aamirafridi.com/ Aamir Afridi

      Thanks :)

  • Payam

    Thank you bro :)

    • http://www.aamirafridi.com/ Aamir Afridi

      You are welcome :)

  • Edward

    Hey mate, I’m using your code with images. Basically there are eleven individual objects that marquee repeatedly across the screen. Because I want each image travelling at their own individual speed, I have assigned them with their own data duration i.e. .

    Now the problem I’ve having, is that I want a button on my site that increases (and a button that decreases) the image speeds i.e. if I click the increase speed button, all data-duration divs go up by 1000. My first attempt at the code was this:
    $(‘.marquee’).each(function(index) {
    var previous = $(this).data(‘duration’);
    $(this).data(‘duration’, previous + 100000);
    console.log(index, $(this), previous, $(this).data(‘duration’));
    });

    …and although it said that the data-duration was changing in the console, something else was overriding and looping it back to its initial value.

    Any help would be greatly appreciated!

    • http://www.aamirafridi.com/ Aamir Afridi

      Also you need to destroy the plugin, change the speed as you do and than apply plugin.
      Read blog post and github for details and example about destroy method.
      Regards,
      Aamir

    • http://www.aamirafridi.com/ Aamir Afridi

      Hi

      There is a note on github pages about using this plugin with images.

      Please try that.

      Regards,
      Aamir

  • Raghunath

    Hi Aamir,

    I am using your code it works fine. but i am facing problem while refreshing marquee content after every loop (i am doing as describe about destroying the marquee and restarting it). Till the browser is in focus it is working fine when it is out of focus (i.e when i minimize and then maximize for a time then marquee is stop). It is start again if i refresh my page manually.
    Coming to Mozilla after like 5 to 6 loops it is stopped…

    Any help would be greatly appreciated!

    • http://www.aamirafridi.com/ Aamir Afridi

      I will have a look when I have time. Sorry very busy at the moment.

  • Muhammed Saajid

    now i need to adjust the starting position of the marquee i need to edit it to center which line of the code i need to edit to achieve this

    • http://www.aamirafridi.com/ Aamir Afridi

      At the moment there is no option to start marquee from center sorry..

      • Muhammed Saajid

        Thank you for your replay

  • http://asatin.blog.ir Ramin Firooz

    Hi

    this plugin is very useful.

    I saw a plugin that supports for multiple message, is there any same options in this plugin too?

    http://www.givainc.com/labs/marquee_example.htm

    Thank you

    • http://www.aamirafridi.com/ Aamir Afridi

      Sorry, not yet. But you can add multiple messages as marquee content.

  • Pingback: jQuery Marquee with CSS3 Support | Html Use

  • Latotuga

    I implemented the script and I´m very happy having it. But finally testing my website for all the main browsers, it seems not to be working in Safari. I tried Safari 4, 5, and 5.1. Any idea how to solve this?
    Thanks

    • http://www.aamirafridi.com/ Aamir Afridi

      Hi,
      I just tested it on Safari 5.1.7 windows and its seems to working fine.

  • Latotuga

    Weird. Then I should rely that it will be working fine. Just in case it doesn´t work, I added a toggle function button, so the text will appear entirely.
    Thanks for your answer.

    • http://www.aamirafridi.com/ Aamir Afridi

      :)

  • kraiwin

    Hi thank you for your great plugin.

    I have question? If I set width of marquee div to xx% and I have resize browser width the start point of marquee is remember first time of open webpage.

    How to fix it?

    • http://www.aamirafridi.com/ Aamir Afridi

      If you are looking for responsive marquee, than I think its not going to work. You can catch window.resize event and than destroy the marquee (check example above) and reapply the plugin.

      • kraiwin

        wow! it’s work Admir thank you for your suggestion.

  • M&M

    hi Aamir,

    Thanks a lot for the wonderful marquee plugin. I use a webkit based browser (QT 4.8.2) and was wondering are there any ways to smooth the animation as it occassionally appears to be jerky. What values can I substitute for the below 2 attributes? Thanks a ton

    css3easing: ‘linear’,
    easing: ‘linear’,

    M&M

    • http://www.aamirafridi.com/ Aamir Afridi

      From where can I download it so I can test it. Check http://daneden.github.io/animate.css/ on the same browser and see if the animation is still jerky.

      • M&M

        hi Aamir,

        The link that you gave me works quite well on the same browser. I use this tool called Lianja App Builder (ver 1.1.6 – free trial version is available). And it comes with an embedded webkit based browser. To replicate, this is what needs to be done:

        1. Download install trial version of Lianja App Builder for Windows (1.1.6). Size is about 160 mb.

        2. Create a default app, then on the default page place a “canvas” section. Then on the canvas section place an “advanced webview control” from menu Advanced -> Webview

        3. Double click the header of the webview and it will open the properties. One of the attributes is called url. If you put in the url there, it will load that page.

        Thanks once again,
        M&M

        • http://www.aamirafridi.com/ Aamir Afridi

          Hi,

          I am sorry thats a lot of work to do. I cannot spend this much time to test. Try what I suggested above to see if its the browser or my plugin which makes the animation slower.

          • M&M

            hi Aamir,

            Yup, if you are familiar with the App Builder it is only a 5 min job but otherwise it may set you close to 15-20 mins :) Anyways thanks….the animate.css does work properly. I’ll try to figure out.

            Cheers,
            M&M

          • http://www.aamirafridi.com/ Aamir Afridi

            :)

  • M&M

    Hi Aamir,

    A small question: Is there a way that I can achieve the following

    Can I set the marquee to scroll only if the length of the text exceeds the viewport width? I know how to calculate the length of the text and figure out if it exceeds the viewport width, but what I need is the ability to first display the marquee but without autostart. Is this possible?

    Thanks & Regards,
    M&M

    • M&M

      Hi Aamir,

      I figured a way out. Just after applying the marquee plugin I check the width of the text. If it exceeds my page width, then I immediately call the “destroy” method. The scrolling stops but I can still see the text :)

      Btw how do I disable the easing? It seems like that the scrolling working fine for the first few moments….as the text advances (left to right) closer towards the centre of the screen, then the stop-go-stop-go effect becomes obvious. Any suggestions?

      Thanks,
      M&M

      • http://www.aamirafridi.com/ Aamir Afridi

        Look for duplicated option

  • M&M

    hi,

    How do I turn these 2 options off?
    css3easing:
    easing:

    The default values for the above 2 are ‘linear’. Can I know what are the other values that can be used? Or is there a list I can find somewhere?

    Thanks,
    M&M

    • http://www.aamirafridi.com/ Aamir Afridi
      • M&M

        hi,

        Thanks Aamir but I was wondering how do I turn off the easing? The stop n go kinda behaviour is more obvious in Safari, especially if you increase the font size to 48/72.

        Cheers,
        M&M

        • http://www.aamirafridi.com/ Aamir Afridi

          ‘linear’ is the default. Which means no easing.

  • Mark

    I encountered a very strange bug. My code:
    $(document).ready(function() { for(var i =0; i<2; i++) { $('#ticker1').find("ul").clone().appendTo($('ticker1')); } $('ticker1').cycle({ fx: 'scrollVert', continuous: 1, speed: $('ticker1').find("ul:eq(0) li").size() * 3000, delay: 0, easing: 'linear', rev:1 }); });
    However, in IE9, if the string between tab contain the word “on”, it will wrap the text. What could be the reason?

    • http://www.aamirafridi.com/ Aamir Afridi

      I can answer questions regarding my own plugin :)
      You are using ticker and cycle plugins.

  • PS

    I have a question regarding your plugin. If I want the text to only appear once, how would I go about that? I tried using ‘duplicate: false’ but it doesn’t seem to work? Also, is it possible to detect when the text has reached the bottom of the div?

    • http://www.aamirafridi.com/ Aamir Afridi

      1. So you want to let the text scroll only once or anything else? sorry not getting your point.
      2. Look for the finished event on github docs

      • PS

        It’s ok. I think I’ve figured it out.
        I just bind the finish event and destroy it

  • sonde

    can we apply this to weebly? please send me full instruction how to use this in weebly sonde_25@hotmail.com thanks and god bless

    • http://www.aamirafridi.com/ Aamir Afridi

      I am sure there will be a way but I never used weebly so cannot suggest anything. If you can add custom content using a CMS than you include HTML, CSS and the scripts where you want the marquee to appear.

  • Dathatreya

    Hi Aamir, I’ve used this plugin to implement right to left scrolling of content, the problem is that the content does not start right from the starting , it starts from the end of the div and floats from right to left.
    Here’s the code :

    Script :

    $(‘.marquee’).marquee(

    {

    //speed in milliseconds of the marquee

    duration: 4000,

    //gap in pixels between the tickers

    gap: 0,

    //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,

    pauseOnHover: true,

    }

    );

  • John

    Hi, i have little trouble with your plugin. It spamms my style elements.
    Just check this one out: http://prntscr.com/4g073a.
    I don’t mind there is some mess in code, but after likely 15minutes the browser actually crashes. Which is quite annoying for me and my visitors. Did you already have such problems? Or do you have a guess why this list occures? After every repeat actually a line is added. Thank you :)

    • http://www.aamirafridi.com/ Aamir Afridi

      Can you please give me a link to the demo so I can see whats wrong?

      • John

        Hi,

        the error seems to occur because i destroy the marquee, and show a text, afterwards I recreate the marquee.
        I created a fiddle to provide a concrete demo for you. :)
        http://jsfiddle.net/yprgs8ar/

        Regards John

        • http://www.aamirafridi.com/ Aamir Afridi

          So you found the solution of the your problem? Can you please explain what exactly you are trying to achieve?

          • John

            I want to first display the text, then after 6 seconds i want to hide the text and start a marquee. As marquee finishes the first “slide” i want to stop + hide the marquee and display the text again for 6 seconds. :)

  • عبدالعزيز هطيف

    الله يفيد بعاذا العلم الناس كلها

    • http://www.aamirafridi.com/ Aamir Afridi

      Sorry can you ask question in English? :)

  • http://www.viptavankaplama.com/ Vip Tavan Kaplama

    very thanks, i use viptavankaplama.com
    good look :)

  • Amol

    The marquee is working fine in Chrome but not working in IE. please help me client is sitting on my head.

    • http://www.aamirafridi.com/ Aamir Afridi

      I use Mac so don’t have IE. Can you please explain in detail what is the issue.

    • Michael

      I tested on IE8,9,10,11 on XP and Win7 and found no issues at all !?

  • Dylan Yang

    Hi, I have some problem with my marquee,
    could I change marquee speed when marquee playing ?

    • http://www.aamirafridi.com/ Aamir Afridi

      No you cannot. You need to destroy marquee and start again with different speed.

  • Tino

    Hi. Is it possible let the marquee start most left not right?

    • http://www.aamirafridi.com/ Aamir Afridi

      At the moment but I will add this feature when I can. But not recommended because this way people will miss first few words to read.

      • Tino

        That’s true but it could be like in my case mandatory.

        • http://www.aamirafridi.com/ Aamir Afridi
          • jacksonrdlc

            Is there a clean way to do this hack if i have a set of images?

          • http://www.aamirafridi.com/ Aamir Afridi

            Try same hack but as per my github notes about images, start marquee plugin like this:

  • Inspired Digital

    I’ve encountered a very odd bug, when I use your script my css3 fonts don’t display until I click on the page, without the script there’s no issues. Any ideas?

  • Michael

    Thanks, Aamir for this script.
    I run a marquee for linked images. Now, depending on the number of items (the length of the marquee’s content) , it’s tempo/timing changes. More items: faster; less items: slower.
    I guess ‘duration: 15000′ sets the duration for the whole thing to complete, so that behaviour makes sense. Is there any way to set the marquee-tempo to an ‘absolute’ value?
    Usecase:
    Two marquees below each other with various lengths. I want them at same speed. Any thoughts?

    • http://www.aamirafridi.com/ Aamir Afridi

      Check this http://codepen.io/anon/pen/jivKs

      If you are using images in marquee than check the notes on github about images.

  • Free Israel From Fucklestine

    where should i put this tag??

  • Dương Kim Hưng

    How can i remove empty space while running the marquee?

    • http://www.aamirafridi.com/ Aamir Afridi

      What do you mean ‘remove empty space’?

  • Pingback: JQuery跑马灯插件推荐——jQuery.Marquee(支持CSS3) | Dream7788

Copyright © 2014 — musings of Aamir Afridi