nooshu - Matt Hobbs' Web Development Blog

Kneeling on the shoulders of giants

Category: jQuery

Posts relating to my favourite JavaScript library, jQuery.

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).

Coolclock: HTML5 Clock that is Actually Quite Cool*

*: Unless you’re Internet Explorer, then not so much.

Every so often a designer asks for something a little different, this time it was for an animated clock that sits in the top right corner of a website. Usually that means looking for a Flash based solution, but Canvas is the new Flash… apparently; luckily Coolclock is available to plug the no-flash gap.

Coolclock is a fantastic little script that will generate a canvas based clock from the parameters you pass it via the class attribute (I don’t agree with that, but it works). It’s fully customisable by way of a little JSON data, allowing you to create your own skins. There are quite a few user submitted skins available to use on the Coolclock homepage if you don’t want to create your own.

I needed the clock to be able to change depending on the country that’s chosen from a dropdown list, here’s how I achieved it:

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
//Generate the clock
var generateClock = function(){
    //Create our dropdown, time difference compared to GMT as a value
    var dropHTML = "<select id='localTime'>";
    dropHTML += "<option value='0'>United Kingdom</option>";
    dropHTML += "<option value='+1'>France</option>";
    dropHTML += "<option value='-4'>New York</option>";
    dropHTML += "</select>";
    //Append to the container
    $("#time").append(dropHTML);
   
    //Initial clock appended to the page (local time)
    var clockHTML = '<canvas id="clk1" class="CoolClock:swissRail:27:noSeconds"></canvas>';
    $("#clock").append(clockHTML);
   
    //When the dropdown changes
    $("#localTime").bind("change", function(){
        var value = $(this).val();
        var localClockHTML = '<canvas id="clk1" class="CoolClock:swissRail:27:noSeconds:' + value + '"></canvas>';
        //Empty the old clock, append the new clock
        $("#clock").empty().append(localClockHTML);
        //Fire the coolclock function to generate the new clock
        CoolClock.findAndCreateClocks();
    });
}();

Very simple, the relevant HTML code is generated with JavaScript as to not leave a pointless dropdown on the page when it’s turned off. The key to the solution was calling the CoolClock.findAndCreateClocks() function from the coolclock.js file, without that the clock isn’t recreated when the dropdown is changed.

As mentioned above, the script seems to come unstuck when viewed in Internet Explorer, since IE doesn’t support the canvas tag. You can plug the lack of canvas support using ExplorerCanvas, but even then coolclock is a little quirky. I managed to get the clock working with IE6 & IE7 but IE8 wasn’t having any of it; bit of of shame as it’s a nice solution. Good news is on the horizon though, IE9 will support canvas by default so no nasty JavaScript hacks.

Eventually I decided to add the clock as a type of ‘progressive enhancement’ by wrapping the function in the following:

1
2
3
4
//IE returns false since it uses 'styleFloat'.
if(jQuery.support.cssFloat){
    //IE can't see this code
}

It’s not great, and I hate having to do it but if users want to see a cool clock they will have to upgrade to a modern browser (that’s not IE8).

For those who are interested, here’s a quick demo of the code in action.

Recreate iPhone Swipe Effect using jQuery

Being a PC user for as long as I can remember it pains me to say this; if there’s one thing Apple does well it’s the User Interface (UI). When the iPhone was first released it really shook up the mobile market, with a touch screen interface and a tonne of applications to expand its functionality, it forced the other mobile phone manufacturers to play catch-up.

Something that comes naturally when you start to use the iPhone is the swipe between screens, allowing you to quickly view all your different applications. Just out of interest I decided to recreate this effect for the web using jQuery. Is it of any use to anyone? I doubt it, as it isn’t very natural to swipe using the mouse (unless you’re used to using mouse gestures). But I enjoyed putting it together.

If you swipe left/right toward a panel that doesn’t exist, it simply bounces back. The same goes for small mouse movements; the full animation will only occur when you swipe over a third of the width of a panel. View a demo.

Update: As requested by Matias I’ve added an indicator to show the total number of panels and the currently selected panel.

Update 2: I’ve uploaded a ZIP file here containing all the code used.

Update 3: For those of you who hate how the text is sometimes selected on drag (I do), you may want to take a look at this thread from Stackoverflow for a potential solution.

Currently on page 2 of 512345