Position Popup JSF (popup sorti de l'écran)

Version imprimable

12/03/2012, 11h19
hassanJava

Position Popup JSF (popup sorti de l'écran)

Bonjour,
J'ai un popup jsf (composant Trinidad) sur un lien. Quand le lien se trouve en bas de la page, une partie du popup sort de l'écran et il faut scroller pour voir le reste. Je voudrais changer la position du popup (quand il sort de l'écarn) pour qu'il soit affiché correctement.
J'ai pense à recuperer la position du lien par javaScript pour savoir si on est en bas de la page et donner une nouvelle postion au popup... mais je connais rien au JS et je sais pas comment changer préciser la postion d'un popup..
Merci de vos aids
Ciao
12/03/2012, 11h52
paissad

Bonjour,
C'est sûrement un problème de CSS ou de Javascript. Il faudrait que tu postes un minimum de code ou bien que tu débogues tout via Firebox ou Google Chrome.

Cordialement,

Merci pour la réponse,
j'ai réussi à résoudre la majorité du problème. J'ai récupéré les dimensions de browser et les coordonnées (x,y) du souris. Du coup, via javascript, je peux savoir si le popup va sortir de l'écran ou pas...
si oui, je dois changer par exemple la position "top" du popup pour qu'il s'affiche un peu plus haut.
voila une partie du JS qui essaie de changer le top dans le CSS :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 // The popup will be out of the page if(isPopOffthePage(anEvent,50)){ var mosY = anEvent.screenY; var newY; if(navigator.appName == "Microsoft Internet Explorer"){ newY = mosY - 70; } else{ newY = mosY - 70 - pageYOffset; } theCurNode.style.top= newY+"px"; }
le problème c'est que la dernière ligne de ce code JS plante (il affiche pas du tout le popup)... en fait j'arrive par exemple change la couleur du popup quand il sort de l'écran en remplaçant la dernier ligne par celle-ci

Code:

theCurNode.style.background = '#ff00aa';

mais quand je veux changer le top, ca fonctionne pas.
Je me demande est-ce qu'on peut changer le dom "top" de css de manière dynamique ?
Merci beaucoup.

Et voici la class CSS pour le popup :

Code:

1
2
3
4
5
6
7
8
.popup {    
  background-color:#F0F0F0; 
  border:1px solid #DCDCDC;
  padding:5px;
  text-align:left;
  position:absolute;
  z-index:5;
}

12/03/2012, 18h40
hassanJava

J'ai trouvé la réponse moi-même :)
le propriété "top" de CSS n'est une position absolute (c-a-d, ce n'est pas par rapport à l'écran ou browser) mais c'est un offset de la position de l'endroit où on a cliqué.
Du coup, le top donné définie le décalage (vers le haut) de l'endroit où je clique. moi je donné le pixel absolue alors que je dois donné le décalage en nombre de pixel.
Je sais pas si je suis clair mais ca marche, merci quand même. :)