[Javascript] Délimiter une zone

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [Javascript] Délimiter une zone

bepimaco

Festina lente

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

Publicité

anapajari

s/travail/glanding on hfr/gs;

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

bepimaco

Festina lente

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.

anapajari

s/travail/glanding on hfr/gs;

Code :

<divstyle="width:100px">
<div style="float:left; width:50%;" onclick="alert('gauche')">
gauche
</div>
<div style="float:left; width:50%;" onclick="alert('droite')">
droite
</div>
<br style="clear:both"/>
</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

bepimaco

Festina lente

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 :

<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 :

<div id="boite">
<img class="gauche" />
<img class="droit" />
</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

anapajari

s/travail/glanding on hfr/gs;

Bon alors d'abord, la structure de ton document html est pas terrible terrible et pareil pour tes css
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 :

<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 :

<script type="text/javascript">
/***
Class Bubble
***/
function Bubble(imgList){
var self = this;
self.currentUser = null;
self.isDisplayed = false;
self.node = document.createElement('div');
self.node.className = 'bubble';
if(!imgList==null || typeof(imgList)!='object'){
alert('invalid param, aborting');
return false;
}
for(img in imgList){
var imgNode = document.createElement('img');
for(att in imgList[img]){
if ( att == 'onclick' && imgList[img][att] != null){
if(imgList[img]['onclick'] != null ){
imgNode.onclick = function(e){
eval(imgList[img]['onclick']);
}
}
} else if(imgList[img][att] != null ){
imgNode.setAttribute(att, imgList[img][att]);
}
}
imgNode.onmouseout = function(e){
if(self.isDisplayed) self.hide();
}
self.node.appendChild(imgNode);
}
document.getElementsByTagName('body')[0].appendChild(self.node);
}
Bubble.prototype.display = function (evt, node){
var self = this;
if(self.isDisplayed) return;
self.currentUser = node.getAttribute('id');
self.node.style.display = "block";
self.node.style.top = node.offsetTop + 'px';
}
Bubble.prototype.hide = function (){
var self = this;
self.currentUser = null;
self.node.style.display = "none";
}
/******/
function truc1(id){
alert('truc1 pour id:'+id);
}
function truc2(id){
alert('truc2 pour id:'+id);
}
window.onload = function (e){
//creation objet bubble
var bubbleParams = new Array(
{"src":"img1.gif","alt":"gauche","onclick":"truc1(self.currentUser)"},
{"src":"img2.gif","alt":"droite","onclick":"truc2(self.currentUser)"}
);
var bubble = new Bubble(bubbleParams);
//initialisation des divs
var divNodes = document.getElementById('principal').getElementsByTagName('div');
for(var i=0; i<divNodes.length;i++){
if ( divNodes[i].className.substring(0,5) == 'ligne'){
divNodes[i].onmouseover = function(e){
bubble.display(e, this);
}
}
}
}
</script>
<style type="text/css">
div.bubble{
position: absolute;
left:10px;
top:0px;
border: 1px solid black;
background-color: red;
width: 40px;
display: none;
}
</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

bepimaco

Festina lente

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 !

bepimaco

Festina lente

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.

anapajari

s/travail/glanding on hfr/gs;

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

Code :

"truc1(self.currentUser)"

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

bepimaco

Festina lente

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

Publicité

bepimaco

Festina lente

Il y a un problème ici

Code :

for(img in imgList){
var imgNode = document.createElement('img');
for(att in imgList[img]){
if ( att == 'onclick' && imgList[img][att] != null){
if(imgList[img]['onclick'] != null ){
imgNode.onclick = function(e){
eval(imgList[img]['onclick']);
}
}
} else if(imgList[img][att] != null ){
imgNode.setAttribute(att, imgList[img][att]);
}
}
imgNode.onmouseout = function(e){
if(self.isDisplayed) self.hide();
}
self.node.appendChild(imgNode);
}

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.

anapajari

s/travail/glanding on hfr/gs;

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 :

if(imgList[img]['onclick'] != null ){
imgNode.handler = imgList[img]['onclick'];
imgNode.onclick = function(e){
eval(this.handler);
}
}

et ça devrait rouler

bepimaco

Festina lente

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.

bepimaco

Festina lente

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

anapajari

s/travail/glanding on hfr/gs;

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 :

var a = new monObject();
a.laMethodeQueJeVeuxAppeler();

FORUM HardWare.fr

Programmation

HTML/CSS

[Javascript] Délimiter une zone

Sujets relatifs
variable dans du javascript, problème de " et de ' ...	Aide pour une débutante en javascript
[Résolu] Javascript / AJAX - Problème de réponse de requete	Faire des requettes http en javascript ou php
[Javascript] menu déroulant	[Javascript] comment remplacer une image ouverte???
javascript Greasemonkey : problème de perfo ?	javascript et ie 7
Plus de sujets relatifs à : [Javascript] Délimiter une zone

Page générée en 0.110 secondes