Je viens de perdre une heure à chercher pourquoi Internet Explorer 7 et 8 me plantait mon code javascript utilisant un sortable de Scriptaculous et Prototype, les deux frameworks js. Sur les autres navigateurs (Safari, Chrome et Firefox), cela fonctionnait parfaitement !

J’avais tout simplement zappé le petit var devant ma variable…

Voici le code :

// MAIN DE L'APPLICATION
new Event.observe(window, "load", function (evt) {
	var leTimer;
	leTimer = new PeriodicalExecuter(diaporamaChange, 8);
 
	new Event.observe("navDroite","click", function(evt) {
		new Event.stop(evt);
		leTimer.stop();
		diaporamaChange();
	});
});

C’est tout simple. Vous avez une liste à puce sur lequel vous voulez brancher un diaporama en passant d’une ligne à l’autre simplement.

Voici la liste à puce en HTML :

<ul id="actualitesUl">
	<li class="itemActualite actif"></li>
	<li class="itemActualite" style="display: none;"></li>
	<li class="itemActualite" style="display: none;"></li>
</ul>

Ici, il y en a trois, mais le code que j’ai fait fonctionne pour un nombre illimité. On va donc passer du premier li au suivant avec un effet simple de disparition et d’apparition grâce à la librairie js : Scriptaculous.
Pour ceux qui sont déjà perdus : révisez vos classiques.

Voici donc les 20 lignes de javascript qui m’ont données du fil à retordre (sachez que je n’avez pas codé en js depuis 6 mois !) :

// MAIN DE L'APPLICATION
new Event.observe(window, "load", function (evt) {
	leTimer = new PeriodicalExecuter(diaporamaChange, 10);
});
 
function diaporamaChange() {
	var tabLi = $("actualitesUl").childElements();
 
	$$(".actif").each(function(el) {
		el.hide('appear');
		el.removeClassName('actif');
		for(var i=0; i < tabLi.length; i++) if (el == tabLi[i]) if (i + 1 < tabLi.length ) tabLi[i+1].addClassName('actif'); else tabLi[0].addClassName('actif');
		$$(".actif").each(function(el2) { new Effect.toggle(el2, 'appear'); });
	});
}

- Carte à moitié [shal]visible[/shal], carré gris à la place de la carte, ou [shal]carte[/shal] décalée. Revoyez toutes vos div, p ou span et fermeture de balise.

Ou (merci Fabien)

Ne pas instancier la gmap dans une fonction de type :

Event.observe(window, ‘load’, function() {
carte = new GMap2(document.getElementById(”carte”));
});

Mais plutot placer un fragment de js directement sous l’élément qui va contenir la carte (ou en bas de body); Comme ceci :

//gMap
carte = new GMap2(document.getElementById(”carte”));

- Marker qui n’apparaît pas sur la carte avec le marker manager : attention, lors de la création du groupe, vous devez spécifier sur quel zoom les markers vont apparaître. J’ai perdu énormément de temps sur deux points. Trompé de zoom, du coup ils étaient bien créés mais je ne les voyais pas. Second point, problème de latitude et longitude, du coup ils étaient à un autre endroit.

Prototype :

- example is not defined : erreurs lorsque l’[shal]objet[/shal] ou variable, ici example, que vous ciblez n’existe pas.

- $(« example ») is null : erreurs lorsque l’objet, ici example, que vous ciblez n’existe pas.

- missing ) after argument list : Vous avez oublié de fermer une parenthèse, généralement pour le observe.

- missing } after property list : Vous avez oublié de fermer une parenthèse ou généralement vous avez oublié de mettre une virgule entre des paramètres. Exemple :

new Ajax.Updater("tableEditeur", "xhr/xhr_editeur_tri.php", {
      method: 'post',
      parameters: "modeTri="+modeTri+"&triSur="+triSur,
      evalScripts: true
});

- The requested URL /example/xhr/xr_menu.php was not found on this server. : l’url que vous avez spécifié n’existe pas. Le fichier n’a donc pas été importé en appel Ajax.

Scriptaculous :

- missing ) after argument list : oublie des crochets pour des options d’effets. Exemple :

new Effect.Appear('menu_cote', {from:0.0, to:0.45});

- element is null : l’élément spécifié pour l’effet n’existe pas.

- $(« .example ») is null : attention, pour cibler les classes, vous devez utiliser les doubles dollars $$. Ici cela donnera :

$$(".example").each(function(el) {

});

D’autres erreurs seront rajoutées au fur et à mesure et n’hésitez pas à me les donner pour que je debbug votre code. Mettez l’erreur en commentaire de ce billet.

Voici donc le tutorial, tutoriel concernant le superbe accordéon web 2.0 tendance que l’on voit chez tous les geeks qui se respectent ! 100% compatible Prototype et Scriptaculous. Pas grand chose à faire, suivez le guide :

Tout d’abord, téléchargez l’archive pour réaliser le tuto : téléchargez ici

Il contient toujours la même chose : les js, le fichier index ou demo, et le css. La librairie s’appelle accordion.js dans le dossier js et le css accordion_glam.css.

Trois étapes :

1- Mettez le head pour les js et le css de votre accordéon :

Voir le code de mon head

2- Insérez votre accordéon dans le body :

Voir le code de mon accordéon

Les classes doivent porter le même nom que dans mon exemple car la librairie s’en sert. accordion-toggle pour les titres. accordion-content pour le contenu qui apparaît.

3- Ajoutez votre code prototype pour initialiser l’accordéon :

Voir le code prototype gérant l’initialisation

Je rappelle que l’écouteur avec window et load est en fait le lancement d’une fonction lorsque le DOM est complètement chargé, c’est à dire que lorsque tous les divs, images et textes sont apparus. Le chiffre 1 signifie qu’à l’ouverture de la page, c’est le titre 1 qui va être ouvert, ici Main.

C’est tout ! Pas très compliqué n’est-ce pas !

Voir mon exemple : la démo de l’accordéon