g.u.i. design graphique, design interactif

codrops nous propose une série de bouts de codes jQuery que nous sommes amenés à utiliser tous les jours ou presque, c'est l'occasion de comparer les méthodes et d'apprendre de nouvelles choses.

Petite séléction perso  :

Écrire ses propres sélecteurs :

//extend the jQuery functionality

$.extend($.expr[':'], {

    //name of your special selector

    moreThanAThousand : function (a){

        //Matching element

        return parseInt($(a).html()) > 1000;

    }

});
$(document).ready(function() {

    $('td:moreThanAThousand').css('background-color', '#ff0000');

});

Obtenir les dimensions d'origine d'une image :

var img = $('#imageid');

var theImage = new Image();

theImage.src = img.attr("src");

alert("Width: " + theImage.width);

alert("Height: " + theImage.height);

Centrer un élément dans la fenêtre du navigateur :

jQuery.fn.center = function () {

    this.css("position","absolute");

    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");

    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");

    return this;

}

//Use the above function as:

$(element).center();