11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

suite à ce magnifique tutoriel la et la
j'ai pu largement m'inspirer du code pour l'adapter à mon application., et cela fonctionne parfaitement à part un point non négligeable.
Je me suis rendu condu que lorsque l'on affiche le lien à environ une fois et demi la hauteur de l'ecran, la popup ne s'affiche plus a coté du pointeur (soit on la voit pas, soit elle est affichée complétement ailleurs)

Je pense que cela viens de la partie Javascript, mais je suis pas capable de trouver l'erreur Smiley sweatdrop

gk=window.Event?1:0; // navigateurs Gecko ou IE
D=document;bulle=popup=popn=encours=wpop=hpop=x=0

function ctrl(e)
{
if(!x){de=!D.documentElement.clientWidth?D.body:D.documentElement;x=1} // IE6
el=gk?e.target:event.srcElement; //objet sous la souris
if(!el.tagName)el=el.parentNode; // noeud #text

if(el.className == 'pop' && el.href)
  {
  popup = D.getElementById(el.href.substring(el.href.lastIndexOf('#') + 1)); 
  with(popup){wpop=offsetWidth;hpop=offsetHeight;bulle=style}
  if(bulle!=encours) // seulement si changement de bulle 
    {
    encours.left=-999+'px';
    encours=bulle;
    fx=gk?innerWidth-15:de.clientWidth   //l fenêtre
    fy=gk?innerHeight-15:de.clientHeight //h fenêtre
    sx=gk?pageXOffset:de.scrollLeft      //scroll h
    sy=gk?pageYOffset:de.scrollTop       //scroll v
    x=gk?e.pageX:event.clientX+sx;       //curseur x
    y=gk?e.pageY:event.clientY+sy;       //curseur y
    posx=x>=fx+sx-wpop-10?x-15-wpop:x+10
    posy=y>=fy+sy-hpop-20?fy+sy-hpop-15:y+10
    with(bulle){left=posx+'px';top=posy+'px';}
    el.onclick=function(){return false}//désactive le lien
    }
  } else {encours.left=-999+'px';encours=0}
}

D.onmousemove=ctrl
//active la feuille de style 
document.getElementsByTagName("link")[0].href="../style.css"


Merci de votre aide
Modifié par imer (02 Aug 2006 - 11:49)
J'ai une autre piste cela ne vient pas du javascript mais de la partie CSS, je me suis inspiré de ceci, et je me suis rendu compte que j'avais changé la position absolute en fixed.

Seulement voila si je l'avais changé c'est parce que dans mon application cela fonctionnait mieux, la popup reste à coté du pointeur si je met en fixed (mais ne fonctionne plus quand je descend trop bas dans la page). Si je mets en absolute le probleme se résoud mais la popup n'est plus du tout à coté du pointeur.

Je dois avoir un problème du coté des calques que je n'arrive pas à résoudre
Modifié par imer (27 Jul 2006 - 10:49)
Je reformule mon problème face aux nouveaux évènements:

Je travaille avec une application qui se compose d'une bannière fixe, d'un menu sur la gauche fixe et un corps déroulant. Pour ce faire j'utilise des calques voici un extrait de code très succint pour la partie menu + corps:
J'ai un .main qui comporte .menu et .corps

.main {
	position:absolute;
	top:80px;
	width:100%;
	right:15px;
	margin-right:-15px
}
.menu{
	position:fixed;
	width: 170px;
	top:80px;
	left:0px;
        z-index:1;
	min-height:100%;
	border-right-style: groove;
	border-right-width: 1;
}
.corps {
	position:relative;
	margin-left:170px;
}

J'appelle de la façon suivante en HTML:

<div class="main">
	<div class="menu">
<!-- CODE DU MENU -->
</div>
	<div class="corps">
<!-- CODE du CORPS -->
</div>
</div>

Voila c'était pour présenter la structure de mon application, tout marche très bien à ce niveau!

Pour adapter cette fameuse popup magique j'utilise ceci

.pop{
cursor:default;
text-decoration: none;
background: #f5f5dc;
color: #990033;
font-weight: bold;
font-size: 18px;
}
.pp0{
position: fixed;
left:-999px;top:0;
width: 20em;
z-index:500;
padding: 0.2em;
background : #FFFFBB ; color: black; font-size: 80% ; 
border-top: 1px dashed black; 
border-bottom: 1px dashed black;
text-align: justify;
}

Pour la position j'ai du la mettre à fixed au lieu de relative car sinon la popup s'affiche environ au milieu de l'écran au lieu de s'afficher à côté du pointeur de la souris.
Cependant comme je le disais auparavant, une fois que mon code situé dans le corps, dépasse une certaine hauteur d'écran la popup ne s'affiche plus à cause de ce fixed sinon dans le cas du relative elle est présente mais toujours au mauvais endroit.

Je pense que cela doit venir de la position du menu sur la gauche qui est aussi en fixed car comme par hazard c'est lorsque je dépasse cette hauteur qu'il y a problème, j'ai testé toutes les valeurs possible du position, j'ai vraiement besoin d'aide pour pouvoir utiliser cette méthode de popup qui est magnifique

Merci d'avance de se pencher sur mon problème
Bonjour à tous, et spécialement à ceux qui s'intéressait à ce sujet ou qui si intéresse Smiley lol

J'ai trouvé un compromis face à mon petit soucis.

solution :
J'ai tout d'abord adopté la position relative dans les cas où j'avais mon problème, et gardé le fixed dans les cas qui fonctionnaient. Dans le cas du relative il fallait que je rapproche la popup de mon curseur, j'avais donc essayé entre autre le top, et le left sans succès.

J'ai essayé le margin-top et le margin-left avec de bien meilleurs résultats puisque j'ai réussi à obtenir ce que je voulais. Selon les positions sur la page, les popups ne s'affichent pas comme il le faudrait mais en bidouillant les valeurs des deux margin j'obtiens quelque chose de correct.

Voila c'était pour clore cette discussion au final peu compliqué comme souvent Smiley confused