Image reflection is a great way to subtly spice up an image.  The first method of creating these reflections was baking them right into the images themselves.  Within the past few years, we’ve introduced JavaScript strategies and CANVAS alternatives to achieve image reflections without having to modify original images.  The minds behind WebKit have their own idea behind image reflection:  pure CSS.

The Webkit CSS

The -webkit-box-reflect property accepts a value in the following format:

-webkit-box-reflect: 
	<direction> /* above|below|left|right */ 	
	<offset>    /* pixel value start offset from image */
	<mask-box-image> /* http://webkit.org/blog/181/css-masks/ */

A sample usage of -webkit-box-reflect looks like:

.reflectBelow	{ 
	-webkit-box-reflect: below 0
    -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white)); 
}

An involved CSS value but well worth the work. The gradient is linear from left top to left bottom from transparent to white, showing half (0.5 the image).

WebKit first implemented CSS reflections in 2008 and, to my knowledge, no other browsers have implemented a similar API. I find that frustrating but image reflection isn’t a priority so I can’t complain too much.  I am glad, however, that this is just one of several CSS enhancements given to us by the developers of WebKit!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Image Reflections with CSS

No related posts.

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:

• overflow-x:  Should be set to -webkit-marquee
• -webkit-marquee-direction:  The direction of the marquee.
• -webkit-marquee-increment:  The size by which to move.
• -webkit-marquee-repetition:  The  number of times the marquee should repeat.
• -webkit-marquee-speed:  The speed at which to move the ext.
• -webkit-marquee-style:  The effect which the marquee should function.

CSS Marquee Usage

.marquee {  
	overflow-x: -webkit-marquee;
	-webkit-marquee-direction: backwards;
	-webkit-marquee-style: slide;
	-webkit-marquee-speed: fast;
	-webkit-marquee-increment: large;
	-webkit-marquee-repetition: 6;
	font-size:1.4em;
}

The example uses each of the marquee properties given above and should be straight forward.  If you choose to use WebKit’s marquee, experiment with the settings to make sure the marquee does what you want.  When it doesn’t, fix it with JavaScript…or question why you’re using a marquee at all.

No word yet on when the WebKit team plans to implement a CSS counter.  I’m sure I’ll do a tutorial on it when the time comes.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: WebKit Marquee CSS: Bringin’ Sexy Back

Related posts:

1. WebKit-Specific Style: -webkit-appearance
2. Sexy Link Transformations with CSS
3. Rounded Corners in Webkit
4. Sexy Album Art with MooTools or jQuery
5. Firefox 3′s Internal Rendering CSS

Possible -webkit-appearance Values

• checkbox
• radio
• push-button
• square-button
• button
• button-bevel
• listbox
• listitem
• menulist
• menulist-button
• menulist-text
• menulist-textfield
• scrollbarbutton-up
• scrollbarbutton-down
• scrollbarbutton-left
• scrollbarbutton-right
• scrollbartrack-horizontal
• scrollbartrack-vertical
• scrollbarthumb-horizontal
• scrollbarthumb-vertical
• scrollbargripper-horizontal
• scrollbargripper-vertical
• slider-horizontal
• slider-vertical
• sliderthumb-horizontal
• sliderthumb-vertical
• caret
• searchfield
• searchfield-decoration
• searchfield-results-decoration
• searchfield-results-button
• searchfield-cancel-button
• textfield
• textarea

The HTML

<span class="webkit-me">My Span Tag</span>

Just a SPAN tag, right?  We’ll see about that.

The CSS

.webkit-me { -webkit-appearance:push-button; }

Now my span looks like a button.  Weird, huh?  It can get worse:

.webkit-me { -webkit-appearance:checkbox; }

That’s right…my SPAN tag now looks like checkbox.  Weird.

Be sure to check out my demo — I’ve got each -webkit-appearance setting represented.  Some elements show no change but some look downright odd!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: WebKit-Specific Style: -webkit-appearance

Related posts:

1. WebKit Marquee CSS: Bringin’ Sexy Back
2. Rounded Corners in Webkit
3. Create Twitter-Style Buttons with the Dojo Toolkit
4. Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript
5. MooTools: Set Style Per Media

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.

Querying For Geolocation Information

if(navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function(position) {
		alert('Your lat-long is: ' + position.coords.latitude + ' / ' + position.coords.longitude);
		alert('You live in ' + position.address.city + ', ' + position.address.state)
	});
}

The navigator.geolocation.getCurrentPosition method is the driving force behind retrieving location details. Once you call this method (providing it a function which will execute if your request is successful), the browser will ask the user if they will allow you to retrieve their location information:

When the user allows the website to retrieve their location information, Firefox fetches the information, providing you a position object with two very useful attributes: position.coords and position.address. position.coords gives you latitude and longitude while position.address gives you streetNumber, street, premises, city, county, region, country, countryCode, and postalCode. Firefox may even take a picture of your user through his/her window soon. (Editor’s note: I completely made that up)

Of course most of this functionality is only available within Firefox. Safari will retrieve the user’s latitude and longitude but that’s the extent of WebKit’s support. I look forward to bigger and better things from the W3C’s Geolocation API in the future!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Using Firefox’s Geolocation API

Related posts:

1. iPhone & iPod Detection Using JavaScript
2. “Favorite” Link — How To Create a Bookmark Link
3. My Firefox Plugins
4. Using HTML5 Web Storage
5. Detecting Google Chrome Using JavaScript

The META HTML Tag

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!--320-->

That’s as easy as it gets. According to Mozilla, mobile browsers are generally set to a size of 320 or 480. The maximum scale keeps the scale settings when the user switches from portrait to landscape view.

If you’d like to see this in action, grab your phone/mobile browser and hit:

http://davidwalsh.name/zoom-mobile-browsers

I’m not huge fan of preventing the user from enhancing their experience but your web application may need to stay a given size. Now you know how to do so!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Prevent Page Zooming in Mobile Browsers

Related posts:

1. Automatically Refresh a Page Using JavaScript or Meta Tags
2. iPhone
3. META Refresh vs. JavaScript Refresh
4. Page Peel Effect Using MooTools
5. Sexy Link Transformations with CSS

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:

var img = new Element('img',{
	alt: this.title ? this.title.get('html') : 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'
	}
});
img.set('src',this.options.url).inject(this.messageBox); //for ie

Not too surprisingly that worked. The reason my modification worked is that image was being pulled from cache as soon as the SRC attribute was set, thus “beating” the event assignment to the punch. Keep this in mind if you run into onLoad issues with your images.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Image onLoad Event + JavaScript Issue with Internet Explorer

Related posts:

1. CSS Image Filters in Internet Explorer
2. IE Says “Internet Explorer cannot open the Internet Site ________. Operation Aborted.” I Say “WTF?”
3. Prevent Internet Explorer’s Default Image Dragging Action
4. DomReady Event Methods in JavaScript Frameworks
5. Rounded Corners in Internet Explorer

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.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: 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. Creating a JavaScript “Set As Homepage” Link

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!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: 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. Image onLoad Event + JavaScript Issue with Internet Explorer
5. Turn Internet Explorer into Chrome with Chrome Frame

I’m just going to cut to the chase: Internet Explorer is rubbish. I don’t care what version you throw at me — 6, 7, 8…rubbish. Apparently Google agrees with me because they’ve released Google Chrome Frame, a browser plugin and META tag system that allows you to turn IE installs into a virtual “Chrome” install so that IE will support HTML5′s canvas tag and take advantage of JavaScript performance improvements featured in Google Chrome.

Step 1: The Plugin

The user must first download the Chrome Frame plugin at the Google Chrome Frame page. The install works on XP and Vista operating systems, IE browser versions 6, 7, and 8.

Step 2: The HTML META tag

To activate Chromified Internet Explorer you must add the following META tag to your pages:

<meta http-equiv="X-UA-Compatible" content="chrome=1" />

That’s it! Check out a demo here:

More Details

Jump over to the Google Chrome Frame page to get more details about this project. There’s a great video featuring Alex Russell (of Dojo fame) where he explains the reason for Chrome Frame and usage.

Our Savior?

I don’t believe so. There are two big problems I see:

• Most IT teams are keeping their businesses employees in the dark world of IE6. Chrome Frame would be a great solution for employees looking to get with the 90′s but how many businesses give their employees proper permissions to install applications? No many.
• Users who don’t know the difference wont put an effort into downloading this plugin (i.e. my grandmother doesn’t even know what a browser is, much less IE and why it’s bad).

Thoughts?

I’m very interested in seeing what you all think of this. Crap? Gold? Let me know what you think!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Turn Internet Explorer into Chrome with Chrome Frame

Related posts:

1. First Impressions of Google Chrome
2. IE Says “Internet Explorer cannot open the Internet Site ________. Operation Aborted.” I Say “WTF?”
3. Rounded Corners in Internet Explorer
4. CSS Image Filters in Internet Explorer
5. Detecting Google Chrome Using JavaScript

If you follow me on Twitter or talk to me my IRC channel (#davidwalshblog on FreeNode), you know that I’ve been anticipating my birthday because BDay was iDay — iPhone day, that is. My birthday has come and gone and I now possess a slick iPhone 3Gs. I absolutely love it so far but just like my limited Mac knowledge, I don’t know which iPhone apps I need to get.

Here’s What I’ve Got So Far

I was bright enough to grab these:

• Colloquy (mobiwalsh ftw!)
• Dialer
• Tweetie
• ESPN ScoreCenter (I’m a guy)
• Pandora
• AroundMe
• DIRECTV
• Facebook
• Remote
• Shazam (which is 2 for 2 to this point)
• Lightsaber (couldn’t pass it up)
• TMZ (I’m a celebrity gossip addict)
• GolfCard

HELP!!

You have more experience with your iPhone than I do. Please share with me any tips you have, any apps you tried and love, or apps that you think will ruin my life.

I’m excited to hear and learn from you!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: iPhone Hath Cometh

Related posts:

1. iPhone
2. iPhone & iPod Detection Using JavaScript
3. iPhone-Style Passwords Using MooTools PassShark
4. iPhone Click Effect Using MooTools or jQuery
5. Follow Script & Style on Twitter!