S'assurer qu'un element est visible a l'ecran [resolu]

S'assurer qu'un element est visible a l'ecran [resolu] - HTML/CSS - Programmation

Marsh Posté le 03-10-2005 à 22:54:21    

Bonjour,
 
Est ce qu'il est possible de savoir en javascript si un element dont je connais l'ID est visible à l'écran ?
 
voila en fait ce que je veux faire c'est un peu comme avec les anchors (les <a name="truc"> )
mais en javascript, l'utilisateur clic sur un lien et l'assenseur se déplace si besoin.
Je ne sais pas si je peux utiliser les anchors car je voudrais en plus exécuter des fonctions javascript.
 
<a href="javascript:voir('monId')">Lien</a>
 
et  
 
function voir(monID){
 
     //<-- ici, s'assurer que monID est visible a l'ecran
 
     //traitement sur monID, pour le mettre en gras et en rouge (par exemple)
}
 
Merci d'avance


Message édité par fluminis le 04-10-2005 à 11:57:34

---------------
http://poemes.iceteapeche.com - http://www.simuland.net
Reply

Marsh Posté le 03-10-2005 à 22:54:21   

Reply

Marsh Posté le 03-10-2005 à 23:33:09    

:hello:  
Voici comment déterminer en Javascript si un élément est visble ou caché :

 obj=document.getElementById(monId);  
 if (obj.style.display=='none')
    alert("Invisible')  
 if (obj.style.display=='block')
    alert("Visible')


Reply

Marsh Posté le 03-10-2005 à 23:38:19    

T'es sur que ca depend que de cette propriété la oliv?
 
Et si tu intercepte l'evenement clic ca passe pas?

Reply

Marsh Posté le 03-10-2005 à 23:38:27    

:) je me suis mal exprimer,
 
visible dans le sens affiché à l'ecran dans la zone visible par l'utilisateur.
(le texte est en mode block tout le temps)
 
caché dans le sens il faut que l'utilisateur utilise sa scrollbar pour voir le texte


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
Reply

Marsh Posté le 03-10-2005 à 23:40:54    

Désolé, je n'avais pas compris cela. Mon code ne s'applique donc pas à la question posée.

Reply

Marsh Posté le 03-10-2005 à 23:41:51    

j m explique :

Code :
  1. <a href="#ancre"><span onclick="javascript:voir('monId')">Lien</span></a>


Reply

Marsh Posté le 03-10-2005 à 23:56:21    

Yeah ! benji_100 ça marche !
Merci bien


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
Reply

Marsh Posté le 04-10-2005 à 06:10:07    

benji_100 a écrit :

j m explique :

Code :
  1. <a href="#ancre" onclick="javascript:voir('monId')">Lien</a>



 
T'es vraiment obligé d'encadrer systématiquement tous tes trucs par des balises inutiles ?

Reply

Marsh Posté le 04-10-2005 à 10:19:03    

La version condensée me convient et semble fonctionner
Mais doit-on mettre "javascript:" ?
onclick est un evenement javascript non ? donc <a href="#ancre" onclick="voir('monId')">Lien</a> devrait fonctionner
 
qu'en pensez vous ?


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
Reply

Marsh Posté le 04-10-2005 à 11:20:35    

ben oui !!!
c'est juste que Benji_100 a la facheuse habitude d'en double, voir tripler les balises inutiles
 
edit : tout reflechis, vire l'ancre, et met ceci :  
<a href="#" onclick="voir('monid');return false">truc</a>
 
car si on prends l'exemple que t'a donné benji_100
ca fera ceci au niveau du navigateur :  
 
Voir('monid') : Afficher le block "monId";
href: #ancre  : Aller à la page "page.html#ancre"; donc ca reactualise la page (ce peut dependre du navigateur, mais dans IE c'est comme ca).
 
donc un return false pour eviter que le navigateur rafraichisse la page.


Message édité par gatsusat le 04-10-2005 à 11:23:48
Reply

Marsh Posté le 04-10-2005 à 11:20:35   

Reply

Marsh Posté le 04-10-2005 à 11:27:33    

2 remarques :
- merci pour ta remarque getsusat
- tout les elements peuvent accepter des evenements? (head?html?tr?hr?...)
 

Reply

Marsh Posté le 04-10-2005 à 11:31:52    

benji_100 a écrit :

- merci pour ta remarque getsusat


Gatsusat, tu veux que je brule ta maison ?
 

benji_100 a écrit :

-  tout les elements peuvent accepter des evenements? (head?html?tr?hr?...)


Ouais tous, mais HTML et HEAD on s'en taponne un peu (surtout Head)

Reply

Marsh Posté le 04-10-2005 à 11:33:31    

d'apres mes tests, je ne suis pas d'accord avec toi gatsusat, j'ai fait des tests avec IE et avec FireFox, ça ne réactualise pas la page, ça déplace la fenetre pour rendre visible l'anchor donc la solution de benji fonctionne sur les deux navigateurs
 
et deplus j'ai besoin de cette anchor afin de déplacer la fenetre, sinon on revient au point zéro et je cherche toujours la solution en javascript pour s'assurer qu'un element est dans la zone de l'ecran visible ou sinon scroller la fenetre...


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
Reply

Marsh Posté le 04-10-2005 à 11:38:23    

ah oui tout a fait exact fluminis,  
alors j'ai du me gourationner sur un point moi.

Reply

Marsh Posté le 04-10-2005 à 11:39:32    

oué fluminis, il a confondu rendre visible l element et le rendre visible par l utilisateur la maintenant sur la page. Ne tiens pas compte de ce qu il vient de dire (mm erreur que oliv)


Message édité par benji_100 le 04-10-2005 à 11:40:28
Reply

Marsh Posté le 04-10-2005 à 11:46:14    

hihi, pas de probleme,  
merci a tous,
le problème semble résolu


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
Reply

Marsh Posté le 04-10-2005 à 11:48:15    

Tu changerai le nom du post en rajoutant [Résolu] à la fin? :)

Reply

Marsh Posté le 04-10-2005 à 11:58:06    

voila c'est fait :)


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
Reply

Marsh Posté le 04-10-2005 à 12:05:15    

Merci :)
Maintenant juste une question ouverte :) :
A mon avis il aurait été possible de checker si l'element monID est actuellement bien visible par la fenetre du navgateur en utilisant :
- la position en X et Y de l'élément (element.style.top ... ?)
- la position du cadre de la fenetre (avec les propriétés de scroll)
- la hauteur/largeur actuelle de la fenêtre (element.style.height/width ?)
 
Qu en pensez vous?

Reply

Marsh Posté le 04-10-2005 à 12:09:50    

ha !
voila a quoi je pensais quand j'ai posé ma question en premier lieu.
je pense qu'une telle solution doit être faisable, mais la solution actuelle est simple et fonctionne (au moins sur IE et Firefox) donc pourquoi se compliquer la vie :)
 
Si vous avez 5 minutes pour réflechir à la question je suis curieux de voir la solution


---------------
http://poemes.iceteapeche.com - http://www.simuland.net
Reply

Sujets relatifs:

Leave a Replay

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