Mehigh

Internet Explorer & Elements with an ID get a matching global variable in JS

Object doesn't support this property or method

If you’re getting an odd behavior on your scripts in Internet Explorer, try adjusting their name (for example by adjusting their names with a unique prefix) just to make sure that there isn’t any element in the page you’re working on with the same ID as your variable name.

Object doesn't support this property or method

If you want to read a much elaborate explanation, go check out Rick Strahl’s post here: Internet Explorer Global Variable Blow ups, but the above should get you going in no time (and help you avoid some headaches).

Read More

Adding wmode transparent to WordPress 3 media embeds

In case you have a website that uses dropdowns you probably noticed the dropdown panel might get under the flash media (like Youtube video embeds). The fix to this is to setup the wmode attribue to transparent… but how do we do it in WordPress?

Since WordPress 2.9 has enabled us to easily embed videos ( codex.wordpress.org/Embeds ), it also means we don’t have the ability to change the embed code (to add the wmode transparent for example), and that’s why we have to rely on applying a filter that does that for us.

Simply paste the following at the beginning of your theme’s functions.php (after <?php ), and the wmode attribute will be setup automatically:

function add_video_wmode_transparent($html, $url, $attr) {
   if (strpos($html, "<embed src=" ) !== false) {
    	return str_replace('</param><embed', '</param><param name="wmode" value="transparent"></param><embed wmode="transparent" ', $html);
   } else {
        return $html;
   }
}
add_filter('embed_oembed_html', 'add_video_wmode_transparent', 10, 3);

Update

As Theo pointed out, the videos can come in in iframes instead of object elements. To make the videos transparent in those cases as well, here’s the updated snippet:

function add_video_wmode_transparent($html, $url, $attr) {

if ( strpos( $html, "<embed src=" ) !== false )
   { return str_replace('</param><embed', '</param><param name="wmode" value="opaque"></param><embed wmode="opaque" ', $html); }
elseif ( strpos ( $html, 'feature=oembed' ) !== false )
   { return str_replace( 'feature=oembed', 'feature=oembed&wmode=opaque', $html ); }
else
   { return $html; }
}
add_filter( 'embed_oembed_html', 'add_video_wmode_transparent', 10, 3);

A demo video embedded using built-in oEmbed:

Read More

TR Backgrounds & Fixing IE

I was struggling to get some cross-browser rounded corners zebra table rows… but since the table required vertical-align:middle… applying the top right AND bottom right corners was impossible… up until I found out that CSS background-image on TR actually works cross-browser :)
It works out of the box for most standards-compliant browsers… and a minor tweak is required for our older IE7 to kick in and apply it as well: at position:relative; to the table row.

Read More

Badminton Relaxation

Badminton – this is a game I find being really relaxing… but with the right ‘tools’.
Some low-quality racquets might blow the fun out of it, but the good news is that decent racquets can be found easily in the 20$ range… the fun you have playing with them: invaluable.

Just got a Badminton Basic Kit from Head (cheers to Dia_Fantasy for recommending these to me)… and I played with them until I could hardly see the shuttles in the night :D

Bottom line: Go out and play !

Read More

Font resize detection

We all crashed into the problem where a website’s layout gets ruined when zooming in or out the font-size in the browser…

You can read a really good article from ALA giving a nice insight with regards to what approach should you take in the early development phases towards avoiding various zooming problems: http://www.alistapart.com/articles/fontresizing/

Most complex designs don’t allow so much flexibility such that you can make things really scalable via the CSS, so our most used option will probably be a touch of Javascript.
As on most of my projects jQuery is a standard, I chose to use a little jQuery plug-in that does the job of detecting the font-resize event really well:

http://wellstyled.com/en/javascript-onfontresize-jquery-plugin/

Once you caught the event you can do any kind of magic :)

What approaches did you take to solve such situations ?

Read More