Bienvenue sur les archives forum du Parti Pirate


Le Parti Pirate refond complètement son forum et a migré vers un outil plus moderne et performant, Discourse !
Retrouvez nous ici : https://discourse.partipirate.org

Besoin d'un codeur Javascript

Archives 2010
Oimat
Matelot
Messages : 134
Inscription : mer. 22 sept. 2010, 21:31

Besoin d'un codeur Javascript

Messagepar Oimat » dim. 03 oct. 2010, 22:25

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 :D
Oimat, codeur PPJ.

Avatar de l’utilisateur
CaptainKiller
Trésorier du PP
Messages : 1065
Inscription : mer. 19 mai 2010, 16:41
Contact :

Re: Besoin d'un codeur Javascript

Messagepar CaptainKiller » mar. 05 oct. 2010, 20:15

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 ?
blog
twitter
G+
Analyse de la participation des conseillers du Parti Pirate (CAP & CN) : Nos conseillers du PP
Rapport financier 2012 du Parti Pirate

Avatar de l’utilisateur
cry-stof
Archange des mers
Messages : 5557
Inscription : mer. 10 juin 2009, 10:08
Localisation : strasbourg
Contact :

Re: Besoin d'un codeur Javascript

Messagepar cry-stof » mer. 06 oct. 2010, 02:26

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

pers sort de ce corp :P
Pour ne pas être perdu: mode d'emploi
Mailing Régional
"ne demande pas au PP ce qu'il peut faire pour toi mais ce que tu peux faire pour le PP"
j'autorise les modérateurs à corriger mes messages
http : / / ppfr.it mon raccourcisseur d'url officiel pour moi

Oimat
Matelot
Messages : 134
Inscription : mer. 22 sept. 2010, 21:31

Re: Besoin d'un codeur Javascript

Messagepar Oimat » mer. 06 oct. 2010, 06:35

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.

Avatar de l’utilisateur
Leviathan-117
Moussaillon
Messages : 33
Inscription : mer. 06 oct. 2010, 13:49

Re: Besoin d'un codeur Javascript

Messagepar Leviathan-117 » mer. 06 oct. 2010, 18:49

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).

Oimat
Matelot
Messages : 134
Inscription : mer. 22 sept. 2010, 21:31

Re: Besoin d'un codeur Javascript

Messagepar Oimat » mer. 06 oct. 2010, 23:03

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();" > <!-- fermeture du id="page" -->

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

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

Avatar de l’utilisateur
Leviathan-117
Moussaillon
Messages : 33
Inscription : mer. 06 oct. 2010, 13:49

Re: Besoin d'un codeur Javascript

Messagepar Leviathan-117 » mer. 06 oct. 2010, 23:41

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().

Avatar de l’utilisateur
HELIOS
Moussaillon
Messages : 41
Inscription : lun. 21 juin 2010, 17:46
Localisation : dans ton cul !

Re: Besoin d'un codeur Javascript

Messagepar HELIOS » lun. 11 oct. 2010, 14:36

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
L'être humain a créé la civilisation, non de sa propre initiative mais par nécessite poussé par un besoin compulsif d'appartenir a des structures et a un sens qui transcenderaient son existence individuelle

Avatar de l’utilisateur
Leviathan-117
Moussaillon
Messages : 33
Inscription : mer. 06 oct. 2010, 13:49

Re: Besoin d'un codeur Javascript

Messagepar Leviathan-117 » lun. 11 oct. 2010, 17:21

Ç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.

Avatar de l’utilisateur
HELIOS
Moussaillon
Messages : 41
Inscription : lun. 21 juin 2010, 17:46
Localisation : dans ton cul !

Re: Besoin d'un codeur Javascript

Messagepar HELIOS » lun. 11 oct. 2010, 18:03

Ç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.
L'être humain a créé la civilisation, non de sa propre initiative mais par nécessite poussé par un besoin compulsif d'appartenir a des structures et a un sens qui transcenderaient son existence individuelle

Avatar de l’utilisateur
HELIOS
Moussaillon
Messages : 41
Inscription : lun. 21 juin 2010, 17:46
Localisation : dans ton cul !

Re: Besoin d'un codeur Javascript

Messagepar HELIOS » lun. 11 oct. 2010, 20:34

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
L'être humain a créé la civilisation, non de sa propre initiative mais par nécessite poussé par un besoin compulsif d'appartenir a des structures et a un sens qui transcenderaient son existence individuelle

Oimat
Matelot
Messages : 134
Inscription : mer. 22 sept. 2010, 21:31

Re: Besoin d'un codeur Javascript

Messagepar Oimat » lun. 11 oct. 2010, 21:07

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

Avatar de l’utilisateur
HELIOS
Moussaillon
Messages : 41
Inscription : lun. 21 juin 2010, 17:46
Localisation : dans ton cul !

Re: Besoin d'un codeur Javascript

Messagepar HELIOS » mar. 12 oct. 2010, 09:19

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


Si tu as besoin d'aide, tu peux me PM.
Cdt
L'être humain a créé la civilisation, non de sa propre initiative mais par nécessite poussé par un besoin compulsif d'appartenir a des structures et a un sens qui transcenderaient son existence individuelle

Oimat
Matelot
Messages : 134
Inscription : mer. 22 sept. 2010, 21:31

Re: Besoin d'un codeur Javascript

Messagepar Oimat » mar. 12 oct. 2010, 18:56

J'ai retenté un peu, et là ça marche :D
Merci beaucoup à vous deux :p
Si j'ai d'autres problèmes, je vous appelerais :)


Revenir vers « 2010 »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Google [Bot] et 1 invité