Basic AJAX Tutorial: Smooth Scrolling Text Marquee with a jQuery plugin

Monday, January 26th, 2009 | Business, Tutorials | by

This tutorial covers:

  • What is a plugin?
  • Installing a plugin
  • The jQuery Marquee plugin
  • Implementing the jQuery Marquee plugin

What is a plugin?
A plugin is an addition to the core jQuery functionality.  Plugins are made to be simply integrated into an existing jQuery web page.

For this tutorial, we will be working with the jQuery Marquee plugin from remy sharp’s b: log.  Take a look, he did a good job putting his post together.





Installing a plugin
Installing plugins is very easy.  This is the easiest part of working with all plugins.

Pretty much:

  1. Download the plugin
  2. Upload the plugin to your server
  3. Include the plugin in your document

First, download the jQuery Marquee plugin here (taken from the original post, The Silky Smooth Marquee).  If it just displays in your browser, right click on the link and select “Save Link As…”.

Now that we have the plugin, we just need to post it on our site.  Upload it to your javascript folder (I normally use “/js” for this).

Finally we need to include the JS library in your document, so we add the following line (into a very basic document):

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
     <script language="javascript" src="js/jquery.marquee.js"></script>
</head>
<body>

</body>
</html>

It’s uploaded!

The jQuery Marquee plugin
Whenever working with a plugin, normally the plugin page has helpful instructions on it’s use, and examples.  In this case that is true.

Again, I’m going to link back to the original page — The Silky Smooth Marquee.

On that page the author has detailed:

  • Demo
  • Download
  • Usage
  • How it works
  • Events
  • Support

Very helpful.  Additionally, it helps to look and see if there are any useful comments.  Usually commenters point out minor flaws in the code posted (or major!), and supply resolutions.  If you follow the conversation thread on the post, you will see commenters have requested functionality that was implemented back into the plugin.

Implementing the jQuery Marquee plugin
Now the final part.  This is both easy and hard.  The easy part is usually getting the basic implementation working.  The hard part comes in when you try to do exactly what YOU want to do with THEIR plugin example.  Usually it can be done.  Sometimes there are minor modifications that have to be made to the original plugin.

Once you have added the library, all you need to do is include the code.  There is a great example page, jQuery Marquee Demo, that shows the various implementations.

For our purposes we’ll implement a basic marquee on our page:

<html>
<head>
     <script language="javascript" src="js/jquery.js"></script>
     <script language="javascript" src="js/jquery.marquee.js"></script>
</head>
<body>
     <marquee behavior="scroll" direction="up" scrollamount="1"
          height="75" width="150">
          <p>This is a test of a Smooth Marquee using jquery.</p>
          <p>This is a test of a Smooth Marquee using jquery.</p>
          <p>This is a test of a Smooth Marquee using jquery.</p>
     </marquee>
</body>
</html>

The plugin automatically binds to the marquee tag.  Does yours work?  Check out our example of jQuery scrolling text marquee.

That was too easy?

Yes.  If you look at the comments, one common request is to adjust the scroll speed.  You can see that our scrollamount is already set to the minimum, 1.

The author recommended setting the timeout (refresh rate) to a larger number.  By default, it is set to 25ms.  If we wanted to go twice as slow, we just have to change that to 50ms.  This is where modifying the core code of the plugin comes in.  If you want to go ahead and do this:

  1. Open up the jquery.marquee.js file.
  2. Find the line: “setTimeout(animateMarquee, 25);”
  3. Change it to: “setTimeout(animateMarquee, 50);”
  4. Upload the new jquery.marquee.js file

The sky is the limit.

Please give us feedback on this tutorial, also take some time to thank the author of this plugin, Remy he’d probably appreciate a follow on Twitter, or even a comment on his blog.

Related Posts

Tags: , , , , , , ,

72 Comments to Basic AJAX Tutorial: Smooth Scrolling Text Marquee with a jQuery plugin

lsosa
March 2, 2009

Using the demo of http://www.seangw.com/examples/jquery-text-marquee.html, I didn’t see any difference between the standard marquee and this kind of marquee, they all weren’t smoonth.
What I do is to get the jquery-text-marquee.html and its js script files and save them. then open the html file with firefox3.0.5 but the effect is similar to the standard marquee.

seangw
March 2, 2009

Well, lets define smooth? The point of that marquee was to animate smoothly using jQuery.

I’ve seen smoother marquees before, usually they use flash or something else.

Additionally if you wanted really smooth, you may have to update the code in jquery.marquee.js — where you can change the timeout. That value is the number of milliseconds in between animations. Lowering that value will make the animation look much smoother. The side effect will, of course, mean that it will scroll faster.

Maybe you should try that? In the example I believe I have the value set at 25 (maybe I left it at 50). Try changing it to 10 or maybe even 1. It’ll be faster but much smoother.

Teresa
March 16, 2009

Fantastic plugin. Thank you so much!

james tajardon
May 25, 2009

how can i pause the slide when i mouseover it?

seangw
May 29, 2009

I believe you only need to put an anchor tag (A) inside the contents so when there is a mouse over the scrolling stops. Let me know if that works for you.

Website Quality
July 1, 2009

Hi,
THats a nice plugin, i like it..

Jeany Ngo
July 8, 2009

I put the anchor tag as you had said, but I can’t make the marquee stop when I rollover.

Help?

Thanks,
Jeany

Mark Fulton
July 13, 2009

Hey, thanks for sharing this. I am having the same problem.. Mouseover doesn’t get the scrolling text to stop, but it works in the demo…

Nikesh ponnen
July 28, 2009

Thanks to u. But there is one problem occuring while running it… Between paragraph only one line displaying while marqueing..

asdasd
August 25, 2009

How do we pause the slide while mouseover?

billy
September 2, 2009

onmouseover=’this.stop();’ onmouseout=’this.start();’

billy
September 2, 2009

sorry – you place that inside the marquee tag

TechieZone
September 11, 2009

This is a fantastic work. However the last comemtn has some typo error so actually you need to add the following inside the marquee:

onmouseover=’this.stop();’ onmouseout=’this.start();’

TechieZone
September 11, 2009

It seems the comment form is automatically changing the character, BTW it is the single apostrophe comma present on the same key where you have double quote mark near enter key. So just replace the characters with the correct one when you copy paste the code above.

Tom
September 17, 2009

hi guys, great piece of code!
but I’ve got a question about customizing it, as I’ve never worked with js beforehand (just html,php,css..).
I’d like two things to happen, the first being that whatever was scrolling from right to left would already start on the left (instead of coming out of the right end),
and the other thing being – making the text scroll in a circle, instead of it waiting for it all to disappear on the left – and only then appearing on the right, i’d want the beginning to appear straight away when the end comes out of the right hand side (that is, as long as there is enough writing there).
thanks, and if you don’t feel like writing those things, could you at least direct me to a relevant tutorial? (taking notice of my lack of js knowledge)
thank you very much, tom

seangw
September 17, 2009

I’m going to write up a separate tutorial on doing these customizations to this code. Hopefully it will be up within a week.

I will post an update when it is available.

Jony
November 24, 2009

Nice work!

How can I customize the code to display the texts continuously without the gaps between loops.

seangw
November 24, 2009

I know I said I’d write up a response, but I’ve been far too busy.

In general, what has to be done is to use 2 copies of your content. You will duplicate the original div with a replica div (you can easily do this in jquery), and followup the first div with the 2nd.

Essentially we double the height of the original content, by duplicating, and when one div is beyond the visible area, we reset the positioning to before the visible area.

O. Esner
December 2, 2009

Hello,

how can I ‘restart’ plugin after text change? If I set new (longer) text, the line is not scrolled completely.

Thank you for reply.

text
December 5, 2009

Onmousover stop this script?

seangw
December 5, 2009

A few comments above address this question

O. Esner
December 11, 2009

seangw:

I’m sorry, but comments above does not solve my problem.

I need to manually change the current width plugin-parameter of scrolling text OR restart plugin that computes the new width itself.

vijayk
January 18, 2010

hai,
please tel me How to remove the white or blank space in marquee?

syok
January 21, 2010

may i add thumbnail picture with the text?

seangw
January 31, 2010

You can add anything to the text, it is pure HTML.

Many have asked how to remove the white space from this plugin. As it is, you can’t. The plugin cycles the div up and out, before starting over. I had looked into modifying the plugin to do this, but it wasn’t easy. It is still on my “To Do” list

Francis
February 2, 2010

Based on post last November 24, 2009, can you send me code snippet on how to duplicate the original div with a replica div and followup the first div with the 2nd?

seangw
February 2, 2010

I will try to get a tutorial on modifying this plugin, or building one from scratch up on this blog in the near future.

Hadith
February 11, 2010

Finally I found it one where it says how to implement it, thanks.

Carl
February 13, 2010

Great tutorial. Had it installed, tested, and then running on my production site in 10 minutes. Also embedded an anchor with a link and used the pause feature.

Good work Sean!

Christopher Evans
March 10, 2010

Is there any type of scroll bar or way to get this one to not reset when you click on the next page. What I mean is If I want me header to scroll text. And I put it on each page of my site. As I change pages and click on different pages and navigate through the site, I don’t want the text to start over. I would like it to keep scrolling from where it left off… Just be on an endless loop. Is that possible? How can I go about implementing that? Thanks

seangw
March 10, 2010

Great question –

What you are asking is a bit more complicated than the answer I think you are looking for. You need to load the links in the scrolling marquee into a div without a page refresh. Once you have a page refresh, you essentially wipe out the ability for the scroller to keep going (technically it is possible, but wouldn’t be elegant, or the best user experience).

First you should check out:
http://frinity.blogspot.com/2008/06/load-remote-content-into-div-element.html

That will tell you how to load content into a div. Then you need to replace links in the scroller with the code that loads the content into the other div. Once you do that, the scroller will keep going, the div will have the new page, and everything should be good.

Christopher Evans
March 11, 2010

What do you mean without a page refresh? I know how to load the content into a div but it seems to still start over when I refresh or when I change pages… Do you happen to have an example to send me or possible explain it a bit more. Thanks

[...] Basic AJAX Tutorial: Smooth Scrolling Text Marquee with a jQuery plugin – Includes plugin definition, how to install a plugin [...]

skilts
May 13, 2010

This has worked for me a treat, thank you!

ysh
May 19, 2010

hello, i had problems with the code. the code does not work on me. i copied the jquery.js but it doesn’t seem to work after all. the effect is still the same as the standard marquee. can someone help me? :(

santosh
June 17, 2010

if i use direction=”left”, how can i have one p element at one time scrolling? All p elements are coming in a row currently.

Matt
June 20, 2010

Hey this is great thanks, but I would like to know if there is anyway to make it slightly pause at each paragraph?

I’ve been hired to recreate this site http://www.woodvilleconstructions.com.au because the coding was invalid and they’re old web designer won’t return calls, and so yeah I just need to know how or if there is anyway to get it to pause like that one does – I looked at the original files from the site and it’s all too confusing for me, it’s a huge mess.

Cheers.

Chocolate Lime
July 19, 2010

A nice and simple tut for coders starting to look at jQuery.

Remy Sharp has loads of good demos for other implementations of jQuery.

lol768
August 19, 2010

How would I go about an onmouse over – stop the effect and vice versa. The comments above don’t work for me.

Rodney
September 11, 2010

Thanks man! This really helped me

CodingMix
October 4, 2010

Wow, this was so simple and effective
thanks!

Dmitry
October 5, 2010

Thanks, but I also can not pause text on mouse over. How can i to do this?

angel
November 4, 2010

Hi..
i have tried this, but somehow the marquee bounce back after reach the top of the box..
i already set the behavior to scroll like this:

what is wrong? can u help me?

josef
February 25, 2011

hi,
Thanks,
is it W3C standart?
did you find a way to close the gap betwen the end to start , may be by jcarusel!
thanks

[...] 6.Marquee for NSE data is not smooth scrolling. This is disturbing to the eyes. There is a simply way to use jQuery for a smooth scrolling marquee. You can find the tutorial here. [...]

online chat
May 14, 2011

Wow – Thanks a lot

Shojaru
May 31, 2011

Finally I found smooth scroll, where it says how to implement it, thanks.

dmsuperman
June 8, 2011

This has absolutely not a single bit of anything to do with AJAX.

seangw
June 8, 2011

I completely agree. AJAX has mutated into a term people apply to just basic web animations and methodologies.

Check out my writeup on what AJAX is in my Basic AJAX Tutorial: Smooth Scrolling Text Marquee.

reynier
June 10, 2011

I am trying to change the scrollamount on keypress event but dont work, i have start and stop it at keypress but change the scrollamount no, i think could be that the scrollamount is readed only at page load.

i drop here my code, if someone could help me would be great

seangw
June 11, 2011

Your code didn’t come through.

reynier
June 13, 2011

I think the page is protected again script and dont post my html.

But is something like this:

function checkKey(event) {

if (event.keyCode == 49) {
$(“#prompter”).attr(‘scrollamount’, 1);
}

if (event.keyCode == 50) {
$(“#prompter”).attr(‘scrollamount’, 2);
}

if (event.keyCode == 57) {
$(“#prompter”).attr(‘scrollamount’, 9);
}
}

….

And the tag is configured like this:

reynier
June 13, 2011

marquee id=”prompter” behavior=”scroll” direction=”up” scrollamount=”3″ style=”filter: FlipH;
height: 700px; width=80%; text-align: justify” onkeypress=”checkKey(event)”

seangw
June 23, 2011

I see what you’re trying to do. Unfortunately your approach just won’t work. The marquee plugin binds to the attributes when created, but doesn’t look back after that (which is why changing the scrollamount attributes isn’t doing anything).

You’d have to augment the marquee class to change those attributes.

Hope this gets you going in the right direction

reynier
June 23, 2011

Thanks for your answer

Alam Florist
August 6, 2011

i got this as same as html marquee, no difference :(

raj
August 11, 2011

may i know how to stop the marquee on hover?
is there any options for it?

Ben
August 23, 2011

This isnt working their is no difference between the html marquee and the jquery marquee in your demo. Where as the demo on the silky smooth marquee is correctly implemented.

NehaC
September 16, 2011

Hi,

How can I pause my html text for some seconds and then start scrolling it again? Aslo, how can I make it a continuous loop i.e. with no gap between the last text and the first text of the next cycle.

website making
September 24, 2011

is there a wordpress plugin available? i really like this one…
thank you for sharing

Angelos
October 12, 2011

I’ve been searching for a vertical marquee, which I can place images on so that they can scroll automatically. I think the example give here http://remysharp.com/2008/09/10/the-silky-smooth-marquee/ probably solves my issue.

Ajayh
October 22, 2011

how can I make it a continuous loop i.e or any browser. with no gap between the last text and the first text of the next cycle.

Toko Bunga
November 10, 2011

This is very usefull! Thanks for sharing.

Oleg
December 19, 2011

Thanks a lot for the help. I’ve been searching for this for a while.

vanathi
January 2, 2012

hi,

I need the struts2-jquery plugin for marquee. if anyone knows pls let me inform.

seangw
January 3, 2012

If you need the Struts2 jQuery plugin, check it out on Google code – http://code.google.com/p/struts2-jquery/

Keith Scott
March 14, 2012

I have items which spread over more than one line and found it necessary to change the white_space attribute to “wrap”.

anze harej
April 12, 2012

great scroller, works perfectly!

diogo
July 3, 2012

thanks! works great

bijeesh from INDIA
July 18, 2012

please help me to make the text scroll in a marquee very smoothly without any jumping of words

Nich
December 18, 2012

Can you tell me how to make it works horizontally?

Tenda peleton
November 28, 2013

Great, today I found smooth scroll, where it says how to implement it. Thank you.

Leave a comment

*


Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter

Archives

Categories

prestashop theme

virtuemart template