I recently had an idea for a webpage, with a background which changes based on how far down the page the viewer has scrolled.  The idea was to have the Sun rise from the left side of the page, and then arc up and finally set on right.

image

View Demo

As went about creating a page which does this, I ended up creating my jQuery Scroll Tracker.  It’s a very simple script, which allows you to track the position, and take certain actions when a certain part of the page is reached.

If you’ve been on the demo page, you’ll have seen that as you start scrolling the instructions disappear.  Here’s the code and explanation of how that effect is achieved:

//when the document is loaded
    $(document).ready(function(){
        scrollTracker.initialize();
        /* the 'instructions' parameter is just a label we're giving to the tracker so we can delete it later
        /  it's just a label and can be called whatever you want
        /  the second parameter is a callback function, which the scrollTracker will fire when the page is scrolled
        /  the function can accept two parameters:
        /   - scrollpercent - the percentage of the page which has been scrolled
        /   - scollpos - the number of pixels of the page which has been scrolled
        */
        scrollTracker.addObject('instructions',function(scrollpercent,scrollpos){
            //if 10% of the page is scrolled
            if(scrollpercent > 10) {
                //fade the instructions out
                $('#instructions').fadeOut();
                //remove the tracker so that it only gets called once
                scrollTracker.deleteObject('instructions');
            }
        });
    });

As you can see, most of the code is comments.  The scrollTracker listens for when the page is scrolled, and when it is it will call the function you provide it with.

There’s a lot more you can do with it, and you can find full up-to-date documentation on the GitHub project page

If you decide to use it, please let me know so I can link to it as an example.
If you have suggestions or requests then please post in the comments and I’ll see what I can do!

Demo
GitHub Project

Have fun!

jQuery UI Bootstrap

jQuery UI Bootstrap is an open-source effort by @addyosmani to introduce the Bootstrap styling into the standard jQuery UI widgets.  It covers many of the widgets available on the jQuery UI website including:

  • Accordion
  • Tabs
  • Buttons and Button Sets
  • Horizontal slider
  • Progress Bar
  • Dialogs
  • Icons
  • Date Picker

bootstrapui

Whilst it’s still a work in process, what’s available already is fantastic and I’d love to see where this project goes.  It’s the next logical step for the Bootstrap framework; we have the standard web elements and layouts, now it’s about making those pages interactive using one of the most popular widget libraries available, jQuery UI, and making that look like the rest of the site…well it just makes good sense.

Bootstrap

Here’s a quick introduction to Bootstrap for those that haven’t yet heard of it, or aren’t sure what it does.

Bootstrap is a prototyping framework introduced by Twitter in mid-2011.  It’s aimed at making more consistent browsing experience for users as they browse various sites and applications on the web.  It’s free, open-source, and uses LessCSS making it a breeze to modify to suit your own needs.

Since it’s launch, it has been very well received by the developer community, and I’ve noticed it being adopted by many popular websites and open-source software including:

I’ve even used it on the Cube Websites website for the form elements and as a grid system.

Get Started

jQuery UI Bootstrap seems like a great idea, and has a lot of potential for making Bootstrap even better.  I’ll definitely be trying it on my next project involving UI widgets.  Whilst it looks fantastic already, I’d love to see where it goes from here.  One of the things I’d like to see is the stylesheets done in Less so that the widgets can be customised to look exactly how the web designer wants.

YouTube Console

A couple of days ago I discovered Intercom.  An open-source JavaScript framework allowing anyone to create their own command-line application.

I decided to try it out by creating a command line interface (CLI) for YouTube.  What does this mean you ask yourself?  Well, using this plugin you can browse YouTube but instead of using the website, you do it via a series of commands.  There’s no real advantage to it, it’s more just about doing it to prove that it can be done.

YouTube Console

You can play around with it on the live demo page here

Features include:

  • YouTube search
  • Search by username
  • Top Rated videos
  • Recently Featured videos
  • Most Viewed videos
  • Paginated results
  • Caching for great performance

This application is free and open-source, so if you’re interested in making your own Command Line Application, then feel free to Fork it on GitHub.

David Walsh (colleague and web developer) has launched his new Speech Recognition system.  It’s currently available as a jQuery plugin but he has promised that version 2 will bring a full featured API.

What can you do with it?
The TTS plugin can read out any text from your website to your visitors.  It would be a great aid in terms of accessibility, and of course you could probably think up other more fun uses of it too.  You could annoy users by reading out your terms and conditions to them or have your website tell visitors how awesome it is on every single page.

It would actually be nice to tell users the next action that’s required from them.  For example, you could read out form validation errors or after running an AJAX request you could read the success/failure message and so on.

Example

Here’s a basic example showing you how to use this plugin. First you need jQuery on your page if you haven’t got it already, and a link to the TTS plugin itself. I use Google for jQuery because it means you’re saving the bandwidth on your own server.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://chachakawooka.com/js/cckw_tts.js"></script>

In your webpage you need an element which is going to contain the text to convert to voice. For this example I’m using an input box but it could be any element (just make sure it has a unique id). You also need a trigger (button or link) which will start the conversion.

<input type="text" id="my-speech" />
<input type="submit" id="my-speech-submit" value="Convert text to speech" />

Finally we attach the elements above to the TTS plugin.

<script type="text/javascript">
    $(document).ready(function() {
        $('#my-speech-submit').cckwTTS({
                selector: '#my-speech'
	 });
    });
</script>

Demo
Here’s the above example code implemented for you to see what it does!

Notes

  • For this example I’ve put the JavaScript code inline but try to keep it together in the footer (I prefer loading JavaScript after everything) or in the <head> if that’s what you prefer.
  • David has said thanks for this post and has updated his own blog to use my example.
  • This plugin is still in its early stages and I’m sure David would appreciate all feedback and feature requests.  If you want to get in touch just Tweet <a href=”http://twitter.com/chachakawooka”>@chachakawooka</a> on Twitter.

Credits

The CCKW Text-To-Speech Plugin is created and developed by David Walsh at Chachakawooka.
PS: this guy’s the proper David Walsh, not the guy who develops MooTools.