Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 5dc1495f05
Fetching contributors…

Cannot retrieve contributors at this time

188 lines (95 sloc) 8.554 kb
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Wee! Marquee | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="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 &hellip;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://nimbupani.github.com/wee-marquee.html">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
</head>
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="https://twitter.com/divya">twitter</a> <a class="rss" href="http://feeds.feedburner.com/nimbupani">RSS Feed</a> <a class="youtube" href="http://youtube.com/nimbupani">Youtube Channel</a> <a class="github" href="https://github.com/nimbupani">Github</a></h2>
</header>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
</nav>
<article>
<nav class="article">
<a class="previous" href="/vignettes-with-css3-box-shadows.html" title="Vignettes with CSS3 Box Shadows">&#x276C;</a>
<a class="next" href="/svg-is-coming.html" title="SVG is coming!">&#x276D;</a>
</nav>
<header>
<time datetime="2010-07-14T00:00:00-07:00" pubdate><span class='month'>Jul</span> <span class='day'>14</span> <span class='year'>2010</span></time>
<h1 class="entry-title"><a href="/wee-marquee.html">Wee! Marquee</a></h1>
</header>
<div class="entry-content"><p><a href="http://nimbu.in/weemarquee/"><img src="http://nimbupani.com/files/e2b1e0a3cfb12b559ed9657f79a8f02f.png" alt="e2b1e0a3cfb12b559ed9657f79a8f02f.png" border="0" width="615" height="47"></a></p>
<p>I am <a href="http://nimbupani.com/search/node/ecmascript%20OR%20%22javascript%20n00b%22">learning JavaScript</a> 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.</p>
<p>The first plugin I created replicates the much despised marquee effect. Thanks to <a href="http://twitter.com">Twitter homepage</a>, 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.</p>
<p>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.</p>
<p></p>
<p>You might ask me why I did not use webkit&#8217;s marquee element. This is because <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html">marquee is officially obsolete</a>. I have no intention of bringing it back just because webkit supports it (<a href="http://itpastorn.blogspot.com/2010/07/no-browser-supports-html5-yet-part-1.html">webkit fanboys should read this rant</a>)!</p>
<p></p>
<p>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.</p>
<p></p>
<p>If this all sounds <a href="http://www.google.com/dictionary?source=translation&hl=en&q=sinnlos&langpair=de|en">sinnlos</a>, go see the <a href="http://nimbu.in/weemarquee/">demo page now</a>. If you are a kind person who is also an expert in jQuery do comment on how I can improve it. Also, my <a href="http://en.wikipedia.org/wiki/D%C3%A6mon_(His_Dark_Materials)">dæmon</a>, Mr.Claws hides within that page, click away and find him!</p>
</div>
<footer>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
on
<time datetime="2010-07-14T00:00:00-07:00" pubdate><span class='month'>Jul</span> <span class='day'>14</span> <span class='year'>2010</span></time> in
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
</span>
. If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2010-07-14-wee-marquee.md">please send a pull request</a>.
</p>
</footer>
</article>
<section>
<h1>Comments</h1>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
</div>
</div>
<aside id="articles">
<p><img class="avatar"
src="http://a2.twimg.com/profile_images/1696865113/me_normal"
height=48> <a href="http://twitter.com/divya">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/css-object-model.html">CSS Object Model</a></li><li><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></li><li><a href="/html5please-api.html">Html5please API</a></li><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
</aside>
<footer role="contentinfo"><p>
Copy to your heart’s content 2012 - Divya Manian -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = 'http://nimbupani.com/wee-marquee.html';
var disqus_identifier = 'http://nimbupani.com/wee-marquee.html';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script src="/javascripts/octopress.js"></script>
<script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.