Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: source
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 20 lines (13 sloc) 2.485 kb
layout title created category
post
Wee! Marquee
1279122870
Web Development

e2b1e0a3cfb12b559ed9657f79a8f02f.png

I am learning JavaScript and I detoured into learning jQuery. My intention is to learn jQuery by developing plugins :D This way, it would be a practical understanding of how to use jQuery and the experts among you might help me out by pointing out what could be made better.

The first plugin I created replicates the much despised marquee effect. Thanks to Twitter homepage, marquee is all the rage these days. Twitter marquee looks good because the width of the text in the marquee is longer than the marquee viewport (and the scroll is continuous). But when you use a CMS, you can never be certain of the width of the text that scrolls in the marquee. Sometimes, it is just a single line of text that is smaller than the marquee viewport, and at other times it is longer than the marquee viewport.

So, this plugin accommodates for both cases. If the width of all the elements that scroll are less than the width of the marquee, then it uses the normal marquee behavior.

You might ask me why I did not use webkit's marquee element. This is because marquee is officially obsolete. I have no intention of bringing it back just because webkit supports it (webkit fanboys should read this rant)!

There are also a bunch of options for you: adjust the width of the marquee view port, slow down or speed up the marquee, . You can even use your own class name for each instance to change how the fade looks.

If this all sounds sinnlos, go see the demo page now. If you are a kind person who is also an expert in jQuery do comment on how I can improve it. Also, my dæmon, Mr.Claws hides within that page, click away and find him!

Something went wrong with that request. Please try again.