 Masquer/afficher des div, Sans JS ? |
 |
Bienvenue invité ( Connexion | Inscription )
  |
 23 Oct 2004, 15:17
Message
#1
|
|
 Mod'oh  Groupe : Ancien de la team Messages : 8 591 Inscrit : 8 Jan 2003 Lieu : Centre Bell Membre no 5 518  |
Salut,
Bon, j'ai un petit soucis pour un site que je fais pour un copain. Il voudrait une galerie de photos qui se présenterait de la manière suivante : Un bandeau présentant sa photo. En dessous une série de vignettes miniature des photos. Quand on passe la souris sur la vignette, le bandeau change... Comme j'essaye de lui faire ça en CSS xHTML Transitive, je coince un peu... GoLive intègre des scripts tous faits pour faire ça, mais abuse de scripts JavaScript propriétaires où je ne comprends rien (même si c'est assez simple à mettre en place). Je comptais exploiter les caractéristiques CSS visibility (hidden et visible). Mais je coince car j'arrive pas à lui dire un truc genre onmouseover set visilibity #div1 to hidden, set visibility #div2 to visible... (ce langage n'existe pas, c'est juste un truc pour vous faire comprendre le but du binz  )Enfin voilà quoi, si quelqu'un peut m'aider. Bye -------------------- iPad Pro 11’’ / iPhone 12 mini 64Go
|
 |
 
|
|
23 Oct 2004, 15:27
Message
#2
|
|
|
Mod'oh Groupe : Ancien de la team Messages : 8 591 Inscrit : 8 Jan 2003 Lieu : Centre Bell Membre no 5 518 |
Bon, désolé...
J'ai trouvé un truc : http://www.alsacreations.com/articles/affiche/ Je vais voir si c'est exploitable... Ca en a l'air. Si vous avez de meilleures techniques, n'hésitez pas Bye -------------------- iPad Pro 11’’ / iPhone 12 mini 64Go
|
|
|
|
|
24 Oct 2004, 21:54
Message
#3
|
|
 Macbidouilleur d'Or ! Groupe : Membres Messages : 1 779 Inscrit : 7 Jan 2003 Lieu : Montréal Membre no 5 496 |
Sans Javascript, tu n'y arriveras pas, c'est sûr. Maintenant, c'est pas forcément la peine non plus de faire compliqué.
Si tu as un div déclaré comme ça : CODE <div id="premier"><img src=""..... /></div> Tu peux piloter sa visibilité avec l'instruction : CODE document.getElementById('premier').style.visibility='hidden'; On peut aussi changer hidden par visible. C'est sans doute la brique de base de ce que tu veux faire. Si j'ai bien compris ton exemple, ton image sur laquelle il faut passer pour faire apparaître le bandeau pourrait être déclarée ainsi : CODE <img src="xxx" onmouseover="show('id_a_rendre_visible');" /> La fonction show aurait pour tache de rendre visible le div nommé id_a_rendre_visible et de rendre invisible l'ancien div visible. -------------------- guigui - 15,2" et même 20 de plus pour laisser courir le tigre.
|
|
|
|
|
11 Nov 2004, 10:07
Message
#4
|
|
 Macbidouilleur de bronze ! Groupe : Membres Messages : 441 Inscrit : 15 Sep 2003 Lieu : Paris Membre no 9 610 |
Juste pour compléter l'article :
L'action Afficher/Masquer de GoLive ne fonctionne que pour des calques (boîtes flottantes) déclarés. Or tu peux affecter TOUT élément HTML doté d'un identifiant unique Exemple : CODE <P id="uneID"> Si tu dois utiliser plusieur fois des codes javascript dans ta page, il vaut mieux en faire des fonctions. Dans l'en-tete (entre <HEAD> et </HEAD>, place le code suivant : CODE <script type="text/javascript"> function afficher(x){ document.getElementById(x).style.visibility='visible'; } function masquer(x){ document.getElementById(x).style.visibility='hidden'; } </script> Exemple d'utlisation dans la page : CODE <body bgcolor="#ffffff"> <p><a href="#" onmouseover = "masquer('uneID')" onmouseout="afficher('uneID')">Bonjour</a></p> <p id="uneID">Je suis la</p> </body> Si plusieurs page doivent faire appel aux même fonction, enregistre le script (sans les balises <script type="text/javascript"> </script> dans une fichier texte que tu nommes (par exemple) monFichier.js Si ce fichier est au même niveau que les page qui doivent s'en servir, il suffit de placer dans l'entete de chaque page le code suivant : CODE script type="text/javascript" src="monFichier.js"></script> Mais puis que tu utilises GoLive, j'ai créé une action permettant d'fficher ou de masquer tout élément HTML possédant une ID unique. Actions GoLive (c'est gratuit) -------------------- iMac intel 27'- 128 Go RAM 16VRAM SSD 2 To BigSur || Mac Mini SL 10.6.8 8Go de Ram 256 Mo de Vram - SSD 250 Go
------------------------- http://www.culturecivique.com Le Yi-King ------- je cogite, j'ergote, mais j'assume |
|
|
|
|
14 Nov 2004, 14:55
Message
#5
|
|
 Macbidouilleur de vermeil ! Groupe : Membres Messages : 1 311 Inscrit : 5 Mar 2003 Lieu : Grenoble Membre no 6 522 |
J'ai encore plus simple mais le project est en traveaux Drakeramore, (design) mais le code marche, il devrait sortir sous peu
une liste des images (ou des vignettes) générée à partir d'un dossier d'image et par 2 lignes de javascript ça charge dans la page l'image souhaité (sans reload) L'inconvénient de ta technique c'est que ça devrait tout charger d'un coup -------------------- MacBook Pro 2.2 - 2Go - 120Go
|
|
|
|
 29 Jan 2006, 20:21
Message
#6
|
|
 Macbidouilleur d'Or ! Groupe : Banned Messages : 4 132 Inscrit : 25 Jan 2003 Lieu : Entre Nancy, Metz et Sarreguemines Membre no 5 818 |
Bonsoir à tous,
Je cherche à faire qqch de très approchant à ce qui est décrit par Milan. Je cherche à afficher/masquer un groupe de lignes (<tr>) d'un tableau. Ce qui me pose problème c'est d'avoir un lien "roulant" qui affiche "Masquer" lorsque ces lignes sont affichées et "Afficher" lorsque ces lignes sont masquées. Comment faire ça? Merci! -------------------- A+
Le site de notre assoc' : AECDN Vous avez des problèmes d'affichage avec votre MBP? cliquez ici! MacBook Pro 15,4" 2x2,6 GHz Penryn/4 Go DDR2/200 Go 7200 tr/min/SD/Leopard Powered (10.5.7) avec écran externe Samsung 19" SyncMaster 931BW Stockage : Pioneer DVR111D + DD ext. 1 To Samsung FW800 + DD ext. Seagate Momentus 2 FW 100 Go et Hitachi TravelSTar 7k100 FW 100 Go Musique : iPod Touch 16 Go + iPod 3G 20 Go refurbished + iTrip (super pratique!) + iPod Hi-Fi Image : Imprimante laser couleurs Brother HL-4040CN + Epson Perfection 2480 + APN Pentax Optio 550 Internet : Freebox HD dégroupage total, marche moyen :( |
|
|
|
|
30 Jan 2006, 17:08
Message
#7
|
|
 Entarteur poissonnier du MCCASRADM Groupe : Membres Messages : 2 608 Inscrit : 17 Sep 2002 Lieu : Luxembourg Membre no 3 540 |
utilise innerHTML en js
avec juste une petite fonction de switch 
-------------------- MacBook Pro 13' 2017 - 10.15 up to date |
|
|
|
|
30 Jan 2006, 22:54
Message
#8
|
|
|
Macbidouilleur d'Or ! Groupe : Banned Messages : 4 132 Inscrit : 25 Jan 2003 Lieu : Entre Nancy, Metz et Sarreguemines Membre no 5 818 |
J'ai trouvé un script ici!! Il permet de faire ce que je désire faire, mais j'ai un petit soucis ; voici le code :
CODE <head> <script language="javascript" type="text/javascript"> function toggle(arg) { if (document.getElementById(arg).style.display == 'inline') { valeur = 'none'; } else { valeur = 'inline'; } document.getElementById(arg).style.display = valeur; createCookie(arg + 'essaiBox', valeur, 365); // changer le texte if (document.getElementById(arg + '-link').innerHTML == '<span class="searchhighlight">Afficher</span>') { document.getElementById(arg + '-link').innerHTML = '<span class="searchhighlight">Masquer</span>'; } else { document.getElementById(arg + '-link').innerHTML = '<span class="searchhighlight">Afficher</span>'; } } </script> <script language="javascript" type="text/javascript"> function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = \"; expires=\"+date.toGMTString(); } else expires = \"\"; document.cookie = name+\"=\"+value+expires+\"; path=/\"; } </script> </head> <body> <script language="javascript" type="text/javascript"> function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } </script> <script language="javascript" type="text/javascript"> <!-- texte = (readCookie("essaiBox") == 'inline') ? 'Masquer' : 'Afficher'; document.write('<span class="toggler">(<a id="essai-link" href="#" onclick="toggle(\'essai\'); return false;">' + texte + '</a>)</span>'); // --> </script> <br> <span id="essai"> <script language="javascript" type="text/javascript"> <!-- document.getElementById("essai").style.display = (readCookie("essaiBox") == 'inline') ? 'inline' : 'none'; // --> </script> Ici le texte à afficher et à masquer... Bla bla bla, patati et patata... </span> </body> Mais le problème, c'est que le texte reste à "Afficher" dans tout les cas... Comment je fais pour corriger ça? Merci d'avance! -------------------- A+
Le site de notre assoc' : AECDN Vous avez des problèmes d'affichage avec votre MBP? cliquez ici! MacBook Pro 15,4" 2x2,6 GHz Penryn/4 Go DDR2/200 Go 7200 tr/min/SD/Leopard Powered (10.5.7) avec écran externe Samsung 19" SyncMaster 931BW Stockage : Pioneer DVR111D + DD ext. 1 To Samsung FW800 + DD ext. Seagate Momentus 2 FW 100 Go et Hitachi TravelSTar 7k100 FW 100 Go Musique : iPod Touch 16 Go + iPod 3G 20 Go refurbished + iTrip (super pratique!) + iPod Hi-Fi Image : Imprimante laser couleurs Brother HL-4040CN + Epson Perfection 2480 + APN Pentax Optio 550 Internet : Freebox HD dégroupage total, marche moyen :( |
|
|
|
|
31 Jan 2006, 19:09
Message
#9
|
|
|
Macbidouilleur d'Or ! Groupe : Banned Messages : 4 132 Inscrit : 25 Jan 2003 Lieu : Entre Nancy, Metz et Sarreguemines Membre no 5 818 |
Up!...
Un spécialiste en Javascript pour m'aider à trouver la solution pour corriger ce petit bug (pas de changement du texte, qui reste à "Afficher") ?? Merci! -------------------- A+
Le site de notre assoc' : AECDN Vous avez des problèmes d'affichage avec votre MBP? cliquez ici! MacBook Pro 15,4" 2x2,6 GHz Penryn/4 Go DDR2/200 Go 7200 tr/min/SD/Leopard Powered (10.5.7) avec écran externe Samsung 19" SyncMaster 931BW Stockage : Pioneer DVR111D + DD ext. 1 To Samsung FW800 + DD ext. Seagate Momentus 2 FW 100 Go et Hitachi TravelSTar 7k100 FW 100 Go Musique : iPod Touch 16 Go + iPod 3G 20 Go refurbished + iTrip (super pratique!) + iPod Hi-Fi Image : Imprimante laser couleurs Brother HL-4040CN + Epson Perfection 2480 + APN Pentax Optio 550 Internet : Freebox HD dégroupage total, marche moyen :( |
|
|
|
|
31 Jan 2006, 19:47
Message
#10
|
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 1 779 Inscrit : 7 Jan 2003 Lieu : Montréal Membre no 5 496 |
Comme je suis un peu lent à la détente, je comprends pas très bien ce que tu veux faire. (En particulier, à quoi ça sert de masquer une colonne si c'est pour afficher quand même dedans un bouton pour l'afficher, à moins que le bouton soit ailleurs, mais bref...).
D'autre part, les cookies et moi, ça fait deux, donc je prends un exemple simple avec les mécanismes de base : CODE <html> <head> <script type="text/javascript"> function toggleAffichage(aId, trId) { if (document.getElementById(trId).style.display=='') { document.getElementById(trId).style.display="none"; document.getElementById(aId).innerHTML="Afficher premier tr"; } else { document.getElementById(trId).style.display=''; document.getElementById(aId).innerHTML="Masquer premier tr"; } } </script> </head> <body> <span onclick="toggleAffichage('aOne', 'trOne')"><a id="aOne" href="#">Masquer premier tr</a></span> <span onclick="toggleAffichage('aTwo', 'trTwo')"><a id="aTwo" href="#">Masquer second tr</a></span> <table border="1"> <tr id="trOne"> <td> case 1</td><td>case 2</td> </tr> <tr id="trTwo"> <td> case 3</td><td>case 4</td> </tr> </table> </body> </html> Chaque action provoque 2 choses : le masquage du <tr> (avec l'attribut visibility), et le remplacement du "Afficher" par "Masquer" à l'intérieur de la balise <a> Je pense que c'est assez explicite. -------------------- guigui - 15,2" et même 20 de plus pour laisser courir le tigre.
|
|
|
|
|
1 Feb 2006, 00:24
Message
#11
|
|
|
Macbidouilleur d'Or ! Groupe : Banned Messages : 4 132 Inscrit : 25 Jan 2003 Lieu : Entre Nancy, Metz et Sarreguemines Membre no 5 818 |
En fait j'ai CECI! Et mon problème c'est que le lien reste tout le temps sur Affiché, alors qu'il devrait alterner "Afficher" et "Masquer"....
Alors une idée? Merci pour ton aide! -------------------- A+
Le site de notre assoc' : AECDN Vous avez des problèmes d'affichage avec votre MBP? cliquez ici! MacBook Pro 15,4" 2x2,6 GHz Penryn/4 Go DDR2/200 Go 7200 tr/min/SD/Leopard Powered (10.5.7) avec écran externe Samsung 19" SyncMaster 931BW Stockage : Pioneer DVR111D + DD ext. 1 To Samsung FW800 + DD ext. Seagate Momentus 2 FW 100 Go et Hitachi TravelSTar 7k100 FW 100 Go Musique : iPod Touch 16 Go + iPod 3G 20 Go refurbished + iTrip (super pratique!) + iPod Hi-Fi Image : Imprimante laser couleurs Brother HL-4040CN + Epson Perfection 2480 + APN Pentax Optio 550 Internet : Freebox HD dégroupage total, marche moyen :( |
|
|
|
|
1 Feb 2006, 00:45
Message
#12
|
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 3 372 Inscrit : 15 Oct 2003 Membre no 10 424 |
Guiguiguillaume m'a inspiré. Voilà ma version qui utilise beaucoup les CSS (avec des selecteurs simples) et un minimum de Javascript. Ca devrait être relativement robuste ?
CODE <html>
<head> <style language="javascript" type="text/css"> /* Défaut à display:block pour éviter que tout le div ne disparaisse avec son contenu (le lien "Afficher" qui doit rester visible) lorsque div.id==collapsed. Comme tout le tableau est cliquable je mets un cursor: correspondant à l'idée. Le second cursor: est pour IE */ #collapsed, #expanded { display: block; cursor: pointer; cursor: hand; } /* div.id==collapsed: cacher le tableau, le lien "Cacher" et montrer le lien "Afficher", div.id==expanded: faire l'inverse. Le tableau rend mieux avec display:table qu'avec display:block */ #collapsed .hide, #expanded .show, #collapsed .data { display: none; } #collapsed .show, #expanded .hide { display: block; } #expanded .data { display: table; } </style> </head> <body> <!-- Le onclick permet de changer l'état en basculant this.id et la CSS s'occupe du reste --> <div id="expanded" onclick="(this.id == 'expanded' ? this.id='collapsed' : this.id='expanded');return true;"> <a class="show" href="#">Afficher la table</a> <a class="hide" href="#">Masquer la table</a> <table class="data" border="1"> <tr><td>case 1</td><td>case 2</td></tr> <tr><td>case 3</td><td>case 4</td></tr> </table> </div> </body> </html> Ce message a été modifié par battambang - 1 Feb 2006, 00:46. -------------------- Air 1.6/HDD/OS X.5 - mini [email protected]/HDD 7200rpm/OS X.4 Lisez la FAQ - Suivez la Charte.
|
|
|
|
|
1 Feb 2006, 00:51
Message
#13
|
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 1 779 Inscrit : 7 Jan 2003 Lieu : Montréal Membre no 5 496 |
Quant à ton code
1) Avoue le, tu l'as piqué quelque part sans trop comprendre ? En tout cas, le premier problème, c'est la panoplie des \ qui ne devraient pas être là. Donc, un premier nettoyage te donnera déjà un script qui marche (au lieu d'un script qui s'arrête parce que Syntax Error, cf. la console Javascript de FireFox). 2) Les cas if et else sont inversés, donc remis dans le bon sens, ça va mieux. Au final : CODE <html> <head> <script language="javascript" type="text/javascript"> function toggle(arg) { if (document.getElementById(arg).style.display == 'inline') { valeur = 'none'; } else { valeur = 'inline'; } document.getElementById(arg).style.display = valeur; createCookie(arg + 'essaiBox', valeur, 365); // changer le texte if (document.getElementById(arg + '-link').innerHTML == '<span class="searchhighlight">Masquer</span>') { document.getElementById(arg + '-link').innerHTML = '<span class="searchhighlight">Afficher</span>'; } else { document.getElementById(arg + '-link').innerHTML = '<span class="searchhighlight">Masquer</span>'; } } </script> <script language="javascript" type="text/javascript"> function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } </script> </head> <body> <script language="javascript" type="text/javascript"> function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } </script> <script language="javascript" type="text/javascript"> <!-- texte = (readCookie("essaiBox") == 'inline') ? 'Masquer' : 'Afficher'; document.write('<span class="toggler">(<a id="essai-link" href="#" onclick="toggle(\'essai\'); return false;">' + texte + '</a>)</span>'); // --> </script> <br> <span id="essai"> <script language="javascript" type="text/javascript"> <!-- document.getElementById("essai").style.display = (readCookie("essaiBox") == 'inline') ? 'inline' : 'none'; // --> </script> Ici le texte à afficher et à masquer... Bla bla bla, patati et patata... </span> </body> </html> Mais je persiste sur mon intuition que c'est du code piqué sans avoir forcément compris, et que ce faisant, c'est plus dur pour tout le monde à débugger. En tout cas, voici donc plusieurs solutions. -------------------- guigui - 15,2" et même 20 de plus pour laisser courir le tigre.
|
|
|
|
|
1 Feb 2006, 15:20
Message
#14
|
|
|
Macbidouilleur d'Or ! Groupe : Banned Messages : 4 132 Inscrit : 25 Jan 2003 Lieu : Entre Nancy, Metz et Sarreguemines Membre no 5 818 |
CITATION(guiguiguillaume @ 1 Feb 2006, 00:51) [snapback]1535813[/snapback] Quant à ton code 1) Avoue le, tu l'as piqué quelque part sans trop comprendre ? [...] Mais je persiste sur mon intuition que c'est du code piqué sans avoir forcément compris, et que ce faisant, c'est plus dur pour tout le monde à débugger. En tout cas, voici donc plusieurs solutions. Je ne vois pas ce qu'il y a à avouer, puisque si tu avais lu mes messages, ou si tu avais été plus dégourdi , tu aurais vu que j'ai dit dans ce message que j'ai trouvé ce script mais que j'avais des soucis avec... Et comme le javascript, j'en fais très peu (pour ainsi dire presque jamais), c'est pour ça que je viens m'en remettre à ceux qui savent (n'est-ce pas là le but d'un forum?!), mais ça n'empêche que ce script, que ça soit moi ou un autre qui l'ait fait, il ne sera pas plus facile à débugger pour vous...  [edit]Tout ça pour dire que je vais regarder et tester vos codes et solutions. Merci[/edit] Ce message a été modifié par Captain Bumper - 2 Feb 2006, 00:54. -------------------- A+
Le site de notre assoc' : AECDN Vous avez des problèmes d'affichage avec votre MBP? cliquez ici! MacBook Pro 15,4" 2x2,6 GHz Penryn/4 Go DDR2/200 Go 7200 tr/min/SD/Leopard Powered (10.5.7) avec écran externe Samsung 19" SyncMaster 931BW Stockage : Pioneer DVR111D + DD ext. 1 To Samsung FW800 + DD ext. Seagate Momentus 2 FW 100 Go et Hitachi TravelSTar 7k100 FW 100 Go Musique : iPod Touch 16 Go + iPod 3G 20 Go refurbished + iTrip (super pratique!) + iPod Hi-Fi Image : Imprimante laser couleurs Brother HL-4040CN + Epson Perfection 2480 + APN Pentax Optio 550 Internet : Freebox HD dégroupage total, marche moyen :( |
|
|
|
|
4 Feb 2006, 16:45
Message
#15
|
|
|
Macbidouilleur d'Or ! Groupe : Banned Messages : 4 132 Inscrit : 25 Jan 2003 Lieu : Entre Nancy, Metz et Sarreguemines Membre no 5 818 |
J'ai regardé les corrections apportées, mais le problème devient "inverse", maintenant, il y a bien marqué "Afficher" qui se change une 1ère fois en "Masquer", mais après, ça reste bloqué à "Masquer"...
 Qqn serait voir où est/sont le(s) problème(s)? Merci bcp! Ce message a été modifié par Captain Bumper - 4 Feb 2006, 16:46. -------------------- A+
Le site de notre assoc' : AECDN Vous avez des problèmes d'affichage avec votre MBP? cliquez ici! MacBook Pro 15,4" 2x2,6 GHz Penryn/4 Go DDR2/200 Go 7200 tr/min/SD/Leopard Powered (10.5.7) avec écran externe Samsung 19" SyncMaster 931BW Stockage : Pioneer DVR111D + DD ext. 1 To Samsung FW800 + DD ext. Seagate Momentus 2 FW 100 Go et Hitachi TravelSTar 7k100 FW 100 Go Musique : iPod Touch 16 Go + iPod 3G 20 Go refurbished + iTrip (super pratique!) + iPod Hi-Fi Image : Imprimante laser couleurs Brother HL-4040CN + Epson Perfection 2480 + APN Pentax Optio 550 Internet : Freebox HD dégroupage total, marche moyen :( |
|
|
|
|
4 Feb 2006, 20:49
Message
#16
|
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 1 779 Inscrit : 7 Jan 2003 Lieu : Montréal Membre no 5 496 |
C'est un fonctionnement ératique, classique en JS. Ça passe sous FFox, pas sous Safari...
Le problème vient (premièrement) du fait que la zone où est écrite "Afficher" (ou "Masquer") est présente à la base mais générée par du JS lui-même avec l'appel document.write (et ce pour de très obscures raisons, enfin, je vais pas y revenir, je trouve ce code illisible, surtout à coup de cookies et d'affichage inline qu'on trifouille), qui ne respecte pas le contenu du if/else. Il y a donc incohérence entre ce qui est écrit à la base et ce qui est testé par la suite dans le script. Le fait que ça marche sous FFox et la première fois sous Safari, c'est que la nature même d'un if/else est de retomber sur un cas par défaut. Une autre source de problème est le fait qu'on fait appel à innerHTML qui a un comportement différent selon les navigateurs, notemment en ce qui concerne le respect des doctype (qui n'est pas déclaré dans ce document d'exemple par simplicité, mais j'ose espéré que dans ton vrai code, tu utilises et respecte les doctype). En effet, sans doctype précisé, les navigateurs repassent par défaut en HTML 4 transitionnel, voire en 3.2 (mais ça dépend, et quand ça dépend, ça veut dire que ça marche des fois, et des fois pas), et dans ce cas, les balises s'écrivent en majuscules. Ainsi, et malgré que le code Javascript indique d'écrire "<span>", Safari, Opéra, IE ou encore OmniWeb écrivent "<SPAN>", et donc, le test if/else ne peut pas fonctionner. FireFox et Camino, mais aussi Netscape, écrivent pour leur part bien <span>, ce qui fait que le code fonctionne chez eux. Solutions : 1) A-t-on vraiment besoin de générer le code via un document.write au début ? Si oui, autant le corriger pour qu'il soit cohérent avec le if 2) Préciser des doctypes et faire un code valide. C'est toujours utile. 3) Faire une comparaison plus intelligente dans le if(), par exemple, ignorer les majuscules. Le 3 est sans doute ce qu'il y a de plus sûr à modifier, et permet de couper court aux problèmes soulevés par les 2 autres. D'autant plus qu'à bien y réfléchir, on n'a même pas besoin de faire une comparaison sans casse, on a juste à savoir si le bout de texte contient le mot "afficher" ou le mot "masquer", on n'a donc même pas à tester réellement une égalité. On peut utiliser la fonction search() pour ça, avec une expression régulière, ou une chaîne de caractère simple. Au final, avec cette simple modification, ça remarche sur Safari et FFox et IE Mac. CODE <html> <head> <script language="javascript" type="text/javascript"> function toggle(arg) { if (document.getElementById(arg).style.display == 'inline') { valeur = 'none'; } else { valeur = 'inline'; } document.getElementById(arg).style.display = valeur; createCookie(arg + 'essaiBox', valeur, 365); // changer le texte if (document.getElementById(arg + '-link').innerHTML.search(/Masquer.+/) != -1) { document.getElementById(arg + '-link').innerHTML = '<span class="searchhighlight">Afficher</span>'; } else { document.getElementById(arg + '-link').innerHTML = '<span class="searchhighlight">Masquer</span>'; } } </script> <script language="javascript" type="text/javascript"> function createCookie(name,value,days) { if (days) { var date = new Date(); date.setTime(date.getTime()+(days*24*60*60*1000)); var expires = "; expires="+date.toGMTString(); } else expires = ""; document.cookie = name+"="+value+expires+"; path=/"; } </script> </head> <body> <script language="javascript" type="text/javascript"> function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for(var i=0;i < ca.length;i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); } return null; } </script> <script language="javascript" type="text/javascript"> <!-- texte = (readCookie("essaiBox") == 'inline') ? 'Masquer' : 'Afficher'; document.write('<span class="toggler">(<a id="essai-link" href="#" onclick="toggle(\'essai\'); return false;">' + texte + '</a>)</span>'); // --> </script> <br> <span id="essai"> <script language="javascript" type="text/javascript"> <!-- document.getElementById("essai").style.display = (readCookie("essaiBox") == 'inline') ? 'inline' : 'none'; // --> </script> Ici le texte à afficher et à masquer... Bla bla bla, patati et patata... </span> </body> </html> PS : Pour trouver l'erreur tout seul, il suffisait d'écrire alert(document.getElementById(arg + '-link').innerHTML) juste avant le if(). Procéder par alert() ligne par ligne est le meilleur moyen de débugger un code que l'on ne comprend pas, même si c'est très long. Ainsi, on se rendait compte que la valeur rendue par document.getElementById(arg + '-link').innerHTML était bien celle qu'on demandait de tester (à droite de l'égalité), aux majuscules près. Ceci explique notemmant comment j'ai pensé aux les doctypes et à la solution 3. On se rendait aussi compte que la première fois, on n'avait pas du tout le texte recherché (il n'y avait pas les <span>) et que c'est pour cela que j'avais dit plus haut que les cas if et else étaient inversés (le cas par défaut devait nécessairement être "Écrire le mot masquer", puis que l'état original de la page est incohérent avec le script. Ce message a été modifié par guiguiguillaume - 4 Feb 2006, 21:00. -------------------- guigui - 15,2" et même 20 de plus pour laisser courir le tigre.
|
|
|
|
|
5 Feb 2006, 17:24
Message
#17
|
|
|
Macbidouilleur d'Or ! Groupe : Banned Messages : 4 132 Inscrit : 25 Jan 2003 Lieu : Entre Nancy, Metz et Sarreguemines Membre no 5 818 |
Merci guiguiguillaume ça marche parfaitement comme ça... J'y ajoute ma petite touche et ça fonctionne!
MErci encore! -------------------- A+
Le site de notre assoc' : AECDN Vous avez des problèmes d'affichage avec votre MBP? cliquez ici! MacBook Pro 15,4" 2x2,6 GHz Penryn/4 Go DDR2/200 Go 7200 tr/min/SD/Leopard Powered (10.5.7) avec écran externe Samsung 19" SyncMaster 931BW Stockage : Pioneer DVR111D + DD ext. 1 To Samsung FW800 + DD ext. Seagate Momentus 2 FW 100 Go et Hitachi TravelSTar 7k100 FW 100 Go Musique : iPod Touch 16 Go + iPod 3G 20 Go refurbished + iTrip (super pratique!) + iPod Hi-Fi Image : Imprimante laser couleurs Brother HL-4040CN + Epson Perfection 2480 + APN Pentax Optio 550 Internet : Freebox HD dégroupage total, marche moyen :( |
|
|
|
|
1 utilisateur(s) sur ce sujet (1 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :
| Nous sommes le : 20th May 2024 - 10:49 |