Responsive Images with PHP and jQuery

Responsive Web Design is quite a hot topic at the moment and I'm only just starting to dip my toe in the area. It started gaining popularity with the Responsive Web Design article from A List Apart Article by Ethan Marcotte who has a book pending on the subject by A Book Apart. I'll definitely pick up a copy when it's released on the 7th June as the other books in the publishing series are useful and great to have on the shelf.

The main crux of Responsive Web Design is using CSS media queries to switch the layout depending on the screen size. A site can be optimized and look great on a mobile device, a tablet and on a PC without affecting content or by crazily creating subdomains for mobile only versions of the site. In this article I'm going to go whizz through the topic and concentrate on responsive images and the solutions currently in place and finally go through my own custom solution using PHP and jQuery.

Ajax Delete with CakePHP and jQuery

In this post I'm going to describe how you can use Ajax using the jQuery javascript library to delete items without a refresh. This is quite an easy enhancement to achieve and will help with the usability of your applications. It isn't CakePHP specific but in this example I'm using the framework to delete items from the main index.

I'm a big fan of progressive enhancement and so the delete action will still work without Javascript enabled but this will improve the user experience a little bit by keeping the user on the same page and will display a smooth fade animation to get rid of the table row.

Using Ajax to Populate a Select Box in CakePHP

My apologies for the lack of articles recently, after completing the monster Dvd application I've been pretty busy with regular work and a few freelance gigs. In a project I've been working on I had to dynamically grab some data and then use it in a select box, I thought this would be a great example to go through since its quite a common process in web development.

In this article I'm going to be using jQuery as my Javascript library, I know that CakePHP has built in support for script.aculo.us but its something I've never used and jQuery will do the job just fine.

jQuery Word/Character Counter

Just a quick jQuery post that calculates the number of words/characters in a form input field. Needed one of these recently for a work project and its really easily to implement and works like a charm

Compressing jQuery / Javascript with PHP

This is a quick little tip that I've been using on my most recent projects to significantly reduce the size of Javascript code. This comes in handy when using frameworks and although jQuery (my framework of choice) is quite small to begin some libraries like Prototype combined with script.aculo.us come in at quite a large file size.

Using this small modification I reduced the size of jQuery along with my own Javascript code from 55kb to around 16kb with one less trip to the server. All of the compression is done on the server side using PHP so if a visitor's browser does not support G-Zip then they will just receive the original uncompressed files.

jQuery Accordion Menu

This is my first article about the wonderful jQuery Javascript library, its been my library of choice for around a year and it's ideal for web development because of it's small size and powerful selector methods.

I'm going to go through the process of creating an expandable/collapsible navigation menu that has a series of top level links with each having a number of sub links. When a top level link is clicked the menu expands and shows the related sub links. An example of which is shown below:

• Heading
  • Sub Heading
  • Sub Heading
  • Sub Heading
• Heading
  • Sub Heading
  • Sub Heading
  • Sub Heading
• Heading
  • Sub Heading
  • Sub Heading
  • Sub Heading