Resources: Code

Kill IE's Compatibility View

27 September 2012

Internet Explorer’s Compatibility View is the bane of my existance when I am working on a front-end build. Instead of trying to fix bugs for an additional two versions of IE (yikes!), just drop one of these codes in the of your page to force IE to render your page as IE7 or IE8.

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

I have shifted into Google Apps to have a tinker, streamline my work and to generally learn how it all works. At PlasticStudio, we also run Google Apps and we sell it out to our clients, so it makes sense to know it inside out!
You too can get Google Apps for free. The only downside is no support and ads when you run the free version, however I have figured a way around this. Check out the steps below:

  1. Get your mitts on Google Chrome browser (Download Google Chrome)
  2. Download the application called Stylebot (Download Stylebot for Google Chrome)
  3. Create a new style rule for Google Apps Mail. To do this, open Stylebot in your Google Chrome Apps and click ‘Add’.
  4. For the URL, copy the address of your Google Apps Mail (by default it will be
  5. Paste this code in the body area:
    .BltHke.nH.oy8Mbf .mq, .nH .nH .mq, .nH .nH.PS {
    display: none;
  6. Save, refresh your Google Apps Mail, and you’re ad-free with Google Apps!

Quickly and easily remove mouse interactivity of a HTML element with this nifty piece of CSS code. This is the same as ActionScript 3.0′s “mouseEnabled = false”.

.anElement {
        pointer-events: none;

Disable zoom on mobile devices

29 September 0012

Getting snazzy with some resizable-layout websites? The last thing you want is for mobile devices to assume a zoom to show the full page, so drop in this meta tag into your header and zoom will be disabled! Tested on iPhone 4 and Samsung Galaxy SII.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no">

You are managing a webserver and you only have FTP access, and you need to extract a large .zip file (for example WordPress, Joomla, plugins, etc) which would take forever to upload as an extracted folder. Can’t convince your domain manager to give you SSH access? You don’t need it with this nifty script I have discovered (and modified to make it nice and user-friendly).

To use it, just upload extract.php into your folder beside the .zip file in question, navigate to the php file (ie. and tick the options you want. Kaboom!

Download the PHP Archive Extractor

If you’re even too lazy to visit, then use the code below for your beautiful CSS3 rounded corners. Remember if you want to round some corners and not others, just follow standard CSS shorthand (ie. 3px 3px 0px 0px).

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

How can you make a text link with your nice new styles behave like a button, instead of a selectable inline link? CSS, again, as the answer!

It is super easy to use javascript and CSS to simulate a button (for, say, a slider navigation or fake page navigation). But how do you get rid of that text selection when someone gets lazy with releasing the mouse? Use this css fool:

#element {
       -webkit-user-select: none;
       -khtml-user-select: none;
       -moz-user-select: none;
       -o-user-select: none;
       user-select: none;

I was recently building a jQuery-based slider for our upcoming website re-launch and needed to identify a series of elements numerically. Naturally I decided a number that auto-incremented would be ideal, so I build a testing stage to do just that.

After about 2 hours of testing and debugging to try find out why it wasn’t working, I changed the numerical ids to “block-one”, “block-two”, etc. This solved everything! It turns out that CSS does not allow elements’ ids to begin with a number. But classes are.

Who knew? Now you do. HTML ids cannot start with a number.

1 2

Let's work together