Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1069 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Positionner la barre de défilement

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Positionner la barre de défilement

n°1761888
malicious
Posté le 19-07-2008 à 12:05:38  profilanswer
 

Bonjour,
J'avais vu il y a quelques temps sur un site quelque chose que j'aimerai faire mais je ne vois pas trop comment :(
A gauche, un div avec un overflow auto pour afficher une liste verticale de photos avec barre de défilement.
A droite, un autre div contenant la photo en plus grand que l'on a cliqué dans la liste de gauche (plus plein d'infos provenant d'une base).
Ce sont des div et non pas des frames bien sûr :)
 
Après avoir cliqué sur un des photos, lorsque la page est rechargée pour reconstruire les deux blocs en php, comment ont-ils fait pour que la liste de gauche reste exactement à la même position (la barre de défilement ne semble absolument pas bouger) ?  
Merci d'avance pour votre aide !


Message édité par malicious le 19-07-2008 à 13:33:23
mood
Publicité
Posté le 19-07-2008 à 12:05:38  profilanswer
 

n°1761902
SICKofitAL​L
misanthrope
Posté le 19-07-2008 à 12:50:06  profilanswer
 

1) tu devrais changer le titre de ton topic :o
 
2) tu pourrais utiliser du JS pour ca
 
3) tu peux aussi utiliser un système d'ancre pour ca, un simple bout de code JS te permettant de te recaler à l'image cliquée


---------------
We deserve everything that's coming...
n°1761908
malicious
Posté le 19-07-2008 à 13:09:16  profilanswer
 

J'avais pensé au système d'ancre mais je ne pense pas que ce soit précis au pixel près comme j'ai pu voir.  
Quelle instruction en JS permet de lire la position pour la fixer ultérieurement?

n°1761918
SICKofitAL​L
misanthrope
Posté le 19-07-2008 à 13:36:32  profilanswer
 

http://developer.mozilla.org/fr/do [...] .scrollTop


---------------
We deserve everything that's coming...
n°1762019
malicious
Posté le 19-07-2008 à 18:45:56  profilanswer
 

Merci beaucoup SickofitAll! Je viens de tester scrollTop et effectivement c'est très précis! Je ne connaissais que scrollTo mais il ne marche qu'avec window. Je crois bien que c'est la technique utilisée sur le site que j'avais vu. Je vais donc pouvoir me lancer!

n°1763291
malicious
Posté le 22-07-2008 à 16:42:16  profilanswer
 

Je reviens sur scrollTop...
Sous firefox y'a pas de problème mais je me suis rendu compte que sous I.E ça ne marchait pas si bien. Par exemple le code suivant ne scroll pas les photos à la position souhaitée :
 

Code :
  1. <div id="blk" style="width:150px; height:350px; overflow:auto">
  2. <?php
  3. for($i=0;$i<20;$i++) echo '<img src="photo.jpg" />'; //Photo de 100x100 pixels
  4. ?>
  5. </div>
  6. <script language="javascript">
  7. document.getElementById("blk" ).scrollTop=900;
  8. </script>

 
 
J'ai recherché des infos, on parle de remplacer document par documentElement mais ça n'a rien donné... :(


Message édité par malicious le 23-07-2008 à 13:10:53
n°1764433
malicious
Posté le 24-07-2008 à 17:45:35  profilanswer
 

Voilà, j'ai mis l'exemple en ligne. Sous Firefox, ça ne marche pas lors du 1er affichage de la page mais ensuite oui (après rafraichissement avec F5). Donc ce n'est pas très grave. Par contre sous I.E la barre scroll un peu mais pas de 900 pixels. En fait, quelque soit la valeur elle ne descend pas plus bas que 150 pixels environ! Quelqu'un sait pourquoi ?
http://webnight.free.fr/scrollbar.php


Message édité par malicious le 24-07-2008 à 18:02:18
n°1764540
SICKofitAL​L
misanthrope
Posté le 24-07-2008 à 22:50:17  profilanswer
 

Salut
 
Déjà, commence par placer ton script à part dans ton code, et à l'appeler lorsque la page est chargée, comme ceci (grosso modo) :

Code :
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4. var go = function ()
  5. {
  6.   document.getElementById ("blk" ).scrollTop = 900;
  7. }
  8. </script>
  9. <body onload="go ()">
  10. ....
  11. </body>
  12. </html>


 
pour IE, je vais tester


Message édité par SICKofitALL le 24-07-2008 à 22:50:42

---------------
We deserve everything that's coming...
n°1764591
SICKofitAL​L
misanthrope
Posté le 25-07-2008 à 02:20:57  profilanswer
 

J'ai tester avec mon code plus haut sur FF et IE et ca fonctionne.
En cas où tu peux initialiser la valeur du scrollTop pour IE en le mettant à 0 (parfois on dirait qu'il comprend pas tout ce boolay d'IE).
Et concernant cette histoire de documentElement, je te renvois LA pour en savoir plus sur les doctypes et les incidences que ca peut avoir sur IE (encore un bug parmis tant d'autres).


---------------
We deserve everything that's coming...
n°1765097
malicious
Posté le 25-07-2008 à 22:11:07  profilanswer
 

MERCI beaucoup SICKofitALL! En fait, j'avais déjà tenté le onload car je m'était dit que c'était surement parce que la page n'était pas encore totalement chargée que IE se plantait mais j'avais testé ça sous wampserver et n'avais vu aucune différence. J'avais donc abandonné l'idée. Là je reteste pusique tu me dis que ça marche et je m'aperçois que sous wampserver ça marche une fois sur deux ou trois... c'est déjà mieux :) Comme ça semble lié à une histoire de vitesse de chargement de la page je reteste avec onload mais en online et là ça marche bien. Il faut juste espérer qu'un jour l'adsl ne soit pas aussi rapide que le local et il ne devrait pas y avoir de problème lol Tu me redonne le moral parce que mon site sera essentiellement basé sur ce scroll et c'était vraiment nul qu'elle se repositionne à 0. Merci pour le lien, j'avais déjà posé la question mais personne n'avais encore trouvé la soluce. Alala ce IE... j'entend parler que de normes du web le navigateur n°1 n'est même pas capable de les respecter...


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Positionner la barre de défilement

 

Sujets relatifs
comment modifier l'url de la barre d'adresse en htmlscroll barre contenue dans la variable html
[CSS] sortir du flux pour positionner un div en haut de la pageOpenOffice Impress barre de progression comme sous powerpoint??
les barre de recherche sous firefox probleme défilement image
[html] un gif qui suit la barre de défilement verticale.Double barre de soulignement [resolu]
Lien barré 
Plus de sujets relatifs à : Positionner la barre de défilement


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR