If you have a page that keeps getting longer because new items appear on it at the bottom and what’s at the bottom of the page is most important it can be a paint to have to keep scrolling done to see it.

You can make it auto scroll continuously with JQuery but that’s potentially really awkward if at any point you need to scroll up (it basically means you can’t).

The best solution is to make the page auto scroll in a sticky fashion. So when the page is already scrolled all the way to the bottom it auto scrolls, when it’s not at the bottom it does not scroll.

This can be achieved quite easily with the following code:

var num = (lastDocumentHeight - $(window).height()) - $(document).scrollTop();
if(num == 0) {
	$("html, body").animate({ scrollTop: $(document).height() }, "slow");
}
lastDocumentHeight = $(document).height();

In this example lastDocumentHeight is a global. It works by determining if the current position is the same as it was previously and this position equates to being at the bottom of the page then scroll. This needs to run after your page length has increased.

JSON is a well structure interoperable way of passing data between systems. It’s a good way of passing large amount of data into a web page for JavaScript to process and between system on the internet regardless of there architecture or programming language.

JSON is one of the hardest data structure to read directly as a human in it’s RAW format compared to other formal grammars such as XML, YAML or ini.

Fortunately there is an easy trick that you can do with Chrome, Firefox with Firebug and even Opera and IE9!

Take the JSON you have, wrap it in “eval()” the same as you would if you where writing a web page (because it is just JavaScript after all) run it and every modern browser this was tested with should allow you to inspect the resulting data structure.

Example JSON:

{"glossary":{"title":"example glossary","GlossDiv":{"title":"S","GlossList":{"GlossEntry":{"ID":"SGML","SortAs":"SGML","GlossTerm":"Standard Generalized Markup Language","Acronym":"SGML","Abbrev":"ISO 8879:1986","GlossDef":{"para":"A meta-markup language, used to create markup languages such as DocBook.","GlossSeeAlso":["GML","XML"]},"GlossSee":"markup"}}}}}


Firefox with Firebug:

Chrome:

Opera:

Internet Explorer 9: Note: To see this structure you need to click the “Add watcher” link displayed upon running the code.

A lot of concern has been caused by the “Cookie Law” which says you must tell people that you use cookies if you do, and 99% of sites do!

Well here’s a very simple jQuery bolt-on that deals with that, and although visitors need javascript enabled to see it, you have made “best efforts” to inform them, and on any eCommerce site you’re going to have a “this site requires javascript message” anyway.

The file to download is from github (isn’t opensource great?) here and is as simple to implement as add the script file to the head and somewhere on the page insert the following :

<script type="text/javascript">
    $(document).ready(function() {
      $.cookieBar();
    });
</script>

The example page is also on github : http://carlwoodhouse.github.com/jquery.cookieBar/.

Okay, so anyone who’s worked with php knows that sometimes your only option is to var_dump() and die(). Usually when xdebug is having a moody day and refusing to cooperate.

But even though the xdebug var_dump() is that much better than php’s built-in version, if you dump for instance a magento object you can’t follow back what you want up the tree of cascading objects.

Enter: Kint.

Kint is a collapsible jQuery-based var_dump that works really well, with a lot of configuration but works flawlessly out of the box. Simply include the class file (using absolute paths is fine because you’re not going to deploy this to a live server, right?), and start using it’s static class methods… or their really short aliases :

require_once ('/home/myname/usefulstuff/kint/Kint.class.php');
Kint::dump($variable1,$variable2);
// or simply
d($variable1,$variable2); // shorthand alias of Kint::dump()
dd($variable); // execution will stop after this statement; same as d($variable);die;

Example output (wordpress may break the javascript, also available as an example at http://jsfiddle.net/NNfMW/) :

Just came across this interesting site:

https://www.onx.ms/#recipesPage

It seems to be a very nice system for really customising your Android experience.

If you are struggling to figure out why a perfectly good jQuery plugin that works elsewhere is not loading into jQuery for a particular page, this may well be your solution.

This behaviour will happen if something reloads jQuery elsewhere on your page, below the script tag that calls the plugin.

If this happens, jQuery is effectively reloaded and has lost all the extensions you have made to it.

The solution of course is to simply remove the extra jQuery loads. If that is not very easy to do, you can at least try to modify it so that it won’t reload it if it already exists:

<script type="text/javascript">
    if (typeof jQuery == 'undefined') {
        var script     = document.createElement('script');
        script.setAttribute("type","text/javascript");
        script.src = "jquery-latest.pack.js";
        var head = document.getElementsByTagName('head')[0],
        done = false;

        // Attach handlers for all browsers
        script.onload = script.onreadystatechange = function() {
            if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
                done = true;
                // callback function provided as param
                onload_stuff();
                script.onload = script.onreadystatechange = null;
            };
        };
        head.appendChild(script);
    }else{
        onload_stuff();
    }
    onload_stuff = function(){
         // your onload stuff goes here
    }
</script>

Having issues with javascript dependencies or awkwardly structured html defining objects you need before run?

This is a little trick I used combined with csnover’s roundrect.js to provide IE versions < 9 with border-radius rounded corners.

Create a separate source file e.g. mylateloader.js and in it include the following code :-

function myInArray(needle, haystack) {
    var length = haystack.length;
    for(var i = 0; i < length; i++) {
        var str = jQuery(haystack[i]).attr(‘src’);
        if(typeof(str) != ‘undefined’ && str.search(‘.*’+needle+’.*’) > -1) return str;
    }
    return false;
}

jQuery(document).ready(function(){
    var script = document.createElement(‘script’);
    url = myInArray(‘mylateloader.js’, document.getElementsByTagName(‘script’));
    script.src = url.replace(‘mylateloader.js’,'mycoolminifiedfile.min.js’);
    document.getElementsByTagName(‘head’)[0].appendChild(script);
    setTimeout("mycoolobject.run()",2000);
})

That way, at document.ready(), mycoolminifiedfile.min.js is loaded from the same directory on the server as the late loader js and 2 seconds later, the mycoolobject.run() is called.

Okay, this is hacky but it really works, and saves a lot of time!

To copy the css selector of an element in chrome, you need your developer tools open popped-out of chrome, not docked but here is the trick :-

Inspect the element that you want, be sure it’s selected in developer tools, then press F12. This will open a second developer tools window inspecting the first developer tools.

Then, insert the following two lines of javascript magic, one at a time – the first pulls jQuery into the developer tools and the second runs a function to build the css path and output it into the console!

First jQuery :

var script = document.createElement('script');script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js";document.getElementsByTagName('head')[0].appendChild(script);

Then the path :

path=""; function addtopath(str) { if(typeof(str) != 'undefined') {path = str+' '+path} } jQuery('.crumbs span').each(function(){addtopath(jQuery(this).attr('title'))}); path;

You can try stringing them together into one command, but sometimes jQuery doesn’t seem to load fast enough.

If you have a staging copy of your site anywhere then you might not bother copying over your entire catalogue of product images etc.

You might decide to drop in absolute URLs for those images so that they are pulled from live. However you really don’t want absolute URLs in your code and you certainly don’t want that to go live because it just adds unnecessary bloat.

A nice trick you can do here is make a change to your staging site as follows. Of course ensure this change doesn’t go live, but it should be just one file so that’s easy to handle.

(Note this assumes you already have jQuery available on your page)

<script type="text/javascript">
$().ready(function(){
    $('img').each(function(){
        var src = $(this).attr('src')+'';        
        if(-1 == src.indexOf('http')){
            var new_src = 'http://www.LIVEDOMAIN.co.uk/'+src;
            $(this).attr('src', new_src);
        }
    });
});    
</script>

Don’t forget to change LIVEDOMAIN to be your real live domain

Just found this really rather nice looking JavaScript change tracking system.

Lawyers using email take note, Office + email is archaic

If you won’t use Google Docs for privacy reasons (fair enough) then would you like us to build you your own document tracking client system?

http://nytimes.github.com/ice/demo/