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!

The post FREEBIE: jQuery Scroll Tracker appeared first on Cube Websites.

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.

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

Using it is very simple:

1.  Include the script on your page

<script src="http://logicalcognition.com/Projects/Gitview/Gitview.js"></script>

2.  Create a GitView anywhere on your page from a script tag or a JavaScript file:

var view = new Gitview({
  user    : 'cubewebsites',      // any github username
  domNode : document.body,  // domNode to attach to
  compact : false           // if set to true, will display smaller version of widget (no participation graph)
});

Enjoy!

The post Gitview – JS Widget To List GitHub Repositories appeared first on Cube Websites.