FREEBIE: jQuery Scroll Tracker

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!

Gitview – JS Widget To List GitHub Repositories

image

If you’re an active user of GitHub and work on any open-source projects then may want to show off your projects and activity on your own website.  This is where Gitview comes in.

image

Gitview allows you to display all your GitHub repos, and gives the option to display a detailed version including a graph of your project activity, or a simple compact version if you prefer.  Not only that, but all the information displayed is live.

The full feature list is:

  • Asynchronous loading of all date
  • All data is 100% live
  • The Activity Graph uses the Canvas element
  • You can toggle the regular or small version
  • No need for additional styles
  • Works with all JS frameworks (jQuery, Prototype, Mootools, etc)
  • WTFPL license

Continue reading

jQuery UI Bootstrap – A Bootstrap-themed kickstart for jQuery UI widgets

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.

Baobab: PHP/MySQL Library For The Nested Set Model

Introduction

When working with databases, you may want a table structure which allows your record to have a parent record (heirachical recordset).  In simple scenarios it’s easy enough to simply have a parent_id column. However, for displaying the entire tree you’ll need a lot of recursion to go through all the top level nodes, test for children, and then test the children for children etc.  It soon proves to be very long-winded and inefficient.

Instead of using the standard parent_id approach, there’s a database structure known as the Nested Set Model.  The nested set model uses an algorithm which basically uses tree traversal to number each node, and once the numbering is complete it becomes very easy to query the tree and search, whether its for root nodes (base node), leaf nodes (nodes with no children) or branches (the path from the root node to a particular node).

Performance

As the tree traversal for numbering the nodes is required, the Nested Set Model requires slightly more overhead when updating the table (each node needs to be renumbered when a change is made), but as mentioned earlier, is very efficient when it comes to actually querying the table.

Example Usage Scenario

A simple use for Nested Set Model would be a category table for a website, where categories can have subcategories.  And even subcategories can have subcategories.  Categories are generally setup in the admin on most sites, and even then are rarely updated so the fact that updating a Nested Set can be a bit slow isn’t actually a issue.  On the frontend the visitors and customers will simply be viewing categories, so they’ll be reaping the benefits of the efficiency and great performance of the Nested Set Model.

Introducing Baobab

Baobab is a free PHP/MySQL implementation of the Nested Set Model.  It can be modified to work with other database systems too.  Baobab uses the Nested Set Model, but also the offers the advantage of supporting multiple trees in the same table, or alternatively you can setup different trees in individual tables, depending on your requirements.

It takes an Object-Oriented approach (OOP) and provides you with an entire API of useful methods including:

  • getRoot()
  • appendChild()
  • getTreeHeight()
  • deleteNode()

Just take a look at the documentation page to see how much Baobab has to offer.

Download and Install

Getting started with Baobab is dead simple.  It’s an open-source project hosted on GitHub which you can download here.  Once you’ve got the code it’s a simple case of placing the classes wherever you need them, include them in your PHP and use the Simple Tree Example to get started.  If you’re more confident then you can have a look at the Multiple Tree Example.

Baobab on GitHub

Conclusion

I’ve found Baobab particularly useful in my projects and have extended it to tie in with my own PHP library.  It offers you the power of using nested sets, without requiring you to code your own implementation of nested.  There’s a lot of useful functions in there, plus the default SQL structure can easily be extended to contain your own table fields too.

It’s great, it’s free and if you need to hold data in a tree structure then it’s certainly worth checking out.

SimpLESS – A Free Open-Source LESS CSS Compiler

Less CSS is a great way to develop your stylesheets for websites.  It lets you create nested rules, specify variables, functions and so much more.

To use Less on a website you have 2 options:

  1. Use JavaScript to compile on-the-fly.  This isn’t really recommended as you’re now relying on JavaScript for your website to look the way it should.  It also creates additional overhead as your page needs to load in the JS file, load your less stylesheet and finally render your stylesheet by parsing it through the Less Javascript library.
  2. Compile your Less stylesheet into CSS, and include is as a normal stylesheet.

The compilation method is obviously the best option as you get the benefits of using Less, and then using it as any other CSS stylesheet.

Whilst the compiled method might be great for when you’ve finished developing, during development you’d still have to use the Less JS method or compile your Less file into CSS each time you make modifications, which can easily become tedious.

This is where SimpLESS comes in.  SimpLess is real-time Less compiler.  You simply drag and drop your less file(s) into the app, and it recompiles your Less file into a CSS file every time you save it.

This app is totally free, open-source and available on Windows, Mac and Linux. As well as doing the compilation, it minifies your CSS too saving you precious bytes during HTTP requests.

Download SimpLESS
Fork SimpLESS on Github