Tagged as HTML

Friday, November 16, 2012 Improving your HTML and CSS with SMACSS

I'm a big fan of frameworks and I'm always looking for new ways to improve the structure and maintainability of my code. I recently discovered SMACSS (Scalable and Modular Architecture for CSS) which is an approach to web development created by Jonathan Snook. At a high level SMACSS aims to change the way we turn designs into code. Instead of working in a "page mentality" ...

Thursday, November 1, 2012 Using HTML5 local storage and jQuery to persist form data

The HTML5 Local Storage API provides the ability to persist named key/value pairs locally within a users browser. This means that the data stored in Local Storage is still there even if a user closes their browser, deletes their cookies or turns off their machine/device. For a more detailed explanation of HTML5 Local Storage read Christian Heilmann's 'Wrapping Things Nicely with HTML5 L...

Saturday, March 3, 2012 Creating a 'Like' button with jQuery

Here is an example of how to create a simple 'Like' button using jQuery. When the 'Like' button for a record is clicked the number of likes will increment by 1 and the list will be resorted to ensure the most popular records appear first. Show Example When generating the initial page you'll need to ensure the records are sorted by the number of likes in descending or...

Friday, January 6, 2012 Adding a row to a table containing form fields using jQuery

The following example shows how to add a new row to a table containing form fields using jQuery. Firstly, create a table and a button that will add the new table row when clicked. <form> <table> <thead> <tr> <th scope="col">Track</th> <th scope="col">Album</th> <th scope...

Sunday, January 1, 2012 My new year's resolutions for 2012

Beyond making an effort to be happier, nicer to people and less stressed I am not a big fan of new year's resolutions. However, from a programming point of view, there are a few things I plan to do this year. I've listed them below so I can review my achievements (or lack of) in a year's time. Read the following books which I purchased recently from Sitepoint: jQuery: No...

Thursday, December 15, 2011 Making a telephone number clickable on Android

To make a telephone number clickable on an Android device simply wrap it in an HTML <a> tag. When the link is clicked the device's phone will be activated. Don't forget to prepend 'tel:' to the link. <a href="tel:+440000000000">00000 000000</a> ...

Friday, December 2, 2011 Integrating Gravatar with your blog

Today I integrated Gravatar with my blog so, for commenters who have a Gravatar account, you'll now see an avatar next to their blog post comments. As long as you have a commenter's email address it's very easy to display their avatar. In Coldfusion simply convert the commenter's email address to lower case, hash it, convert it to lower case again and add it to an IMG ta...

Wednesday, November 16, 2011 Making your web site's navigation mobile friendly

I am currently working on a project to convert a web site to a responsive design. The site's navigation has a lot of links arranged in list format so, rather than displaying the navigation in list format on mobile devices which would push the page content off the screen, I thought I would use jQuery to convert the navigation to a select list if a mobile device is being used. Here's how ...