CSS / Design Archives

Create a Simple News Scroller Using Dojo

Published by David Walsh on Tuesday, March 9, 20102 Comments

My journey into Dojo javascript has been exciting and I’m continuing to learn more as I port MooTools scripts to Dojo. My latest experiment is porting a simple new scroller from MooTools to Dojo. The code is very similar!

The HTML

  • News Item 1
    Pellentesque habitant morbi...Read More
  • News Item 2
    Pellentesque habitant morbi...Read More

The news items are placed into list items. The UL will be the element that’s animated.

Link Nudging Using Dojo

Published by David Walsh on Monday, March 1, 20108 Comments
Dojo Toolkit

In the past we’ve tinkered with link nudging with MooTools and link nudging with jQuery. In an effort to familiarize myself with other javascript frameworks, we’re going to try to duplicate that effect with another awesome framework: Dojo.

The Javascript: Attempt 1

dojo.addOnLoad(function() {
	var links = dojo.query('a.nudge');
	//foreach...
	dojo.forEach(links,function(link) {
		var left = dojo.style(link,'paddingLeft');
		dojo.connect(link,'onmouseenter',function() {
			dojo.animateProperty({
				node:link,
				properties: {
					paddingLeft: (left + 10)
				}
			}).play();
		});
		dojo.connect(link,'onmouseleave',function() {
			dojo.animateProperty({
				node:link,
				properties: {
					paddingLeft: left
				}
			}).play();
		});
	});
});

Once the DOM is ready, we use the dojo.query method to find all of the links to nudge. For every link we find, we record its original left padding and add mouseenter and mouseleave events to each link to animate its left padding.

Create a Simple News Scroller Using MooTools, Part I: The Basics

Published by David Walsh on Tuesday, February 23, 201015 Comments
News Scroller

News scroller have been around forever on the internet. Why? Because they’re usually classy and effective. Over the next few weeks, we’ll be taking a simple scroller and making it into a flexible, portable class. We have to crawl before we walk though; let’s make a simple news scroller using MooTools.

The HTML

<div id="news-feed">
	<ul>
		<li><strong style="font-size:14px;">News Item 1</strong><br />Pellentesque habitant morbi...<a href="#">Read More</a></li>
		<li><strong style="font-size:14px;">News Item 2</strong><br />Pellentesque habitant morbi...<a href="/news/2">Read More</a></li>
		<!-- more.... -->
	</ul>
</div>

The HTML part is fairly simple: a list with numerous list items (news items) wrapped in a single DIV.

Create a Simple Slideshow Using MooTools, Part IV: Thumbnails and Captions

Published by David Walsh on Monday, February 22, 201017 Comments

MooTools Slideshow

My “Create a Simple Slideshow Using MooTools” series has been hugely successful. The first step was laying the groundwork for the slideshow, the second step was adding controls and events to the slideshow, and the third step was recoding the slideshow into a sexy class. This fourth slideshow tutorial will add thumbnail previews and captions to the slideshow.

No Class? WTF!?

I’ve chosen to revert back to the “inline” code from the second tutorial. Why? I’m going a little bit off of the reservation with this one. I think classes are important to use when you want a more generic slideshow; this one will be a bit more customized. That isn’t to say, however, that I wont be creating another class in the future.

Background Animations Using MooTools

Published by David Walsh on Tuesday, February 16, 201016 Comments
MooTools background animation

One of the sweet effects made easy by javascript frameworks like MooTools and jQuery is animation. I ran across this great jQuery tutorial that walks you through animating a background image of a page. Here’s a quick MooTools code snippet that shows you how you can add this sweet effect to any element on a page.

The CSS

#animate-area	{ background:url(bg-clouds.png) 0 0 repeat-x; }

The first step is assigning the image as a background image for our given container. Be sure to repeat the background horizontally!





© David Walsh 2007-2010. Contact David Walsh. Powered by the remarkable MooTools javascript framework.