Safari est le navigateur le plus rapide dans l‘interprétation de javascript. Vincent Hermann de PCINpact s’est amusé à passer tous les navigateurs sous SunSpider, qui permet de tester la vitesse d’interprétation du Javascript. Résultats cinglants pour IE…
A noter que le nouveau navigateur de Google, Chrome, monté sur Webkit s’en tire plutôt pas mal !
Voici un code pour alterner le contenu de 2 DIV et avec un seul lien.
On va créer tout d’abord 2 div contenant 2 textes à alterner avec un CSS element.style.display différent.
<div id=”mod_1″ style=”display: block;”> BONJOUR </div>
<div id=”mod_2″ style=”display: none;”> AU REVOIR </div>
Explication : element.style.display ne retourne une valeur que si l’élément a un attribut HTML style avec propriété CSS display renseignée, donc dans notre cas, la DIV avec l’id mod_1 sera affichée au chargement de la page tandis que mod_2 sera cachée.
Il nous faut un lien pour pouvoir alterner entre les 2 div.
<a onclick=”alterner(‘mod_1′,’mod_2′);” title=”Alterner les 2 div”>Alterner</a>
Il nous manque plus que le Javascript :
<script type=”text/javascript”>
function alterner(obj1, obj2){
var obj1 = document.getElementById(obj1);
var obj2 = document.getElementById(obj2);
obj1.style.display = (obj1.style.display == “block”) ? “none” : “block”;
obj2.style.display = (obj2.style.display == “block”) ? “none” : “block”;
}
</script>
Que va faire le script ? Si la DIV mod_1 (obj1 la fonction javascript) est à display:block (affichée) alors on définit la DIV mod_2 à display:none (cachée) et inversement.
Voici un exemple en cliquant sur le lien “Alterner les DIV” :
Alterner les DIV
BONJOUR
AU REVOIR
- Réalisation d’un site sur les acteurs des jeux vidéos façon IMDB. : Games Credits
- Refonte graphique de mon site CV Freelance. Voir la précédente version.
- Développement d’une page de démarrage personnalisable. Cliquez pour voir l’explication
- Administrateur du Site/Blog Tuxboard.com.
Plus de 30.000 visiteurs quotidien. Consultez les statistiques en détails de mon blog.
Design CSS, développement PHP/MySQL, retouche Photoshop et administration Linux (Debian).
Disponible à cette adresse.
- Développement du site Wanimo.com.
Design CSS, développement PHP(Objet)/MySQL, retouche Photoshop.
Disponible à cette adresse.
- Création du site Cronos
Découpe Photoshop, intégration graphique, design CSS, développement PHP.
- Développement de modules pour un forum de poker : Lyonholdem.com
Création de module greffés au forum de discussion et au backoffice.
Disponible à cette adresse.
- Développement d’une boutique en ligne simplifiée (Paiement par Paypal/CB).
Possibilité d’upgrader en boutique en ligne avec paiement en ligne CB.
Disponible à cette adresse.
