Snippets

Text input non-editable

If you ever need to make an input field or textarea non-editable the readonly attribute comes in very handy.

When the readonly attribute is present in the markup, it specifies that the user will not be able to modify the value. However the user will still be able to tab to it and copy the text.

Sass Clearfix Mixin

There are a few ways to implement the clearfix hack but the following Sass mixin has been in my toolbox for the last year thanks to this article on Nicolas Gallaghers blog.

Group Posts by Date

If you publish posts multiple times per day sometimes there is a need to wrap posts by date. This is common amongst lots of link bloggers.

If you run a WordPress driven site thankfully this is super easy with one slight addition inside your loop.

Converts pixels to EMs with Sass

If you like using pixel values but understand that having your fonts set in EMs works better, especially when tackling responsive web design then this little Sass function will become super handy.

This function automatically converts pixels to EMs so that you don’t have to manually calculate them.

URL as a Sass Variable

Do you ever find yourself trying to remember the URL path of you images directory? Well with Sass you can quickly add the path to the desired location and just use the variable throughout your code. Sass to the rescue.

All you need to do is declare the variable and then use the interpolation syntax when you reference it.

Remove Trackbacks from Comment Count in WordPress

Are you finding that your comment count is not the correct number? Adjusting the settings in the discussions screen still doesn’t fix it. Well, this little snippet of PHP added to your functions.php file should fix that.

Focus on Input with JQuery

This is very simple and can also be done with HTML5 ‘autofocus’ which I would recommend if you can. If for some reason you need to control it with JavaScript, utalising jQuery’s ‘.focus()’ event handler will get you out of trouble.

iPhone 5 Media Query

Apples iPhone 5 has a larger display compared to its previous versions. If you need to target the iPhone 5 specifically then this CSS media query should get you out of trouble.

Scroll to position with jQuery

If you need to scroll to a specific location on the page this little custom jQuery function can help you out. This snippet will help you scroll to a particular section based on the element you choose.

Current screen width indicator

Super handy snippet to include in your site while developing responsive websites. It is a screen width indicator that is very helpful for knowing when to add breakpoints to your CSS file.