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.

Downloadify Usage

Downloadify.create('downloader',{
  filename: function(){
    return 'secret-message.txt'; //static file -- you could retrieve from form input box
  },
  data: function(){
    return 'MooTools FTW!'; //static content -- you could retrieve from form input box
  },
  onComplete: function(){
    alert('The file has been saved!');
  },
  onCancel: function(){
    alert('You have cancelled the saving of this file.');
  },
  onError: function(){
    alert('Error!  Damn!');
  },
  transparent: false,
  swf: 'media/downloadify.swf',
  downloadImage: 'images/download.png',
  width: 210,
  height: 55,
  transparent: true,
  append: false
});

Downloadify provides numerous options which you may pass per instance within the create method — this should look familiar to notice to advanced javascript users. What I really love about Downloadify is that it provides just the right amount of customization — events and filename/content settings. Too many javascript classes/functions try to do too much; Downloadify gets it right. My only criticism of Downloadify is it’s requirement of a 4-state sprite; it would be great if that were an option or the ActionScript could detect the height setting vs. the image file’s actual height and use the sprite if available.

MooTools Helper

/* mootools helper */
if(typeof(MooTools) != 'undefined'){
	Element.implement({
		downloadify: function(options) {
			options = $extend(Downloadify.defaultOptions,options);
			return this.store('Downloadify',Downloadify.create(this,options));
		}
	});
}

Downloadify comes with a jQuery helper but not a MooTools helper…I’ve remedied this.

Downloadify fills a need for many developers. Avoid unnecessary server load and jump on Downloadify!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Downloadify: Client-Side File Generation Using Javascript and Flash

Related posts:

1. Basic File Uploading Using PHP
2. Facebook Sliders With Mootools and CSS – Now With Image Generation!
3. Create a Zip File Using PHP
4. Basic PHP File Handling — Create, Open, Read, Write, Append, Close, and Delete
5. WordPress’ .htaccess File Is Genius

Go to Source

I’ve just released my third NetTuts post:  http://net.tutsplus.com/tutorials/javascript-ajax/sexy-animated-tabs-using-mootools/ .  From the post:

One modern, attractive way of placing a lot of content into a little space is by using a tab system. This tutorial will show you how to create a sexy, animated tab system complete with CSS sprites, cookies, and animated tab swapping.

Go over to NetTuts and check it out!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

NetTuts: Sexy Animated Tabs Using MooTools

Related posts:

1. David Walsh on NetTuts: Create a Twitter-Like “Load More” Widget
2. NetTuts Exclusive: Twitter Emulation Using MooTools 1.2 and PHP
3. Animated Progress Bars Using MooTools: dwProgressBar
4. Eight7Teen Interview
5. Sexy Opacity Animation with MooTools or jQuery

Go to Source

/* the function */
function remove_querystring_var($url, $key) {
	$url = preg_replace('/(.*)(?|&)' . $key . '=[^&]+?(&)(.*)/i', '$1$2$4', $url . '&');
	$url = substr($url, 0, -1);
	return $url;
}

/* usage */
//pretending this page is

All I needed to do was provide the URL (in my case I wanted the current page’s URI) and the key to remove — so simple!

All credit goes to Added Bytes for their awesome work. It saved me a lot of time…hopefully it does for you too!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

PHP Function: Remove a Query String Key=>Value

Related posts:

1. Change the PHP Query String Variable Separator Using php.ini
2. PHP Function To Get A File Extension From A String
3. Generate Readable Byte Labels Using PHP
4. PHP, Microsoft SQL Server (MSSQL), and IIS: Connect and Query with ODBC
5. Remove Broken Images Using MooTools or jQuery

Go to Source

CSS and Javascript issues within each version of IE present us with layout and functionality issues. Double margins, floating and absolute positioning, and lack of PNG support are probably the most frequent problems. Luckily Internet Explorer has been supporting conditional comments which allow us to target blocks of HTML toward all IE browsers or specified IE browsers.

Examples of IE Conditional Comments

<!--[if IE]>
<style type="text/css">
a		{ color:#fff; }
</style>
<![endif]-->

The example above sets the color of links to red if the browser is any flavor of Internet Explorer.

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

The example above example includes the IE8.js library int the page if the version of Internet Explorer is less than 8.

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  DD_belatedPNG.fix('.png');
</script>
<![endif]-->

The example above fixes PNGs if the browser is Internet Explorer 6.

Conditional Comments Syntax Table

While we all dislike Internet Explorer’s bugs, their conditional comment syntax provides us a perfect method for fixing them quickly.

Valuable Resources

• If you’d like to cut one of the browser version issues out of the equation, you can always make IE8 emulate IE7.
• Be sure to check out the MSDN documentation for Microsoft’s “official” guide.
• PPK has some awesome notes about conditional comments.

Have fun fixing your code in Internet Explorer with conditional comments!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

IE Conditional Comments

Related posts:

1. Microsoft’s Internet Atrocities
2. The 7 Major Roadblocks That Cripple Web Developers and The Internet
3. Adding Events to Adding Events in MooTools
4. Web Predictions For 2009
5. April Fools! Change Your PHP Pages to ASP…Or Not

Go to Source

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.

The Javascript

var windowName = 'userConsole';
var popUp = window.open('/popup-page.php', windowName, 'width=1000, height=700, left=24, top=24, scrollbars, resizable');
if (popUp == null || typeof(popUp)=='undefined') {
	alert('Please disable your pop-up blocker and click the "Open" link again.');
}
else {
	popUp.focus();
}

The first step is to give the directive to open a new window, saving what’s returned. Then we check to see if the object exists. If it does, we’re good. If it doesn’t, we give an alert to the user that their popup blocker may be on. The specific text warning can be set to whatever you’d like, as could the method of giving them the message. You could also use a sexy MooTools slider to show the message.

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Test For Popup Blocker Using Javascript

Related posts:

1. NSFW Blocker Using MooTools and CSS
2. How To Create A Javascript Close Link
3. Logging Information to the Firebug Javascript Console
4. How To Create A Javascript Print Link
5. Javascript Exercise: Find the Number of Unique Letters in a String

Go to Source

As you should already know, the best visual features of a website are usually held within the most subtle of details. One simple trick that usually makes a big different is the use of opacity and fading. Another awesome MooTools functionality is dragging. Why not double the awesomeness of Element dragging by adding fading?

The MooTools Javascript

window.addEvent('domready',function() {
	var z = 2;
	$$('.draggable').each(function(el) {
		var drag = new Drag.Move(el,{
			grid: false,
			preventDefault: true,
			onStart: function() {
				el.setStyle('z-index',z++).fade(0.5);
			},
			onComplete: function() {
				el.fade(1);
			}
		});
	});
});

The code itself is quite simple — we use Drag.Move’s onStart and onComplete events to begin and end the fading. We’ve chosen to fade to the desired opacity level over a given duration because a subtle fade is a bit less drastic. We could simply use set(‘opacity’,’0.5′) if we wanted an immediate fade.

I consider the above effect a “cheap” way to increase the coolness of element dragging. Very little overhead and just another effect to take your website to the next level!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Hot Effect: MooTools Drag Opacity

Related posts:

1. Drag & Drop Elements to the Trash with MooTools 1.2
2. Using MooTools 1.2 For Drag, Drop, Sort, Save
3. Using Opacity to Show Focus with MooTools
4. MooTools PulseFade Plugin
5. Prevent Internet Explorer’s Default Image Dragging Action

Go to Source

Sample Usage

window.addEvent('domready', function() {
	// Generating Header
	document.body.expanAbbr( 'div#header>div#logo^text=Containing Logo+div#navigation+div#subnavigation' );

	// the Navigation with some li's and a's
	$('navigation').expanAbbr( 'ul>li*3>a^href=http://www.google.com,text=GOOGLE,target=_blank,title=a navigation link' );

	// the Navigation with some li's and a's
	$('subnavigation').expanAbbr( 'ul>li*5>a^href=http://www.nyt.com,text=NYT,title=a link' );

	// Generating Main Content Body with left and right column
	document.body.expanAbbr( 'div#main>div#content' );
	$('content').expanAbbr( 'div.box*24>h3^text=a little box+p^text=with some content' );
	$('content').expanAbbr( 'br^style=clear:both' );

	// Generating Footer and Sitemap Body
	document.body.expanAbbr( 'div#bottom>div#sitemap^text=The Sitemap+div#footer^text=The Footer' );
});

There’s a lot there so lets take one and talk through what it does.

$('navigation').expanAbbr( 'ul>li*3>a^href=http://www.google.com,text=GOOGLE,target=_blank,title=a navigation link' );

The above code:

• Creates a UL element within the “navigation” element.
• Creates 3 list items within the UL
• Creates an A element within each link with assigned text and HREF and TARGET attributes.

Once the elements are in place, you can modify them as you could any other element. While this plugin likely wont be used by the majority of MooTools developers, it’s a great option for those who want create elements quickly and with minimal code.

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

MooTools Quick Coding: Expand Abbreviation

Related posts:

1. 7 Quick CSS Enhancements for Better User Experience
2. New York Times-Style Text Selection Widget Using MooTools or jQuery
3. Assign Anchor IDs Using PHP
4. Event Delegation with MooTools
5. Fancy Navigation with MooTools Javascript

Go to Source

Go to Source

Our goals with this code will be to:

• Connect to GitHub via the API to retrieve repository information.
• Retrieve the content of two files from the repository: a source file and the README.md Markdown file.
• Cache the information for a given period of time to reduce the load on GitHub.
• Use PHP Markdown to output a formatted README.md file.

I know that seems like a lot of work but you’ll be amazed at how easy the process is.

PHP MarkDown

You may download PHP Markdown at Michel Fortin’s website. It’s simple and full of features.

The PHP

The first step is to build a PHP function that will connect to GitHub using cURL:

/* gets url */
function get_content_from_github($url) {
	$ch = curl_init();
	curl_setopt($ch,CURLOPT_URL,$url);
	curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
	curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,1);
	$content = curl_exec($ch);
	curl_close($ch);
	return $content;
}

Next we need to define a few settings:

/* static settings */
$plugin = 'Overlay';
$cache_path = $_SERVER['DOCUMENT_ROOT'].'/plugin-cache/';
$cache_file = $plugin.'-github.txt';
$github_json = get_repo_json($cache_path.$cache_file,$plugin);

The next step is to create another PHP function that grabs the repository information (JSON-encoded, because I love JSON) — either fresh from GitHub (by first grabbing the most recent commit hash, then grabbing the contents of the two files) or our local cached information:

/* gets the contents of a file if it exists, otherwise grabs and caches */
function get_repo_json($file,$plugin) {
	//vars
	$current_time = time(); $expire_time = 24 * 60 * 60; $file_time = filemtime($file);
	//decisions, decisions
	if(file_exists($file) && ($current_time - $expire_time < $file_time)) {
		//echo 'returning from cached file';
		return json_decode(file_get_contents($file));
	}
	else {
		$json = array();
		$json['repo'] = json_decode(get_content_from_github('http://github.com/api/v2/json/repos/show/darkwing/'.$plugin),true);
		$json['commit'] = json_decode(get_content_from_github('http://github.com/api/v2/json/commits/list/darkwing/'.$plugin.'/master'),true);
		$json['readme'] = json_decode(get_content_from_github('http://github.com/api/v2/json/blob/show/darkwing/'.$plugin.'/'.$json['commit']['commits'][0]['parents'][0]['id'].'/Docs/'.$plugin.'.md'),true);
		$json['js'] = json_decode(get_content_from_github('http://github.com/api/v2/json/blob/show/darkwing/'.$plugin.'/'.$json['commit']['commits'][0]['parents'][0]['id'].'/Source/'.$plugin.'.js'),true);
		file_put_contents($file,json_encode($json));
		return $content;
	}
}

Once we’ve acquired the appropriate information, we output the information to screen:

/* build json */
if($github_json) {

	//get markdown
	include($_SERVER['DOCUMENT_ROOT'].'/wp-content/themes/walshbook3/PHP-Markdown-Extra-1.2.4/markdown.php');

	//build content
	$content = '

'.$github_json['repo']['repository']['description'].'

';
	$content.= '
MooTools Javascript Class
'.$github_json['js']['blob']['data'].'
';

	$content.= trim(str_replace(array('',''),'',Markdown($github_json['readme']['blob']['data'])));

}

That’s all! Now I get the benefit of hosting my code on GitHub but displaying it on my own website. I’ve created a special WordPress template page to do so and recommend you do too!

Demo?

Visit my Projects page and click on the “Docs” link for any project. All of the information that comes up on individual project pages comes from GitHub. No more manual page creation!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Using the GitHub API and PHP to Get Repository Information

Related posts:

1. Forge: MooTools Plugin Repository
2. MooTools Forge / GitHub Plugin Structure Shell Script
3. Represent Your Repositories Using the GitHub Badge!
4. Create a GitHub Merge Batch File
5. Follow MooTools on GitHub!

Go to Source

$('myLink').addEvent('click',function(e) {
	e.stop();
	//do stuff
});

The above code works great but there’s one small hole I sometimes run into. On rare occasion I feel the need to trigger an event on an element:

$('myLink').fireEvent('click');

The problem is that the Event object is not given when an event is triggered using Element.fireEvent. The way to prevent any problems is an easy if check:

$('myLink').addEvent('click',function(e) {
	if(e) e.stop();
	//do stuff
});

Voila. The safe way to stop events!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

MooTools Tip: Event.stop

Related posts:

1. Prevent Default Event Actions Using MooTools 1.2
2. Event Delegation with MooTools
3. Implementing jQuery-Like Event Syntax in MooTools
4. MooTools Event Delegation
5. Implement MooTools’ Elements.addEvent in jQuery

Go to Source

One excellent way to add dynamism to any website is to implement a slideshow featuring images or sliding content. Of course there are numerous slideshow plugins available but many of them can be overkill if you want to do simple slideshow without controls or events. We’re going to create a simple slideshow from which we’ll build on.

The HTML

<div id="slideshow-container">
	<img src="slideshow/cricci1.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci2.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci3.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci4.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci5.jpg" alt="Christina Ricci" />
</div>

The HTML is as simple as it can be — one slideshow container DIV and the images that will be part of the show. This slideshow doesn’t require that you use images — you could just as easily use DIVs instead.

The CSS

#slideshow-container	{ width:512px; height:384px; position:relative; }
#slideshow-container img { display:block; position:absolute; top:0; left:0; z-index:1; }

It’s important that the slideshow container receive a set height and width as well as its position set to relative. Slideshow items must have an absolute position with top and left set to 0.

The MooTools Javascript

window.addEvent('domready',function() {
	/* settings */
	var showDuration = 3000;
	var container = $('slideshow-container');
	var images = container.getElements('img');
	var currentIndex = 0;
	var interval;
	/* opacity and fade */
	images.each(function(img,i){
		if(i > 0) {
			img.set('opacity',0);
		}
	});
	/* worker */
	var show = function() {
		images[currentIndex].fade('out');
		images[currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0].fade('in');
	};
	/* start once the page is finished loading */
	window.addEvent('load',function(){
		interval = show.periodical(showDuration);
	});
});

The first step in the slideshow creation process is to define the show duration, grab the container and slideshow items, etc. Then we cycle through each image/slide to set its opacity to 0 if it’s not in the first position. Next we create the function that fades out the current image and fades in the next image. The last step is directing the slideshow to start when the page has completed loading. Simple!

More to Come

This post will be the first of many with regard to improving upon this simple slideshow. In future posts, we’ll be adding start/stop/pause controls, table of contents, and making this simple slideshow a MooTools class with loads of options. In the mean time, enjoy this simple slideshow!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Create a Simple Slideshow Using MooTools

Related posts:

1. MooTools Image Preloading with Progress Bar
2. Image Reflection with jQuery and MooTools
3. Create a Download Package Using MooTools Moousture
4. Build a Slick and Simple MooTools Accordion
5. Create Snook-Style Navigation Using MooTools

Go to Source

The Shell Script & Usage

The first step is creating the repository at GitHub. Once created at GitHub, I run the script, giving it the name of the plugin and repository (they must be the same):

./newPlugin.sh ScrollSpy

The script itself looks like:

#!/bin/sh
mkdir $1
cd $1
git init
touch README.md
mkdir Source
touch Source/$1.js
touch Source/$1-yui-compressed.js
mkdir Docs
touch Docs/$1.md
touch package.yml
echo "name:  $1
author:  davidwalsh
current:
category:
tags:  []
docs:
demo:  " >> package.yml;
cd $1
git add *
git commit -m "First Commit"
git remote add origin git@github.com:darkwing/$1.git

Tada! Done! Now I just need to populate each file with the necessary content. MooTools FTW!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

MooTools Forge / GitHub Plugin Structure Shell Script

Related posts:

1. Forge: MooTools Plugin Repository
2. Create a GitHub Merge Batch File
3. Represent Your Repositories Using the GitHub Badge!
4. Follow MooTools on GitHub!
5. Add the Script & Style Feed to Your Website

Go to Source

/* do task 1:   */
var lynx = $$('a');
var divs = $$('div');
//(do stuff with links and divs)

/* do task 2 */
var lynx = $$('a'); //error:  lynx already defined!
var lis = $$('li');
//(do stuff with links and list items)

Everything above works but the second task can “see” the variables used to complete task one. This is undesirable as those variables from the first task could cause problems with later tasks. The better way to complete the two tasks is to use scope limiters for each:

/* do task 1:   */
(function() {
	var lynx = $$('a');
	var divs = $$('div');
	//(do stuff with links and divs)
})();

/* do task 2 */
(function() {
	var lynx = $$('a');
	var lis = $$('li');
	//(do stuff with links and list items)
})();

Sweet! Now the variables from the first task have scope only within their executed function scope and cannot affect other javascript within the “parent” scope.

Clean code FTW! Keep these techniques in mind when you’re writing code that will be repurposed!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Limiting Variable Scope Using (function(){})();

Related posts:

1. Access Javascript Object Variable Properties
2. 5 Simple Ways Programmers and Designers Should Give Back
3. PHP Redirect Function
4. PHP Splat Function
5. iPhone Click Effect Using MooTools or jQuery

Go to Source

…a first-class function with free variables that are bound in the lexical environment. Such a function is said to be “closed over” its free variables. A closure is defined within the scope of its free variables, and the extent of those variables is at least as long as the lifetime of the closure itself.

A bit technical for me. Simply put, a closure is a self-executing function that defines a variables, performs a task, and clears those variables so that their scope is limited to the function itself. Take the following javascript code, for example:

/* do task 1:   */
var lynx = $$('a');
var divs = $$('div');
//(do stuff with links and divs)

/* do task 2 */
var lynx = $$('a'); //error:  lynx already defined!
var lis = $$('li');
//(do stuff with links and list items)

Everything above works but the second task can “see” the variables used to complete task one. This is undesirable as those variables from the first task could cause problems with later tasks. The better way to complete the two tasks is to use separate closures for each:

/* do task 1:   */
(function() {
	var lynx = $$('a');
	var divs = $$('div');
	//(do stuff with links and divs)
})();

/* do task 2 */
(function() {
	var lynx = $$('a');
	var lis = $$('li');
	//(do stuff with links and list items)
})();

Sweet! Now the variables from the first task have scope only within their closure and cannot affect other javascript within the “parent” scope.

Clean code FTW! Keep these techniques in mind when you’re writing code that will be repurposed!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Javascript Closures: Keeping Variable Scope

Related posts:

1. Access Javascript Object Variable Properties
2. Create a Javascript Confirmation Box
3. Logging Information to the Firebug Javascript Console
4. Change the PHP Query String Variable Separator Using php.ini
5. 5 Simple Ways Programmers and Designers Should Give Back

Go to Source

Without going into too much technical detail, the Forge is based on having a developer’s plugins being hosted with the GitHub system. If you don’t have a GitHub account, I highly recommend you create one. Once you have an account and each plugin’s repository is structured and tagged properly, you may quickly add that plugin to the Forge for the world to use!

Relevant Links & Guides

• The MooTools Forge – Forge homepage.
• The Official MooTools Plugins Repository Is Here – The official blog post with video introduction.
• How to Write a Plugin – A great guide detailing the proper repository structure and necessary file information. A must read.
• Plugin Writing Guidelines – A quick list of ways you may improve a plugin.
• David Walsh’s Profile – My profile on the Forge listing all of my uploaded plugins.

Special Thank You to Guillermo Rauch

Guillermo’s efforts have paved the way for MooTools developers to quickly and easily share their MooTools plugins with the rest of the community. I’d like to to thank Guillermo for his efforts — I know he worked extremely hard to create this awesome system.

One Last Thing…

MooTools FTW.

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Forge: MooTools Plugin Repository

Related posts:

1. Create a GitHub Merge Batch File
2. Keeping Up With MooTools
3. 5 Great MooTools Plugin Resources
4. Follow MooTools on GitHub!
5. MooTools Event Delegation

Go to Source

Every once in a while I come across a plugin that blows me out of the water and the most recent culprit is PassShark: a MooTools plugin that duplicates the iPhone’s method of showing/hiding the last character in a password field. This gem of a MooTools plugin, which conquers some problems that plague jQuery counterparts, was authored by valued MooTools contributors Luis Merino and Nathan Querido.

The MooTools PassShark Usage

window.addEvent('load',function() {
	new PassShark('pass',{
		interval: 300,
        	duration: 1500,
        	replacement: '%u25CF',
        	debug: false
    });
});

The only required parameter is the ID of the input/password element you’d like to act as an iPhone password field. Options include:

• interval: Amount of time between new character checks.
• duration: Amount of time to show a given character before obfuscating it.
• replacement: The character to replace the character.

Sometimes the less options the better!

PassShark is yet another perfect showcase of what MooTools allows you to accomplish. Big ups to Luis Merino and Nathan Querido for releasing this gem. To get more specific information about their great plugin, visit their blog post. MooTools FTW!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

iPhone-Style Passwords Using MooTools PassShark

Related posts:

1. MooTools onLoad SmoothScrolling
2. Dynamically Load Stylesheets Using MooTools 1.2
3. New York Times-Style Text Selection Widget Using MooTools or jQuery
4. Skype-Style Buttons Using MooTools
5. iPhone Checkboxes Using MooTools

Go to Source

Related Blogs

• Related Blogs on iPhone-Style Passwords Using MooTools PassShark

The HTML

	Top of Page
	Bottom of Page
	

A DIV with whatever elements and structure you’d like within it.

The CSS

#uberbar	{
	border-bottom:1px solid #eb7429;
	background:#fc9453;
	padding:10px 20px;
	position:fixed;
	top:0;
	left:0;
	z-index:2000;
	width:100%;
}

Using position:fixed will allow the bar to degrade well within Internet Explorer 6 by simply keeping the bar at the top. Be sure to position the element at 0×0and set a 100% width. You may style the DIV any way you’d like but I’d recommend keeping the height of your element to a minimum.

The MooTools Javascript

window.addEvent('domready',function() {
	(function() {
		var topbar = $('uberbar').set('tween',{ duration: 200 }), topDistance = 30, fadeTo = 0.5;
		var topbarME = function() { topbar.tween('opacity',1); }, topbarML = function() { topbar.tween('opacity',fadeTo); };
		var events = {
			mouseenter: topbarME,
			mouseleave: topbarML
		};
		var ss = new ScrollSpy({
			min: topDistance,
			max: window.getScrollSize().y + 1000,
			onLeave: function() {
				topbarME();
				topbar.removeEvents(events);
			},
			onEnter: function() {
				topbarML();
				topbar.addEvents(events);
			}
		});
	})();
});

Once all of our settings are in place, I use my ScrollSpy plugin to set minimum and maximum (enter and exit) vertical scroll values and add/remove mouseover and mouseenter events accordingly. The events are added to return the bar t0 100% opacity when the user mouses over the bar. ScrollSpy allows you to focus on functionality and not worry about keeping track of scroll position. You’ll notice that I’ve not accounted for making the bar scroll in IE6 using javascript — if you’d like this effect to work in IE6, I recommend using ScrollSpy’s onTick(pos) method to position the bar while scrolling.

The jQuery Javascript

$(document).ready(function() {
	(function() {
		//settings
		var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
		var topbarME = function() { $('#uberbar').fadeTo(fadeSpeed,1); }, topbarML = function() { $('#uberbar').fadeTo(fadeSpeed,fadeTo); };
		var inside = false;
		//do
		$(window).scroll(function() {
			position = $(window).scrollTop();
			if(position > topDistance && !inside) {
				//add events
				topbarML();
				$('#uberbar').bind('mouseenter',topbarME);
				$('#uberbar').bind('mouseleave',topbarML);
				inside = true;
			}
			else if (position < topDistance){
				topbarME();
				$('#uberbar').unbind('mouseenter',topbarME);
				$('#uberbar').unbind('mouseleave',topbarML);
				inside = false;
			}
		});
	})();
});

The above jQuery code will accomplish the same effect.

This isn’t the type of effect you’d want to use on most websites but it can be a great utility for websites that need to be highly functional.

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Create a Sexy Persistent Header with Opacity Using MooTools or jQuery

Related posts:

1. Sexy Opacity Animation with MooTools or jQuery
2. Sexy Album Art with MooTools or jQuery
3. David Walsh on NetTuts: Create a Twitter-Like “Load More” Widget
4. Create a Sprited Navigation Menu Using CSS and MooTools
5. Ajax For Evil: Spyjax with jQuery

Go to Source

The Sample MySQL Record in a PHP Array

$record = array(
		'id' => 12,
		'title' => 'Greatest Hits',
		'description' => 'The greatest hits from the best band in the world!'
	);

Pretend we created the above array based on a record retrieved via a MySQL query.

The PHP Class with Dynamic Functions

/* create class */
class Record {

	/* record information will be held in here */
	private $info;

	/* constructor */
	function Record($record_array) {
		$this->info = $record_array;
	}

	/* dynamic function server */
	function __call($method,$arguments) {
		$meth = $this->from_camel_case(substr($method,3,strlen($method)-3));
		return array_key_exists($meth,$this->info) ? $this->info[$meth] : false;
	}

	/* uncamelcaser: via http://www.paulferrett.com/2009/php-camel-case-functions/ */
	function from_camel_case($str) {
		$str[0] = strtolower($str[0]);
		$func = create_function('$c', 'return "_" . strtolower($c[1]);');
		return preg_replace_callback('/([A-Z])/', $func, $str);
	}
}

The first step is to create a very primitive class with a constructor which receives the record array and a __call magic method which gets executed any time a class method is called. When a method is called we parse the method name to remove “get” and check to see if the corresponding array key exists. If the key exists, we return its value — if the key does not exist, we simple return false.

The PHP Example Usage

/* usage */
$Record = new Record(
	array(
		'id' => 12,
		'title' => 'Greatest Hits',
		'description' => 'The greatest hits from the best band in the world!'
	)
);

/* proof it works! */
echo 'The ID is:  '.$Record->getId(); // returns 12
echo 'The Title is:  '.$Record->getTitle(); // returns "Greatest Hits"
echo 'The Description is:  '.$Record->getDescription(); //returns "The greatest hits from the best band in the world!"

Above we pass the array to the class and are then able to retrieve values via the “get” functions. Awesome!

The above example is not the most dynamic or realistic usage of dynamic function creation but this example will get you crawling before walking. Let me know if you have better examples or real uses.

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Create PHP Classes with Dynamic Functions

Related posts:

1. Generate Search Engine Friendly URLs with PHP Functions
2. Create a Dynamic Table of Contents Using MooTools 1.2
3. Create a Basic Web Service Using PHP, MySQL, XML, and JSON
4. Animated Ajax Record Deletion Using MooTools
5. Create HTML Elements Using PHP: html_element Class

Go to Source

One subtle detail that can make a big difference on any web design is the use of image reflections. Using them too often can become obnoxious but using reflections on large, “masthead” images is a classy enhancements. Unfortunately creating image reflections within your graphics application can be time-consuming, especially when an image can potentially change frequently. Luckily Christophe Beyls has created Reflection.js.

Reflection.js is a javascript utility available in both jQuery and MooTools that creates reflections for any images in a page. Reflection.js creates a new IMG element with special filters if the client is using IE — if the client is not IE, Reflection.js creates a CANVAS element and constructs the reflection within the canvas.

The HTML

<img src="cricci-player.jpg" alt="Christina Ricci" class="reflect" />

Add the reflect CSS class to any image you’d like to reflect.

The MooTools Javascript Usage

window.addEvent('domready',function() {
	var options = { height: 0.5 };
	$$('img.reflect').each(function(img) {
		img.reflect(options);
	});
});

The MooTools version of Reflection.js implements the reflect method to create reflections.

The jQuery Javascript Usage

	document.ready(function() {
		var options = { opacity: 0.75 };
		$('.reflect').reflect(options);
	});

Much like MooTools method, you execute each element’s reflect method.

Christophe’s Reflection.js code is a great piece of work! Don’t waste time making reflections in Photoshop — use the power of javascript!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Image Reflection with jQuery and MooTools

Related posts:

1. Use Custom Missing Image Graphics Using jQuery
2. Image Protection Using PHP, the GD Library, Javascript, and XHTML
3. MooTools Image Preloading with Progress Bar
4. MooTools 1.2 Image Protector: dwProtector
5. dwImageProtector Plugin for jQuery

Go to Source

Picture this: you’ve found yourself on a website that uses horizontal scrolling instead of vertical scrolling. It’s an artistic site so you accept that the site scrolls left to right. You’re ready to see more of the page so you use the scroll wheel like you usually do but…nothing. Nothing happens. Your mouse’s scroll wheel is absolutely useless. Now you have to use your browser’s scrollbar / arrow keys to see other parts of the page. In a word: lame.

ScrollSide aims to prevent the problem above by hijacking the mousewheel event. When you’ve included ScrollSide into your site, your user can use the mouse wheel to scroll up to go left and down to move right.

The MooTools Plugin

/* class begins */
var ScrollSide = new Class({

	//implements
	Implements: [Options,Events],

	//options
	options: {
		reset: true,
		movement: 75 /*,
		onScrollUp: $empty,
		onScrollDown: $empty
		*/
	},

	//initialization
	initialize: function(container,options) {
		//set options
		this.setOptions(options);
		this.container = document.id(container);
		if(this.options.reset) { this.container.scrollTo(0,0); }
		this.containerWidth = this.container.getScrollSize().x;
		this.position = this.container.getScroll().x;
		//add the listener
		this.addListeners();
	},

	//listen for scrolling
	addListeners: function() {
		/* scroll reset */
		var scrollContainer = (this.container == document.id(document.body) ? window : this.container);
		scrollContainer.addEvent('scroll',function() {
			this.position = this.container.getScroll().x;
		}.bind(this));
		/* mousewheeling */
		this.container.addEvent('mousewheel',function(event) {
			event.stop();
			//scroll down/right
			if(event.wheel < 0) {
				this.fireEvent('onScrollUp',[event]);
				var pos = this.position + this.options.movement;
				this.position = (pos  0 ? pos : 0);
			}
			this.container.scrollTo(this.position,0);
		}.bind(this));
	}
});

Options for ScrollSide include:

• reset: (defaults to true) Sets the container to the {x:0,y:0} position on instantiation.
• movement: (defaults to 75) The number of pixels to scroll on each wheel movement.

Events for ScrollSide include:

• onScrollUp: Fires when the user scrolls their mouse wheel up.
• onScrollDown: Fires when the user scrolls their mouse wheel down.

The Usage

var ss = new ScrollSide(document.body);

Easy, simple, quick. If you’ve created a website that scrolls from left to right, you MUST include this plugin on your site!

What are your thoughts about this plugin?

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Introducing MooTools ScrollSide

Related posts:

1. Introducing MooTools ScrollSidebar
2. MooTools onLoad SmoothScrolling
3. Introducing MooTools LazyLoad
4. Introducing MooTools ScrollSpy
5. 7 Quick CSS Enhancements for Better User Experience

Go to Source

How many times are you putting together a HTML navigation block or utility block of elements that you wish could be seen everywhere on a page? I’ve created a solution that will seamlessly allow you to do so: ScrollSidebar. ScrollSidebar allows you to attach an element to a place on the screen and animate the menu to the current scroll position.

The HTML

<div id="sidebar-menu">
	<ul>
		<li><a href="#pagetop" id="sidebar-menu-top" title="Top of Page" style="background:url(menu-up-arrow.png) center center no-repeat;">Top of Page</a></li>
		<li><a href="/" style="background:url(menu-home.png) center center no-repeat;" title="Go to the Homepage">Homepage</a></li>
		<li><a href="http://twitter.com/home?status=I love David Walsh's blog!  MooTools, CSS, jQuery, PHP...it has everything!" id="sidebar-menu-twitter" style="background:url(menu-twitter.png) center center no-repeat;" title="Share on Twitter">Post on Twitter</a></li>
		<li><a href="#pagebottom" id="sidebar-menu-bottom" style="background:url(menu-down-arrow.png) center center no-repeat;" title="Bottom of Page">Bottom of Page</a></li>
	</ul>
</div>

You may code the menu’s HTML any way you’d like. For the sake of accessibility and semantics (I literally just shivered at the thought of following semantics) I’ve used an HTML list.

The CSS

#sidebar-menu	{ display:none; width:48px; background:#333; border:1px solid #000; padding:10px; -webkit-border-radius:10px; -moz-border-radius:10px; }
#sidebar-menu ul{ padding:0; list-style-type:none; }
#sidebar-menu a	{ color:#fff; display:block; height:48px; width:48px; text-indent:-3000px; overflow:hidden; }

You may code the sidebar menu any way you’d like too. No need to worry about positioning the menu though — the plugin will override that anyway. I highly recommend addressing the menu’s width. I’m also defaulting the menu to display:none until the menu can be positioned.

The MooTools Javascript

var ScrollSidebar = new Class({

	Implements: [Options],

	options: {
		offsets: { x:0, y:0 },
		mode: 'vertical',
		positionVertical: 'top',
		positionHorizontal: 'right',
		speed: 400
	},

	initialize: function(menu,options) {
		/* initial options */
		this.setOptions(options);
		this.menu = $(menu);
		this.move = this.options.mode == 'vertical' ? 'y' : 'x';
		this.property = this.move == 'y' ? 'positionVertical' : 'positionHorizontal';
		/* ensure a few things */
		var css = { position: 'absolute', display:'block' };
		css[this.options.positionVertical] = this.options.offsets.y;
		css[this.options.positionHorizontal] = this.options.offsets.x;
		this.menu.setStyles(css).set('tween',{ duration: this.options.speed });
		/* start listening */
		this.startListeners();
	},

	startListeners: function() {
		var action = function() {
			this.setPosition($(document.body).getScroll()[this.move] + this.options.offsets[this.move]);
		}.bind(this);
		window.addEvent('scroll',action);
		window.addEvent('load',action);
	},

	setPosition: function(move) {
		this.menu.tween(this.options[this.property],move);
		return this;
	}
});

/* usage */
window.addEvent('domready',function() {
	$('sidebar-menu').set('opacity',0.8); //opacity effect for fun
	var sidebar = new ScrollSidebar('sidebar-menu',{
		offsets: {
			x: 20,
			y: 20
		}
	});
});

I wont bore you with the parameter/option descriptions as they’re self-explanatory. I’ve kept the class very simple. For those who care to see what the functionality looked like pre-Class, here you go:

//paired with smooooothscroll
new SmoothScroll({ duration:300 });
//vars
var menu = $('sidebar-menu'), offsetY = 20, offsetX = 20, speed = 450;
var setPosition = function(top) {
	var scroll = $(document.body).getScroll();
	menu.tween('top',scroll.y + offsetY);
};
//settings
menu.set('tween',{ duration: speed }).setStyles({
	position: 'absolute',
	right: offsetX,
	top: offsetY,
	opacity: 0.8
});
//events
window.addEvents({
	scroll: setPosition,
	load: setPosition
});

As you can probably tell, the functionality was begging to be placed into plugin format.

Have any feature suggestions? Share them. If you’re looking for a sweet jQuery version, please head over to CSS-Tricks to see Chris Coyier’s take!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Introducing MooTools ScrollSidebar

Related posts:

1. Introducing MooTools LazyLoad
2. “Top” Watermark Using MooTools
3. Introducing MooTools ScrollSpy
4. Create a Sprited Navigation Menu Using CSS and MooTools
5. Editable Content Using MooTools 1.2, PHP, and MySQL

Go to Source

I’d like to take a moment this Thanksgiving to thank some people that deserved to be.

• I’d like to thank the MooTools team for all of the support and hard work. I feel truly honored to be around such intelligent, driven group of individuals. I’d like to specifically thank Aaron Newton and Valerio Proietti for being great leaders and advisers. MooTools FTW.
• I’d like to thank members of the MooTools community for all of their hard work. Sometimes I don’t think we all realize just how much we’re changing the web. Keep up the good work MooToolers!
• I’d like to thank friends like Chris Coyier and Eric Wendelin for letting me bounce ideas off of them, however rubbish they may be.
• I’d like to thank Babel Fish for allowing me to easily translate senseless phrases to other languages so that I may send said messages to foreign members of the MooTools team.
• I’d like to thank Rey Bango for being my whipping boy whenever I need to talk smack to someone.
• I’d like to thank Twitter for creating a service that allows me to be riveting in 140 characters or less.
• I’d like to thank DirecTv for allowing to purchase not one but two soccer packages. I get to see EPL, SPL, La Liga, Serie A, Bundesliga, Ligue, Russian League, and Champhions League. In turn I’d like to thank Darren Waddell for being patient with me as I ask questions and initially attempted to be a Chelsea fan. I’ve seen the errors of my ways: go Gunners!
• I’d like to thank Internet Explorer for continuing to encourage my creativity and making me think out each piece of my javascript code.
• I’d like to thank my advertisers who are unknowingly paying for the rock I just bought.
• I’d like to thank all of the crappy sites our there for giving me so many ideas for improvements.
• I’d like to thank the developers and designers that follow me here, provide encouragement and constructive criticism, and reach out to help with projects. You guys make all the time I spend on this blog worth it.

Thank you again!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

What I’m Thankful For: 2009 Web Edition

Related posts:

1. Blog Goals for 2009
2. What I’m Thankful For: 2008 Edition
3. Web Predictions For 2009
4. Faces of Moo: Represent Your Framework!
5. 5 Simple Ways Programmers and Designers Should Give Back

Go to Source

Javascript Object Property Accessing Example

/* setting */
var myObject = {
	left : 30,
	top: 20
};
/* basic access */
var left = myObject.left; //OR
var left = myObject['left'];

/* accessing it or variables */
var mode = 'vertical';
var value = myObject[mode == 'horizontal' ? 'left' : 'top'];

You may use array-style syntax to access an object’s properties. The string within brackets returns the properties.

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Access Javascript Object Variable Properties

Related posts:

1. Javascript Arrays: The Difference Between [] and { }
2. Code-Parsing Regular Expressions via Lighter.js
3. Implementing an Array.count() Method in Javascript
4. MooTools Window Object Dumping
5. Logging Information to the Firebug Javascript Console

Go to Source

<script>
	ESPN_refresh=window.setTimeout(function(){window.location.href=window.location.href},900000);
</script>
<noscript>
	<meta http-equiv="refresh" content="900" />
</noscript>

I understand what the code was supposed to do but was confused as to why they’d use javascript as a primary method and META as a fallback method. Why not just use the META method? I did some research and found the answer at Wikipedia:

Use of meta refresh is discouraged by the W3C, since unexpected refresh can disorient users. Meta refresh also impairs the web browser’s “back” button in some browsers (including Internet Explorer 6 and before), although most modern browsers compensate for this (Mozilla Firefox, Opera, Internet Explorer 7).

So there you have it. Use javascript as your primary means for automatic page refreshes and a META tag as your fallback.

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

META Refresh vs. Javascript Refresh

Related posts:

1. Automatically Refresh a Page Using Javascript or Meta Tags
2. Create a Javascript Refresh Link
3. Override Vista and XP’s Themed Buttons and Scrollbars Using a META Tag
4. Break Out of Frames Using Javascript
5. Adios Means Goodbye – Browser 301 Redirects In All Languages

Go to Source

Chris Coyier authored a post titled Better Pull Quotes: Don’t Repeat Markup a while back. In his post he created great-looking pull quotes without repeating any content — instead he uses jQuery to dynamically create the pull quotes. The following is the MooTools method for doing so.

The HTML

<p><span class="pull-me">As a MooTools "insider", however, I'm excited for what the MooTools team will bring to the table during 2010.</span> We'll be launching the Forge (our public plugin repository), releasing MooTools 2, continuing to grow MooTools More, featuring more community work, and much more. MooTools FTW!</p>

The HTML above features a paragraph of content with a SPAN tag wrapping what I’d like to be the pull quote.

The CSS

.quote { padding:20px; margin:0 0 20px 20px; font-size:20px; font-style:italic; background:#eee; color:#999; display:block; width:200px; float:right; }

You may style the quote any way you’d like. These elements are traditionally large in text with italicized text and a different background color.

The MooTools Javascript

window.addEvent('domready',function() {
	//grab all quotes
	$$('span.pull-me').each(function(span) {
		//inject styled quote into page
		new Element('span',{
			'class': 'quote',
			text: span.get('text')
		}).inject(span.getParent(),'top');
	});
});

We find each element with a “pull-me” CSS class and generate a new element with our “quote” class. We then inject the new element into the original element’s parent. That’s all!

Chris did a great job with the execution of his idea. This is a technique that will likely be used well into the future.

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Better Pull Quotes with MooTools

Related posts:

1. Highlight Table Rows, Columns, and Cells Using MooTools 1.2.3
2. Bold Web Predictions for 2010
3. MooTools HTML Police: dwMarkupMarine
4. Method Chaining in MooTools and PHP
5. dwImageProtector Plugin for jQuery

Go to Source

The Original MooTools Class

/* classes */
var OpenLinks = new Class({
	//initialization
	initialize: function(file_extensions,override_targets,target,no_class) {

		//analyze all anchors
		$$('a').each(function(el) {

			//check each href for case-insensitive file extensions
			var str = el.get('href');
			var ext = str.substring(str.lastIndexOf('.') + 1,str.length)
			if(file_extensions.contains(ext.toLowerCase()) && ((override_targets || !el.get('target')) && !el.hasClass(no_class + '')))
			{
				el.setProperty('target',target ? target : '_blank');
				el.setStyle('color','#f00');
			}
		});
	}
});

Gross. Everything is an argument and the no_class argument is pointless since you can simply disqualify items in the elements option selector string.

The New MooTools Javascript

/* class */
var OpenLinks = new Class({

	Implements: [Options],

	options: {
		elements: 'a',
		extensions: [],
		target: '_blank',
		overrideTarget: true
	},

	initialize: function(options) {
		this.setOptions(options);
		$$(this.options.elements).each(this.assign,this);
	},

	assign: function(el) {
		var href = 	el.get('href'), ext = href.substring(href.lastIndexOf('.') + 1,href.length).toLowerCase();
		if(this.options.extensions.contains(ext) && (this.options.overrideTarget || !el.get('target'))) {
			el.set('target',this.options.target);
			el.setStyle('color','#f00');
		}
	}

});

Instead of making everything arguments I moved each argument into the options object. I also removed the no_class option/parameter.

The MooTools Usage

/* usage */
window.addEvent('load',function() {
	var openers = new OpenLinks({
		extensions: ['pdf','xls','doc','jpg'],
		elements: '#content a'
	});
});

Using OpenLinks is as easy as it should be!

It feels good to clean up code after a long time. I recommend you do so when you can too!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

MooTools OpenLinks Class – Updated

Related posts:

1. MooTools 1.2 OpenLinks Plugin
2. Simple MooTools Event / Class Binding
3. 6 Reasons To Use Javascript Libraries & Frameworks
4. MooTools Class Creation Tips
5. Guest Blog: Create a Color Palette Using CSS and MooTools 1.2

Go to Source

Spyjax, as I know it, is taking information from the user’s computer for your own use — specifically their browsing habits. By using CSS and javascript, I can inject anchor links into the page and tell whether you’ve been to the link’s URL. How? Quite easy actually.

I’ve taken the time to demonstrate this technique using jQuery.

The CSS

a.checkme			{ color:#00ff00; }
a.checkme:visited	{ color:#ff0000; }

The most important part of the CSS is the difference in “:link” and “:visited” color; the method by which we can tell if a site has been visited is by its link color being the “:visited” color.

The jQuery Javascript

//when the page is ready
$(document).ready(function() {
	//the list of domains to check and an array which will store hits
	var domains = ['davidwalsh.name','css-tricks.com','scriptandstyle.com','cnn.com','digg.com'];
	var visited = [];
	//for every domain...
	$.each(domains,function() {
		//inject a link into page
		var a = $('').attr({
			href: 'http://' + this,
			'class': 'checkme'
		}).appendTo(document.body);
		//check the color of the link
		if($(a).css('color') == '#ff0000' || $(a).css('color') == 'rgb(255, 0, 0)') { //either format of color
			$(a).addClass('highlight');
			visited.push(this);
		}
		//remove from the page -- no longer need the links
		a.remove();
	});
	if(visited.length) {
		//save via ajax!  shady!
		//display items on the page based on "hits"
	}
});

We start by injecting a bunch of hidden links into the page (unbeknownst to the user). For each link we’ve injected into the page, our jQuery javascript grabs the link color — if the link’s color matches the designated “:visited” link color we set via CSS, we’ve found a site the user’s been to. Of course we can do anything we want with that information, including saving it via AJAX. Why? Well, if we know a user has been to Digg.com, maybe we show the Digg “share” icon instead of the Reddit icon.

The MooTools Javascript

var domains = ['davidwalsh.name','css-tricks.com','scriptandstyle.com','cnn.com','digg.com'];
var visited = [];
domains.each(function(url) {
	var anchor = new Element('a', {
		href: 'http://' + url,
		'class': 'checkme',
		html: url
	}).inject(document.body);
	if(anchor.getStyle('color') == '#ff0000') {
		visited.push(url);
	}
	anchor.dispose();
});

The above code accomplishes the same task using MooTools as outlined in my previous Spyjax post.

What are your thoughts on Spyjax? Harmless? Major privacy violation? You tell me!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Ajax For Evil: Spyjax with jQuery

Related posts:

1. Ajax For Evil: Spyjax
2. Animated Ajax Record Deletion Using jQuery
3. Form Element AJAX Spinner Attachment Using jQuery
4. jQuery topLink Plugin
5. Color Palette Generator Using jQuery

Go to Source

Basic Function.periodical Usage

/* the function to repeatedly run */
var fnToRepeat = function() {
	console.log('Running periodical!');
};
/* set periodical into action!  once every second */
var periodicalID = fnToRepeat.periodical(1000);

The above function will run periodically every second. This method takes the place of javascript’s native setInterval — periodical Moo-izes setInterval. You’ll also notice that this method returns the interval ID.

Clearing Periodicals with $clear

/* the function to repeatedly run */
var count = 0;
var fnToRepeat = function() {
	count++;
	console.log('Periodical run ' + count + ' times');
	if(count == 10) {
		$clear(periodicalID);
	}
};
/* do only 10 times, once every second */
var periodicalID = fnToRepeat.periodical(1000);

When you no longer want the periodical to run, you simply use MooTools’ global $clear method. That’s it — the periodical stops for good. You may initialize another periodical with the same function however a new interval ID will be returned.

Real-Life Example

I was required to write a slideshow of sorts for a client which would periodically swap slides. The periodical was meant to continue “forever” but stop when the mouse hovered other the displaying slide, then start again when the mouse left. Here’s how I did it:

/* setup */
var periodicalID;
var begin = function() {
	periodicalID = (function() {
		//do all the rotation stuff here
	}).periodical(5000);
}
/* start it! */
begin();
/* events ("start" / "stop") */
$('slider-container').addEvents({
	mouseenter: function() {
		//temporarily stop
		$clear(periodicalID);
	},
	mouseleave: begin
});

Note that I didn’t “pause” the periodical per say — I simply stopped the periodical and started a new interval when the mouse left the slide area.

Periodicals are an essential functionality in javascript that MooTools has more elegantly presented. MooTools FTW!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Using MooTools Periodicals

Related posts:

1. Periodical Ajax Requests Using MooTools 1.2
2. MooTools Fun with Fx.Shake
3. Shake Things Up Using jQuery UI’s Shake Effect
4. Introducing MooTools Dotter

Go to Source

The HTML / PHP

<p>Click on the search type headers above the search box to change the type of search you'd like to make!'</p>
<p>&nbsp;</p>
<div id="search-container" style="width:500px">
	<div id="search-options">
		<a href="?type=web" <?php if($_GET['type'] != 'video' && $_GET['type'] != 'image') { echo 'class="web active"'; } ?> style="left:20px;">Web</a>
		<a href="?type=image" <?php if($_GET['type'] == 'image') { echo 'class="image active"'; } ?> style="left:70px;">Image</a>
		<a href="?type=video" <?php if($_GET['type'] == 'video') { echo 'class="video active"'; } ?> style="left:140px;">Video</a>
	</div>
	<form method="get" action="/search/web" id="search-form">
		<input type="text" id="query" name="query" />
		<input type="submit" value="<?php echo ucwords($_GET['type'] == 'video' || $_GET['type'] == 'image' ? $_GET['type'] : 'web'); ?> Search" name="submit" id="submit" />
	</form>
</div>

The HTML structure is simple — be mindful of the element ID’s for styling and javascript functionality.

The CSS

#search-container	{ position:relative; padding:10px; -moz-border-radius:10px; -webkit-border-radius:10px; }
#search-options		{  }
	#search-options a	{ top:-20px; position:absolute; font-size:11px; padding:3px 6px; color:#00f; -moz-border-radius-topleft:5px; -moz-border-radius-topright:5px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; }
	#search-options a.active	{ z-index:5; text-decoration:none; font-weight:bold; color:#000; }
#query 				{ font-size:24px; padding:4px; background:#fff; }
#submit				{ font-size:24px; }

.web				{ background:#ccc; }
.images				{ background:#fffea1; }
.videos				{ background:lightblue; }

Style at will!

The MooTools

window.addEvent('domready',function() {
	var lynx = $$('#search-options a'), activeItem = $$('#search-options a.active')[0] || lynx[0], button = $('submit'), oTerm = 'Search';
	var searchForm = $('search-form'), container = $('search-container').set('class',activeItem.get('text').toLowerCase());
	lynx.addEvent('click',function(e) {
		//brick event
		e.stop();
		//manage "active" class
		activeItem.className = '';
		this.addClass('active ' + this.get('text').toLowerCase());
		activeItem = this;
		//manage URL and color class
		searchForm.set('action',this.get('href'));
		container.className = this.get('class');
		button.set('value',this.get('text') + ' ' + oTerm);
	});
});

The system works off of a system of adding and removing CSS class names. We also swap the form actions through each search type click.

Mapping out the the functionality for a system like this is fairly simple. What sets these type of systems is the great styling. Post in the comments if you’ve implemented a system like this!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Search Type Options with MooTools

Related posts:

1. Add Your Website to Firefox’s Search Bar Using OpenSearch XML
2. MSN Live Search Result Grabber
3. Yahoo SEO Domain Result Grabber
4. Default Search Input Message — Show & Replace
5. Fun With Google Code Search

Go to Source

Over the past two years I’ve run my Confessions of a Web Developer series.  Each one has been really popular and well-received.  It’s Friday and I’ve had a bad week so today I want you to confess your web development sins in the comment section below.  Purge your conscious at the end of the week and confess!

I hope to use these for a future post so make them juicy!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Confessions Friday

Related posts:

1. Confessions of an Eccentric Web Developer IV
2. Confessions of a Web Developer V
3. Confessions of an Eccentric Web Developer
4. 5 Simple Ways Programmers and Designers Should Give Back
5. Share Your Blog!

Go to Source

To get things working, you should:

1. Log into your Media Temple (dv) control panel.
2. Navigate to the domain and click the “Crontab” icon.
3. Click “Schedule a Task”
4. Configure the time and frequency of the CRON to any way you’d like.
5. Set the “command” value to:

   wget http://12.23.56.78/wp-cron.php

6. Replace the fake IP in the command above with the IP address of your website.

That’s all! Hitting the wp-cron.php file with the CRON will ensure you database backups and other scheduled tasks will run at proper intervals!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Fix WordPress CRONs on Media Temple (dv) Servers

Related posts:

1. Combine Your CSS Media Styles Into One File
2. 5 Rules For Using Audio/Video Media on Your Site
3. MooTools: Set Style Per Media
4. PHP: Get WordPress Post Categories
5. Track File Downloads in Google Analytics Using MooTools

Go to Source

When Webmasters Attack!

Also, what kind of web designer doesn’t already know this? It’s called being organized. However, all that white-space is going to add-up and waste bandwidth, which makes this “beautiful code” (a self-serving, inaccurate, subjective description) not-so-perfect.

What kind of web designer doesn’t know how easy it is to GZIP content which compresses/eliminates all of the extra whitespace that makes code more maintainable?

I don’t think <?php .. is valid HTML 5 either.

This isn’t a “Hello Kitty” picture, Webmaster, so please don’t comment. This will get parsed by PHP and output as HTML.

I link to one stylesheet. It works on firefox, safari and ie8.


If you can’t be bothered to upgrade your browser, I can’t be bothered with you.


None of this If IE>blabla shit.


Oh, and spare me the “but i need IE6 to use some of the software at my office”. I DONT CARE! Use a more recent browser to surf the internet, and stop spreading viruses because you’re too lazy.

I was going to ask you, Webmaster, about your clients’ web visitors and the money they’d be losing by turning away persons with IE6 and IE7 browsers but then I realized I took them all from you. Apparently the order of importance goes: you, client, visitors. That’s completely backward.

…The irony of this article is that it’s one giant PNG image. Further proof that the most beautiful HTML is the nonexistent kind.

Apparently Chris should have used a JPEG?

Why I am not surprised to see a MacOS window?

Because you’re a psychic? WTF is that supposed to mean?

PHP in a .HTML file?


change the title to “What Beautiful HTML Code Looks Like [infoFAIL]“

As long as you’re going to ignore the main point of the post and be a smart ass about the PHP/HTML, I’ll point out that Chris added a .htaccess directive to parse .html files as PHP. Ouch, sick burn!

No title attributes in the anchor tags. Since when does that make for beautiful HTML?

The article isn’t called “What Beautiful SEO Looks Like”.

This page has a story, a sidebar, and a footer. ‘Real’ websites are far more dynamic than this, and by ‘real’ I mean ones that people will go to. Complex websites have complex markup. You shouldn’t be bragging just because you’ve passed your w3schools tests.

You’re right. What he should really brag about are the dozens of thousands of RSS followers and his status within the community.

I get it but to some point it gets stupid. Stop accommodating specific browsers. If the web page loads properly then good but if it doesnt and looks broken then that tells he consumer to upgrade their fucking browser! It should be that simple.

Another lazy, ignorant idiot that doesn’t understand that he isn’t important — his clients and their visitors are. This person clearly doesn’t get it.

In the end…

Thank you again, Webmaster, for reminding me why I should be so proud of the work I do. Without you I couldn’t pay for house, cars, and fine wine. Keep up the good work so I can keep up my fine life!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

When Webmasters Attack!

Related posts:

1. Create Digg URLs Using PHP
2. Advanced .htaccess Security – Block Unwanted Referrers
3. 6 Reason Why Digg Is Losing Me
4. MSN Live Search Result Grabber
5. Google Grabber — Using PHP to Find Out How Many Pages Your Domain Has Listed in Google

Go to Source

Twitter will steal a bit of Google’s search thunder.

Twitter challenge Google search? You bet. The advantage twitter has over Google search is that Twitter provides almost to-the-second search results so if you want the most recent content, you can hit Twitter. While Google analyzes static content, Twitter provides you the “buzz”, or most recently/frequently talked about links/information in a condensed format. Sometimes fewer options and information is a good thing.

Gmail and GChat will slowly become Google Wave.

Wave is clearly Google’s successor to vanilla email (via Gmail) and instant messaging. Don’t look for Gmail to disappear completely during 2010 but I expect Wave to completely integrate email capabilities by the end of 2010.

Facebook will grow in popularity despite continuing to disappointing its own users; Your mother will join Facebook.

Unfortunately Facebook will continue to add features that make their site more difficult to use and, in doing so, will continue to disregard the fury of its users. Facebook will continue to “out-think the room” in the features it adds. Facebook will also push its “Lite” version more toward an older audience. Your mother, in turn, will join. MySpace will continue to become the Geocities of social websites.

Internet Explorer 6 support will finally be dropped from 90+% of websites.

Many websites have already dropped IE6 support, which I feel is too soon, but we should all be able to rejoice by the end of 2010. Windows 7 will have been out for over a year and IT departments will be pushed into upgrading from XP so as to not allow employees to be two operating system versions behind. Persons with older PCs will also opt to upgrade to a newer system due to highly competitive pricing by Dell, Compaq, and Toshiba.

Webkit-based browsers will overtake Firefox; Mozilla will face a Web Designer/Developer rebellion.

Google Chrome has quickly become a developer favorite during 2009 and there’s no reason to believe that affection will slow during 2010. Expect Chrome to debut a flexible plugin system during 2010 which will meet or exceed the flexibility provided by Firefox. As a result of Firebug’s bugs and memory problems, Mozilla will start to draw the ire of the developers that made them so popular.

Windows 7 will be a giant success (on a Windows level).

Due to the garbage OS known as Vista and continued successful marketing by Microsoft, Windows 7 will become a huge success. Lets not discount the improvements made by Windows 7 though — its UI and functionality improvements are to be recognized. IT departments will most definitely be pushed to update their outdated XP machines, begrudgingly or not. Mac fanboys wont notice a thing.

The MooTools javascript framework will boom in popularity thanks to the plugin forge and MooTools 2.

Having a central repository for quality MooTools plugins will increase the usage of the javascript framework. MooTools 2, with its improvements in every piece of the framework, will turn the heads of developers using other libraries. I also foresee users of other frameworks, looking for a more advanced OOP approach, giving MooTools a solid shot.

Digg will completely lose its developer/designer userbase and become “just another funny pics/vids” site.

Diggers’ habits of promoting stupid pictures and videos will essentially ruin that last shreds of credibility the site has left and users will continue to leave. Kevin Rose will take “less of a role” with Digg in an effort to distance himself from Digg’s direction.

The David Walsh Blog will continue to ascend.

More sweet MooTools, jQuery, CSS, PHP, and AJAX tutorials on the way…but then again, you already knew this.

What do you think? Am I crazy? Are these easy predictions? Tell me!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Bold Web Predictions for 2010

Related posts:

1. Implementing String.Tweetify in MooTools
2. Following MooTools on Twitter
3. Web Predictions For 2009
4. What If: Twitter Started Charging $5/Month
5. Load Your Static Content the Dynamic Way

Go to Source

# Mod Rewrite
Options +FollowSymLinks
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]

The fix to this problem was to add the following directive before my mod_rewrite directives:

#Fix Rewrite
Options -Multiviews

Tada! The URLs began working and the website’s SEO has taken off!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Fixing mod_rewrite and .htaccess on GoDaddy Hosting

Related posts:

1. Check For Module Presence in .htaccess
2. WordPress’ .htaccess File Is Genius
3. Prevent Image Hotlinking With .htaccess and mod_rewrite
4. GoDaddy Hosting Tip – Using CURL On GoDaddy Shared Hosting
5. No WWW Using .htaccess

Go to Source

Aaron Newton made a great request to me last week: why not make my MooTools Documentation Bookmarklet function more like the New York Time’s text selection widget. NYT’s text selection widget listens for text selection and presents the user with a “search” icon they may click on to learn more about that term. I’ve tried to answer that challenge — not in bookmarklet form but in website widget form.

The Sample HTML

<div id="content-area">
	.htaccess AJAX Apache / Server APIs Blog Bookmarking / Social Books Browsers CSS / Design Google Guest Blogger Hosting / Domain Javascript jQuery
	link() Microsoft MooTools MySQL Optimization PHP Poll rand() Security Shell Theory / Ideas Usability / Accessibility XML / XHTML
	This blog is targeted toward all levels of web designers and developers. All web topics are discussed, including CSS, Javascript (MooTools and jQuery), PHP, and more.
</div>

The above code is next to meaningless per the widget — I simply want to illustrate the area I’d like it to work in has an ID of content-area.

The MooTools Javascript

window.addEvent('domready',function(){
	(function($) {
		//gets the selected text
		var getSelection = function() {
			return $try(
				function() { return window.getSelection(); },
				function() { return document.getSelection(); },
				function() {
			        var selection = document.selection && document.selection.createRange();
					if(selection.text) { return selection.text; }
					return false;
			      }
			) || false;
		};
		//vars
		var url = 'http://davidwalsh.name/?s={term}', selectionImage;
		//event to listen
		$('content-area').addEvent('mouseup',function(e) {
			var selection = getSelection();
			if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
				//ajax here { http://davidwalsh.name/text-selection-ajax }
				if(!selectionImage) {
					selectionImage = new Element('a',{
						href: url,
						opacity:0,
						id: 'selection-image',
						title: 'Click here to learn more about this term',
						target: '_blank',
						fade: { duration:50 }
					}).inject(document.body,'top');
				}
				//handle the every-time event
				//alert(selection);
				selectionImage.set('href',url.replace('{term}',encodeURI(selection))).setStyles({
					top: e.page.y - 30,	//offsets
					left: e.page.x - 13 //offsets
				}).fade('in');
			}
		});

		$(document.body).addEvent('mousedown',function() {
			//hider
			if(selectionImage) { selectionImage.fade('out'); }
		});

	})(document.id);
});

During the mouseup event within the selected container (content-area), we determine if any text has been highlighted. If so, we:

1. Insert the A element if it has not yet been injected into the body.
2. Change the A element’s URL to accommodate for the new search term.
3. Position the element to at an offset position above where the mouse goes up.

During every mousedown event we hide the A element.

The jQuery Javascript

/* attempt to find a text selection */
function getSelected() {
	if(window.getSelection) { return window.getSelection(); }
	else if(document.getSelection) { return document.getSelection(); }
	else {
		var selection = document.selection && document.selection.createRange();
		if(selection.text) { return selection.text; }
		return false;
	}
	return false;
}
/* create sniffer */
$(document).ready(function() {
	var url = 'http://davidwalsh.name/?s={term}', selectionImage;
	$('#content-area').mouseup(function(e) {
		var selection = getSelected();
		if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
			//ajax here { http://davidwalsh.name/text-selection-ajax }
			if(!selectionImage) {
				selectionImage = $('<a>').attr({
					href: url,
					title: 'Click here to learn more about this term',
					target: '_blank',
					id: 'selection-image'
				}).hide();
				$(document.body).append(selectionImage);
			}
			selectionImage.attr('href',url.replace('{term}',encodeURI(selection))).css({
				top: e.pageY - 30,	//offsets
				left: e.pageX - 13 //offsets
			}).fadeIn();
		}
	});
	$(document.body).mousedown(function() {
		if(selectionImage) { selectionImage.fadeOut(); }
	});
});

Follows the same principal as above.

Ideas & Enhancements

• Depending on your philosophy, you may want to implement a minimum character check as well:

  if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,'')) && selection.length > 4) { //5 char min
  

• You may want to also fidget with adding/modifying text selection with keyboard keys as well. I’ve chosen to pass on that.
• Saving the selection content via AJAX for analytical reasons may not be a bad idea either.

Have any other ideas for improvement? Would you have any use for this on your website(s)?

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

New York Times-Style Text Selection Widget Using MooTools or jQuery

Related posts:

1. Record Text Selections Using MooTools or jQuery AJAX
2. CSS-Tricks — CSS & Text Selection & Highlighting
3. Script & Style Revamp with Submission Favelet
4. Digg-Style Dynamic Share Widget Using MooTools
5. David Walsh on NetTuts: Create a Twitter-Like “Load More” Widget

Go to Source

The MooTools Javascript

window.addEvent('domready',function(){
	//gets the selected text
	var getSelection = function() {
		return $try(
			function() { return window.getSelection(); },
			function() { return document.getSelection(); },
			function() {
					var selection = document.selection && document.selection.createRange();
					if(selection.text) { return selection.text; }
					return false;
		      }
		) || false;
	};
	//event to listen
	var selectRequest = new Request({
		url: 'ajax-selection-copy.php',
		method: 'post'
	});
	$('content-area').addEvent('mouseup',function(e) {
		var selection = getSelection();
		if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
			selectRequest.send('selection=' + encodeURI(selection));
		}
	});
});

The first step is attempting to grab the selected text during the mouseup within our designated container. If we find a text selection we fire an AJAX request to a PHP script which will save the text selection.

The jQuery Javascript

/* attempt to find a text selection */
function getSelected() {
	if(window.getSelection) { return window.getSelection(); }
	else if(document.getSelection) { return document.getSelection(); }
	else {
		var selection = document.selection && document.selection.createRange();
		if(selection.text) { return selection.text; }
		return false;
	}
	return false;
}
/* create sniffer */
$(document).ready(function() {
	$('#content-area').mouseup(function() {
		var selection = getSelected();
		if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
			$.ajax({
				type: 'post',
				url: 'ajax-selection-copy.php',
				data: 'selection=' + encodeURI(selection)
			});
		}
	});
});

The MooTools code translated to jQuery.

The PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' && $selection = trim($_POST['selection'])) {
	mysql_query('INSERT INTO text_selections (selection,date_selected) VALUES(\''.mysql_escape_string(stripslashes($selection)).'\',NOW())');
}

The above PHP code is very primitive. Depending on the setup of your system (PHP Framework, security settings, etc.) you will want to implement additional measures to prevent attacks on this script.

Recording text selections is a great way to discover what topics and/or terms your audience is interested in. You may also want to provide more information on these terms within posts.

What are your thoughts on this? Do you think this is too much like Spyjax? Perfectly OK?

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Record Text Selections Using MooTools or jQuery AJAX

Related posts:

1. jQuery Code Documentation Favelet
2. Animated Ajax Record Deletion Using jQuery
3. MooTools Documentation Search Favelet
4. Animated Ajax Record Deletion Using MooTools
5. Send Email Notifications for Broken Images Using jQuery Ajax

Go to Source

Dear Webmaster,

It’s been over a year since I last wrote. Business is booming for me which reminded me to get in touch with you again. I’m shocked at the advancements you’ve made!

Wow — you’ve gotten acquainted with javascript frameworks! In fact, it appears you’ve gotten so good with the popular javascript frameworks that you’re using multiple in each of your client websites. I see jQuery, MooTools, and Dojo in the same page! Good idea — the more frameworks you add to the page, the more plugins you can add without needing to code any javascript yourself. Well thought-out. I also see that you’re adding javascript frameworks for simple getElementById() selection — why not? I’m sure you’ll use more advanced javascript on your client’s website at some point, so best to include the libraries now.

I also noticed that you’ve completely dropped support of Internet Explorer 6. My favorite touch is the “upgrade your browser” message you’ve added to your client websites, no doubt without their permission. I admire your resolve — why should you go through the hassle of spending an extra hour to make your site work in IE6? Let the visitor suffer and the client lose business — you don’t need the headache of dealing with IE6. Another intelligent philosophy.

You’ve obviously taken a search engine optimization class because I can see loads of keywords in every sentence within the content area. Writing content for the user is overrated — writing content for Google? Brilliant! Who cares if the sentences are so bloated the visitor can’t read them; they wouldn’t have gotten to the client’s website without Google! And I see that despite no search engines still supporting meta keywords, you’re still selling them. The client doesn’t know any better so we’ll keep that between you and I. I also see that your page file names are stuff with 5-10 keywords…genius! Those will most definitely rank highly!

I see you’ve chosen to keep your CSS verbose. Shorthand CSS is clearly a fad that you aren’t going to get tricked into — clever thinking! Of course shorthand CSS is less code but hell, there’s a lot to remember when you use shorthand CSS! And using text-transform to capitalize letters? Please! Why use CSS when you can simply capitalize verbiage with PHP’s or easier yet, type in the text with caps-lock cemented down?

You’ve added your personal Twitter feed to your own website — great! Sure you often cuss in your tweets and post links to inappropriate media but you SOMETIMES post web-relevant tweets which will help you gain clients. What’s also impressive is that you’ve implemented Google Adsense on your website — extra income FTW! Who cares if ads for other web design agencies are shown? They already on your website so they’ve found their desired vendor — you!

Your website also states that you offer no phone support, only email support within limited hours per day. Now that’s an idea based on convenience…not for the customer, but for you. An overwhelming theme with your services. And I understand completely — you have a busy life! It’s not fair that a client call and interrupt anything you’re doing.

As always Webmaster, I appreciate what you do. A respected Senior Web Developer like myself cannot put food on the table without help from people like you. You’re a dying breed, Webmaster. Stay strong my friend — serious Web Developers like me need you out there.

Sincerely,

David Walsh
Senior Web Developer

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

An Open Letter to You, Webmaster II

Related posts:

1. An Open Letter to You, Webmaster
2. My Website Tools
3. Does Open Source Mean You Can’t Bitch?
4. Allow Google Into Password Protected Areas
5. Google Reader, Why Hath Thou Forsaken Me?

Go to Source

One of the reasons that I love Firefox and Webkit-based browsers (Chrome, Safari) is the ability to effortlessly create rounded-corner elements using pure CSS:

.round	{ -moz-border-radius:12px; -webkit-border-radius:12px; }

As you probably already know, IE doesn’t allow you to create rounded corners without using images or endless hacking. Enter the CurvyCorners javascript project. CurvyCorners allows you to quickly create rounded corners within Internet Explorer.

The CurvyCorners Javascript

<!-- SIMPLY INCLUDE THE JS FILE! -->
<script type="text/javascript" src="curvy.corners.trunk.js"></script>

CurvyCorners detects the usage of “-webkit-border-radius” and “moz-border-radius” on DOM elements and works its magic to duplicate the effect in IE using a series of small DIVs. There are no images involved. You may also identify specific elements to apply rounded corners to:

var settings = {
			tl: { radius: 12 },
			tr: { radius: 12 },
			bl: { radius: 12 },
			br: { radius: 12 },
			antiAlias: true
		 };
/* moooo */
$$('.round').each(function(rd) {
	curvyCorners(settings,rd);
});

MooTools + Curvy Corners

CurvyCorners is known to brick your MooTools code. The trunk code fixes those issues.

Don’t let Internet Explorer’s refusal to implement rounded corners via CSS keep your websites from being as dynamic as possible! CurvyCorners helps make rounded corners in IE possible!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Rounded Corners in Internet Explorer

Related posts:

1. Rounded Corners in Webkit
2. Rounded Corners in Mozilla Firefox
3. IE Says “Internet Explorer cannot open the Internet Site ________. Operation Aborted.” I Say “WTF?”
4. Turn Internet Explorer into Chrome with Chrome Frame
5. CSS Image Filters in Internet Explorer

Go to Source

WTF is Event Delegation?

Event delegation is the process of assigning an event listener to a parent for all of its children instead of assigning the same event to every child.

Some Sample HTML

<ul id="link-list">
	<li><a href="http://davidwalsh.name">David Walsh Blog Link 1</a></li>
	<li><a href="http://davidwalsh.name">David Walsh Blog Link 2</a></li>
	<li><a href="http://davidwalsh.name">David Walsh Blog Link 3</a></li>
</ul>

A list with 3 list item elements which contain a link. For the sake of my example, this list will have list items added to it and we want an alert to pop up any time a link within the list is clicked.

The MooTools Javascript Event Delegation Syntax

window.addEvent('domready',function() {
	/* delegate */
	document.id('link-list').addEvent('click:relay(a)', function(e){
		e.stop();
		alert('you clicked a link!');
	});
	/*
		Add link to show event delegation works!
		Notice how we haven't assigned an event to this specific element.
		We already added the event to the list element itself
	*/
	document.id('add-link').addEvent('click',function() {
		var li = new Element('li').inject('link-list');
		var link = new Element('a',{ text:'David Walsh Blog', href:'http://davidwalsh.name'}).inject(li);
	});
});

All you need to do is add :relay to the parent selector and place the “children” match inside the relay pseudo selector. You’ll probably question how :relay works because the “:” syntax is used for pseudo selectors. The Element.Delegation javascript download overwrites the addEvent, removeEvent, and fireEvent methods to accommodate for the :relay syntax.

Event Delegation Replaces…

var links = document.id('link-list').getElements('li');
links.each(function(link) {
	link.addEvent('click',function() {
		//assign actions here
	});
})

Why collect and iterate through elements to add events when you can simply use event delegation?

Event delegation is a great way to avoid repeating the same event assignments for elements within a parent element, especially when you are adding elements into the page dynamically. If you’ve not upgraded to MooTools 1.2.4 yet, I hope this is just the kick in the pants you need!

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Event Delegation with MooTools

Related posts:

1. MooTools Event Delegation
2. Prevent Default Event Actions Using MooTools 1.2
3. Implementing jQuery-Like Event Syntax in MooTools
4. dwClickable: Entire Block Clickable Using MooTools 1.2
5. Animated Ajax Record Deletion Using MooTools

Go to Source

1. I’m Allergic to the Sun

I’m not as hot as Kate Beckinsale but I’m just as allergic to the sun as she was in Underworld. The second I see the sun I sneeze. What’s odd is that I used to play outside endlessly as a child — it wasn’t until I became a programmer that I developed this strange allergy to the sun. Today my skin is very white — a monitor tan is the only tan I get these days.

2. I Get Nosebleeds Often

No true nerd gets their official credentials without proof of frequent nosebleeds. Unprovoked and unexplainable, my nosebleeds just appear out of thin air…literally. These pick up quite a bit during the winter. I’ve broken my nose three times but no way to confirm that being a contributing factor.

3. I Have No Immune System

Most of my “vacation days” (PTO) are used up by illnesses that range from migraine headaches to pneumonia to bronchitis. I have the sniffles 365 days a year. I’ll wake up with a sore throat in mid-June. My body has no desire to fight viruses. A perfect excuse to avoid manual labor and sit behind a monitor inside my condo.

4. I Have No “Real Life” Skills

You know how grown men are supposed to be able to change their oil, cook breakfast for their significant other, and do their own laundry? Yeah, not me. No joke — I tried making eggs a few months ago, messed something up, and my kitchen smelled funky for the rest of the day. I’m a complete train wreck when not located within three feet of a computer.

5. I Have No “Social” Skills; Computer > Human

I’m not what you’d consider a “people person.” I’d rather spend 20 minutes typing an email than 3 minutes on the phone. I simply don’t have that gene. When coworkers say hello to me at work I usually reply with “email me.” I’m charming via email, stone cold in person.

6. I Think I’m Much Smarter Than I Really Am

Like any good egotistical programmer, I feel I’m much smarter than I am. Yeah, I slang terms like “prototypal inheritance”, “event delegation”, and many other impressive programming terms, but can I make eggs? No. Doesn’t matter. Why? Because I can slang terms to people who aren’t computer savvy and help fix email problems. I think I belong in MENSA — most other things I belong in on a seat in the corner of the room with a coloring book and non-toxic crayons.

7. Fashion == null

I cannot stand “bros” that wear $200 jeans and $50 Hollister/Abercrombie/American Eagle T-Shirts. I see a Broseph walk down the sidewalk with white shades and a fro-hawk and choke on my own vomit…..yet I have no problem with wearing one of my 5 MooTools shirts to any event. Wedding? Yes…because MooTools has Class. So simple.

I’m a complete nerd for those scoring at home. The life of a programmer as a tough one…God only knows how I can get through each day.

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

7 Signs I Knew I Was Born To Be a Programmer

Related posts:

1. 8 Ways For A Programmer To Stay Sane
2. 9 Signs You Shouldn’t Hire THAT Web Guy
3. Why Do You Love Web Programming and Design?
4. Startup Schwag: A Web 2.0 Goody Bag
5. Fun With Source Code

Go to Source

Earlier in the week I published a popular article titled Dynamically Create Charts Using MooTools MilkChart and Google Analytics. My post showed you how to use MooTools MilkChart and a splash of PHP to create beautiful charts of Google Analytics data. I was interested in seeing what jQuery had to offer in the charting department. jQuery Flot is what I found.

The PHP

/* defaults */
$month = date('n');
$year = date('Y');

/* submission? */
if($_GET['month'] || $_GET['year']):
	/* cleanse lookups */
	$month = (int) $_GET['month']; if(!$month) { $month = 1; }
	$year = (int) $_GET['year']; if(!$year) { $year = date('Y'); }
	/* retrieve information from google analytics */
	require 'ga/analytics.class.php';
	$analytics = new analytics('youraccount@gmail.com', 'password');
	$analytics->setProfileByName('yourdomain.com');
	$analytics->setMonth($month,$year);
	$visits = $analytics->getVisitors();
	$views = $analytics->getPageviews();
	/* build tables */
	if(count($visits)) {
		foreach($visits as $day=>$visit) {
			$flot_datas_visits[] = '['.$day.','.$visit.']';
			$flot_datas_views[] = '['.$day.','.$views[$day].']';
		}
		$flot_data_visits = '['.implode(',',$flot_datas_visits).']';
		$flot_data_views = '['.implode(',',$flot_datas_views).']';
	}
endif;

The above code is the same as my MooTools post with the exception of the statistics output format. jQuery flot prefers arrays instead of a HTML table.

The jQuery Flot Javascript

$(document).ready(function() {
	var visits = <?php echo $flot_data_visits; ?>;
	var views = <?php echo $flot_data_views; ?>;
	$('#placeholder').css({
		height: '400px',
		width: '600px'
	});
	$.plot($('#placeholder'),[
			{ label: 'Visits', data: visits },
			{ label: 'Pageviews', data: views }
		],{
	        lines: { show: true },
	        points: { show: true },
	        grid: { backgroundColor: '#fffaff' }
	});
});

The above is a simple example of using jQuery Flot’s plot method. Simply provide the placeholder and statistical data from the PHP above.

Comparison

• jQuery Flot provides IE support via ExCanvas, which is great.
• MilkChart allows for pie charts while Flot doesn’t. I prefer pie charts to other chart types.
• MilkChart allows for easy creation of charts from HTML tables (good for accessibility) while jQuery Flot requires an array syntax.

What do you think? Which method do you prefer?

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Dynamically Create Charts Using jQuery Flot and Google Analytics

Related posts:

1. Dynamically Create Charts Using MooTools MilkChart and Google Analytics
2. Retrieve Google Analytics Visits and PageViews with PHP
3. Secure (SSL) Google Analytics
4. Track Ajax Link Clicks Using Google Analytics
5. Track File Downloads in Google Analytics Using MooTools

Go to Source

The HTML

This is question 1


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae....

This is question 2


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae....

Our MooTools javascript will be reliant upon a simple HTML structure of H3s followed by DIVs.

The CSS

#faqs h3	{ cursor:pointer; }
#faqs h3.active	{ color:#d74646; }
#faqs div   {  }

You see I have very little CSS above — just the bare necessities. It’s up to you to make the content even more sexy. Maybe add some tweening on the content DIV when they show and hide.

The MooTools Javascript

window.addEvent('domready',function() {
	$$('#faqs h3').each(function(header,i) {
		var state = false, answer = header.getNext('div');
		answer.slide('out');
		header.addEvent('click',function(e) {
			state = !state;
			answer.slide(state ? 'in' : 'out');
			if(state) {
				header.addClass('active');
			}
			else {
				header.removeClass('active');
			}
		});
	});
});

We start by grabbing all of the H3 tags within the designated parent element. We then:

1. Cycle through each heading (the “question”)
2. Grab the next DIV and consider it our “content” container (the “answer”)
3. Slide the answer out of view
4. Add a click event to the question which will toggle the display of the answer.

Another Take

The above code is accessible but sacrifices a clean effect during normal page load because you see a “flicker” of all of the answers displaying before javascript hides them. If accessibility is less of a concern and you want a smoother effect, consider adding the following CSS and javascript:

#faqs div	{ height:0; overflow:hidden; }

…and the javascript…

window.addEvent('domready',function() {
	$$('#faqs h3').each(function(header,i) {
		var state = false;
		var answer = header.getNext('div');
		answer.slide('out');
		header.addEvent('click',function(e) {
			state = !state;
			answer.slide(state ? 'in' : 'out');
			if(state) {
				header.addClass('active');
			}
			else {
				header.removeClass('active');
			}
		});
		answer.setStyles({
			overflow: '',
			height: 'auto'
		});
	});
});

This effect is much smoother.

So what do you think? Would you use this on a customer site?

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Fancy FAQs with MooTools Sliders: Version 2

Related posts:

1. Flashy FAQs Using MooTools Sliders
2. Fancy Navigation with MooTools Javascript
3. Implementing Basic and Fancy Show/Hide in MooTools 1.2
4. Facebook Sliders With Mootools and CSS – Now With Image Generation!
5. Build a Toggling Announcement Slider Using MooTools 1.2

Go to Source

Aaron Newton made a great request to me last week: why not make my MooTools Documentation Bookmarklet function more like the New York Time’s text selection widget. NYT’s text selection widget listens for text selection and presents the user with a “search” icon they may click on to learn more about that term. I’ve tried to answer that challenge — not in bookmarklet form but in website widget form.

The Sample HTML

<div id="content-area">
	.htaccess AJAX Apache / Server APIs Blog Bookmarking / Social Books Browsers CSS / Design Google Guest Blogger Hosting / Domain Javascript jQuery
	link() Microsoft MooTools MySQL Optimization PHP Poll rand() Security Shell Theory / Ideas Usability / Accessibility XML / XHTML
	This blog is targeted toward all levels of web designers and developers. All web topics are discussed, including CSS, Javascript (MooTools and jQuery), PHP, and more.
</div>

The above code is next to meaningless per the widget — I simply want to illustrate the area I’d like it to work in has an ID of content-area.

The MooTools Javascript

window.addEvent('domready',function(){
	(function($) {
		//gets the selected text
		var getSelection = function() {
			return $try(
				function() { return window.getSelection(); },
				function() { return document.getSelection(); },
				function() {
			        var selection = document.selection && document.selection.createRange();
					if(selection.text) { return selection.text; }
					return false;
			      }
			) || false;
		};
		//vars
		var url = 'http://davidwalsh.name/?s={term}', selectionImage;
		//event to listen
		$('content-area').addEvent('mouseup',function(e) {
			var selection = getSelection();
			if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
				//ajax here { http://davidwalsh.name/text-selection-ajax }
				if(!selectionImage) {
					selectionImage = new Element('a',{
						href: url,
						opacity:0,
						id: 'selection-image',
						title: 'Click here to learn more about this term',
						target: '_blank',
						fade: { duration:50 }
					}).inject(document.body,'top');
				}
				//handle the every-time event
				//alert(selection);
				selectionImage.set('href',url.replace('{term}',encodeURI(selection))).setStyles({
					top: e.page.y - 30,	//offsets
					left: e.page.x - 13 //offsets
				}).fade('in');
			}
		});

		$(document.body).addEvent('mousedown',function() {
			//hider
			if(selectionImage) { selectionImage.fade('out'); }
		});

	})(document.id);
});

During the mouseup event within the selected container (content-area), we determine if any text has been highlighted. If so, we:

1. Insert the A element if it has not yet been injected into the body.
2. Change the A element’s URL to accommodate for the new search term.
3. Position the element to at an offset position above where the mouse goes up.

During every mousedown event we hide the A element.

The jQuery Javascript

/* attempt to find a text selection */
function getSelected() {
	if(window.getSelection) { return window.getSelection(); }
	else if(document.getSelection) { return document.getSelection(); }
	else {
		var selection = document.selection && document.selection.createRange();
		if(selection.text) { return selection.text; }
		return false;
	}
	return false;
}
/* create sniffer */
$(document).ready(function() {
	var url = 'http://davidwalsh.name/?s={term}', selectionImage;
	$('#content-area').mouseup(function(e) {
		var selection = getSelected();
		if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
			//ajax here { http://davidwalsh.name/text-selection-ajax }
			if(!selectionImage) {
				selectionImage = $('<a>').attr({
					href: url,
					title: 'Click here to learn more about this term',
					target: '_blank',
					id: 'selection-image'
				}).hide();
				$(document.body).append(selectionImage);
			}
			selectionImage.attr('href',url.replace('{term}',encodeURI(selection))).css({
				top: e.pageY - 30,	//offsets
				left: e.pageX - 13 //offsets
			}).fadeIn();
		}
	});
	$(document.body).mousedown(function() {
		if(selectionImage) { selectionImage.fadeOut(); }
	});
});

Follows the same principal as above.

Ideas & Enhancements

• Depending on your philosophy, you may want to implement a minimum character check as well:

  if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,'')) && selection.length > 4) { //5 char min
  

• You may want to also fidget with adding/modifying text selection with keyboard keys as well. I’ve chosen to pass on that.
• Saving the selection content via AJAX for analytical reasons may not be a bad idea either.

Have any other ideas for improvement? Would you have any use for this on your website(s)?

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

New York Times-Style Text Selection Widget Using MooTools or jQuery

Related posts:

1. Record Text Selections Using MooTools or jQuery AJAX
2. CSS-Tricks — CSS & Text Selection & Highlighting
3. Script & Style Revamp with Submission Favelet
4. Digg-Style Dynamic Share Widget Using MooTools
5. David Walsh on NetTuts: Create a Twitter-Like “Load More” Widget

Go to Source

The MooTools Javascript

window.addEvent('domready',function(){
	//gets the selected text
	var getSelection = function() {
		return $try(
			function() { return window.getSelection(); },
			function() { return document.getSelection(); },
			function() {
					var selection = document.selection && document.selection.createRange();
					if(selection.text) { return selection.text; }
					return false;
		      }
		) || false;
	};
	//event to listen
	var selectRequest = new Request({
		url: 'ajax-selection-copy.php',
		method: 'post'
	});
	$('content-area').addEvent('mouseup',function(e) {
		var selection = getSelection();
		if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
			selectRequest.send('selection=' + encodeURI(selection));
		}
	});
});

The first step is attempting to grab the selected text during the mouseup within our designated container. If we find a text selection we fire an AJAX request to a PHP script which will save the text selection.

The jQuery Javascript

/* attempt to find a text selection */
function getSelected() {
	if(window.getSelection) { return window.getSelection(); }
	else if(document.getSelection) { return document.getSelection(); }
	else {
		var selection = document.selection && document.selection.createRange();
		if(selection.text) { return selection.text; }
		return false;
	}
	return false;
}
/* create sniffer */
$(document).ready(function() {
	$('#content-area').mouseup(function() {
		var selection = getSelected();
		if(selection && (selection = new String(selection).replace(/^\s+|\s+$/g,''))) {
			$.ajax({
				type: 'post',
				url: 'ajax-selection-copy.php',
				data: 'selection=' + encodeURI(selection)
			});
		}
	});
});

The MooTools code translated to jQuery.

The PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest' && $selection = trim($_POST['selection'])) {
	mysql_query('INSERT INTO text_selections (selection,date_selected) VALUES(\''.mysql_escape_string(stripslashes($selection)).'\',NOW())');
}

The above PHP code is very primitive. Depending on the setup of your system (PHP Framework, security settings, etc.) you will want to implement additional measures to prevent attacks on this script.

Recording text selections is a great way to discover what topics and/or terms your audience is interested in. You may also want to provide more information on these terms within posts.

What are your thoughts on this? Do you think this is too much like Spyjax? Perfectly OK?

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Record Text Selections Using MooTools or jQuery AJAX

Related posts:

1. Animated Ajax Record Deletion Using jQuery
2. Animated Ajax Record Deletion Using MooTools
3. google.load(): Utilize Google’s Ajax Libraries API
4. Form Element AJAX Spinner Attachment Using jQuery
5. Send Email Notifications for Broken Images Using jQuery Ajax

Go to Source

Dear Webmaster,

It’s been over a year since I last wrote. Business is booming for me which reminded me to get in touch with you again. I’m shocked at the advancements you’ve made!

Wow — you’ve gotten acquainted with javascript frameworks! In fact, it appears you’ve gotten so good with the popular javascript frameworks that you’re using multiple in each of your client websites. I see jQuery, MooTools, and Dojo in the same page! Good idea — the more frameworks you add to the page, the more plugins you can add without needing to code any javascript yourself. Well thought-out. I also see that you’re adding javascript frameworks for simple getElementById() selection — why not? I’m sure you’ll use more advanced javascript on your client’s website at some point, so best to include the libraries now.

I also noticed that you’ve completely dropped support of Internet Explorer 6. My favorite touch is the “upgrade your browser” message you’ve added to your client websites, no doubt without their permission. I admire your resolve — why should you go through the hassle of spending an extra hour to make your site work in IE6? Let the visitor suffer and the client lose business — you don’t need the headache of dealing with IE6. Another intelligent philosophy.

You’ve obviously taken a search engine optimization class because I can see loads of keywords in every sentence within the content area. Writing content for the user is overrated — writing content for Google? Brilliant! Who cares if the sentences are so bloated the visitor can’t read them; they wouldn’t have gotten to the client’s website without Google! And I see that despite no search engines still supporting meta keywords, you’re still selling them. The client doesn’t know any better so we’ll keep that between you and I. I also see that your page file names are stuff with 5-10 keywords…genius! Those will most definitely rank highly!

I see you’ve chosen to keep your CSS verbose. Shorthand CSS is clearly a fad that you aren’t going to get tricked into — clever thinking! Of course shorthand CSS is less code but hell, there’s a lot to remember when you use shorthand CSS! And using text-transform to capitalize letters? Please! Why use CSS when you can simply capitalize verbiage with PHP’s or easier yet, type in the text with caps-lock cemented down?

You’ve added your personal Twitter feed to your own website — great! Sure you often cuss in your tweets and post links to inappropriate media but you SOMETIMES post web-relevant tweets which will help you gain clients. What’s also impressive is that you’ve implemented Google Adsense on your website — extra income FTW! Who cares if ads for other web design agencies are shown? They already on your website so they’ve found their desired vendor — you!

Your website also states that you offer no phone support, only email support within limited hours per day. Now that’s an idea based on convenience…not for the customer, but for you. An overwhelming theme with your services. And I understand completely — you have a busy life! It’s not fair that a client call and interrupt anything you’re doing.

As always Webmaster, I appreciate what you do. A respected Senior Web Developer like myself cannot put food on the table without help from people like you. You’re a dying breed, Webmaster. Stay strong my friend — serious Web Developers like me need you out there.

Sincerely,

David Walsh
Senior Web Developer

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

An Open Letter to You, Webmaster II

Related posts:

1. An Open Letter to You, Webmaster
2. Does Open Source Mean You Can’t Bitch?
3. I Want You II
4. Wanna Be Me? I Want You!
5. Mailbag Q & A II Answers

Go to Source

One of the reasons that I love Firefox and Webkit-based browsers (Chrome, Safari) is the ability to effortlessly create rounded-corner elements using pure CSS:

.round	{ -moz-border-radius:12px; -webkit-border-radius:12px; }

As you probably already know, IE doesn’t allow you to create rounded corners without using images or endless hacking. Enter the CurvyCorners javascript project. CurvyCorners allows you to quickly create rounded corners within Internet Explorer.

The CurvyCorners Javascript

<!-- SIMPLY INCLUDE THE JS FILE! -->
<script type="text/javascript" src="curvy.corners.trunk.js"></script>

CurvyCorners detects the usage of “-webkit-border-radius” and “moz-border-radius” on DOM elements and works its magic to duplicate the effect in IE using a series of small DIVs. There are no images involved. You may also identify specific elements to apply rounded corners to:

var settings = {
			tl: { radius: 12 },
			tr: { radius: 12 },
			bl: { radius: 12 },
			br: { radius: 12 },
			antiAlias: true
		 };
/* moooo */
$$('.round').each(function(rd) {
	curvyCorners(settings,rd);
});

MooTools + Curvy Corners

CurvyCorners is known to brick your MooTools code. The trunk code fixes those issues.

Don’t let Internet Explorer’s refusal to implement rounded corners via CSS keep your websites from being as dynamic as possible! CurvyCorners helps make rounded corners in IE possible!

Send article as PDF to:

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Rounded Corners in Internet Explorer

Related posts:

1. Rounded Corners in Webkit
2. Rounded Corners in Mozilla Firefox
3. IE Says “Internet Explorer cannot open the Internet Site ________. Operation Aborted.” I Say “WTF?”
4. CSS Image Filters in Internet Explorer
5. Turn Internet Explorer into Chrome with Chrome Frame

Go to Source

Events play a huge role in javascript. I can’t name one website I’ve created in the past two years that hasn’t used javascript event handling on some level. Ask yourself: how often do I inject elements into the DOM and not add an event to them? For me it’s very rare. For this reason I’m proud and excited for the release of MooTools 1.2.4’s Event.Delegation code.

WTF is Event Delegation?

Event delegation is the process of assigning an event listener to a parent for all of its children instead of assigning the same event to every child.

Some Sample HTML

<ul id="link-list">
	<li><a href="http://davidwalsh.name">David Walsh Blog Link 1</a></li>
	<li><a href="http://davidwalsh.name">David Walsh Blog Link 2</a></li>
	<li><a href="http://davidwalsh.name">David Walsh Blog Link 3</a></li>
</ul>

A list with 3 list item elements which contain a link. For the sake of my example, this list will have list items added to it and we want an alert to pop up any time a link within the list is clicked.

The MooTools Javascript Event Delegation Syntax

window.addEvent('domready',function() {
	/* delegate */
	document.id('link-list').addEvent('click:relay(a)', function(e){
		e.stop();
		alert('you clicked a link!');
	});
	/*
		Add link to show event delegation works!
		Notice how we haven't assigned an event to this specific element.
		We already added the event to the list element itself
	*/
	document.id('add-link').addEvent('click',function() {
		var li = new Element('li').inject('link-list');
		var link = new Element('a',{ text:'David Walsh Blog', href:'http://davidwalsh.name'}).inject(li);
	});
});

All you need to do is add :relay to the parent selector and place the “children” match inside the relay pseudo selector. You’ll probably question how :relay works because the “:” syntax is used for pseudo selectors. The Element.Delegation javascript download overwrites the addEvent, removeEvent, and fireEvent methods to accommodate for the :relay syntax.

Event Delegation Replaces…

var links = document.id('link-list').getElements('li');
links.each(function(link) {
	link.addEvent('click',function() {
		//assign actions here
	});
})

Why collect and iterate through elements to add events when you can simply use event delegation?

Event delegation is a great way to avoid repeating the same event assignments for elements within a parent element, especially when you are adding elements into the page dynamically. If you’ve not upgraded to MooTools 1.2.4 yet, I hope this is just the kick in the pants you need!

Send article as PDF to:

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Event Delegation with MooTools

Related posts:

1. MooTools Event Delegation
2. Prevent Default Event Actions Using MooTools 1.2
3. Implementing jQuery-Like Event Syntax in MooTools
4. MooTools Text Flipping
5. Simple MooTools Event / Class Binding

Go to Source

This will probably shock you but I’m a programmer. Not a designer, not a copywriter, just a simple programmer. I’ve done some self analysis and realized that becoming a programmer wasn’t a choice — it was destiny. The following is my logic for why I became a programmer.

1. I’m Allergic to the Sun

I’m not as hot as Kate Beckinsale but I’m just as allergic to the sun as she was in Underworld. The second I see the sun I sneeze. What’s odd is that I used to play outside endlessly as a child — it wasn’t until I became a programmer that I developed this strange allergy to the sun. Today my skin is very white — a monitor tan is the only tan I get these days.

2. I Get Nosebleeds Often

No true nerd gets their official credentials without proof of frequent nosebleeds. Unprovoked and unexplainable, my nosebleeds just appear out of thin air…literally. These pick up quite a bit during the winter. I’ve broken my nose three times but no way to confirm that being a contributing factor.

3. I Have No Immune System

Most of my “vacation days” (PTO) are used up by illnesses that range from migraine headaches to pneumonia to bronchitis. I have the sniffles 365 days a year. I’ll wake up with a sore throat in mid-June. My body has no desire to fight viruses. A perfect excuse to avoid manual labor and sit behind a monitor inside my condo.

4. I Have No “Real Life” Skills

You know how grown men are supposed to be able to change their oil, cook breakfast for their significant other, and do their own laundry? Yeah, not me. No joke — I tried making eggs a few months ago, messed something up, and my kitchen smelled funky for the rest of the day. I’m a complete train wreck when not located within three feet of a computer.

5. I Have No “Social” Skills; Computer > Human

I’m not what you’d consider a “people person.” I’d rather spend 20 minutes typing an email than 3 minutes on the phone. I simply don’t have that gene. When coworkers say hello to me at work I usually reply with “email me.” I’m charming via email, stone cold in person.

6. I Think I’m Much Smarter Than I Really Am

Like any good egotistical programmer, I feel I’m much smarter than I am. Yeah, I slang terms like “prototypal inheritance”, “event delegation”, and many other impressive programming terms, but can I make eggs? No. Doesn’t matter. Why? Because I can slang terms to people who aren’t computer savvy and help fix email problems. I think I belong in MENSA — most other things I belong in on a seat in the corner of the room with a coloring book and non-toxic crayons.

7. Fashion == null

I cannot stand “bros” that wear $200 jeans and $50 Hollister/Abercrombie/American Eagle T-Shirts. I see a Broseph walk down the sidewalk with white shades and a fro-hawk and choke on my own vomit…..yet I have no problem with wearing one of my 5 MooTools shirts to any event. Wedding? Yes…because MooTools has Class. So simple.

I’m a complete nerd for those scoring at home. The life of a programmer as a tough one…God only knows how I can get through each day.

Send article as PDF to:

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

7 Signs I Knew I Was Born To Be a Programmer

Related posts:

1. 8 Ways For A Programmer To Stay Sane
2. 9 Signs You Shouldn’t Hire THAT Web Guy
3. 5 Simple Ways Programmers and Designers Should Give Back
4. Codelish – A Programmer’s Life Language
5. August Mailbag Q & A

Go to Source

Earlier in the week I published a popular article titled Dynamically Create Charts Using MooTools MilkChart and Google Analytics. My post showed you how to use MooTools MilkChart and a splash of PHP to create beautiful charts of Google Analytics data. I was interested in seeing what jQuery had to offer in the charting department. jQuery Flot is what I found.

The PHP

/* defaults */
$month = date('n');
$year = date('Y');

/* submission? */
if($_GET['month'] || $_GET['year']):
	/* cleanse lookups */
	$month = (int) $_GET['month']; if(!$month) { $month = 1; }
	$year = (int) $_GET['year']; if(!$year) { $year = date('Y'); }
	/* retrieve information from google analytics */
	require 'ga/analytics.class.php';
	$analytics = new analytics('youraccount@gmail.com', 'password');
	$analytics->setProfileByName('yourdomain.com');
	$analytics->setMonth($month,$year);
	$visits = $analytics->getVisitors();
	$views = $analytics->getPageviews();
	/* build tables */
	if(count($visits)) {
		foreach($visits as $day=>$visit) {
			$flot_datas_visits[] = '['.$day.','.$visit.']';
			$flot_datas_views[] = '['.$day.','.$views[$day].']';
		}
		$flot_data_visits = '['.implode(',',$flot_datas_visits).']';
		$flot_data_views = '['.implode(',',$flot_datas_views).']';
	}
endif;

The above code is the same as my MooTools post with the exception of the statistics output format. jQuery flot prefers arrays instead of a HTML table.

The jQuery Flot Javascript

$(document).ready(function() {
	var visits = <?php echo $flot_data_visits; ?>;
	var views = <?php echo $flot_data_views; ?>;
	$('#placeholder').css({
		height: '400px',
		width: '600px'
	});
	$.plot($('#placeholder'),[
			{ label: 'Visits', data: visits },
			{ label: 'Pageviews', data: views }
		],{
	        lines: { show: true },
	        points: { show: true },
	        grid: { backgroundColor: '#fffaff' }
	});
});

The above is a simple example of using jQuery Flot’s plot method. Simply provide the placeholder and statistical data from the PHP above.

Comparison

• jQuery Flot provides IE support via ExCanvas, which is great.
• MilkChart allows for pie charts while Flot doesn’t. I prefer pie charts to other chart types.
• MilkChart allows for easy creation of charts from HTML tables (good for accessibility) while jQuery Flot requires an array syntax.

What do you think? Which method do you prefer?

Send article as PDF to:

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Dynamically Create Charts Using jQuery Flot and Google Analytics

Related posts:

1. Dynamically Create Charts Using MooTools MilkChart and Google Analytics
2. Retrieve Google Analytics Visits and PageViews with PHP
3. Track File Downloads in Google Analytics Using MooTools
4. Secure (SSL) Google Analytics
5. Using MooTools to Instruct Google Analytics to Track Outbound Links

Go to Source

A little over a year ago I authored a post titled Fancy FAQs with MooTools Sliders. My post detailed a method of taking boring FAQs and making them more robust using the world’s best javascript framework: MooTools. I’ve taken some time to improve my original code for optimal performance and functionality.

The HTML

This is question 1


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae....

This is question 2


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae....

Our MooTools javascript will be reliant upon a simple HTML structure of H3s followed by DIVs.

The CSS

#faqs h3	{ cursor:pointer; }
#faqs h3.active	{ color:#d74646; }
#faqs div   {  }

You see I have very little CSS above — just the bare necessities. It’s up to you to make the content even more sexy. Maybe add some tweening on the content DIV when they show and hide.

The MooTools Javascript

window.addEvent('domready',function() {
	$$('#faqs h3').each(function(header,i) {
		var state = false, answer = header.getNext('div');
		answer.slide('out');
		header.addEvent('click',function(e) {
			state = !state;
			answer.slide(state ? 'in' : 'out');
			if(state) {
				header.addClass('active');
			}
			else {
				header.removeClass('active');
			}
		});
	});
});

We start by grabbing all of the H3 tags within the designated parent element. We then:

1. Cycle through each heading (the “question”)
2. Grab the next DIV and consider it our “content” container (the “answer”)
3. Slide the answer out of view
4. Add a click event to the question which will toggle the display of the answer.

Another Take

The above code is accessible but sacrifices a clean effect during normal page load because you see a “flicker” of all of the answers displaying before javascript hides them. If accessibility is less of a concern and you want a smoother effect, consider adding the following CSS and javascript:

#faqs div	{ height:0; overflow:hidden; }

…and the javascript…

window.addEvent('domready',function() {
	$$('#faqs h3').each(function(header,i) {
		var state = false;
		var answer = header.getNext('div');
		answer.slide('out');
		header.addEvent('click',function(e) {
			state = !state;
			answer.slide(state ? 'in' : 'out');
			if(state) {
				header.addClass('active');
			}
			else {
				header.removeClass('active');
			}
		});
		answer.setStyles({
			overflow: '',
			height: 'auto'
		});
	});
});

This effect is much smoother.

So what do you think? Would you use this on a customer site?

Send article as PDF to:

Don’t forget to follow me on Twitter and be sure to visit Script & Style for the best Javascript and CSS articles around!

Sponsor the David Walsh Blog and get your brand in front of several thousand users per day!

Fancy FAQs with MooTools Sliders: Version 2

Related posts:

1. WordPress-Style Comment Controls Using MooTools or jQuery
2. Digg-Style Dynamic Share Widget Using MooTools
3. Flashy FAQs Using MooTools Sliders
4. Introducing MooTools ScrollSpy
5. Sexy Opacity Animation with MooTools or jQuery

Go to Source