Browsers Tutorials
Image Reflections with CSS
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.
WebKit Marquee CSS: Bringin’ Sexy Back
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.
WebKit-Specific Style: -webkit-appearance
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.
Using Firefox’s Geolocation API
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!
Prevent Page Zooming in Mobile Browsers
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.
Image onLoad Event + JavaScript Issue with Internet Explorer
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:
Test For Popup Blocker Using JavaScript
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.
Rounded Corners in Internet Explorer
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:
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.
iPhone Hath Cometh
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.