Javascript & PHP

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

Publié le par Bruno Bichet