Petit problème Listes déroulantes

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateurs : chinon37, Kazé, Ymai, bobo

Répondre
Avatar de l’utilisateur
PoppyGuy
Lézard vert
Messages : 121
Inscription : 08 oct. 2011, 18:55
Localisation : France (Vendée)
Contact :

Petit problème Listes déroulantes

Message par PoppyGuy » 05 juil. 2016, 21:13

Bonjour,
Après avoir fait un site il y 5ans (problèmes de santé), maintenant que tout va bien, j’essaye de m’y remettre, mais j’ai des oublies.
J’ai repris quelques codes (dans le forum) que j’avais à l’époque.

Principalement : Les listes déroulantes.
Bonjour,

Je pouvais voir les pages, mais maintenant, je ne les vois pas.
Pourtant, il me semble avoir fait ce qu’il faut ? (sans-doute que non).

1) J’ai créé un dossier « Meteo_Clopiniere » avec les dossiers ci-desssous.
2) J’ai créé un dossier « Annee » avec les dossiers 2010...2011...2012...etc
3) J'ai créé un dossier "Mois" avec les dossiers Janvier...Fevrier...etc
4) J'ai créé un dossier "Janvier" avec les fichiers "Pressions.html ...etc

Avec le code ci-dessous, ça devrait fonctionner ?
Quais-je fait (ou pas fait) pour que cela ne fonctionne pas ?

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Listes Guy</title>
<meta content="Guy" name="author">
<script type="text/javascript">
<!--
function onChange()
{
var index_annee = document.getElementById('annee').selectedIndex;
var annee = document.getElementById('annee').options[index_annee].text;

var mois = document.getElementById('mois').options[document.getElementById('mois').selectedIndex].text;

var pages = document.getElementById('pages').options[document.getElementById('pages').selectedIndex].text;

var url = annee + '/' + mois + '/' + pages +'.html';
window.location=url;
}
//-->
</script>
</head>
<body style="color: white; background-color: rgb(99, 5, 39);"
alink="#dcd296" link="#dcd296" vlink="#dcd296">
<div style="text-align: center;"><big><big>Météo La Clopinière</big></big><br>
</div>
<br>
<div style="text-align: center;"><!-- liste déroulante pour les années -->
<select id="annee" name="annee" size="1">
<option value="">Choisir une Année</option>
<option value="2011">2011</option>
<option value="">2010</option>
<option value="">2009</option>
<option value="">2008</option>
</select>
<!-- liste déroulantes pour les mois -->
<select id="mois" name="mois" size="1">
<option value="">Choisir un mois</option>
<option value="">Janvier</option>
<option value="">Fevrier</option>
<option value="">Mars</option>
<option value="">Avril</option>
<option value="">Mai</option>
<option value="">Juin</option>
<option value="">Juillet</option>
<option value="">Aout</option>
<option value="">Septembre</option>
<option value="">Octobre</option>
<option value="">Novembre</option>
<option value="">Decembre</option>
</select>
<!-- liste déroulante pour les pages -->
<select id="pages" name="pages" size="1" onchange="onChange();">
<option value="">Choisir une page</option>
<option value="">Couleur_du_ciel</option>
<option value="">Graphiques</option>
<option value="">Pressions</option>
<option value="">Vent</option>
<option value="">Recaps</option>
</select>
</div>
<br>
<div style="text-align: center;"><img
style="width: 800px; height: 200px;" alt="Meules" src="Meules.JPG"><br>
</div>
<br>
<div style="text-align: center;">Températures<br>
</div>
<div style="text-align: center;"><img
style="width: 900px; height: 564px;" alt="GraphiqueT°"
src="Temperatures.jpg"><br>
</div>
<br>
<div style="text-align: center;">Ensoleillement<br>
</div>
<div style="text-align: center;"><img
style="width: 900px; height: 562px;" alt="Graphique Soleil"
src="Ensoleillement.jpg">
</div>
</body>
</html>

Avatar de l’utilisateur
Ymai
Tyrannosaurus Rex
Messages : 4208
Inscription : 12 mars 2005, 11:36
Localisation : Brüsel - Les Cités Obscures
Contact :

Re: Petit problème Listes déroulantes

Message par Ymai » 07 juil. 2016, 21:57

Bonjour
Pour ce genre de problème, une excellente solution est d'utiliser Firebug.
Dans la fenêtre de "Script", on peut suivra pas à pas le déroulement du programme et voir ce qui cloche.
En principe, c'est aussi possible en utilisant les "Outils de développement Web" proposés nativement par FF, mais, pour l'instant, je reste fidèle à Firebug, compagnon indispensable du débogage.

La page contenant ce code est-elle disponible en ligne?
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:47.0) Gecko/20100101 Firefox/47.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.

Avatar de l’utilisateur
PoppyGuy
Lézard vert
Messages : 121
Inscription : 08 oct. 2011, 18:55
Localisation : France (Vendée)
Contact :

Re: Petit problème Listes déroulantes

Message par PoppyGuy » 07 juil. 2016, 22:04

Bonsoir,
Si j'ai bien compris, c'est la page du site:
http://st-florent-meteo-clopiniere.akeonet.com/
Votre Navigateur : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0

J'ai téléchargé Filebug, mais je ne sais pas m'en servir.

Voici une capture de Filezilla (si ça peux aider ??
Image

Avatar de l’utilisateur
chinon37
Animal mythique
Messages : 5308
Inscription : 21 mars 2005, 10:17
Localisation : Touraine, entre Loire et Vienne
Contact :

Re: Petit problème Listes déroulantes

Message par chinon37 » 08 juil. 2016, 12:14

Bonjour,

Ça ne fonctionne pas car tu as placé 2011 dans un dossier annee et janvier dans un dossier mois. Or quand on fait 2011-> janvier -> pressions, ça pointe vers .../2011/Janvier/Pressions.html alors que la page est à .../annee/2011/mois/janvier/Pressions.html
De plus ça pointe vers janvier avec une majuscule alors que le dossier est en minuscule.

Enfin, il doit y avoir un problème avec l'image Pressions.jpg
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.

Avatar de l’utilisateur
Ymai
Tyrannosaurus Rex
Messages : 4208
Inscription : 12 mars 2005, 11:36
Localisation : Brüsel - Les Cités Obscures
Contact :

Re: Petit problème Listes déroulantes

Message par Ymai » 08 juil. 2016, 12:44

Et il me semble que la fonction "onchange" n'est liée à rien...
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:46.0) Gecko/20100101 Firefox/46.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.

Avatar de l’utilisateur
PoppyGuy
Lézard vert
Messages : 121
Inscription : 08 oct. 2011, 18:55
Localisation : France (Vendée)
Contact :

Re: Petit problème Listes déroulantes

Message par PoppyGuy » 08 juil. 2016, 18:39

J'ai changé l'arborescence, ça a l'air d'être bon, je n'ai plus la page d'erreur, mais je ne vois pas l'image "Pressions.jpg" à la place il y a "hpa", c'est le nom que je lui est donner comme texte alternatif.

D'après Firebug, j'ai :
Dans style : Cet élément n'a aucune règle de style. Vous pouvez lui créer une règle.
Dans évenement: Il n'y a aucun "event listener" lié directement à cet élément.

Quand je mets cette image dans index.html avec les autres.
Sur mon PC, je vois bien l'image, pas sur le site.
Si cela na viens pas directement de la racin, et que ça passe par un dossier, ça ne fonctionne pas ?

Voici le code, dans index.html

Code : Tout sélectionner

<br>
<div style="text-align: center;">Pressions<br>
<img style="width: 644px; height: 1528px;" alt=""
src="Janvier/Pressions.jpg">
<br>
Voici le code de la page "Pressions.html"

Code : Tout sélectionner

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Pressions</title>
</head>
<body>
<img style="width: 644px; height: 1528px;" alt="hpa"
src="file:///F:/Meteo/Meteo_Clopiniere/Janvier/Pressions.jpg"> <br>
</body>
</html>
Je ne sais pas quoi faire ??

atheo
Lézard vert
Messages : 170
Inscription : 03 févr. 2010, 15:45
Localisation : ardennes france

Re: Petit problème Listes déroulantes

Message par atheo » 10 juil. 2016, 08:10

Bonjour

ta photo pression.jpg est sur un lecteur F:

"src="file:///F:/Meteo/Meteo_Clopiniere/Janvier/Pressions.jpg"> "

C'est quoi ce F: ?
Si c'est sur ton ordi il est normal de ne pas voir l'image sur internet.
Mais ce n'est qu'un avis.
Votre Navigateur : Mozilla/5.0 (Windows NT 5.1; rv:47.0) Gecko/20100101 Firefox/47.0

Avatar de l’utilisateur
PoppyGuy
Lézard vert
Messages : 121
Inscription : 08 oct. 2011, 18:55
Localisation : France (Vendée)
Contact :

Re: Petit problème Listes déroulantes

Message par PoppyGuy » 11 juil. 2016, 09:27

Oui, c’sur mon ordinteur
Votre Navigateur : Mozilla/5.0 (Linux; U; Android 5.0; fr-fr; LG-D855 Build/LRX21R.A1447064049) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/34.0.1847.118

Avatar de l’utilisateur
Ymai
Tyrannosaurus Rex
Messages : 4208
Inscription : 12 mars 2005, 11:36
Localisation : Brüsel - Les Cités Obscures
Contact :

Re: Petit problème Listes déroulantes

Message par Ymai » 11 juil. 2016, 10:05

Bonjour
Pour ce qui est de Javascript et de l'événement onChange, j'en suis à la solution suivante,avec un peu de magie jQuery
Il semble toutefois que tout n'est pas en place sur le serveur: l'URL semble aboutir dans le vide.

Code : Tout sélectionner

<html>

<head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    <title>Listes Guy</title>
    <meta content="Guy" name="author">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            $('.selecteur').change(function() {
                var annee = $('#annee option:selected').val();
                var mois = $('#mois option:selected').val();
                var page = $('#pages option:selected').val();

                if ((annee != '') && (mois != '') && (page != '')) {
                    var url = 'http://st-florent-meteo-clopiniere.akeonet.com/' + annee + '/' + mois + '/' + page + '.html';
                    window.location = url;
                }

            })
        })
    </script>
</head>

<body style="color: white; background-color: rgb(99, 5, 39);" alink="#dcd296" link="#dcd296" vlink="#dcd296">
    <h1 style="text-align: center;">Météo La Clopinière</h1>
    
    <div style="text-align: center;">
        <!-- liste déroulante pour les années -->
        <select id="annee" class="selecteur" name="annee" size="1">
            <option value="">Choisir une Année</option>
            <option value="2011">2011</option>
            <option value="2010">2010</option>
            <option value="2009">2009</option>
            <option value="2008">2008</option>
        </select>
        <!-- liste déroulantes pour les mois -->
        <select id="mois" class="selecteur" name="mois" size="1">
            <option value="">Choisir un mois</option>
            <option value="Janvier">Janvier</option>
            <option value="Fevrier">Fevrier</option>
            <option value="Mars">Mars</option>
            <option value="Avril">Avril</option>
            <option value="Mai">Mai</option>
            <option value="Juin">Juin</option>
            <option value="Juillet">Juillet</option>
            <option value="Aout">Aout</option>
            <option value="Septembre">Septembre</option>
            <option value="Octobre">Octobre</option>
            <option value="Novembre">Novembre</option>
            <option value="Decembre">Decembre</option>
        </select>
        <!-- liste déroulante pour les pages -->
        <select id="pages" class="selecteur" name="pages" size="1">
            <option value="">Choisir une page</option>
            <option value="Couleur_du_ciel">Couleur_du_ciel</option>
            <option value="Graphiques">Graphiques</option>
            <option value="Pressions">Pressions</option>
            <option value="Vent">Vent</option>
            <option value="Recaps">Recaps</option>
        </select>
    </div>
    <br>
    <div style="text-align: center;"><img style="width: 800px; height: 200px;" alt="Meules" src="Meules.JPG">/div>
    <div style="text-align: center;">Températures</div>
    <div style="text-align: center;"><img style="width: 900px; height: 564px;" alt="GraphiqueT°" src="Temperatures.jpg"></div>
    <div style="text-align: center;">Ensoleillement</div>
    <div style="text-align: center;"><img style="width: 900px; height: 562px;" alt="Graphique Soleil" src="Ensoleillement.jpg"></div>

</body>

</html>
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:47.0) Gecko/20100101 Firefox/47.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.

Avatar de l’utilisateur
PoppyGuy
Lézard vert
Messages : 121
Inscription : 08 oct. 2011, 18:55
Localisation : France (Vendée)
Contact :

Re: Petit problème Listes déroulantes

Message par PoppyGuy » 13 juil. 2016, 12:46

Bonjour,
Je ne vois pas de changement dans ma page index.html avec le nouveau code de "ymai".

Par contre maintenant, je vois l'image qui est dans "Janvier".
C'était une erreur de ma part:
L'arborescence, (dans Filezilla") n'était pas pareil des deux cotés.

Par contre, je ne pige pas pourquoi (dans Kompozer) quand je clic sur "publier", la fenêtre apparaît, je remplis cette fenêtre, OK, ça me met que c'est publié.
Jusque là, pas de problème, mais pourquoi je suis obligé de remplir à chaque fois que je veux publier ?
Il me semble qu'avant, je n'avais pas besoin de remplir à chaque fois ???
Votre Navigateur : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0

Avatar de l’utilisateur
Ymai
Tyrannosaurus Rex
Messages : 4208
Inscription : 12 mars 2005, 11:36
Localisation : Brüsel - Les Cités Obscures
Contact :

Re: Petit problème Listes déroulantes

Message par Ymai » 13 juil. 2016, 15:08

J'imagine que c'est l'outil de "Publication" de KompoZer dont il est question ici?
Avec Filezilla sous la main, le mieux est sans doute d'utiliser ce dernier et de laisser tomber l'outil de KompoZer.

Pour le reste, pas sûr de bien comprendre... Sans doute est-il encore trop tôt le matin. :D
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:47.0) Gecko/20100101 Firefox/47.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.

Avatar de l’utilisateur
chinon37
Animal mythique
Messages : 5308
Inscription : 21 mars 2005, 10:17
Localisation : Touraine, entre Loire et Vienne
Contact :

Re: Petit problème Listes déroulantes

Message par chinon37 » 13 juil. 2016, 16:34

Ymai a écrit :Pour le reste, pas sûr de bien comprendre... Sans doute est-il encore trop tôt le matin. :D
L'absence de Chimay au petit déjeuner, peut-être ? :roll: :D


Votre Navigateur : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.

Avatar de l’utilisateur
PoppyGuy
Lézard vert
Messages : 121
Inscription : 08 oct. 2011, 18:55
Localisation : France (Vendée)
Contact :

Re: Petit problème Listes déroulantes

Message par PoppyGuy » 13 juil. 2016, 20:01

Bonjour,

Ne connaissant pas du-tout l'informatique, je ne comprend pas ce morceau de code ?

Code : Tout sélectionner

src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Apparemment, c'est grâce à ça que ça fonctionne ?
Que fait-il exactement ....?
Votre Navigateur : Mozilla/5.0 (Windows NT 10.0; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0

Avatar de l’utilisateur
Ymai
Tyrannosaurus Rex
Messages : 4208
Inscription : 12 mars 2005, 11:36
Localisation : Brüsel - Les Cités Obscures
Contact :

Re: Petit problème Listes déroulantes

Message par Ymai » 13 juil. 2016, 20:11

Bonjour
Ce morceau de code va tout simplement chercher tout un paquet de procédures javascript sur un serveur de Google.
La paquet en question s'appelle jQuery. C'est magique et ça change la vie. :P
Bien sûr, la méthode que j'ai utilisée là permet à Mr Google de voler quelques informations (utilisé par qui? avec quelle fréquence? sur quel type de site? ...). Dans la vraie vie, je déconseillerais vivement d'utiliser les services si gratuits de Mr Google. Dans tous les cas, c'est bien mieux de déposer ladite librairie sur son serveur personnel. C'est libre et gratuit.
Là, je n'avais pas trop le choix, n'ayant -heureusement- pas accès au serveur.

Voir http://www.jquery-fr.com/ ou https://jquery.com/
Votre Navigateur : Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:47.0) Gecko/20100101 Firefox/47.0
ymai
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.

Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités