[Résolu] Faire fonctionner JQuery !

Bonjour tout le monde,

Je suis désemparée : J'essaye de faire fonctionner un simple slideDown Jquery sur un hover sur un spip. Ce faisant, je me suis fait une page statique toute bête pour isoler le problème. Et là, je me rends compte que même un simple

<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
$("div").show("slow");
});
// ]]>
</script>

dans le head ne fonctionne pas !!!

Je charge pourtant correctement JQuery (j'ai testé avec un alert qui s'afficha bien au chargement de la page).

Qu'est-ce qui se passe donc ?
Est-ce que quelque chose vous choque dans le code ?

http://valerie.journet.free.fr/jquery/menu_test.html

Merci, et désolée pour la question ultra bête
Modifié par V@lerie (17 Apr 2010 - 20:28)

J'ai du mal à comprendre ce que tu cherches à faire :
De ce que je comprends, tu cherches à réaliser un menu déroulant avec des images en guise de lien parent. Et d'ajouter par dessus un slideDown via Jquery c'est bien ça?

Ton code fonctionne-t-il sur des navigateurs modernes avec javascript désactivé?
Si non, attardes toi d'abord sur cet aspect, car un menu qui n'est pas accessible est un menu mal conçu
Javascript est là pour le rendre compatible avec des navigateurs plus anciens et pour rendre son fonctionnement moins brutal via des effets déroulants et des fonctions de survol plus permissives (ne pas ouvrir le menu si le pointeur ne s'arrête pas dessus et accorder un délais à la fermeture du menu si l'utilisateur fait un faux mouvement avec la souris)

Un piste sur la conception d'un menu en CSS :
http://www.cssplay.co.uk/menus/drop_examples.html

Ne pas utiliser les hacks disponibles pour le faire fonctionner avec Internet Explorer 6, le code n'est pas valide et alourdi la syntaxe.
Modifié par Guillem.C (17 Apr 2010 - 13:13)

Oui Guillem C, ce que tu décris est mon but final. Comme tu peux voir sur la page de test http://valerie.journet.free.fr/jquery/menu_test.html il y a un sous-menu qui s'ouvre au survol d'images-liens qui constituent mon menu principal (ici de 2 items, juste pour le test).

J'ai essayé différentes façons de le faire, toujours sans succès, avant de m'apercevoir qu'en fait c'est $(document).ready qui ne se déclenche même pas ! (enfin... apparemment)

J'ai aussi essayé
$(document).ready(function() {
alert("toto");
});

Et toujours rien.
Il doit donc y avoir un problème dans le chargement même du JQuery, à moins que tu voies autre chose ??
Là je ne comprends vraiment pas...

Merci pour ton aide,
V@l

Avant de vouloir faire apparaître quelque chose, il faut le...cacher.

paolo a écrit :
Avant de vouloir faire apparaître quelque chose, il faut le...cacher.

Avec un display: none; directement dans la feuille de style sur l'élément à cacher.

Sinon Valerie, essayes donc ça :

$(function() { 
 
alert('coucou');
 
});

dans ton <script type="text/javascript"></script>

Sinon si tu souhaites afficher quelque chose via l'instruction .show() de Jquery au survol de la souris ou au clic, il te faut ajouter une gâchette :
http://api.jquery.com/category/events/

Tel quel, ton code s'exécute au chargement de la page.
Modifié par Guillem.C (17 Apr 2010 - 13:27)

Paolo, tu veux dire que ceci ne convenait pas ? (le sous-menu)
#menu li ul
{
position: absolute;
z-index: 100;
width: 185px;
padding-left: 15px;
display: none;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
}

Faut-il placer le display: none à un autre endroit ?

Guillem C, j'ai testé :
$(function() {
alert('coucou');
});

Effectivement, ça marche.
Mais dans ce cas, pourquoi

$(document).ready(function() {
alert('coucou');
});

ne marche pas ? quelle est la différence ?

Voici le code que j'ai essayé initialement, pour mon hover :

$(document).ready(function () {
$('.racine').hover(function () {
$('ul').slideDown('slow')
});
});

OU encore :

$(document).ready(function () {
$('.racine').hover(function () {
$(this).next("ul").slideDown('slow');
}, function() {
$(this).next("ul").slideUp('slow');
});
});
Sans succès...

Voili voilou...

Merci de votre aide !
V@l

Re,

A partir du petit test de Guillem C, j'ai inséré le code de mon roll-over dans $(function() { ... })
et non plus dans $(document).ready(function () { ... }). Et là, surprise, ça marche !

Ce qui donne :

$(function() {
$('.racine').hover(function () {
$(this).next("ul").slideDown('slow');
}, function() {
$(this).next("ul").slideUp('slow');
});
});

Donc ceci explique pourquoi quel que soit le contenu de ready, rien ne s'exécutait !!


Maintenant, cela amène une autre question : j'ai toujours compris qu'il fallait englober tout Jquery dans une fonction $(document).ready pour que le code se charge au chargement de la page. Or apparemment, pour une raison qui m'échappe, cela ne marche pas toujours. Faut-il donc absolument faire fonctionner $(document).ready ou peut-on laisser comme je viens de le faire ? Quelle est en fait la différence entre les 2 ?

Merci,
V@l

Il n'y a absolument aucune différence entre les deux.
C'est juste un raccourci de feignant.

Alors, comprendre pourquoi .ready() ne fonctionne pas dans ton cas, c'est un mystère.
Personnellement, je ne l'utilise plus, peut être qu'une âme charitable t'aidera à y voir plus clair.

Sinon, je sais que Javascript est attractif, mais je te conseillerai d'abord de bien construire ton code CSS pour après profiter des merveilles offertes par le framework Jquery

Sinon, tout le code javascript n'a pas besoin d'être chargé après le DOM, par exemple, tu peux exclure certaines fonctions pour ensuite les appeler dans

$(function() {
maBellefonction('ul.menu');
});
Modifié par Guillem.C (17 Apr 2010 - 16:46)

Merci Guillem C,

Bon, OK, je pense que je vais laisser comme ça, alors.
Pour ton conseil CSS, ben pour une fois j'avais l'impression d'avoir fait un truc pas trop mal
Il me semble que ça tient à peu près la route, et comme je suis pas douée dans le domaine, je l'ai pompé ici :

http://www.siteduzero.com/tutoriel-3-37795-creer-un-menu-horizontal-deroulant-en-css.html
Un des atout de ce menu est qu'il marche sous IE 6 (avec le JS qui va bien)

Par contre, je n'ai pas bien compris comment exclure certaines fonctions comme tu le conseille...

++ et merci pour tout !
V@l