Petite aide facile javascript [Résolu]

Réponse 1 / 30

Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
7 oct. 2008 à 10:34

Alors... ^^
là on va intervenir sur le getElementsByTagName que j'ai donné dans mon premier post : on récupère les a non plus depuis le document entier mais depuis les conteneurs.
Comme tu as mis des id sur tes conteneurs, c'est on ne peut plus simple !

var collection1 = document.getElementById('topmenu').getElementsByTagName('a');
var collection2 = document.getElementById('content').getElementsByTagName('a');

Tu récupères deux collections, donc tu feras deux boucles for. Si on utilise la fonction addListener, que j'ai écrite plus haut, pour concilier IE et les navigateurs standards, ça donne :

for (var i = 0; i <= collection1.length - 1; i++) {
  var lien = collection1.item(i);

  // repère #1 (on va modifier des trucs ici)

  addListener(lien, 'click', changeClass1);
}
for (var i = 0; i <= collection2.length - 1; i++) {
  var lien = collection2.item(i);

  // repère #2

  addListener(lien, 'click', changeClass2);
}

L'inconvénient est qu'on ne peut pas passer d'arguments aux fonctions appelées avec un gestionnaire d'évènements. Donc à toi de coder les fonctions changeClass1 et changeClass2 adaptées.

Mais il y a d'autres façons de contrer ça !
>1. La première, c'est faire appel à une fonction anonyme :

/*--- méthode 1 ---*/
// repère #1
addListener(lien, 'click', function () { changeClass(1) });

// repère #2
addListener(lien, 'click', function () { changeClass(2) });

Là il va falloir adapater un ptit peu la fonction changeClass :

function changeClass(maClasse) {
  document.body.className = maClasse;
}

>2. La seconde manière, c'est faire appel à une variable globale (on la déclare sans var) :

/*--- méthode 2 ---*/
// repère #1
classeGlobale = 1;
addListener(lien, 'click', changeClass);

// repère #2
classeGlobale = 2;
addListener(lien, 'click', changeClass);

On adapte aussi la fonction changeClass :

function changeClass() {
  document.body.className = classeGlobale;
}

Perso je préfère la première méthode. Elle est plus compliquée peut-être, mais plus élégante :P
(dans l'idéal, les variables globales ne devraient servir qu'au débuggage).
Et la 1re méthode te permettra de modifier le code plus tard sans trop te casser la tête. Par exemple si tu veux que la classe du body soit une chaîne et non plus un nombre :

/*--- méthode 1 ---*/
// repère #1
addListener(lien, 'click', function () { changeClass('nouvelleClasse') });

Et c'est tout !

Réponse 2 / 30

Winterboard Messages postés 137 Date d'inscription jeudi 8 mai 2008 Statut Membre Dernière intervention 30 juin 2009
1 oct. 2008 à 15:22

merci pour ta réponse mais c'est pas ça que je cherche. En fait il s'agit d'un effect de translation css3.
Je veut donc que la page se décale sur la gauche lorsqu'on quitte la page. La translation c'est facile. Maintenant j'ai aussi le javascript. Le problème est qu'on quitte la page trop rapidement pour voir le décalage.

Voilà...

Réponse 3 / 30

Winterboard Messages postés 137 Date d'inscription jeudi 8 mai 2008 Statut Membre Dernière intervention 30 juin 2009
1 oct. 2008 à 19:00

c bon les gars ca marcheee!!!!!! merci beaucoup!!!!!!

Réponse 4 / 30

Winterboard Messages postés 137 Date d'inscription jeudi 8 mai 2008 Statut Membre Dernière intervention 30 juin 2009
1 oct. 2008 à 19:18

enfaite jai encore 1 dernierre question. Comment on exclus certains a du javascript??

comme <a class="back"> ou <a id="lol">

Merci

Réponse 5 / 30

Winterboard Messages postés 137 Date d'inscription jeudi 8 mai 2008 Statut Membre Dernière intervention 30 juin 2009
6 oct. 2008 à 19:30

merci beaucoup je vais tester ca :)

encore une question. Peut on separer les <a> selon les conteneurs??

par exemple si on clique sur un <a> contenu dans <table id="topmenu"> la classe du body deveint class="1" et si on clique sur un <a> contenu dans <div id="content"> la classe du body deveint class="2"

Merci Merci Merci

:D

Réponse 6 / 30

Winterboard Messages postés 137 Date d'inscription jeudi 8 mai 2008 Statut Membre Dernière intervention 30 juin 2009
8 oct. 2008 à 20:20

merci pour ta reponse qui est surement la solutiona mon probleme mais jy comprend rien :p

voici ce que j'ai bricolé:

function changeClass(1) { 
	document.getElementById('content').className=('slidedone');	
	document.getElementById('footer').className=('slidedone');	
	document.getElementById('list').className=('slidedone');	

	
}
function changeClass(2) { 
	document.getElementById('content').className=('slidedone2');	
	document.getElementById('footer').className=('slidedone2');	
	document.getElementById('list').className=('slidedone2');	

	
}
function bindAnchors() { // fonction pour lier les liens à la fonction changeClass
	var collection1 = document.getElementById('topmenu').getElementsByTagName('a');
	var collection2 = document.getElementById('content').getElementsByTagName('a') || document.getElementById('toprightmenu').getElementsByTagName('a') || document.getElementById('toprightbutton').getElementsByTagName('a');
	
	for (var i = 0; i <= collection1.length - 1; i++) {
  var lien = collection1.item(i);

  )

  addListener(lien, 'click', changeClass1);
}
for (var i = 0; i <= collection2.length - 1; i++) {
  var lien = collection2.item(i);

  // repère #2

  addListener(lien, 'click', changeClass2);
}
 
}

// on lie les liens une fois que la page est chargée, sinon ils n'existent pas encore
window.addEventListener('load', bindAnchors, false);

jai rajouté un peu de code de partout mais je sais qu'il y a plein de fautes et tout ca. De plus jai pas compris tes methodes 1 et 2 :-p
Pourrai tu m'ecrirei ce petit bout de javascript sil te plait?

Merci beaucoup beacoup d'avance

Réponse 7 / 30

Winterboard Messages postés 137 Date d'inscription jeudi 8 mai 2008 Statut Membre Dernière intervention 30 juin 2009
9 oct. 2008 à 12:00

t un dieu!! merci beaucoup jessaye ca des que je rentre chez moi!!!

merci merci :p

si tu veut voir le site en action va voir m.iwebkit.net
Mais c'est seulement bien visible sur safari (soit mac soit windows soit iphone)
C'est un site pour iphone donc nessaye pas sur IE ou FF.

Réponse 8 / 30

Winterboard Messages postés 137 Date d'inscription jeudi 8 mai 2008 Statut Membre Dernière intervention 30 juin 2009
27 oct. 2008 à 15:46

salut groarh :)

Tout marche a merveilles mais j'aimerai developper plus mon script peut tu m'aider??

voici le code actuel donc:


function addListener(o, e, f) {
    if (o.addEventListener) {
        o.addEventListener(e, f, false);
    } else {
        o.attachEvent("on" + e, f);
    }
}


function changeClass1() {
    document.getElementById("content").className = "slidedone";
    document.getElementById("footer").className = "slidedone";
    document.getElementById("list").className = "slidedone";
}


function changeClass2() {
    document.getElementById("content").className = "slidedone2";
    document.getElementById("footer").className = "slidedone2";
    document.getElementById("list").className = "slidedone2";
}


function bindAnchors() {
    try {
        var collection1 = document.getElementById("topmenu").getElementsByTagName("a");
        for (i = 0; i <= collection1.length - 1; ++i) {
            var lien = collection1.item(i);
            addListener(lien, "click", changeClass2);
        }
    } catch (e) {
    }
    try {
        var collection2 = document.getElementById("content").getElementsByTagName("a");
        for (i = 0; i <= collection2.length - 1; ++i) {
            var lien = collection2.item(i);
            addListener(lien, "click", changeClass1);
        }
    } catch (e) {
    }
    try {
        var collection5 = document.getElementById("footer").getElementsByTagName("a");
        for (i = 0; i <= collection5.length - 1; ++i) {
            var lien = collection5.item(i);
            addListener(lien, "click", changeClass1);
        }
    } catch (e) {
    }
    try {
        var collection3 = document.getElementById("toprightmenu").getElementsByTagName("a");
        for (i = 0; i <= collection3.length - 1; ++i) {
            var lien = collection3.item(i);
            addListener(lien, "click", changeClass1);
        }
    } catch (e) {
    }
    try {
        var collection4 = document.getElementById("toprightbutton").getElementsByTagName("a");
        for (i = 0; i <= collection4.length - 1; ++i) {
            var lien = collection4.item(i);
            addListener(lien, "click", changeClass1);
        }
    } catch (e) {
    }
}

addListener(window, "load", bindAnchors);

Alors ce que j'aimerai ajouter c'est que lors d'un clic sur un <a class="noslide"> les class ne changent pas.

Aussi ce que j'aimerai c'est qu'apres 5 secondes la classe slidedone1 se transforme en reslide1 et slidedone2 en reslide2

es-ce possible

Merci beaucoup :)

Réponse 9 / 30

Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
19 nov. 2008 à 14:59

Salut !
Voilà pour tes liens noslide :

function bindAnchors() {
    try {
        var collection1 = document.getElementById("topmenu").getElementsByTagName("a");
        for (i = 0; i <= collection1.length - 1; ++i) {
            var lien = collection1.item(i);
            if (lien.className != 'noslide')
                addListener(lien, "click", changeClass2);
        }
    } catch (e) {}
    try {
        var collection2 = document.getElementById("content").getElementsByTagName("a");
        for (i = 0; i <= collection2.length - 1; ++i) {
            var lien = collection2.item(i);
            if (lien.className != 'noslide')
                addListener(lien, "click", changeClass1);
        }
    } catch (e) {}
    try {
        var collection5 = document.getElementById("footer").getElementsByTagName("a");
        for (i = 0; i <= collection5.length - 1; ++i) {
            var lien = collection5.item(i);
            if (lien.className != 'noslide')
                addListener(lien, "click", changeClass1);
        }
    } catch (e) {}
    try {
        var collection3 = document.getElementById("toprightmenu").getElementsByTagName("a");
        for (i = 0; i <= collection3.length - 1; ++i) {
            var lien = collection3.item(i);
            if (lien.className != 'noslide')
                addListener(lien, "click", changeClass1);
        }
    } catch (e) {}
    try {
        var collection4 = document.getElementById("toprightbutton").getElementsByTagName("a");
        for (i = 0; i <= collection4.length - 1; ++i) {
            var lien = collection4.item(i);
            if (lien.className != 'noslide')
                addListener(lien, "click", changeClass1);
        }
    } catch (e) {}
}

Et pour les changements de classe retardés, on va appeler le temporisateur, c'est la fonction window.setTimeout() qui fonctionne avec deux arguments : une fonction et un intervalle de temps donné en milisecondes.
Un exemple rapide avec une fonction anonyme :

window.setTimeout(function() { alert('bonjour !') }, 3000)

Cette instruction provoque l'affichage d'un "bonjour !" 3 secondes après son exécution.

Ici, ça va donner :

function reChangeClass1() {
    document.getElementById("content").className = "reslide";
    document.getElementById("footer").className = "reslide";
    document.getElementById("list").className = "reslide";
}

function reChangeClass2() {
    document.getElementById("content").className = "reslide2";
    document.getElementById("footer").className = "reslide2";
    document.getElementById("list").className = "reslide2";
}

Et :

function changeClass1() {
    document.getElementById("content").className = "slidedone";
    document.getElementById("footer").className = "slidedone";
    document.getElementById("list").className = "slidedone";
    window.setTimeout(reChangeClass1, 5000);
}


function changeClass2() {
    document.getElementById("content").className = "slidedone2";
    document.getElementById("footer").className = "slidedone2";
    document.getElementById("list").className = "slidedone2";
    window.setTimeout(reChangeClass2, 5000);
}

;)

winterboard
19 nov. 2008 à 16:41

http://www.hallmark.com/webapp/wcs/stores/servlet/ecard|10001|10051|664858|147551;-102001;181568;-102234|ecard|P1R9S|E-Cards?&totalCategories=52&sortBySelect=&categoryId=-102234

Winterboard Messages postés 137 Date d'inscription jeudi 8 mai 2008 Statut Membre Dernière intervention 30 juin 2009
19 nov. 2008 à 16:45

merde le lien marche pas.

regarde celui la http://zibri.ziphone.org/. C'est le truc flash mais c'est pas mon blog

Réponse 10 / 30

Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
30 sept. 2008 à 21:23

C'est possible, et même assez simple, mais il faut connaître un peu le DOM et les gestionnaires d'évènements.
Voici déjà le code, et pose une questions dès qu'un point paraît obscur :

function changeClass() { // fonction qui réagira au clic sur un lien
	document.body.className = 'nouvelleClasse';
	alert('ça marche !');
}

function bindAnchors() { // fonction pour lier les liens à la fonction changeClass
	var collection = document.getElementsByTagName('a');
	/* la fonction getElementsByTagName renvoie un objet de type NodeList,
		ce n'est pas un tableau ! C'est une collection de noeuds du DOM.
		Pour accéder au n-ième élément, il faut utiliser sa méthode item(n).
	*/
	for (var i = 0; i <= collection.length - 1; i++) {
		collection.item(i).addEventListener('click', changeClass, false);
	}
}

// on lie les liens une fois que la page est chargée, sinon ils n'existent pas encore
window.addEventListener('load', bindAnchors, false);

Testé sous Firefox.
Pour IE, comme d'habitude, il faut s'arracher une dent...
Remplacer les bidule.addEventListener(machin, truc, false)
par : bidule.AttachEvent(machin, truc), et en plus rajouter 'on' devant les noms d'évènements :
'click' -> 'onclick'
'load' -> 'onload'
etc...

Le false est là pour empêcher la capture de l'évènement, ce dont on n'a preque jamais besoin. IE a simplifié les choses puisqu'il ne capture pas du tout les évènements.

Pour simplifier les choses, j'ai l'habitude (et je ne suis le seul) d'utiliser une fonction bricolée pour concilier les deux. Par exemple :

function addListener(o, e, f) { // object, event, function
	if (o.addEventListener) {
		o.addEventListener(e, f, false);
	} else { // pour MSIE
		o.attachEvent('on' + e, f);
	}
}

Et dernier détail : avec cette méthode, même pas besoin de mettre un href à tes liens !!

Winterboard Messages postés 137 Date d'inscription jeudi 8 mai 2008 Statut Membre Dernière intervention 30 juin 2009
30 sept. 2008 à 22:41

merci beaucoup!!!! je teste ca des que possible.

Encore une question. Enfait je veut que le href du a s'active 2 secondes apres le clic pourque le transformation css peut avoir lieu. Es ce possible??

Réponse 11 / 30

Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
1 oct. 2008 à 12:55

Tu veux dire, changer de page après la modification du body ?

Tu vas te retrouver sur une autre page, avec le body à l'état original. Tu pourrais faire ça en javascipt, en manipulant des cookies, mais c'est vraiment pas commode. Préfère un script serveur.

Tu peux faire ça tout bêtement en passant un paramètre au serveur dans l'adresse (c'est la méthode GET) :

<a href="machin.php?changeClass=true">lien</a>

Ici par exemple, je passe le paramètre changeClass dont la valeur est true.
Ensuite, le serveur récupère ça :

<?php
if (@$_GET['changeClass']) {
  // le @ signifie :
  // "ne pas afficher de message d'erreur si la variable n'existe pas"
  $class = 'nouvelleClasse';
} else {
  $class = '';
}
?>
<!DOCTYPE ... >
<html>
<head>
  ...
</head>

<body class="<?php echo $class; ?>">
  ...

Ainsi tu arrives sur ta nouvelle page avec la classe que tu voulais sur le body.

Réponse 12 / 30

Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
6 oct. 2008 à 10:19

Salut,
là je pense qu'il va falloir modifier la fonction bindAnchors() que je t'ai donnée plus haut, pour traiter les liens au cas-par-cas. Par exemple, mettre un test dans la boucle for :

...
for (var i = 0; i <= collection.length - 1; i++) {
  if (collection.item(i).className != 'back' || collection.item(i).id != 'lol') {
    collection.item(i).addEventListener('click', changeClass, false);
  }
}
...

NB : pour accéder à l'id ou la classe, je m'appuie sur l'interface HTMLElement du DOM :
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-58190037

Réponse 13 / 30

Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
9 oct. 2008 à 11:52

Okaye je vois, tu voulais appliquer la fonction à d'autres éléments que le body, fallait le dire tout de suite !

Alors, on dit que c'est en faisant des erreurs qu'on apprend, mais ce n'est pas tout à fait vrai : encore faut-il avoir corrigé ses erreurs... Voici quelques indices :
1°)

function changeClass(1) {
...
}
function changeClass(2) {
...
}

Ici, tu confonds la déclaration et l'appel des fonctions. Quand tu déclares une fonction, tu donnes un nom général aux valeurs qui sont entre les parenthèses, pour pouvoir les utiliser dans la fonction.
Par exemple, je déclare une fonction :

function plus(m, n) {
  return m + n;
}

À présent, j'appelle la fonction :

plus(2, 3);

Les valeurs 2 et 3 ont été envoyées dans m et n pour que la fonction puisse les utiliser. Ça permet à la fonction de faire l'opération " m + n ", donc " 2 + 3 ", et de renvoyer le résultat : 5.
Ça a pas l'air très important comme ça, mais si tu maîtrises ça tu vas gagner un temps fou après :)

En fait, l'erreur que tu as faite est d'avoir déclaré deux fonctions avec le même nom, changeClass, en pensant que les valeurs utilisées dans les parenthèses (1 et 2) permettraient à Javascript de les différencier.
Correction : utiliser deux noms différents, changeClass1 et changeClass2.

2°)

var collection2 = document.getElementById('content').getElementsByTagName('a') || document.getElementById('toprightmenu').getElementsByTagName('a') || etc.

Là, je ne suis pas sûr, mais je fais une supposition :
tu as dû penser que l'opérateur || te permettait de stocker plusieurs valeurs dans une seule variable.
Ce n'est pas le cas. Il aurait fallu utiliser un tableau, mais dans le cas présent c'est plus simple d'utiliser plusieurs variables.
Correction :

var collection2 = document.getElementById('content').getElementsByTagName('a');
var collection3 = document.getElementById('toprightmenu').getElementsByTagName('a');
var collection4 = document.getElementById('toprightbutton').getElementsByTagName('a');

3°) Tu appelles des fonctions qui ne sont pas définies, changeClass1 et changeClass2, mais ce n'est pas vraiment une erreur de ta part étant donné que ça vient direct de mon code. Donc c'est une erreur de recopiage, ou plutôt d'inattention :P

Voilà, médite bien tout ça, et voici le script complet. Bon courage !

/******************************************************************************/

function addListener(o, e, f) { // object, event, function
	if (o.addEventListener) {
		o.addEventListener(e, f, false);
	} else { // pour MSIE
		o.attachEvent('on' + e, f);
	}
}

/******************************************************************************/

function changeClass1() {
	document.getElementById('content').className='slidedone';
	document.getElementById('footer').className='slidedone';
	document.getElementById('list').className='slidedone';
}

function changeClass2() {
	document.getElementById('content').className='slidedone2';
	document.getElementById('footer').className='slidedone2';
	document.getElementById('list').className='slidedone2';
}

// il faudra peut-être rajouter d'autres fonctions changeClassN

/******************************************************************************/

function bindAnchors() { // fonction pour lier les liens à la fonction changeClass
	var collection1 = document.getElementById('topmenu').getElementsByTagName('a');
	var collection2 = document.getElementById('content').getElementsByTagName('a');
	var collection3 = document.getElementById('toprightmenu').getElementsByTagName('a');
	var collection4 = document.getElementById('toprightbutton').getElementsByTagName('a');

	for (var i = 0; i <= collection1.length - 1; i++) {
		var lien = collection1.item(i);
		addListener(lien, 'click', changeClass1);
	}

	for (var i = 0; i <= collection2.length - 1; i++) {
		var lien = collection2.item(i);
		addListener(lien, 'click', changeClass2);
	}

	for (var i = 0; i <= collection3.length - 1; i++) {
		var lien = collection3.item(i);
		addListener(lien, 'click', changeClass1); // vérifier que c'est bien changeClass1 qu doit être appelée ici
	}

	for (var i = 0; i <= collection4.length - 1; i++) {
		var lien = collection4.item(i);
		addListener(lien, 'click', changeClass2); // idem
	}
}

/******************************************************************************/

// on lie les liens une fois que la page est chargée, sinon ils n'existent pas encore
// et on le fait avec addListener, pour que ça marche même sous IE
addListener(window, 'load', bindAnchors);

Réponse 14 / 30

Winterboard Messages postés 137 Date d'inscription jeudi 8 mai 2008 Statut Membre Dernière intervention 30 juin 2009
19 nov. 2008 à 17:51

le settimeout marche pas :(

en tout cas les class ne changent pas apres un certain temps. ca marche chez toi?

Réponse 15 / 30

Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
19 nov. 2008 à 18:39

Autant pour moi, j'ai pas Safari sous la main pour tester...

Tu utilises quelle version de Safari ? Je viens de voir qu'avant la 1.2, un bug a été reporté à propos de setTimeout...

Réponse 16 / 30

Winterboard Messages postés 137 Date d'inscription jeudi 8 mai 2008 Statut Membre Dernière intervention 30 juin 2009
19 nov. 2008 à 19:21

enfait il s'agit du safari de l'iphone donc je peut pas te dire :p

mais j'ai aussi testé sous firefox et ca ne marche pas nonplu. Il suffit de regarder la source géneré apres quelques secondes et on s'appercoit que c'est toujours "slide"

merci pour ton aide:)

Réponse 17 / 30

Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
19 nov. 2008 à 19:29

Nanan !
Le code source ne prend pas en compte les modifications Javascript, sauf si tu sélectionnes une portion de page et que tu fais clic droit > "afficher le code source de la sélection".

Tu n'as pas de console Javascript ? > Firebug !

Edit : tu as réussi à me faire douter... mais j'ai revérifié : ça marche !

var input = document.createElement('input');
input.setAttribute('type', 'button');
input.value = "cliquez-moi";
function sayHello() { alert('hello !') };
function differe() { window.setTimeout(sayHello, 2000) };
input.addEventListener('click', differe, false);
document.body.appendChild(input);

Réponse 18 / 30

Winterboard Messages postés 137 Date d'inscription jeudi 8 mai 2008 Statut Membre Dernière intervention 30 juin 2009
19 nov. 2008 à 19:32

sisi ca marche! j'utilise une extension speciale. C'est pourca que je peut voir le changement vers class="slide".
c'est la source "géneré".

Et la console Js ne m'indique pqs d'erreurs.... :(

Réponse 19 / 30

Groarh Messages postés 682 Date d'inscription vendredi 1 août 2008 Statut Membre Dernière intervention 28 juin 2015 185
9 oct. 2008 à 12:37

Je rentre chez mes vieux ce week-end, Safari est installé là-bas, je regarderai ^^

Au fait : je dois toute ma science à un autre dieu (lol) qui s'appelle Christophe Porteneuve, grâce à un bouquin génial qu'il a écrit. Malheureusement le livre n'est pas gratuit, mais les annexes (qui sont déjà bien utiles) sont disponibles par ici (pdf).

Bonne lecture ! Et n'oublie pas de marquer le topic comme résolu.

Réponse 20 / 30

Winterboard Messages postés 137 Date d'inscription jeudi 8 mai 2008 Statut Membre Dernière intervention 30 juin 2009
9 oct. 2008 à 19:52

hmm le code marche pas :( il ne change pas la classe des divs
je vais essayer de reparer ca tout seul :p

Petite aide facile javascript

30 réponses

Discussions similaires

Newsletters