Forum du Parti Pirate

Hello!
Je n'ai pas le temps d'apprendre à programmer en JS, mais on a besoin d'un bon codeur Javascript.
Histoire de faire quelques listes déroulantes (voir me donner un modèle où je pourrais mettre mes listes déroulantes).
En effet, nous voudrions avoir un menu dynamique (qui se déroule, en CSS c'est trop galère à faire et je réussis pas à adapter les tutos) et un onglet avec la liste de tous les partis pirate. C'est simplement nous donner un code de base imbricable en lui-même et qui permette de faire un joli menu (avec des class et des id partout).

Merci

Oimat, codeur PPJ.

T'es obligé de coder ça from scratch ? Tu sais, maintenant on essaye de pas réinventer la roue à chaque nouveau site…
En plus chercher un codeur pour une liste déroulante, ça fait un peu cheap, non ?

CaptainKiller a écrit :...? Tu sais, maintenant on essaye de pas réinventer la roue à chaque nouveau site…

pers sort de ce corp

Captain : bon, bah j'ai bingé pendant 430minues hier, j'ai pas trouvé de scritp prêt à l'emploi. Si toi tu peux m'en indiquer un, je suis totalement preneur.

Depuis que les évènements "onfocus" et "onblur" ne s'appliquent plus qu'à quelques balises (celle de formulaire) on ne peut plus faire de menu déroulant simplement.

Voici un truc qui marche presque parfaitement et qui est simple.

Code : Tout sélectionner

<div id="menu">
    <div>
        <button onfocus="libere(this);">nom du menu</button>
        <a href="#">lien</a>
        <a href="#">lien</a>
    </div>
    <div>
        <button onfocus="libere(this);">nom du menu</button>
        <a href="#">lien</a>
        <a href="#">lien</a>
    </div>
</div>

Tout le menu dans un div identifié comme "menu".
Chaque partie qui devra se déroulée se place dans un div à part à l'intérieur du menu.
Chaque section comporte un bouton qui reste toujours visible et qui sert à dérouler le menu. Il se redesign très bien avec CSS. Le bouton réagit à l'évènement onfocus en appelant la fonction qui va dérouler le menu.
A la suite du bouton, les liens qui apparaissent quand le menu est déroulé.

Voici maintenant le code Javascript.

Code : Tout sélectionner

function libere(element) {
    occulte() ;
    var liens = element.parentNode.getElementsByTagName("a");
    for(var i=0; i<liens.length; i++) {
        liens[i].style.display = "";
    }
}

function occulte() {
    var menu = document.getElementById("menu");
    var liens = menu.getElementsByTagName("a");
    for(var i=0; i<liens.length; i++) {
        liens[i].style.display = "none";
    }
}

La fonction occulte ferme tout les menus. La fonction libere déroule le menu indiqué après avoir tout replié.
Juste avant de finir la page HTML d'un joli </body></html> il faut appeler la fonction occulte pour qu'elle replie les menus.
On pourrait replier les menus d'office avec CSS mais une personne qui désactive Javascript ne verrait aucun menu même après 72 clics sur un des boutons.

Reste le dernier point. Juste avec ça, il y aura toujours un menu déroulé même si on clique à côté du menu. C'est pourquoi il faut que le reste du site soit dans un énorme div avec onclick="occulte()" pour refermer les menus.
On pourrait être tenté de mettre <body onclick="occulte()"> à la place, seulement le menu se trouve dans le <body>... Donc en cliquant sur un bouton on déroule le menu, le clic se propage jusqu'à <body> qui va gentiment vous le refermer à la figure (oui je sait c'est stupide).

Merci de ta réponse.
Malheureusement, cela ne marche pas.
J'ai fait :

Header.php :

Code : Tout sélectionner

<script type="text/javascript">
function occulte() {
    var menu = document.getElementById("menu");
    var liens = menu.getElementsByTagName("a");
    for(var i=0; i<liens.length; i++) {
        liens[i].style.display = "none";
    }

   function libere(element) {
    occulte() ;
    var liens = element.parentNode.getElementsByTagName("a");
    for(var i=0; i<liens.length; i++) {
        liens[i].style.display = "";
    }

</script>

<div id="page" onclick="occulte()" "> <!-- Début du page -->

Et ensuite je met sur le sidebar.php, le fameux onclick, à l'ouverture et à la fermeture :\

Code : Tout sélectionner

      <!-- Sidebar -->
      <div id="sidebar" onclick="occulte();">
      
   <div id="list_pays">
          <div>
              <button onfocus="libere(this);">Liste de pays</button>

<?php
   include("array_pays.php");

   foreach($pays as $lien)
   {   
      echo $lien;
   }
?>
       
      </div>
   </div>
   
      <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>
         <?php endif; ?>
      
      </div>
      <!-- Sidebar -->

Je fais même, à la fin de la fermeture du <div id="page">, un

Code : Tout sélectionner

</div onclick="occulte();" > 

Ce qui est bien sympa, mais ça ne referme pas du tout la liste.

Où est l'erreur?
Merci beaucoup de ton aide.

Dans le javascript que j'ai donné le bloc contenant les menus déroulants est repéré par l'id "menu", tu utilises l'id "sidebar" dans le code HTML. ^^

function occulte() {
var menu = document.getElementById("menu");
...
}

>>>devient>>>

function occulte() {
var menu = document.getElementById("sidebar");
...
}

Ensuite le souci sera cette fois qu'aucun menu ne se déroulera.
<div id="sidebar" onclick="occulte()">

Ne pas oublier non plus de fermer une première fois les menus.

<div id="sidebar">
....
</div>
<script>occulte();</script>

Sinon j'ai trouvé une alternative pour fermer le menu autre que mettre plein de onclick="occulte()". Comparaison de la position de la souris au clic et de l'espace occupé par la sidebar. De fait, tout les onclick="occulte()" sont à retirer pour ceci :

<body onclick="fermeture()"> qui gère tout tout seul.

Code : Tout sélectionner

function fermeture(e){
    var posx = 0;
    var posy = 0;
    if (e.pageX || e.pageY){
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY){
        posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    var menu = document.getElementById("sidebar");
    x1 = menu.offsetLeft;
    y1 = menu.offsetTop;
    x2 = x1 + menu.offsetWidth ;
    y2 = y1 + menu.offsetHeight;
    if(posx < x1 || posx > x2 || posy < y1 || posy > y2) {
        occulte() ;
    }
}

EDIT du 7 octobre 2010 à 19h21. Motif : ajout du code de fermeture().

Une solution assez simple serait d'ajouter jquery à wordpress dans le fichier header.php

Code : Tout sélectionner

<?php wp_enqueue_script("jquery"); ?>

<?php wp_head(); ?>

Ensuite,détecter ou pas, si le click est sur un élement de la div menu

Code : Tout sélectionner

$("body").click(function()
{
   $("#menu").children().hide();
}

$("#menu").children().children("a").click(function()
{
   $("#menu").children().hide();
    $(this).parent().show();
});

Ou quelque chose dans ce style là.
Je peux aider si besoin.

Cdt

Ça ne marcherais pas ce code. Toujours le même souci. Le clic déroule le menu, se propage jusqu'à <body> et ça referme le menu.

Ça ne marcherais pas ce code. Toujours le même souci. Le clic déroule le menu, se propage jusqu'à <body> et ça referme le menu.

Gné ?
Euh, je me suis peut être trompé, mais je pense ce que ce code fonctionne quand même car :

1/ Si je clique sur le body, je ferme les enfants de la div "menu", c'est à dire la div juste en dessous.

Le code JS :

Code : Tout sélectionner

$("body").click(function()
{
   $("#menu").children().hide();
}

Le code HTML proposé plus haut dans le thread

Code : Tout sélectionner

<div id="menu">
    <div>
        <button onfocus="libere(this);">nom du menu</button>
        <a href="#">lien</a>
        <a href="#">lien</a>
    </div>
    <div>
        <button onfocus="libere(this);">nom du menu</button>
        <a href="#">lien</a>
        <a href="#">lien</a>
    </div>
</div>

2/ Si je clique sur un lien du menu, alors, je ferme les enfants de la div menu (donc les sous div cf. ci-desus) et j'affiche la div qui englobe le lien.

Code : Tout sélectionner

$("#menu").children().children("a").click(function()
{
   $("#menu").children().hide();
    $(this).parent().show();
});

La synthaxe n'est peut être pas la bonne, mais la reflexion est juste je pense.

Leviathan-117 a écrit :Ça ne marcherais pas ce code. Toujours le même souci. Le clic déroule le menu, se propage jusqu'à <body> et ça referme le menu.

Ca y'est je viens de comprendre... (sic)

Ce code fonctionne car j'ai mis le body en 1er.
Ou sinon, énième solution consiste à faire une fonction $().click() et vérifier si le parent est l'id menu

Cdt

??
Kesskidit xD?
Je testerais ta soluion demain ou après-demain si j'ai le temps, voire ce soir.
Merci beaucoup

Oimat a écrit :??
Je testerais ta soluion demain ou après-demain si j'ai le temps, voire ce soir.
Merci beaucoup

Si tu as besoin d'aide, tu peux me PM.
Cdt

J'ai retenté un peu, et là ça marche

Merci beaucoup à vous deux :p
Si j'ai d'autres problèmes, je vous appelerais

Forum du Parti Pirate

Besoin d'un codeur Javascript

Besoin d'un codeur Javascript

Re: Besoin d'un codeur Javascript

Re: Besoin d'un codeur Javascript

Re: Besoin d'un codeur Javascript

Re: Besoin d'un codeur Javascript

Re: Besoin d'un codeur Javascript

Re: Besoin d'un codeur Javascript

Re: Besoin d'un codeur Javascript

Re: Besoin d'un codeur Javascript

Re: Besoin d'un codeur Javascript

Re: Besoin d'un codeur Javascript

Re: Besoin d'un codeur Javascript

Re: Besoin d'un codeur Javascript

Re: Besoin d'un codeur Javascript