11491 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,
j'ai du placer ce message au mauvais endroit , alors je le replace dans ce forum
Désirant modifier un menu horizontal en vertical, j'ai trouvé la rubrique consacrée au menu "accordéon" de J.Query qui me va très bien.
J'ai put intégrer mes boutons et cela fonctionne PRESQUE parfaitement !!!
j'ai une fenêtre qui s'ouvre au centre de l'écran avec quelques commentaires. ça fonctionne à part un petit détail, les textes correspondants aux sous-menus s'affichent en même temps, seule la couleur du texte change au survol du bouton correspondant.
Est-ce qu'il est possible de n'afficher que le texte du bouton survolé ? et cela sans être obligé de refaire complètement la source .
j'ai essayé de bricoler un peu, mais je dois dire que je cumule :
je ne parle pas anglais, je suis nul en java (c'est pas bien, je sais, mais à 70 ans, je n'ai plus la possibilité de me perfectionner. J'ai réussi à intégrer les CSS, mais j'ai atteint le seuil de Peter en Html.) .
j'ai essayé de modifier le code java mais je ne comprend absolument pas la syntaxe.

Merci d'avance de vos conseils
mon résultat est visible à
http://www.granges-sur-baume.fr/foyer-rural/granges_foyer.html
Bonjour,
J'ai essayé de faire au mieux, le souci est que votre code est mal "structuré".


// On modifie l'evenement "click" sur les liens dans les items de liste
        // qui portent la classe "toggleSubMenu" :
        $("li.toggleSubMenu > a").click( function () {
            // Si le sous-menu etait deja ouvert, on le referme :
            if ($(this).next("ul.subMenu:visible").length != 0) {
                $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
            }
            // Si le sous-menu est cache, on ferme les autres et on l'affiche :
            else {
                $("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
                $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
               [b] // On cache les informations indésirables
                $(".subMenu div").hide();[/b]
            }
            // On empêche le navigateur de suivre le lien :
            return false;
        });
        
[b]
        //On affiche l'information correspondant au bouton cliqué
        $(".subMenu img").click( function(e) {
          //On empêche le navigateur de suivre le lien
          e.preventDefault();
          //On cache les informations indésirables
          $(".subMenu div").hide();
          //On affiche l'information désirée
          $(this).next("div").show();
        });
[/b]


J'ai mis les portions de code en gras à ajouter.

Comme dit plus haut je vous recommande vivement, si vous connaissez quelqu'un qui peut vous aider, de "recoder" votre site. Cela vous permettra entre autre de le mettre à jour plus rapidement et plus facilement.

J'ai vu votre âge et je tiens tout de même à vous félicitez pour ce que vous avez fait.
Modifié par kurt11 (25 Mar 2009 - 23:03)
Bonjour,
Je vous remercie d'avoir pris de votre temps pour résoudre mon problème.

Je pense que le fait d'avoir laissé des morceaux de code concernant les menus horizontaux n'a rien arrangé (comme je n'ai pas la notion d'interférence, je ne retire pas toujours les bouts de code inutiles.)
J'ai modifié et adapté le code que vous m'avez fait parvenir. Le résultat est tout à fait conforme à ce que je désire. c'est visible sur la page
http://www.granges-sur-baume.fr/foyer-rural/granges_foyer.html

Mais(et c'est mon drame avec la programmation internet) 2 nouveaux problèmes sont venus s'ajouter
-le lien avec la page des albums ne fonctionne plus quand on clique sur le bouton correspondant
- je ne m'étais pas aperçu que le scrolling vertical dans les fenêtres centrale ne fonctionne qu'avec la molette de la souris mais pas avec le curseur sur l'ascenseur correspondant (par contre si on clique sur la fleche de l'ascenseur, ça fonctionne alors on peut considérer le problème résolu).

Si ces défauts se résolve simplement, je vous serai très reconnaissant de m'indiquer ce qui manque, sinon, ne perdez pas votre temps, je reviendrez à mes modèles qui fonctionnent, j'avais seulement envisagé ce style de page pour varier mes présentations
Merci encore pour votre aide.
Modifié par helvetdulac (26 Mar 2009 - 09:34)
helvetdulac a écrit :
Bonjour,
Je vous remercie d'avoir pris de votre temps pour résoudre mon problème.

Je pense que le fait d'avoir laissé des morceaux de code concernant les menus horizontaux n'a rien arrangé (comme je n'ai pas la notion d'interférence, je ne retire pas toujours les bouts de code inutiles.)
J'ai modifié et adapté le code que vous m'avez fait parvenir. Le résultat est tout à fait conforme à ce que je désire. c'est visible sur la page
http://www.granges-sur-baume.fr/foyer-rural/granges_foyer.html

Mais(et c'est mon drame avec la programmation internet) 2 nouveaux problèmes sont venus s'ajouter
-le lien avec la page des albums ne fonctionne plus quand on clique sur le bouton correspondant
- je ne m'étais pas aperçu que le scrolling vertical dans les fenêtres centrale ne fonctionne qu'avec la molette de la souris mais pas avec le curseur sur l'ascenseur correspondant (par contre si on clique sur la fleche de l'ascenseur, ça fonctionne alors on peut considérer le problème résolu).

Si ces défauts se résolvent simplement, je vous serai très reconnaissant de m'indiquer ce qui manque, sinon, ne perdez pas votre temps, je reviendrez à mes modèles qui fonctionnent, j'avais seulement envisagé ce style de page pour varier mes présentations, alors mon ego est sans importance.
Merci encore pour votre aide.
Voila, désolé du retard, j'étais occupé.

Pour le scrolling vertical, la seule solution que j'ai est de le supprimer, à la ligne 73, en enlevant "overflow:scroll;" à la fin. Ce qui donne:
.cont_bulletin	{position: absolute; top: 150px; left: 250px;  width: 790px; height: 650px; background-position: top;}

Il a peut-être d'autres solutions mais je ne les connais pas.

Quant aux images il faudrait ajouter une classe à chaque bouton afin de les différencier des autres images. Ce qui donne :
<img [b]class="boutonMenu"[/b] src="../boutons/foyer_bureau.jpg" alt="bureau" width="150" height="25">

Et dans le code JQuery il faut remplacer ".subMenu img" par ".boutonMenu".
$(".boutonMenu").click( function(e) {
Merci Kurt11 pour ton dernier message et excuse mon retard mais j'etais absent quelques jours.

Finalement quand je fais l'historique des messages, je me rends compte que la vieillesse est une catastrophe.
Ton premier message resolvait tous mes problèmes et on aurait pu en rester là.
En réalité, moyennant quelques contraintes tout ce que je voulais était là.

Ma façon de procéder, consiste, en partant de formules existantes à modifier les dites formules pour voir le résultat (au pifomètre, ne connaissant pas le langage java), et, en partant de ce que je vois à l'écran, d'améliorer !!!! mes

présentations.

Après quelques heures de tripatouillage, je suis arrivé à un résultat conforme à ce que j'envisageais, il reste un petit

hiatus avec la présence de puces dans le menu album, j'ai vu une fois sur le forum un problème de ce genre et je vais

consacrer mes prochains loisirs à corriger ce défaut.

le résultat presque final est visible sur la page
http://www.granges-sur-baume.fr/foyer-rural/granges_foyer.html

Merci encore Kurt, d'avoir consacré de ton temps à remetre sur les rails mes envies de menu
Modifié par helvetdulac (29 Mar 2009 - 18:44)
Hello helvetdulac,

helvetdulac a écrit :
Ma façon de procéder, consiste, en partant de formules existantes à modifier les dites formules pour voir le résultat (au pifomètre, ne connaissant pas le langage java), et, en partant de ce que je vois à l'écran, d'améliorer !!!! mes présentations.

Après quelques heures de tripatouillage, je suis arrivé à un résultat conforme à ce que j'envisageais
Si je puis-je me permettre c'est loin d'être une façon optimale de procéder et il aurait été plus utile de passer ces "quelques heures de tripatouillage" à trouver un bon tutoriel sur Jquery et plus globalement sur JavaScript (et non java qui est un autre langage). Smiley cligne
Bonjour Heyoan,
Merci de tes conseils auxquels je souscris pleinement, mais, privilège des "galopins qui ont appris", si tu avais lu mes premiers post, tu aurais vu que je cumule les handicaps par rapport à toi.
Je ne parle pas anglais, j'ai une base technique mais à l'époque de mes études, "on commençait à parler des roulements à billes", la création de site internet est un passe-temps parmi d'autres et cerise sur le gâteau, à 70 ans entre sieste, jardinage, bricolage, lecture, le temps s'écoule terriblement vite.
(j'ai +/- 20 bouquins à finir et je n'y arrive pas).
Plaisanterie mise à part, ma façon de procéder n'est pas un modèle, mais rien que pour commencer à comprendre les CSS, j'ai mis plus de 2 ans.
Le drame des "vieux", c'est la difficulté de mémoriser et d'utiliser les termes exacts. L' exemple de Java ou JavaScript est patent à cet égard.
J'ai acheté de nombreux bouquins sur CSS, Javascript, PHP mais leur lecture est austère et je n'ai pas le temps matériel de passer par le B.A ba.
Voilà, je comprends ta réaction Heyoan, mais je représente une autre génération qui a simplement voulu, par curiosité intellectuelle, voir à quoi ressemblait cette nouvelle civilisation.
Modifié par helvetdulac (29 Mar 2009 - 23:13)
helvetdulac a écrit :
Merci Kurt11 pour ton dernier message et excuse mon retard mais j'etais absent quelques jours.


Pas de souci, bonne continuation Smiley smile .