Javascript 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.

Remove Broken Images Using Dojo

Published by David Walsh on Tuesday, March 2, 20103 Comments

In an effort to get better with the Dojo Toolkit, I’ve decided to port yet another one of my previous posts: Remove Broken Images Using MooTools or jQuery. Broken images are an eyesore to any website so there’s no point to keeping them in the page. Here’s how you can remove them on the client side.

The Dojo Javascript

dojo.ready(function() {
	dojo.query('img').forEach(function(img){
		dojo.connect(img,'onerror',function() {
			dojo.destroy(img);
		});
	});
});

Just as simple as jQuery and MooTools — just a different syntax!

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.

Downloadify: Client-Side File Generation Using Javascript and Flash

Published by David Walsh on Tuesday, January 19, 201018 Comments

The following tools is in its very beta stages and works intermittently. Its so damn useful that I had to show it off now though!

I recently stumbled upon Downloadify, a client-side file generation tool based on javascript and Flash ActionScript code. A huge advantage to creating files on the client-side is that you can reduce the load on the server — especially when there’s no need for the server to get involved (the data is available within the page, etc.) Lets take a look at how we can use Downloadify.

Test For Popup Blocker Using Javascript

Published by David Walsh on Tuesday, January 12, 201022 Comments
Popup Window

Several websites rely on the ever-so-annoying popup window. As much as well all hate popup windows, some websites do benefit and justly require them. The problem is that some people have their popup blocker on but don’t know it — thus the new window doesn’t open. Of course the browser notifies the user but it isn’t always as obvious as it should be. Here’s a quick method for testing if your popup window is being blocked.





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