Positionner la barre de défilement

Positionner la barre de défilement - HTML/CSS - Programmation

Marsh Posté le 19-07-2008 à 12:05:38    

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
Reply

Marsh Posté le 19-07-2008 à 12:05:38   

Reply

Marsh Posté le 19-07-2008 à 12:50:06    

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...
Reply

Marsh Posté le 19-07-2008 à 13:09:16    

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?

Reply

Marsh Posté le 19-07-2008 à 13:36:32    

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


---------------
We deserve everything that's coming...
Reply

Marsh Posté le 19-07-2008 à 18:45:56    

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!

Reply

Marsh Posté le 22-07-2008 à 16:42:16    

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
Reply

Marsh Posté le 24-07-2008 à 17:45:35    

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
Reply

Marsh Posté le 24-07-2008 à 22:50:17    

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...
Reply

Marsh Posté le 25-07-2008 à 02:20:57    

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...
Reply

Marsh Posté le 25-07-2008 à 22:11:07    

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

Reply

Sujets relatifs:

Leave a Replay

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