18041 sujets

Questions générales et questions de débutants

Tuto menu accordeon jquery : mettre jquery dans le répertoire ?

Hello,

Nouvelle inscrite, et grande débutante dans la création de sites web, je m'essaye aux tutos sur ce site avec dreamweaver Smiley ravi
Concernant le tuto du menu accordeon avec javascript, j'ai bien téléchargé jquery , mais je ne sais pas où je dois le mettre .... Smiley ohwell
Qu'est ce que vous appelez un repertoire ? Je l'ai enregistré dans le dossier racine de mon site mais dream n'execute pas le menu accordeon Smiley murf

De manière plus générale comment faire un appel javascript sur un objet avec dreamweaver ?

merci par avance pour votre aide Smiley biggrin
@ bientôt
Bonjour et bienvenue Antonyme Smiley smile

Un répertoire ou un dossier, c'est la même chose.

Extrait du tuto :
a écrit :

... et placez-le dans le répertoire (ou dans un sous-répertoire) où vous avez enregistré le fichier HTML.
Nous allons insérer l'appel au fichier jQuery dans la balise head, comme décrit dans ce point de la FAQ :

<script type="text/javascript" src="jquery-1.2.1.js"></script>

Dorénavant, on peut accéder aux méthodes de la bibliothèque jQuery dans tout le reste de la page.


Ton fichier html est-il placé dans le même dossier que jquery ?
Et si oui il faut insérer la ligne de code comme indiqué sur le tuto... Dans les balises "head" de la page html :

<script type="text/javascript" src="jquery-1.2.1.js"></script>


Mais attention, si tu viens de télécharger jquery, le nom du fichier n'est pas le même que dans le tuto à cause du numéro de version... En ce moment ça doit être jquery-1.2.6... Smiley cligne
Modifié par dominique (24 Oct 2008 - 17:15)
merci beaucoup pour ta réponse dominique Smiley cligne
effectivement : j'ai rectifié dans le script pour la version de jquery

jquery et ma page html sont bien enregistrés au même endroit, soit dans mon dossier racine .
Problème : même après modification de la version de jquery , ça ne marche pas Smiley decu

je copie/colle bien l'ensemble du dernier script pourtant ! nouvelle question alors : ce script doit-il se trouver également entre les balises <head> ?
je viens d'essayer de mettre l'ensemble du script entre les balises <head> mais ça ne marche toujours pas Smiley decu
Le fichier .js qui contient la bibliothèque JavaScript jQuery doit effectivement être appelé avec un élément HTML SCRIPT placé dans le HEAD.

Mais cela ne suffit pas à mettre en place ce menu. Si tu suis le tutoriel, ça devrait t'apparaitre clairement. Attention, il s'agit d'un tutoriel, pas de bouts de code à copier-coller sans les comprendre. C'est comme les recettes de cuisine: c'est pas en copiant-collant la page du livre de recettes dans une cocotte minute qu'on fait un plat. Smiley cligne
(Bon ok, la comparaison est quelque peu foireuse. Smiley lol )

Ce tutoriel n'est pas très compliqué, mais je ne le recommenderais pas à un débutant. Il faut avoir les idées claires sur la construction d'un site statique en HTML et CSS pour bien le comprendre. Et ensuite, il faut avoir quelques notions de JavaScript (syntaxe de base, comment exécuter une fonction...) pour s'y retrouver. Tout ça demande donc du temps et des apprentissages préalables.
Modifié par Florent V. (24 Oct 2008 - 21:31)
Bonsoir,

Antonyme a écrit :
Je l'ai enregistré dans le dossier racine de mon site mais dream n'execute pas le menu accordeon Smiley murf


Je rebondis juste sur ce propos ... tu ne pourras voir le résultat du script au sein de Dreamweaver (qui ne te permet que d'avoir une vision restreinte du rendu de ton document). Pour te tester, il te faudra le faire sur les différents navigateurs. Smiley smile
Merci pour vos réponses .

Florent V : j'essaie de faire les 2 en même temps Smiley lol Mon but n'est pas tant d'obtenir un menu accordeon "pour faire joli" que d'apprendre par ce biais quelques notions . je me suis déjà collé les rudiments de javascript, comment ça marche, fonctions, variables, scripts etc ... pour pouvoir comprendre un minimum ce qu'on raconte mais ça reste complexe . Donc le meilleur moyen - pour moi, c'est de mettre la main à la pâte pour décanter toutes les notions abstraites pour le moment

[/b]yoda[b] : je me suis mal exprimée : c'est en faisant un aperçu dans firefox ET dans IE que le menu ne fonctionne pas ( et évidemment il n'est pas mis en forme dans dream Smiley biggrin )
Salut,

Si le fichier jQuery et la page html sont dans le même dossier, il devrait suffire d'utiliser la balise script pour charger la bibliothèque: 
<script src="jquery-1.2.6-min.js" type="text/javascript"></script>
Tu peux vérifier que jQuery est bien installé en ajoutant un petit script en-dessous: 
<script src="jquery-1.2.6-min.js" type="text/javascript"></script>
<script type="text/javascript">$(function() { alert('jQuery ok'); });</script>
Si une boîte de dialogue apparaît au chargement de la page, c'est bon Smiley cligne

Après, si le menu ne fonctionne toujours pas, c'est qu'il y a un soucis ailleurs.
Modifié par Thomas D. (25 Oct 2008 - 10:12)
ok merci Thomas .

Donc : <script type="text/javascript">$(function() { alert('jQuery ok'); });</script>
c'est le script qui fait ouvrir une boite de dialogue , mais c'est toujours lors du chargement de la page dans un nav ? Smiley smile
bon , je viens d'essayer ... et lors de l'aperçu dans firefox je n'ai pas de boite de dialogue, et biensur pas de menu Smiley decu
1// Vérifie avec l'explorateur windows que la librairie jquery (le fichier *.js) et ta page (*.html je présume?) sont dans le même répertoire.

2// Vérifie que le nom la librairie jquery (le fichier *.js) est bien le même que celui renseigné dans ta balise script ("jquery-1.2.6-min.js" normalement)

Une fois que ces deux points sont certains et vérifiés, affiche ta page dans le navigateur, fais "Afficher le code source de la page", et fais nous un copier/coller de la page ici. (Entre balise [ code ] ... [/code] évidemment Smiley cligne
Hello Calak

Jquery et ma page html sont bien dans le même dossier ; j'ai re vérifié une nouvelle fois mais j'ai corrigé la version de jquery dans les scripts pour toute la page dès le 1er message sur ce forum .
Voici le code source :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">$(function() { alert('jQuery ok'); });</script>
<script type="text/javascript">
<!--
$(document).ready( function () {
    // On cache les sous-menus :
    $(".navigation ul.subMenu").hide();
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu"

    // et on remplace l'élément span qu'ils contiennent par un lien :
    $(".navigation li.toggleSubMenu span").each( function () {
        // On stocke le contenu du span :
        var TexteSpan = $(this).text();
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
    } ) ;

    // On modifie l'évènement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $(".navigation li.toggleSubMenu > a").click( function () {
        // Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next("ul.subMenu:visible").length != 0) {
            $(this).next("ul.subMenu").slideUp("normal");
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
            $(".navigation ul.subMenu").slideUp("normal");
            $(this).next("ul.subMenu").slideDown("normal");
        }
        // On empêche le navigateur de suivre le lien :
        return false;
    });    


} ) ;
// -->
</script>    


<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
#header {
	position:absolute;
	left:12px;
	top:16px;
	width:734px;
	height:90px;
	z-index:1;
}
#texte {
	position:absolute;
	left:267px;
	top:111px;
	width:481px;
	height:129px;
	z-index:3;
}
-->
</style>
<link href="essai2css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header"></div>
<img src="" alt="" name="banniere" width="734" height="90" id="banniere" style="background-color: #CC9966" />
<div class="navigation" id="navigation">
  <p align="center"><span class="navigation">album</span> <span class="navigation">photos</span> <span class="navigation">lectures</span> <span class="navigation">dressage</span> <span class="navigation">liens </span></p>
</div>

<ul class="navigation">
    <li><a href="#" title="Aller à la page 1">Item 1</a></li>

    <li class="toggleSubMenu"><span>Item 2</span>
        <ul class="subMenu">
            <li><a href="#" title="Aller à la page 2.1">Item 2.1</a></li>

            <li><a href="#" title="Aller à la page 2.2">Item 2.2</a></li>

            <li><a href="#" title="Aller à la page 2.3">Item 2.3</a></li>

        </ul>
    </li>
    <li class="toggleSubMenu"><span>Item 3</span>
        <ul class="subMenu">

            <li><a href="#" title="Aller à la page 3.1">Item 3.1</a></li>

            <li><a href="#" title="Aller à la page 3.2">Item 3.2</a></li>

        </ul>
    </li>
    <li><a href="#" title="Aller à la page 4">Item 4</a></li>

</ul>  





  
<div id="texte">
  <form id="form1" name="form1" method="post" action="">
    <label>

    <select name="select" class="gras">
      <option>accueil</option>
      <option>equipement</option>
      <option>photos</option>
    </select>
    </label>
  </form>

  <p align="center"><br />
  </p>
  <div id="galerie">
	<ul id="galerie_mini">
		<li><a href="images/photo1.png" title="Titre de la photo 1"><img src="images/photo1.png" alt="Le titre de la photo 1" /></a></li>

		<li><a href="images/photo2.png" title="Titre de la photo 2"><img src="images/minis/m_photo2.png" alt="Le titre de la photo 2" /></a></li>
		<li><a href="images/photo3.png" title="Titre de la photo 3"><img src="images/minis/m_photo3.png" alt="Le titre de la photo 3" /></a></li>
		<li><a href="images/photo4.png" title="Titre de la photo 4"><img src="images/minis/m_photo4.png" alt="Le titre de la photo 4" /></a></li>

		<li><a href="images/photo5.png" title="Titre de la photo 5"><img src="images/minis/m_photo5.png" alt="Le titre de la photo 5" /></a></li>
		<li><a href="images/photo6.png" title="Titre de la photo 6"><img src="images/minis/m_photo6.png" alt="Le titre de la photo 6" /></a></li>
		<li><a href="images/photo7.png" title="Titre de la photo 7"><img src="images/minis/m_photo7.png" alt="Le titre de la photo 7" /></a></li>

		<li><a href="images/photo8.png" title="Titre de la photo 8"><img src="images/minis/m_photo8.png" alt="Le titre de la photo 8" /></a></li>
		<li><a href="images/photo9.png" title="Titre de la photo 9"><img src="images/minis/m_photo9.png" alt="Le titre de la photo 9" /></a></li>
	</ul>

	
	<dl id="photo">

		<dt>Titre de la photo 1</dt>
		<dd><img id="big_pict" src="images/photo1.png" alt="Photo 1 en taille normale" /></dd>
	</dl>
</div>

</div>
</body>
</html>
La comme ça, à part les balises "title" et "meta" qui doivent se trouver au debut du "head", je ne vois aucun problème O_o...


Et qu'est ce qui se passe? Rien?

(désolé mais) tu es certain que ton fichier c'est "jquery-1.2.6.js" et pas "jquery-1.2.6-min.js" alors?

Et (encore désolé mais) tu as bien javascript activé? (ça parrait con, mais j'ai eu la blague ce matin, je l'avais désactivé hier, et je l'avais oublié ce matin -_-")

Bon, deux choses:
- Crée un fichier "test.js" que tu mes au même endroit que la page html. Dans ce fichier, tu mes juste:
alert('Script externe- ok');

Et dans ton head tu rajoute:
<script type="text/javascript" src="test.js"></script>


Comme ça on sera sur (ou pas) que ça ne vient pas de jquery.

Ensuite, utilise un débugger javascript pour voir ce qu'il t'affiche comme message d'erreur (il y en a de très bon sur firefox)
Antonyme a écrit :
j'essaie de faire les 2 en même temps Smiley lol Mon but n'est pas tant d'obtenir un menu accordeon "pour faire joli" que d'apprendre par ce biais quelques notions . je me suis déjà collé les rudiments de javascript, comment ça marche, fonctions, variables, scripts etc ... pour pouvoir comprendre un minimum ce qu'on raconte mais ça reste complexe

La démarche est bonne. Smiley smile
Je te conseille également de lire les trois premiers tutoriaux sur la page suivante (en tout cas, au moins les deux premiers):
http://docs.jquery.com/Tutorials
Florent V. a écrit :

La démarche est bonne. Smiley smile
Je te conseille également de lire les trois premiers tutoriaux sur la page suivante (en tout cas, au moins les deux premiers):
http://docs.jquery.com/Tutorials


C'est pour me tester aussi en anglais Florent ? Smiley lol Je vais y jeter un oeil : merci !


Calak : je ne suis pas une grande pro de tout ce qui est javascript donc je n'ai rien activé/désactivé pour le moment sur mes nav . je n'ai eu , par ailleurs aucun pb de navigation ( de message d'alerte me signifiant qu'un script pour une page web a été arrêté ) : je suppose donc que javascript est activé ? Smiley ohwell
Plus sérieusement : je navigue principalement sous firefox v3 : j'ai les modules complémentaires quickjava et javascript debugger ; je viens de vérifier dans outils>>modules complémentaires : les 2 sont activés ( du moins j'ai le choix entre 2 options pour chaque "desactiver" ou " desinstaller" , je suppose donc qu'ils sont activés tout les 2 )
Pour IE , dans outils>>options internet onglet "avancé" , j'ai "compilateur java JIT activé" et " console java activé" .
Néanmoins quand je tente un aperçu de ma page avec IE j'ai une barre d'information qui me dit que un epartie du contenu actif de ma page a été bloqué . J'autorise donc ....mais ça n'affiche toujours pas mon menu Smiley decu
j'ai forcément du faire une bourde quelque part ... mais où ?

Merci pour les balises <title> et <meta> je vais corriger ça Smiley cligne
Hello,

Pour activer et désactiver JavaScript facilement, on peut utiliser la barre d'outils Web Developer de Chris Pederick. (Une référence pour tous les développeurs web/intégrateurs).

À installer depuis la page suivante pour l'avoir en français:
http://chrispederick.com/work/web-developer/localization/

Parmi les outils utiles-si-ce-n'est-indispensable, il y a également Firebug:
http://addons.mozilla.org/fr/firefox/addon/1843
Modifié par Florent V. (25 Oct 2008 - 19:17)
wow ! merci beaucoup pour cette barre d'outils ! elle est top .

Le point négatif qu'elle amène c'est qu'elle confirme que javascript est donc bien activé sur firefox, ce qui me ramène donc au point de départ ... Smiley decu
Donc pour résumer:

1. Tu as bien une page HTML, avec le code HTML proposé dans le tutoriel.
2. Avec un élément SCRIPT dans ton HEAD qui pointe vers une copie de la bibliothèque jQuery. Le chemin vers le fichier est bon, et avec la Web Developer Toolbar tu peux vérifier que le fichier en question est bien chargé (Informations > Poids de la page).
3. Tu as également un deuxième élément SCRIPT dans le HEAD, placé en deuxième (après l'appel de la bibliothèque jQuery), qui contient le code JS indiqué dans le dernier exemple de la page suivante: http://css.alsacreations.com/Tutoriels-JavaScript/Creer-un-menu-accordeon-avec-jQuery5
4. Si tu recharges la page complètement (avec Ctrl+F5, ou Ctrl+Shift+R), et affiches la console d'erreurs de Firefox (Outils > Console d'erreurs), tu n'as aucune erreur JavaScript relative à ta page listée.

Tout cela est bien en place?

Si c'est le cas et que tu ne trouves pas le problème, tu peux mettre les fichiers en ligne pour qu'on y jette un oeil.
Sujet clos
Aller à