Prise en compte des calques avec Firefox [résolu]

[Mirovinben]

Bonjour à tous

Ce post est mon premier post sur ce forum. Je viens d'installer Firefox sur mon PC (XP Home-SP2) et souhaite l'utiliser à la place de IE6...

J'ai créé un site perso utilisant des calques grâce à une librairie javascript qui teste le navigateur avec "document.all" (=IE >5.0) ou "document.layers" (NS 4.7)... ne riez pas mais c'était l'environnement que je connaissais au moment de mes premiers développements...

Comme vous vous en doutez, Firefox refuse d'afficher mes calques.. Quelle alternative me propsez-vous... Je peux sans regrets remplacer mes test sur NS4 par des tests sur Firefox (équivalent NS??).

exemple de script à modifier :

function ActivLayer(Nom) {
if (Nom!=null){
if (document.all) {document.all['IE'+Nom].style.visibility="visible";}
if (document.layers) {document.layers['NS'+Nom].visibility="show";}
}
}

mon site (normalement des calques s'affichent sur la page de gauche) selon le lien survolé en page de droite...ici

Merci d'avance...

[calimo]

Il faut utiliser documentGetElementById. Il se comporte comme le document.all mais il est "standard" c'est à dire défini par un organisme indépendant.
Il marche sur tous les navigateurs actuels, en tous cas tous ceux supportant le JS, IE 5 et +, Netscape 6 et+, Mozilla, Firefox, Safari, Konqueror, Opera etc
Ainsi la fonction suivante devrait marcher :

Code : Tout sélectionner

function ActivLayer(Nom) {
if (Nom!=null){documentGetElementById['IE'+Nom].style.visibility="visible";
}

[Mirovinben]

Il faut utiliser documentGetElementById. Il se comporte comme le document.all mais il est "standard" c'est à dire défini par un organisme indépendant.
Il marche sur tous les navigateurs actuels, en tous cas tous ceux supportant le JS, IE 5 et +, Netscape 6 et+, Mozilla, Firefox, Safari, Konqueror, Opera etc
Ainsi la fonction suivante devrait marcher :

Code : Tout sélectionner

function ActivLayer(Nom) {
if (Nom!=null){documentGetElementById['IE'+Nom].style.visibility="visible";
}

Merci pour ta réponse qui confirme mes recherches et tests de ce matin... J'ai modifié ma librairie qui est donc à présent compatible également avec Firefox...

Par contre je rencontre un pb d'adaptation d'une autre librairie créant des bulles d'aide avec ".innerHTML" qui ne semble pas avoir d'équivalent hors Krosoft et qui me permettait facilement d'insérer du code Html dans un groupe <div>...</div>
Pour la partie NS4.x j'utilisais document.layers["bulle"].document.write(HTML)...

[bobo]

Code : Tout sélectionner

function ActivLayer(Nom) {
if (Nom!=null){documentGetElementById['IE'+Nom].style.visibility="visible";
}

Attetion de bien mettre des () et non des []

[Mirovinben]

Code : Tout sélectionner

function ActivLayer(Nom) {
if (Nom!=null){documentGetElementById['IE'+Nom].style.visibility="visible";
}

Attetion de bien mettre des () et non des []

Voui, j'avais corrigé (et même inséré un "." entre document et Getxxx !)

[martin]

Bonjour,
innerHTML fonctionne dans firefox et mozilla.
Je te file un lien en béton pour ce genre de correspondance, et solutions à apporter en cas de problème:
http://www.quirksmode.org/

[Bobe]

c'est document.getElementById()

Code : Tout sélectionner

function ActivLayer(Nom) {
if (Nom!=null){document.getElementById('IE'+Nom).style.visibility="visible";
}

Concernant quirksmode.org, oui, c'est un très bon site et je le recommande assez souvent. Attention cependant, l'auteur n'est pas toujours très objectif dans les résultats qu'il donne.

innerHTML n'est pas standard.

[calimo]

La référence du support de DOM par Mozilla : http://www.mozilla.org/docs/dom/domref/
Et en particulier innerHTML

Cela dit je n'ai jamais réussi à coder quoi que ce soit en JS, donc voilà, j'essayais

[PsyDk]

La référence du support de DOM par Mozilla : http://www.mozilla.org/docs/dom/domref/

Cette référence est vraiment excellente, je m'en sers quand je dois faire du javascript

Pour ajouter ou modifier du contenu dynamiquement, je manipule directement l'arbre du document à l'aide de fonctions comme createElement, createTextNode, appendChild... Une logique très cohérente

[Mirovinben]

(...)innerHTML fonctionne dans firefox et mozilla.(...)

Pour innerHTML, il semblerait que cela ne fonctionne que pour lire du code (dump) et non pour en écrire... et il faut que j'arrive à écrire du html dans mon DIV !

(...)Pour ajouter ou modifier du contenu dynamiquement, je manipule directement l'arbre du document à l'aide de fonctions comme createElement, createTextNode, appendChild... Une logique très cohérente

Oups... Je vais approfondir...
Ton idée est intéressante sauf que je speak pas trop à l'aise l'english ! Tu n'aurais pas un didactitiel in french sous la main ou un exemple d'utilisation ? voui, j'abuse... excuse-moi ! mais j'aimerait tant avoir des scripts "multi-navigateurs" et je parie sur le succès de plus en plus grand de Firefox !

[Bobe]

Les traduction françaises des spécifications officielles pour le DOM (Document Object Model):
http://www.yoyodesign.org/doc/w3c/w3c.html#dom2

Pas franchement user-friendly mais néanmoins indispensable.
Après, pour des ressources en français, euh...

[Mirovinben]

Les traduction françaises des spécifications officielles pour le DOM (Document Object Model):
http://www.yoyodesign.org/doc/w3c/w3c.html#dom2

Pas franchement user-friendly mais néanmoins indispensable.
Après, pour des ressources en français, euh...

Merci !...
Je vais également potasser ma doc "SELFHTML" qui m' a bien dépannée jusqu'à maintenant...

Au fait !... J'ai oublié de préciser que ce que je veux écrire dans mon <DIV>...</DIV> est de l'Html (en fait un tableau à fond coloré pour faire une bulle d'aide plus sophistiquée). Je dis celà car en potassant le principe des "noeux" j'ai réussi à afficher quelque chose mais c'est du texte pur : le code html s'affiche comme si on voyait le source !... (createTextNode)

[martin]

Désolé, personnellement je n'ai pas trouvé de la doc conséquente sur ce sujet qu'en anglais (à part la recommendation traduite par Yoyodesign bien sûr). Enfin presque, en voilà un quand même:
http://gilles.chagnon.free.fr/cours/dhtml/

pour écrire des données (simples) dans un tag html, voilà un exemple minimaliste:

Code : Tout sélectionner

document.getElementById("idDiv").childNodes.item(0).data="ceci est un essai";

Plus rigolo, un exemple pour générer un tableau :
http://www.mozilla.org/docs/dom/technote/tn-dom-table/

plein de ressources diverses, et d'autres exemples :
http://www.mozilla.org/docs/dom/samples/

Sinon, regarde les docs javascript et ecmaScript, qui en fait te donneront les outils pour manipuler le DOM. Les docs de Netscape (sur javascript en autre) ne sont malheureusement plus accessibles directement aujourd'hui, il semblerait que la fondation mozilla essaie de récupérer ce qu'elle peut.
Cependant en fouillant on les trouve :
http://www.mozillazine.org/talkback.html?article=5381

Ne pas oublier le génialissime Inspecteur Dom de Mozilla ou Firefox, qui permet de parcourir ce foutu DOM dans tous les sens, et de faire des modifications en direct dans celui ci.

(Sinon innerHtml fonctionne en écriture, si çà te semble plus simple. Mon exemple devient :

Code : Tout sélectionner

document.getElementById("idDiv").innerHTML="ceci est un essai";

Mais il ne te permettra de faire des choses aussi subtiles.)

[Bobe]

Je vais également potasser ma doc "SELFHTML" qui m' a bien dépannée jusqu'à maintenant...

Attention quand même, le site a pas l'air très à jour.

[Mirovinben]

Merci à tous...

Vos conseils m'ouvrent de nouveaux horizons... " Que le DOM soit avec moi".

Je croyais avoir testé en long en large et en travers innerHtml... J'ignore quelle erreur je faisais... Quoiqu'il en soit le bout de code proposé par "martin" fonctionne très bien... oups ! Voir ici le résultat... (ADSL souhaité ! ce sont des vignettes qui s'affichent dans la bulle d'aide)

Pour ce qui est du site "SELFHTML", il date un peu mais est très pratique... si vous avez aussi commode et plus à jour... je prends !