I was going through my Coda clips today, and realized I have a lot of little one-off plugins and snippets I use often on projects and realized that others might enjoy clipping these as well.

As an aside from this, I’m curious.. what IDE do you use and do you take advantage of a built in snippet manager or do you use some web based service instead?

Replacement For target=”_blank”

A real quick way to make all your external links open in another window. All you have to do to get this jQuery snippet to work is have the rel=”external”. With that this little bit or jQuery will open the link in a blank window.

// Replace for target="_blank" to open in a new window
    $("a[@rel~='external']").click( function() {
        window.open( $(this).attr('href') );
        return false;
    });

Easy jQuery Parent Load

With this small bit of jQuery you are able to have the browser load the parent href attribute of the item you are clicking. All that you have to have on the child element is rel=”ajax”.

// Load parent container via AJAX
    $("a[@rel~='ajax']").click( function() {
        $(this).parent().load( $(this).attr('href') );
        return false;
    });

Easy Vertical Align

This little snippet can come in real handy when you are trying to center a object to the documents height. This is quite simple all you have to do to make this work is as the class vcenter to the object that you want to center to your document.

// Center Object Vertically to Document
    var doc_height = $(document).height();
    var el_height = $(".vcenter").height();
    $(".vcenter").css({"position" : "relative" , "top" :
doc_height/2 - el_height/2});

Simple jQuery Lightbox

Who needs a huge 5k Lightbox when you can build your own with as little as what you see below. This is the basic version of this snippet brought to you by Clayton McIlrath. If you would like to know everything about this jQuery snippet go to jQuery Lightbox Modal Plugin. This Lightbox is so easy to use all you have to do is style your Lightbox how you want to. Then you invoke the modal() function and that will trigger your lightbox.

(function ($) {
// Custom Lightbox, you can also find this on http://thinkclay.com/news/jquery-lightbox-modal-plugin
    $.fn.modal = function() {
        return this.each(function(i){
            var ah = $(this).height();
            var wh = $(this).parent().height();
            var nh = (wh - ah) / 3;
            var aw = $(this).width();
            var ww = $(this).parent().width();
            var nw = (ww - aw) / 2;
            $(this).css({'margin-top' : nh, 'margin-left' : nw});
            alert(dh);
        });
    };
})(jQuery);