Basic AJAX Tutorial: Smooth Scrolling Text Marquee with a jQuery plugin
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:
- Download the plugin
- Upload the plugin to your server
- 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:
- Open up the jquery.marquee.js file.
- Find the line: “setTimeout(animateMarquee, 25);”
- Change it to: “setTimeout(animateMarquee, 50);”
- 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
39 Comments to Basic AJAX Tutorial: Smooth Scrolling Text Marquee with a jQuery plugin
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.
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.
March 16, 2009
Fantastic plugin. Thank you so much!
May 25, 2009
how can i pause the slide when i mouseover it?
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.
July 1, 2009
Hi,
THats a nice plugin, i like it..
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
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…
July 28, 2009
Thanks to u. But there is one problem occuring while running it… Between paragraph only one line displaying while marqueing..
August 25, 2009
How do we pause the slide while mouseover?
September 2, 2009
onmouseover=’this.stop();’ onmouseout=’this.start();’
September 2, 2009
sorry – you place that inside the marquee tag
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();’
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.
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
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.
November 24, 2009
Nice work!
How can I customize the code to display the texts continuously without the gaps between loops.
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.
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.
December 5, 2009
Onmousover stop this script?
December 5, 2009
A few comments above address this question
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.
January 18, 2010
hai,
please tel me How to remove the white or blank space in marquee?
January 21, 2010
may i add thumbnail picture with the text?
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
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?
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.
February 11, 2010
Finally I found it one where it says how to implement it, thanks.
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!
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
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.
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
April 13, 2010
[...] Basic AJAX Tutorial: Smooth Scrolling Text Marquee with a jQuery plugin – Includes plugin definition, how to install a plugin [...]
May 13, 2010
This has worked for me a treat, thank you!
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? 
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.
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.
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.
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.
Leave a comment
Featured Posts
- HTML Fadein Fadeout: Basic Javascript/AJAX Tutorial using jQuery's fadeTo
- Basic AJAX Tutorial: Smooth Scrolling Text Marquee with a jQuery plugin
- Basic AJAX Tutorial: jQuery toggle and slide
- Hosting: How to pick a WordPress Host
- Basic jQuery Tutorial: Modify CSS classes and attributes, Hover and Toggle example
Follow Me
Email Subscription
Recent Posts
Top Commentators
- No commentators.
Archives
Tags
Blogroll
- 456 Berea St
- ActionScript 3 Design Patterns
- adactio – home of Jeremy Keith
- ajaxian
- Boxes and Arrows
- Chris Brogan
- CSS Globe
- InsideRIA
- Jarrod Michael Studios
- Mad Vertices
- NETTUTS
- Portsmouth Community Calendar
- Roomware Blog
- Signal vs. Noise
- Six Revisions
- Snook
- Style Grind
- Tiago’s Weblog
- Viget Extend
- Vitamin
- Whats the latest
- Why Banks Fail
- Woork
- zupko.info
March 2, 2009