31 March 2010

Transparent PNG for IE6

IE6 is a bear when it comes to transparent PNG images. In a perfect world, we'd build an app and not worry about the older browsers -- ensuring that the functionality is there, though the layout and graphics might not work right. However, with anywhere from 10 - 20% of users still browsing with IE6 as of this writing, we'd like to have pages look reasonably well for that browser as well.

The AnythingSlider library, by the incomparable Chris Coyier, uses transparent PNGs for the back/forward buttons. They look beautiful and blend so well into the component. If you view the control in IE6, however, you'll immediately see the non-transparent backgrounds of the PNG images.

Not to worry: Angus Turnbull has written the IE PNG Alpha Fix, which is a CSS HTC behavior. Once you download the code and placed it on your site, you can use an IE conditional statement like this to fix the problem in IE6:

<!--[if lte IE 6]>
<style type="text/css" media="screen">
img, div, a.arrow { behavior: url("iepngfix.htc") }
</style>
<![endif]-->

Ensure you have the correct URL to where you've placed the HTC file on your site. This particular CSS rule says that the behavior should be applied to all IMG and DIV tags, as well as any anchor tag with the style class "arrow" (used by the AnythingSlider to display the back/forward PNGs).

27 March 2010

12 Great jQuery Plugins to Fully Control Styling of Your HTML Form Elements

http://www.tripwiremagazine.com/2010/03/12-great-jquery-plugins-to-fully-control-styling-of-your-html-form-elements.html

How to Create a Sponsor Flip Wall using jQuery

http://www.webappers.com/2010/03/26/how-to-create-a-sponsor-flip-wall-using-jquery/

30 Amazing JQuery Navigation Menu Examples

http://djdesignerlab.com/2010/03/26/30-amazing-jquery-navigation-menu-examples/

30 Cool Free Futuristic Fonts To Work

http://aext.net/2010/03/cool-free-futuristic-fonts/

Presenting the Great New Features of jQuery UI 1.8

http://www.1stwebdesigner.com/development/presenting-the-great-new-features-of-jquery-ui-1-8/

Progressive Enhancement: What It Is and How To Use It

http://www.onextrapixel.com/2010/03/26/progressive-enhancement-what-it-is-and-how-to-use-it/

I hate IE6!

This wasn't always the case; back in 2001, IE6 was the cutting edge. Back then, we had Netscape 4.x and few others, so IE was the best for web development. You could reference any object on the page using its ID and show/hide, apply CSS on-the-fly, and use fancy menus and DHTML.

Those days have long passed. Today, IE6 is a thorn in the side of most web developers who wish to build cross-browser, cross-platform sites and apps. A lot of people are still using it (anywhere from ~10 - 20% of surfers), so we can't drop it completely when developing for the web. However, that won't stop us from disliking, and even hating, this ancient browser.

24 March 2010

A Guide To Typography On The Web

http://pelfusion.com/fonts/a-guide-to-typography-on-the-web/

One player to rule them all: An MP4 player solution for iPhone and any browser

For a recent project, I needed a video player that would play nice with the iPhone. Part of the solution was provided by the amazing html5media JavaScript library. However, if you'd like to encode only one video format, MP4, and get it working on Opera 10.5+, it will require some more work.

The html5media library is able to detect and replace the <video> tag with the Flowplayer Flash player for almost all browsers; for some reason, it can't do the same for Opera 10.5. And as this page explains, the HTML5 <video> tag on Opera requires an OGV video; it can't play MP4.

Here's a solution that lets you play MP4 video on the latest iPhone, Firefox 3.6, IE 6 - 8, IE Platform Preview 9, Opera 10.5, Safari 4, and Chrome 4.1. I don't know if it's the most elegant, but it gets the job done.

First, download the free Flowplayer library. Unzip the package and then start an HTML document:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Video Test</title>
<script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js">
</script>
<script type="text/javascript" src="js/flowplayer-3.1.4.min.js"></script>
<script type="text/javascript">
// Required for Opera to display the MP4 video.
// Removes take the <video> and <source> elements
// from the DOM, but keeps the other children of
// the <video> tag. In this case, it retains the
// <a> tag which will be used for the Flowplayer.
function fallback(video) {
while (video.firstChild) {
if (video.firstChild instanceof HTMLSourceElement) {
video.removeChild(video.firstChild);
} else {
video.parentNode.insertBefore(video.firstChild, video);
}
}
video.parentNode.removeChild(video);
fixForOpera();
}

// Places a Flowplayer Flash player into the item with ID "player".
function fixForOpera(){
flowplayer("player","js/flowplayer-3.1.5.swf");
}
</script>
</head>
<body >
<video id="vid" width="352" height="264" poster="cat.jpg" controls preload>
<source src="cat.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
onerror="fallback(this.parentNode)"></source>
<a
href="cat.mp4"
style="display:block;width:352px;height:264px"
id="player">
</a>
</video>
</body>
</html>

The trick is to catch the error thrown by the <video> tag (using its onerror attribute) and remove the tag (using the fallback() function), ensuring that we keep the anchor tag that will hold the Flowplayer object. The fallback() function also calls fixForOpera(), which places the Flowplayer object into the anchor tag with ID player.

This player works for the browsers listed and the iPhone.

18 March 2010

How to put an HTML element on top of a Flash movie

http://robertnyman.com/2007/01/29/how-to-put-an-html-element-on-top-of-a-flash-movie/

Ensure you read the comments. This technique might not work in all browsers. Recommended method of placing objects atop Flash:
<param name="wmode" value="transparent">
<embed wmode="transparent" (…)></embed>

08 March 2010

What to expect from HTML 5

http://www.infoworld.com/d/developer-world/what-expect-html5-611:
Among Web developers, anticipation is mounting for HTML 5, the overhaul of the Web markup language currently under way at the Worldwide Web Consortium (W3C). For many, the revamping is long overdue. HTML hasn't had a proper upgrade in more than a decade. In fact, the last markup language to win W3C Recommendation status -- the final stage of the Web standards process -- was XHTML 1.1 in 2001.

Best CSS "sticky footer" implementation

http://www.cssstickyfooter.com/

Deleting uploaded files from MediaWiki

We had a request this morning for the deletion of a file a user had uploaded to our internal MediaWiki site. There didn't seem to be any straightforward [Delete] button anywhere. But where there's a will, there's a way. Here's how to delete an uploaded file:
  1. Ensure you have "sysop" permissions and you're logged in.
  2. Select "Special Pages" from the toolbox on the left-hand side of the screen.
  3. Click on "Unused files" or "File list," depending on whether you want to delete an unused file or see all the files uploaded to the wiki.
  4. Find the file you wish to delete.
  5. Click the "(desc)" link that appears before the filename.
  6. Now click "(Delete all revisions of this file)".
  7. Confirm your choice and provide a reason for the deletion.
That's all! I wish it was more intuitive, but there you have it :)

42 Photoshop Tutorials Created in 2010

http://acrisdesign.com/2010/03/42-photoshop-tutorials-created-in-2010/

100+ Freebies Resources Blogs Roundup

http://blog.karachicorner.com/2010/03/100-freebies-resources-blogs-roundup/