jQuery: Novice to Ninja from Sitepoint

Posted in Books JavaScript on 11 March 2010 | Comments [1]

I am reading a new jQuery book from Sitepoint at the moment. It’s called jQuery: Novice to Ninja and it promises to take you from beginner to expert. If you have copied and pasted jQuery code up to now without thinking or knowing how it works, this book could be for you! The book covers a whole range of examples so it’s also very good for intermediates. I have used some of the code from the first chapters already!

The book weighs in at just over 400 pages and is divided into nine chapters that start with the basics of jQuery, and its use for selecting, decorating and enhancing your HTML, and moving on to chapters about, for example, animations, images and slideshows, menus, tabs, and tooltips, and Ajax. The book also includes a final chapter on creating a jQuery plugin and advanced methods for extending jQuery.

I’ll post a more in depth review when I have read through the whole book.

Downloads: Get sample chapters from JQuery Novice to Ninja with this free download • The code archive from the book is also available.

Websites with left and right arrow keyboard navigation

Posted in JavaScript Web design on 5 March 2010 | Comments [2]

Over the last week or so I have come across several websites that allow users to navigate using the left and right arrow keys. I think this is an interesting approach and I really like this method of navigating a website. Perhaps it’s just me but I like using keyboard shortcuts (because they seem to allow me to do things faster) …. so it’s interesting to see websites using the left and right keys in this way. Here are the website examples I have spotted that use this method.

• Crush + Lovely. This is a fantastic design and the left and right keys enable you to scroll between the various content sections. Try it and see!
• Pictory is a photo story website and it uses left and right keyboard navigation in a similar way.
• Thinking for a Living uses left and right keys for horizontal scrolling between sections/pages.
• OnSugar uses a left-right arrow key method to navigate between images in a gallery.

There is an adding keyboard navigation tutorial at jQuery for Designers which explains how a similar effect is achieved with an image slider. The jQuery Tools website has Scrollable which enables a content slider to be navigated with left-right keys.

There may be disadvantages to this method but I’m keen to find out more about it so if you know of other websites that use this approach, let me know.

jQuery links for light reading

Posted in JavaScript Links on 10 February 2010 | Comments

Some recent articles on jQuery from around the web:

• I blogged about multi-column layouts with CSS3 but the Columnizer jQuery plugin means you can create newspaper-style layouts that work in all browsers.
• jQuery pageSlide provides a way to reveal (slide in) secondary page content; an interesting approach I think
• SlideDeck is a horizontal slider that provides a way of highlighting content in hidden panels but with search engine visibility.
• jQuery MagicLine Navigation is an animated hover effect for navigation links.
• Twitter-like dynamic character count for textareas and input fields

Using JavaScript for enhancing CSS support in Internet Explorer

Posted in CSS JavaScript on 18 January 2010 | Comments [3]

One of the subjects that I have been keeping an eye on recently is the use of JavaScript to enhance support for more advanced CSS methods in Internet Explorer (IE). We all know that, despite some big improvements, Internet Explorer 8 does not support some of the newer CSS properties used by Firefox and Safari, which tend to lead the way in this respect.

Read more ...

Smart columns with jQuery

Posted in CSS JavaScript on 18 November 2009 | Comments [2]

I have been reading about a clever way of displaying list items called Smart Columns with CSS and jQuery by Soh Tanaka. Check out the demo and resize the browser window. As the window width changes, each row of list items will adapt to the window size by moving on to another row and/or becoming bigger or smaller. Cool!

This method is being used on a new website called The Freelance Feed which is a website that collects articles about freelancing.