nooshu - Matt Hobbs' Web Development Blog

Kneeling on the shoulders of giants

Category: jQuery

Posts relating to my favourite JavaScript library, jQuery.

Headspace2 JavaScript error

Update: An update of Headspace2 has just been released that seems to solve this issue as well as a few others.

After updating to WordPress 3.0 (yay!) I decided to check the plug-ins that I’ve written to see if they still worked in version 3.0; to my dismay Post Thesaurus had stopped working… nooooo! Not good! A quick scan using Firebug revealed the issue: the Headspace2 plug-in.

Headspace2 is a superb plug-in that allows you to tweak the SEO potential of your site. There are tonnes of options available; All In One SEO is easier to use, but I prefer the flexibility of Headspace2. The problem was occurring in the headspace-tags.js file:

1
2
3
$(get_tag_element()).val() is undefined
/wp-content/plugins/headspace2/js/headspace-tags.js?ver=3.6.32
Line 76

This error was stopping the rest of the JavaScript on a post page from firing (hence breaking Post Thesaurus). Looking at line 76 of headspace-tags.js you will see:

1
2
3
4
5
// Highlights headspace tags using the WordPress tag field as source
function highlight_tags () {
    var words = $(get_tag_element()).val().toLowerCase().split(',');
    //...
}

The code seems to be falling over when there are no tags, so I just added a ternary operator which checks the array length first.

1
2
3
var words;
var wordArray = $(get_tag_element());
(wordArray.length) ? words = $(get_tag_element()).val().toLowerCase().split(',') : words = [];

If there are no tags create an empty array, else run the usual code. Adding this code fixed the issue and Post Thesaurus works again. Phew! Panic over. I’m sure this error will be picked up by the developer straight away and fixed in the next update.

Recommended books for Front End Web Developers

So you’ve decided to persue a career as a Front End Web Developer (or you already are one and are looking for something new to read); smashing! The life of a Front End Developer is never dull… (cough) okay sometimes it is but there are certainly some exciting technologies out there to play with, especially at the moment with HTML5 and CSS3 gaining popularity.

Like with anything, you need to have a solid foundation of knowledge to build upon when it comes to new technologies, sometimes it’s a little dull but it will pay dividends in the future. Once you have the basic knowledge the world is you web browser. So here are a list of five books I’ve read in the past that I’ve found particularity helpful.

Looking for new Front End books to read, you could try one of these.

DOM Scripting

The reason I’ve put this book first is simply because it’s one of the best technical books I’ve ever read. The way it’s written is simple to understand and concise. All the way through the book it explains not only what you are doing but also why you’re doing it, and why you should also follow the same methodology.

If you are a complete beginner to JavaScript and the DOM this book will get you up and running and understanding in just a couple of chapters. Now some may say “oh I don’t need to know this anymore, that’s what JavaScript librarys are for”, but in my opinion that’s a dangerous road to go down. If ever your chosen library doesn’t do what you need, or if you can’t use a library for whatever reason; then you’re in trouble.

If you know the basics of the DOM and how to manipulate it using JavaScript, you’re much more likely to solve any issues you encounter and you’ll have a much better understanding of what the libraries are actually doing.

Author: Jeremy Keith (Amazon).

Eric Meyer on CSS

There simply couldn’t be a review of front end development books without a book from the wizard of CSS, Eric Meyer. Eric has been a major part of the CSS community for many years; helping to educate developers in the proper usage of CSS and how it can make development so (so!) much easier. I had the pleasure of attending a 2 day workshop of his in London a few years back, and still use what I learnt there on a day to day basis.

‘Eric Meyer on CSS’ will teach you some of the advanced techniques involved in using CSS in a practical manner. You take a plain website built using tables, clean up the mark-up and layer on features and functionality using CSS over the various chapters; so rather than just getting a list of properties and selectors to read about, you actually get to see a live project changing over time.

Be warned, the book isn’t for absolute beginners, you do really need to know the basics of HTML and CSS to get the most out of it. Not to worry though, all the information you need to learn the basics of many different languages including HTML and CSS is available online at w3schools. You don’t have to stick to HTML and CSS, they also have JavaScript and the DOM if you’re feeling adventurous.

Author: Eric Meyer (Amazon)

JavaScript – The Definitive Guide

The very large book you can see in the image above is ‘JavaScript – The Definitive Guide’, and it really is a definitive guide. It has of 900+ pages of wonderful JavaScript! Now I wouldn’t expect anyone to read it page by page (although that’s what I did), but it’s defiantly a book you should have in your tool kit for reference. It goes over pretty much all aspects of JavaScript you will ever use and even though it is quite technical it isn’t hard to follow; with plenty of examples and explanation of the code.

Again there’s an argument for do you need to know JavaScript if you just intend on using a library. Well I guess that up to you, but I personally don’t feel comfortable using any sort of framework / abstraction without having at least some understanding of the language it is built on.

Author: David Flanagon (Amazon)

Learning jQuery

So assuming you know about HTML, CSS and JavaScript it’s time to learn one of the many JavaScript libraries available. Now I agree with Christian Heilmann on a point he made at Full Frontal 2009 (I think it was Christian who made it), it doesn’t matter what library you use, as long as you use one!

‘Learning jQuery’ is a fantastic book that will take you through all aspects of jQuery, from setting up and writing basic code to Ajax and writing your own jQuery plug-ins. If you know how to use CSS to select parts of the DOM then jQuery will be simple for you to pick up and use. The book is filled with practical examples and applications, all using best practice methods.

I only had one slight gripe with the book while reading it; I found the font for the code blocks was slightly too big, so you tended to get a lot of wrapping on large code blocks. In terms of the content though, it really is one book that is a must read if you use jQuery or want to use jQuery in your projects.

Author: Jonathan Chaffer & Karl Swedberg (Amazon)

PHP Solutions

Now I know what you may be thinking, PHP isn’t a front end language, it’s a server side language. That is very true, but one thing I can guarantee is one day you will have to integrate the front end templates you’ve built into a server side language; be that PHP, .Net, JSP, Java etc. As I’ve mainly worked with open source technologies, PHP is primarily what I integrate into.

‘PHP Solutions’ is another excellent Friends of Ed book that takes you through lots of practical uses of PHP that you can use straight out of the book. It covers subjects such as setting up your server and includes, to online galleries and security. You may not use any of the functionality it covers since most frameworks and CMS’s have the functionality built in; but it will give you an understanding of how PHP works as a language which in turn will help you when it comes to integration.

Author: David Powers (Amazon)

So there you have 5 books I’d recommend to any Front End Web Developer looking to expand their client-side knowledge. Leave a comment if there are any books you’d recommend and I’ll take a look and add it to my Amazon wishlist.

CodeColorer Auto Expanding Code

Just quick post on a small feature I’ve just added to the site which I thought I’d share. It’s a slight addition to the CodeColourer plug-in for WordPress. CodeColourer formats and colourises code blocks in your blog posts for better readability. It comes with several different styles built in, or you can customise it using your own CSS file.

A feature that I saw on another site (although I can’t remember which) was when a user rolled over a code box it would expand to fit the code, allowing the user to see everything. Cool little addition, so I decided to create my own using jQuery. I’ve taken some of the code from the plug-in and pasted it below so you can see it in action:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
if($(".codecolorer-container").length){
    var $code = $(".codecolorer-container").each(function(){
        var $this = $(this);
       
        //Animation decision object
        var decisionObject = {
            w: false,
            h: false
        };
       
        //Original width / height of the displayed code
        var originalWidth = $this.width();
        var originalHeight = $this.height();
       
        //Width / height of hidden portion of code
        var mainWidth = $this.find(".codecolorer").width();
        var mainHeight = $this.find(".codecolorer").height();
        var lineWidth = $this.find(".line-numbers").width();
       
        //Only attach events if needed (ie has scroll bars)
        if((mainWidth + lineWidth) > originalWidth || mainHeight > originalHeight){
            /* and so on...... */
        }
    }
}

Since this action is fired on hover, I didn’t want the code boxes expanding immediately every time a user hovers over a box; as just scrolling down the page would expand the boxes which would become extremely annoying. The boxes should only expand when the cursor is left over the box; lucky there’s a plug-in for jQuery that already adds this functionality, it’s called $.event.special.hover.

Special hover simply replaces the standard hover event with one that monitors the speed of the cursor over a set period of time. If the cursor speed drops below the threshold the hover event fires. This is enough to stop random hover events firing when a user navigates over the page, simple!

I’d be interested to see if the code works for others using CodeColorer, there’s no reason why it shouldn’t. Download the code, give it a try and let me know what you think.

WordPress plug-in: Post Thesaurus

Over the past few days I’ve been working on a new WordPress plug-in, one that I personally have desperately needed recently. It’s called ‘Post Thesaurus’ and it does exactly what you’d expect it to do. It creates a little widget on the side of the ‘Add new post’ page which you can use to suggest new words of the same meaning.

After finding I use the word ‘great’ a little too much, I thought it was about time to do something about it. Here are a few screenshots of the plug-in in action:

Post Thesaurus before I've searched for a set of words.

Notice the widget in the top right corner.

Post Thesaurus after I've completed a word search

The widget has completed a search and populated the results panel.

Big thank you to Big Huge Labs for providing the excellent API. I’ve included an admin page with a few settings (under ‘settings’). One feature to note is the ability to enter your own API key. I’ve added this just in case the plug-in starts exceeding the 10,000 requests per day a single API key is allowed. Sign up is simple and only takes a couple of minutes, then you’ll have 10,000 requests per day all to yourself.

I’ve implemented the API using a little jQuery Ajax goodness and some JSONP. Since jQuery is used by the WordPress admin by default, there’s no additional overhead in having to add it manually.

Grab the plug-in off the WordPress site here, or you can download the zip from my site here (Version 1.0.0.0).

Hope you find it useful, any feature requests or bugs leave a comment below.

jQuery Plug-in: Tab Down

This simple plug-in has been on my TODO list for quite a while, as I’ve seen the effect used on many websites. It seems particularly useful for displaying contact details / social media updates. I’m sure there are many similar plug-ins around, but where’s the fun in using someone else’s version. So I created a jQuery Tab Down.

Tab Down simply hides content above the page which a user can then access via a floating tab. It’s easier to illustrate using a couple of demos. Demo 1 pushes the page content down with the tab, where as demo 2 tab content floats over the top of the page content. You can easily switch between versions by passing true or false to the “floating” option when calling the tabDown method.

jQuery tab down plug-in example

Demo 1 example with floating set to false.

The plug-in is simple to use and has a number of options to allow customisation:

1
2
3
4
5
6
7
8
$("#tabContent").tabDown({
    floating: true,
    time: 900,
    easing: "easeOutCubic"
    container: "body",
    downText: "Down",
    upText: "Up"
});
  • Floating: Sets if the tab floats over the main content or pushes it down (default: true)
  • Time: Time in milliseconds for the slide animation (default: 1000)
  • Container: If your tab content is inside a “wrapper” div, let the plug-in know the selector for this div, see demo 1 for an example (default: “body”)
  • Downtext: The text used in the tab before sliding down (default: “Down”)
  • Uptext: The text used in the tab after sliding down (default: “Up”)
  • Easing: For smoother animation you can use animation easing, requires the jQuery easing plug-in (default: “swing”)

View demo 1 and demo 2 or download the code (version 0.1 – updated 2nd Apr 2010).

Currently on page 1 of 512345