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.
Installing a plugin
Installing plugins is very easy. This is the easiest part of working with all plugins.
- Download the plugin
- Upload the plugin to your server
- Include the plugin in your document
Finally we need to include the JS library in your document, so we add the following line (into a very basic document):
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:
- How it works
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:
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.