CSS, Firefox, Internet Explorer, JQuery, MySQL, PHP

Zune Quickplay Inspired JQuery Gallery with Tooltips

Hello and welcome I have been off recently working on something new for my video site.

I thought I would produce some sort of tutorial on here so others can understand how to customize their JQuery galleries. I will be starting to talk you through the process of producing the end product in a couple of days but I thought I would post the initial screen shot now so you can all see what the end product will look like:

Zune Inspired JQuery Gallery
Zune Inspired JQuery Gallery

What we are looking at is the big gray strip across the middle of the page, ignore the header or footer. There are three parts to the gallery, “hot” (popular) videos, default spotlight videos and editors pick. The JQuery gallery will scroll between each part when one the links is clicked and the links will change accordingly (I could have done it all by normal AJAX but I wanted the scroll effect so meh).

The sections themselves are broken down into videos. There is one main highlight video which has information about it (length and rating) and four smaller image representing other videos. When the user hovers over one of the images and tooltip will show displaying the title of the video.

In this tutorial I will be using, HTML, CSS, JQuery (Scroll and AJAX), PHP and MySQL and I will be checking this product in IE7 (IE8 is emulated as IE7) and Firefox (just the two browsers I have at hand, no IE is not running under Wine, it’s in a VM :P).

One last tip before I say bye for a couple of days whilst I get the finishing touches done, this tutorial is really only for professionals I would recommend the newer users stick to the JQuery gallery post I uploaded some time ago. This tutorial will be using the full Monty.

CSS, Internet Explorer

IE Button Fix – Fix those stupid button widths

I know this hack is old and everything but I thought I’d repost this on here since I forgot how to do this today and it took ages for me to find out how to do this again. This hack basically stops buttons from expanding their widths in IE to stupid levels and is standards mode compliant.

/* IE6 */
* html input {
overflow: visible;
width: 1px;

/* IE7 */
*+html input {
overflow: visible;

Internet Explorer

Internet Explorer Compatibility Mode

Are you fed up with that damn Internet Explorer compatibility button? Well look no further!

Just add this to the top of your page and all your problems will be solved. IE 8 will run as IE 7.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Some say this does not truly emulate IE7 but so far I have not found any differences other than some minor JavaScript recoding to over come a more secure version of IE 7.