We all joke about the days of Web yesteryear.  You remember them:  stupid animated GIFs (flames and “coming soon” images, most notably), lame counters, guestbooks, applets, etc.  Another “feature” we thought we had gotten rid of was the marquee.  The marquee was a rudimentary, javascript-like effect to move text from one side of a block to another.  I was recently looking at WebKit’s CSS specs and found that Safari has implemented CSS marquees.

The CSS Format

.marquee {  
	overflow-x: -webkit-marquee;
	-webkit-marquee-direction: ahead|auto|backwards|down|forwards|inherit|left|reverse|right|up;
	-webkit-marquee-increment: small|medium|large;
	-webkit-marquee-repetition: {number};
	-webkit-marquee-speed: slow|normal|fast;
	-webkit-marquee-style: alternate|inherit|none|scroll|slide;
	font-size:1.4em;
}

There are five pieces to the marquee puzzle:

I was recently scoping out the horrid source code of the Google homepage when I noticed the “Google Search” and “I’m Feeling Lucky” buttons had a style definition I hadn’t seen before:  -webkit-appearance.  The value assigned to the style was “push-button.”  They are buttons so that makes sense but I was curious as to the possible values available for that style.  What I found was that there are a *ton* and that you can set any HTML element to look like a completely different element.

Possible -webkit-appearance Values

• checkbox
• radio
• push-button
• square-button
• button
• button-bevel

One interesting aspect of web development is Geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user’s location. Let’s examine how you can use Geolocation within Firefox to get location details down to the street!

Detecting Browser Geolocation Capabilities

if(navigator.geolocation) {
	//w00t!
}
else {
	alert('No soup for you!  Your browser does not support this feature');
}

They key to detecting Geolocation within your browser is the navigator.geolocation object.

Ever since I got my iPhone, I’ve been more agreeable in going places that my fiancee wants to go. It’s not because I have any interest in checking out women’s shoes, looking at flowers, or that type of stuff — it’s because my iPhone lets me surf the web the whole time…or until my iPhone’s tiny battery dies. It wasn’t until recently that I noticed that some sites don’t allow the user to zoom in and out of a page. After some research I found that preventing page zooming was as easy as adding a META tag to the page.

I was recently coding an application that would inject an image into the page and then execute a given function when the image’s onLoad event fires. My code was working everywhere except Internet Explorer. That wasn’t all together shocking initially but the fact that even IE8 was failing to the fire the onLoad event was discouraging. Here’s what my code looked like:

var img = new Element('img',{
	alt: this.title ? this.title.get('html') : this.options.url,
	src: this.options.url,
	events: {
		error: function() {
			this.messageBox.set('html',this.options.errorMessage);
			img.dispose();
		}.bind(this),
		load: function() {
			img.setStyle('display','');
			this.unfade();
			if(!this.footer) {
				img.setStyle('cursor','pointer').addEvent('click',this.close.bind(this));
			}
		}.bind(this)
	},
	styles: {
		display: 'none'
	}
}).inject(this.messageBox);

On a hunch I detached the “src” assignment and coded that as a separate statement: