Trucs et astuces Javascript

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Trucs et astuces Javascript

Ce billet regroupe quelques fonctions simples et utiles en Javascript ou en PHP. Comme pour la boite à outils CSS, celle-ci est destinée à s’enrichir régulièrement.

slideToggle() et hover() avec jQuery 1.1.2

Si vous voulez afficher-masquer un ensemble d’éléments ce code est fait pour vous. La ligne $(‘#links ul:lt(3)’).show(); permet d’atteindre les trois premières balises ul contenues dans la div#links. Les deux lignes suivantes appliquent respectivement : un comportemant onclick sur les titres h2, sur lequel la méthode slideToggle() est utilisée pour afficher ou masquer l’élément qui les suit :

$(document).ready(function() {
    $('#links ul, #calendar table, #archives ul').hide();
    $('#links ul:lt(3)').show();
    $('#links h3, #calendar h2, #archives h2, #categories h2').css('cursor','pointer').click(function(){
    $(this).next().slideToggle('slow');
    });
 });
Maintenant, il est temps de transformer ces titres cliquables avec la méthode hover() qui simule la pseudo-classe CSS :hover :
$(document).ready(function() {
    $('#calendar h2, #archives h2, #categories h2').hover(function() {
         $(this).css('border-bottom','1px dotted #065f00').css('color','#065f00');
        },function() {
        $(this).css('color','#9E0050');
    });
 });

Plus d’informations sur la librairie jQuery.

Mettre en évidence le lien de la page en cours

Une fois que l’on a fait un effet de survol sur un bouton en utilisant la pseudo-classe :hover, on aimerait bien faire en sorte que cet effet de survol reste une fois le bouton cliqué, de manière à signaler la page en cours. Suivez le tutoriel associé à cette fonction PHP

<?php function currentPage($strPage) {
    if (strstr($SERVER['PHP_SELF'], $strPage)) {
        echo 'class="current' . $strPage. '" ';
    } else {
    echo '';
    }
}
?>
Cette fonction est inutilement complexe si vous utilisez le même background pour les liens. Voici une version simplifiée.
<?php function currentPageSimple($strPage) {
    if (strstr($_SERVER['PHP_SELF'], $strPage)) {
        echo 'class="current" ';
    } else {
    echo '';
    }
}
?>

toggleClass()

Permet de permuter une classe avec une autre. Très pratique pour afficher-masquer un balise DIV ou autre :

function toggleClass(element,class1,class2) {
    elt = document.getElementById(element);
        if (elt.className == class1) {
        elt.className = class2;
        }
        else if (elt.className == class2) {
        elt.className = class1;
    }
}

Ouvre et centre une fenêtre popup en une seule opération depuis la page appelante. Trouvé sur wiki.media.box

function popup(l,h,url) {
    hauteur=Math.round((screen.availHeight-h)/2);
    largeur=Math.round((screen.availWidth-l)/2);
    window.open(url, "video", "toolbar=0,location=0,directories=0,status=0, scrollbars=0,resizable=0,menubar=0,top="+hauteur+",left="+largeur+",width="+l+",height="+h);
}

multiClass()

Permute deux classes sur un évènement. Voici l’exemple fonctionnel car une explication complète serait longue et fastidieuse :)

MAJ du 5 juillet. L’explication longue et fastidieuse ne l’était pas autant que ça ;) Voici le détail de la fonction multiClass.

function multiClass(eltId) {
    arrLinkId = new Array('_0','_1','_2','_3');
    intNbLinkElt = new Number(arrLinkId.length);
    arrClassLink = new Array('current','ghost');
    strContent = new String()
    for (i=0; i<intNbLinkElt; i++) {
        strContent = "menu"+arrLinkId[i];
        if ( arrLinkId[i] == eltId ) {
            document.getElementById(arrLinkId[i]).className = arrClassLink[0];          document.getElementById(strContent).className = 'on content';
        } else {
            document.getElementById(arrLinkId[i]).className = arrClassLink[1];          document.getElementById(strContent).className = 'off content';
        }
    }
}

Ces deux fonctions permettent d’obtenir la hauteur de la fenêtre du navigateur pour afficher un footer calé en bas de page.

function getWindowHeight() {
    var windowHeight = 0;
    if (typeof(window.innerHeight) == 'number') {
        windowHeight = window.innerHeight;
    }
    else {
        if (document.documentElement && document.documentElement.clientHeight) {            windowHeight = document.documentElement.clientHeight;
        } else {
            if (document.body && document.body.clientHeight) {
                windowHeight = document.body.clientHeight;
            }
        }
    }
    return windowHeight;
}

function setFooter() { if (document.getElementById) { var windowHeight = getWindowHeight(); if (windowHeight > 0) { var contentHeight = document.getElementById('content').offsetHeight; var footerElement = document.getElementById('footer'); var footerHeight = footerElement.offsetHeight; if (windowHeight - (contentHeight + footerHeight) >= 0) { footerElement.style.position = 'relative'; footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px'; } else { footerElement.style.position = 'static'; } } } }

window.onload = function() { setFooter(); } window.onresize = function() { setFooter(); }

Envoyer un formulaire avec la touche Entrée

(Quand le bouton n’est pas de type submit)

function submitForm(e) {
var code = e.keyCode;
if (code==13)
document.getElementById('formulaire').submit();
}
//onkeyup="submitForm(event) dans le formulaire

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



Les commentaires sont fermés.



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site