Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript début en js

début en js

19 réponses
Avatar
yoyo
bonjour,

Suite à mon dernier post sur le js, j'ai décidé de m'y mettre tout doucement
avec un petit menu déroulant.

<div id="menu">
<ul if="menu1" onMouseOver ="afficher('menu1')"
onMouseOut="fermer('menu1')">
<li> <a bref ="#"> Menu 1 </a>
<ul>
<li> <a bref ="#"> Smenu 1 </a> </li>
<li> <a bref ="#"> Smenu 1 </a> </li>
<li> <a bref ="#"> Smenu 1 </a> </li>
</ul>
</li>
</ul>

mais apparemment j'ai du merdé quelque part.

merci de vos conseils
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2
Avatar
Bruno Desthuilliers
yoyo a écrit :
function afficher(idBalise)
{
var balise=document.getElementById("idBase");
balise.class.Name=("ouver");
}



C'est 'idBase' ou 'idBalise' ?-)
Avatar
Olivier Miakinen
Le 30/06/2009 21:26, yoyo a écrit :

<ul if="menu1" onMouseOver ="afficher('menu1')"



Ce ne serait pas par hasard « id » au lieu de « if » ?

mais apparemment j'ai du merder quelque part.

merci de vos conseils



Tu devrais commencer par valider ton code. Je suppose que
<http://validator.w3.org/> par exemple ne devrait pas laisser
passer un attribut inconnu dans un élément HTML.

Et puis tu peux aussi activer l'affichage des erreurs JavaScript
car je suppose que le résultat du getElementById que tu dois
faire retourne null, et que ça fait une erreur quand tu tentes de
l'utiliser.
Avatar
SAM
Le 6/30/09 9:26 PM, yoyo a écrit :
bonjour,

Suite à mon dernier post sur le js, j'ai décidé de m'y mettre tout doucement
avec un petit menu déroulant.

<div id="menu">
<ul if="menu1" onMouseOver ="afficher('menu1')"



Yapas à y avoir ici : if="menu1"

onMouseOut="fermer('menu1')">
<li> <a bref ="#"> Menu 1 </a>



<ul>
<li onmouseover="afficher('menu1');"
onmouseout="cacher('menu1');">
<a bref ="#"> Menu 1 </a>
<ul id="menu1">
<li>...
<li>...
</ul>
</li>
</ul>

mais apparemment j'ai du merdé quelque part.



c'est à croire si tu le dis ;-)

merci de vos conseils



Il n'y a que IE qui a besoin de ces 'onmouseQuueChose',
les autres se déatouillent rien qu'avec les css :

<html>
<style type="text/css">
ul, li { list-style: none; margin:0; padding:0 }
li ul { display: none }
li:hover ul,
li.ie ul { display: block; }
</style>
<script type="text/javascript">
function roll(quoi) { quoi.className = quoi.className==''? 'ie' : '';}
window.onload = function() {
var ie = false; /*@cc_on ie = true; cc@*/
if(ie) {
var m = document.getElementById('menu');
m = m.getElementsByTaName('LI');
for(var i=0, n=m.length; n>i; i++) {
m[i].onmouseover = function() { roll(this); }
m[i].onmouseout = function() { roll(this); }
}
}
}
</script>
<ul div="menu">
<li> <a bref ="#"> Menu 1 </a>
<ul>
<li> <a bref ="#"> Smenu 1.1 </a> </li>
<li> <a bref ="#"> Smenu 1.2 </a> </li>
<li> <a bref ="#"> Smenu 1.3 </a> </li>
</ul>
</li>
<li> <a bref ="#"> Menu 2 </a>
<ul>
<li> <a bref ="#"> Smenu 2.1 </a></li>
<li> <a bref ="#"> Smenu 2.2 </a> </li>
<li> <a bref ="#"> Smenu 2.3</a> </li>
</ul>
</li>
</ul>
</html>


--
sm
Avatar
yoyo
Olivier Miakinen wrote:

Le 30/06/2009 21:26, yoyo a écrit :

<ul if="menu1" onMouseOver ="afficher('menu1')"



Ce ne serait pas par hasard « id » au lieu de « if » ?



en effet c'est bizzard le copier coller à transposé mon d en f car dans mon
code c'est juste.

mais apparemment j'ai du merder quelque part.

merci de vos conseils







Tu devrais commencer par valider ton code. Je suppose que
<http://validator.w3.org/> par exemple ne devrait pas laisser
passer un attribut inconnu dans un élément HTML.

Et puis tu peux aussi activer l'affichage des erreurs JavaScript
car je suppose que le résultat du getElementById que tu dois
faire retourne null, et que ça fait une erreur quand tu tentes de
l'utiliser.




j'avais complétement oublié le débogueur js.
Avatar
yoyo
SAM wrote:

Le 6/30/09 9:26 PM, yoyo a écrit :
bonjour,

Suite à mon dernier post sur le js, j'ai décidé de m'y mettre tout
doucement avec un petit menu déroulant.

<div id="menu">
<ul if="menu1" onMouseOver ="afficher('menu1')"



Yapas à y avoir ici : if="menu1"

onMouseOut="fermer('menu1')">
<li> <a bref ="#"> Menu 1 </a>



<ul>
<li onmouseover="afficher('menu1');"
onmouseout="cacher('menu1');">
<a bref ="#"> Menu 1 </a>
<ul id="menu1">
<li>...
<li>...
</ul>
</li>
</ul>

mais apparemment j'ai du merdé quelque part.



c'est à croire si tu le dis ;-)

merci de vos conseils



Il n'y a que IE qui a besoin de ces 'onmouseQuueChose',
les autres se déatouillent rien qu'avec les css :


pour le hover, je sais mais est ce qu'il va afficher mes sous menu
<html>
<style type="text/css">
ul, li { list-style: none; margin:0; padding:0 }
li ul { display: none }
li:hover ul,
li.ie ul { display: block; }
</style>
<script type="text/javascript">
function roll(quoi) { quoi.className = quoi.className==''? 'ie' : '';}
window.onload = function() {
var ie = false; /*@cc_on ie = true; cc@*/
if(ie) {
var m = document.getElementById('menu');
m = m.getElementsByTaName('LI');
for(var i=0, n=m.length; n>i; i++) {
m[i].onmouseover = function() { roll(this); }
m[i].onmouseout = function() { roll(this); }
}
}
}
</script>
<ul div="menu">
<li> <a bref ="#"> Menu 1 </a>
<ul>
<li> <a bref ="#"> Smenu 1.1 </a> </li>
<li> <a bref ="#"> Smenu 1.2 </a> </li>
<li> <a bref ="#"> Smenu 1.3 </a> </li>
</ul>
</li>
<li> <a bref ="#"> Menu 2 </a>
<ul>
<li> <a bref ="#"> Smenu 2.1 </a></li>
<li> <a bref ="#"> Smenu 2.2 </a> </li>
<li> <a bref ="#"> Smenu 2.3</a> </li>
</ul>
</li>
</ul>
</html>




Avatar
Pascal PONCET
yoyo a écrit :
mais apparemment j'ai du merdé quelque part.



Bonjour,

Il y a une erreur dans le HTML, à savoir l'attribut "id" de la balise
"ul", qui est nommé "if". C'est déterminant puisque sa valeur est passée
aux fonctions "afficher" et "fermer".

D'autre part, si ça ne fonctionne pas après correction (ou si c'est
juste une erreur de recopie), il nous faudrait le code javascript
correspondant (au moins celui des fonctions appelées).

Cordialement,
Pascal
Avatar
Pascal PONCET
Pascal PONCET a écrit :
Il y a une erreur dans le HTML, à savoir l'attribut "id" de la balise
"ul", qui est nommé "if". C'est déterminant puisque sa valeur est passée
aux fonctions "afficher" et "fermer".



Désolé, les autres réponses ne m'étaient pas encore parvenues quand j'ai
écrit mon message.

La suite par contre reste valable, à savoir le code des fonctions.
Avatar
yoyo
Pascal PONCET wrote:

Pascal PONCET a écrit :
Il y a une erreur dans le HTML, à savoir l'attribut "id" de la balise
"ul", qui est nommé "if". C'est déterminant puisque sa valeur est passée
aux fonctions "afficher" et "fermer".



Désolé, les autres réponses ne m'étaient pas encore parvenues quand j'ai
écrit mon message.

La suite par contre reste valable, à savoir le code des fonctions.


function fermer(id)
{
var balise= document.getElementById("id");
balise.class.Name=("fermer");
}

function afficher(idBalise)
{
var balise=document.getElementById("idBase");
balise.class.Name=("ouver");
}
Avatar
yoyo
Bruno Desthuilliers wrote:

yoyo a écrit :
function afficher(idBalise)
{
var balise=document.getElementById("idBase");
balise.class.Name=("ouver");
}



C'est 'idBase' ou 'idBalise' ?-)



j'avais pas vu, mais il y a encore un truc qui cloche car il se passe rien
Avatar
Laurent vilday
yoyo :
Bruno Desthuilliers :
yoyo :
function afficher(idBalise)
{
var balise=document.getElementById("idBase");
balise.class.Name=("ouver");
}


C'est 'idBase' ou 'idBalise' ?-)



j'avais pas vu, mais il y a encore un truc qui cloche car il se passe rien



Tu m'étonnes. Enfin il ne se passe rien ... humm .. disons que tu n'as
pas vu les messages d'erreurs :)

function afficher(idBalise)
{
// pas de " autour du idBalise
// tu ne veux pas un string
var x = document.getElementById(idBalise);

// c'est la propriété className, pas class.Name
x.className = 'ouvert';
}

--
laurent
1 2