[Javascript] Délimiter une zone

Délimiter une zone [Javascript] - HTML/CSS - Programmation

Marsh Posté le 03-01-2007 à 12:28:51    

Bonjour,
 
J'ai un div de 100px de large que je vourais diviser en 2 : si on clique à gauche ça déclenche x, (et y pour la droite). Est-ce faisable ?
 
Benjamin

Reply

Marsh Posté le 03-01-2007 à 12:28:51   

Reply

Marsh Posté le 03-01-2007 à 13:40:42    

mets deux divs dedans chacun avec un handler de click différent [:spamafote]

Reply

Marsh Posté le 03-01-2007 à 13:49:50    

J'ai commencé par là, mais ça me génère d'autre problème. La solution la plus simple semblait être de ne faire qu'un seul calque avec 2 sones réactives.
 
Mais j'ai l'impression que c'est un peu complexe, je vais essayer de résoudre l'autre problème.

Reply

Marsh Posté le 03-01-2007 à 13:56:22    

Code :
  1. <divstyle="width:100px">
  2. <div style="float:left; width:50%;" onclick="alert('gauche')">
  3.   gauche
  4. </div>
  5. <div style="float:left; width:50%;" onclick="alert('droite')">
  6.   droite
  7. </div>
  8. <br style="clear:both"/>
  9. </div>


Edit: de tête hein, donc je garantis rien
Edit2: les onclicks comme ça c'est un peu dégueux faudrait le faire proprement


Message édité par anapajari le 03-01-2007 à 13:57:14
Reply

Marsh Posté le 03-01-2007 à 14:37:56    

Merci anpajari,
 
Je vous expose le problème :
http://yearbook.bepimaco.fr/administration/acces.php
 
Lorsque la souris survole le point en début de chaque ligne, plusieurs icônes apparaissent. En l'occurence il y en a 2 : éditer ou supprimer la fiche.
 
La méthode utilisée est la modification du DOM en javascript. Un évènement onmouseover déclenche une fonction Javascript qui ajoute un DIV. A l'inverse un évènement onmouseover supprime le DIV.
 
Jusque là aucun problème, et j'ai la structure suivante :

Code :
  1. <div id="boite">yyyyy</div>


Par contre, je ne peux pas différencier l'un et l'autre bouton
 
Il suffit alors de rajouter 2 images à l'intérieur

Code :
  1. <div id="boite">
  2.      <img class="gauche" />
  3.      <img class="droit" />
  4. </div>


 
Mais là, le problème vient du fait que lorsque la souris passe sur une image, il considère que je sors du div boite, et ça génère une erreur.
 
[EDIT] dans la page en lien, le premier bloc utilise la technique n°2, les 3 suivant la technique n° 1.


Message édité par bepimaco le 03-01-2007 à 14:39:04
Reply

Marsh Posté le 03-01-2007 à 16:48:24    

Bon alors d'abord, la structure de ton document html est pas terrible terrible et pareil pour tes css :o
C'est pas parce qu'on dit partout que les tableaux c'est le mal que lorsque tu as besoin de faire une tableau il faut que tu le fasses avec des div/p en floatant, ça c'est pas une bonne idée du tout!
Et puis même pourquoi prendre des p pour les rendre floatant? Un span ne suffisait pas?

 

Pour tes css, un petit truc qui te simplifiera la vie tu peux donner plusieurs classes à un noeud comme ça:

Code :
  1. <span class="classe1 classe2">truc</span>


ça t'evitera les rédondances à la con sur ligne0 et ligne1 par exemple.

 

Maintenant pour en revenir à ton problème js, pareil c'est pas génial comme tu fais. Créer/Détruire des noeuds à chaque fois c'est super gourmant et ça sert à rien.
Voila un petit truc qui devrait marche un peu mieux, avec des commentaires en dessous:

Code :
  1. <script type="text/javascript">
  2. /***
  3. Class Bubble
  4. ***/
  5. function Bubble(imgList){
  6.   var self = this;
  7.   self.currentUser = null;
  8.   self.isDisplayed = false;
  9.   self.node = document.createElement('div');
  10.   self.node.className = 'bubble';
  12.   if(!imgList==null || typeof(imgList)!='object'){
  13.     alert('invalid param, aborting');
  14.     return false;
  15.   }
  16.   for(img in imgList){
  17.     var imgNode = document.createElement('img');
  18.     for(att in imgList[img]){
  19.       if (  att == 'onclick' && imgList[img][att] != null){
  20.         if(imgList[img]['onclick'] != null ){
  21.           imgNode.onclick = function(e){
  22.             eval(imgList[img]['onclick']);
  23.           }
  24.         }
  25.       } else if(imgList[img][att] != null ){
  26.         imgNode.setAttribute(att, imgList[img][att]);
  27.       }
  28.     }
  29.     imgNode.onmouseout = function(e){
  30.       if(self.isDisplayed) self.hide();
  31.     }
  32.     self.node.appendChild(imgNode);
  33.   }
  34.   document.getElementsByTagName('body')[0].appendChild(self.node);
  35. }
  36. Bubble.prototype.display = function (evt, node){
  37.   var self = this;
  38.   if(self.isDisplayed) return;
  39.   self.currentUser = node.getAttribute('id');
  40.   self.node.style.display = "block";
  41.   self.node.style.top = node.offsetTop + 'px';
  42. }
  43. Bubble.prototype.hide = function (){
  44.   var self = this;
  45.   self.currentUser = null;
  46.   self.node.style.display = "none";
  47. }
  49. /******/
  51. function truc1(id){
  52.   alert('truc1 pour id:'+id);
  53. }
  54. function truc2(id){
  55.   alert('truc2 pour id:'+id);
  56. }
  58. window.onload = function (e){
  59.   //creation objet bubble
  60.   var bubbleParams = new Array(
  61.       {"src":"img1.gif","alt":"gauche","onclick":"truc1(self.currentUser)"},
  62.       {"src":"img2.gif","alt":"droite","onclick":"truc2(self.currentUser)"}
  63.       );
  64.   var bubble = new Bubble(bubbleParams);
  65.   //initialisation des divs
  66.   var divNodes = document.getElementById('principal').getElementsByTagName('div');
  67.   for(var i=0; i<divNodes.length;i++){
  68.     if ( divNodes[i].className.substring(0,5) == 'ligne'){
  69.       divNodes[i].onmouseover = function(e){
  70.         bubble.display(e, this);
  71.       }
  72.     }
  73.   }
  74. }
  75.   </script>
  76.   <style type="text/css">
  77.   div.bubble{
  78.     position: absolute;
  79.     left:10px;
  80.     top:0px;
  81.     border: 1px solid black;
  82.     background-color: red;
  83.     width: 40px;
  84.     display: none;
  85.   }
  86.   </style>


Donc pour que ça marche avec ton truc vire tous les onmouseover sur les images et rouler-jeunesse ( en théorie).
Maintenant 2/3 trucs:

  • le handler est maintenant sur tout le div, ce qui n'est pas forcément ce que tu souhaitais. Si tu as besoin de l'avoir uniquement sur l'image joue avec le getElementsByTagName du onload. Par contre il faut absolument passer le noeud div donc utilise parentNode.
  • j'ai pas du tout tester sous IE mais de mémoire ça doit "presque" marcher. Je dis presque car IE ne gère pas exactement de la même façon offsetTop, il doit y avoir un décalage de quelques pixels. Pas d'autres solutions que de tester le navigateur et en fonction de rajouter ce qui manque.
  • la gestion des handlers tranmis en paramètre est franchement pas terrible mais j'avais pas vraiment le temps de faire mieux
  • a toi de modifier la css pour que cela ressemble à ce que tu veux


Message édité par anapajari le 03-01-2007 à 16:50:12
Reply

Marsh Posté le 03-01-2007 à 23:59:47    

Merci beaucoup anapajari.
Etant débutant en Javascript, j'ai mis un peu de temps à comprendre tout le code. Mais je pense avoir compris le principe.
 
Reste quelques zones d'ombres.
 
- J'ai essayé de changer le handler pour l'affecter à l'image, mais malgré toutes mes tentatives, rien ne fonctionne.
 
Mais à la limite, ce n'est pas le plus important.
 
Le nouveau DIV se place directement de le BODY, et s'il est bien à la bonne hauteur (IE + Firefox), il est en revanche à gauche de l'écran. J'ai essayé d'affecter le DIV créé à l'intérieur du DIV principal, mais rien ne marche.
 
J'ai l'impression que les 2 questions sont liées ... comment changer l'affectation des évènement ?
 
Merci beaucoup, je pense avoir pas mal progressé ce soir !

Reply

Marsh Posté le 04-01-2007 à 00:08:57    

Pour la position horizontal, j'ai trouvé ; il suffit de jouer avec les DIV. Ca plante encore avec IE, mais je devrais régler la solution.

Reply

Marsh Posté le 04-01-2007 à 09:28:41    

quand je parlais du handler on est bien d'accord que j'évoquais le :

Code :
  1. "truc1(self.currentUser)"


Et quand tu modifies ça, ça marche pas ?
Le lien d'en haut est toujours bon pour vérifier?

Reply

Marsh Posté le 04-01-2007 à 09:47:14    

J'ai tout mis à jour sur le lien du haut

Reply

Marsh Posté le 04-01-2007 à 09:47:14   

Reply

Marsh Posté le 04-01-2007 à 13:15:30    

Il y a un problème ici

Code :
  1. for(img in imgList){
  2.    var imgNode = document.createElement('img');
  3.    for(att in imgList[img]){
  4.      if (  att == 'onclick' && imgList[img][att] != null){
  5.        if(imgList[img]['onclick'] != null ){
  6.          imgNode.onclick = function(e){
  7.            eval(imgList[img]['onclick']);
  8.          }
  9.        }
  10.      } else if(imgList[img][att] != null ){
  11.        imgNode.setAttribute(att, imgList[img][att]);
  12.      }
  13.    }
  14.    imgNode.onmouseout = function(e){
  15.      if(self.isDisplayed) self.hide();
  16.    }
  17.    self.node.appendChild(imgNode);
  18. }


 
Plus particulièrement à la ligne 7
 
La boucle for passe en revue toutes les images de imgListe. Ce qui fait que lorsque la fonction (e) (ligne 6) est appelée, l'image en mémoire est la dernière. Donc, quelque soit l'image cliquée sur la page, ce sont les attributs de la dernière image qui sont pris en compte.
 
J'ai teté en remplacant eval(imgList[img]['onclick'] par eval(imgList[0]['onclick'], et c'est effecitvement de là que vient le problème. J'ai essayé pas mal de truc (d'où le changement des noms de variables !) Mais j'en reviens toujours au même point.
 

Reply

Marsh Posté le 04-01-2007 à 13:23:00    

yep c'est normal j'ai fait ça un peu trop vite.
Alors explication: le eval est effectué au moment du onclick sur le noeud, donc le 'img' pris est celui de la dernière itération et ça pouvait pas marcher.
Pour corriger, change les lignes 5 à 8 en:

Code :
  1. if(imgList[img]['onclick'] != null ){
  2.           imgNode.handler = imgList[img]['onclick'];
  3.           imgNode.onclick = function(e){
  4.             eval(this.handler);
  5.           }
  6.         }


et ça devrait rouler

Reply

Marsh Posté le 04-01-2007 à 13:33:05    

Merci beaucoup. Ca marche effectivement très bien.
 
J'essaie de comprendre tout ça, mais c'est un peu nouveau. En tout cas, j'avance grâce à vous.

Reply

Marsh Posté le 06-01-2007 à 20:13:05    

Bonsoir,
 
Si je résume le fonctionnement de la "Bubble" :

  • on crée un objet plusieurs boutons
  • on lui affecte des méthodes qui l'affiche et l'enlève
  • lors du survol d'une ligne, la méthode affichage est appelée, avec en paramètre la hauteur de la ligne (c'est pas tout à fait ça, mais c'est l'idée)


Pour pouvoir changer une des images, j'ai créé un second objet.
 
Le problème, c'est que je n'arrive pas à atteindre les méthodes, hors de la classe roulette. Pour être précis, je n'arrvei pas à "l'effacer". Avez-vous une idée ?
http://yearbook.bepimaco.fr/administration/acces.php
En visitant le lien et en parcourant la page vous comprendrez vite le problème.
 
Ce n'est pas vraiment un problème. Mais je voudrais vraiment comprendre comment tout interagit ... bref, c'est plus pour approfondir le sujet plus que pour le résultat de cette page.
 
Merci

Message cité 1 fois
Reply

Marsh Posté le 08-01-2007 à 09:48:25    

bepimaco a écrit :

Bonsoir,
 
Si je résume le fonctionnement de la "Bubble" :

  • on crée un objet plusieurs boutons
  • on lui affecte des méthodes qui l'affiche et l'enlève
  • lors du survol d'une ligne, la méthode affichage est appelée, avec en paramètre la hauteur de la ligne (c'est pas tout à fait ça, mais c'est l'idée)



C'est à peu près ça oui.  
Pour l'affichage en fait c'est le noeud sur lequel a eu lieu l'event plutot que la hauteur de la ligne mais ça revient effectivement au même.

bepimaco a écrit :

Pour pouvoir changer une des images, j'ai créé un second objet.


Tu as fait un autre new Bubble donc?
 

bepimaco a écrit :

Le problème, c'est que je n'arrive pas à atteindre les méthodes, hors de la classe roulette. Pour être précis, je n'arrvei pas à "l'effacer". Avez-vous une idée ?
http://yearbook.bepimaco.fr/administration/acces.php
En visitant le lien et en parcourant la page vous comprendrez vite le problème.


Pour accèder aux méthodes d'un objet il faut faire:

Code :
  1. var a = new monObject();
  2. a.laMethodeQueJeVeuxAppeler();


Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed