Resources: Code

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.

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;
}

If you’re even too lazy to visit http://border-radius.com, 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;

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. http://yourdomain.co.nz/extract.php) and tick the options you want. Kaboom!

Download the PHP Archive Extractor

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">

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;
}

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 https://mail.google.com/mail/u/0/)
  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!

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" />

Share a link on Facebook to a webpage that hasn’t been developed very thoroughly and you will notice that Facebook pulls in an outdated and (often) irrelevant thumbnail, title and blurb. If you add these three tags you can customise what Facebook shows when a link is shared. Just drop it in the of your pages and modify as you would like it to read.

<meta property="og:title" content="title" />
<meta property="og:description" content="description" />
<meta property="og:image" content="thumbnail_image" />

Flush the Facebook Cache

27 September 2012

Don’t you hate it when you post a link or video on Facebook and it decides to show your old pictures or thinks that your newly-launched website is all about “Under Construction, coming soon!”? Well I do, and as a web-developer it is important to understand and resolve the quirks and tricks of working with social media networks.

There is a nifty tool known as the ‘Facebook De-linter‘, which does make sense. Effectively it shows you what your website looks like, in Facebook’s eyes. But most importantly it also updates the Facebook cache to reflect your newest page content. So if you’re having trouble getting Facebook to recognise your new web content, throw your website into the De-linter!

Visit the Facebook De-linter.

1 2

Let's work together