image centrée dans div overflow

image centrée dans div overflow - HTML/CSS - Programmation

Marsh Posté le 16-06-2010 à 09:07:57    

Salut a tous, y a t il un moyen en css/javascript d'avoir une image centrée dans un div overflow?
 
En gros j'ai une grosse image qu'il faudrait que je mette dans un div overflow pour pouvoir la scroller. Le probleme c'est que les informations importantes (oui l'image c'est un graph autogénéré) sont au centre de l'image donc j'aimerais me retrouver avec les scrollbars deja au milieu.
 
voici a quoi ressemble le code et ce que j'ai essayé (tailles bidons mais c'est juste pour l'exemple
<div id="window" style="overflow:auto;width:600px;">
    <div id="data" style="width:800px;height:600px;"></div>    
</div>
 
l'image est insérée via javascript dans le div #data et fait la taille de ce div.
 
pour la div #data j'ai deja essayé des trucs du genre, left:-100px; mais le resultat est comme si j'avais "rogné" 100pixels de l'image, je peux pas scroller plus a gauche.
 
J'ai pas trouvé d'exemple sur le net. Je me dis que peut etre toutes les solutions CSS vont "rogner" mon image. Alors peut etre y a t il une solution javascript?
 
Merci d'avance pour l'aide. Si je ne suis pas clair sur tel ou tel point, faites le moi savoir


---------------
Toinou87 ;-p May the force be with you!!
Reply

Marsh Posté le 16-06-2010 à 09:07:57   

Reply

Marsh Posté le 16-06-2010 à 09:13:24    

Si j'ai bien compris:
 
http://javascript.gakaa.com/div-sc [...] lltop.aspx
 
ça?


---------------
HFR Links Preview | HFR Giphy
Reply

Marsh Posté le 16-06-2010 à 09:38:47    

je viens de tenter plusieurs choses par exemple
 
function test(){
 var container=document.getElementById(window);
 if (container==null){alert("null" );return;}
 document.body.container.scrollLeft=100;
}
 
et la meme chose sant le document.body en derniere ligne (mais d'apres ton lien celui ci serait necessaire).
 
Ca passe pas, je sais pas ou j'ai une erreur. si erreur il y a


---------------
Toinou87 ;-p May the force be with you!!
Reply

Marsh Posté le 16-06-2010 à 09:56:34    

J'ai mis ça pour la propriété scrollLeft surtout.
 
essaye:

Code :
  1. <div id="window" style="overflow:auto;width:600px;">
  2.     <div id="data" style="width:800px;height:600px;"></div>   
  3. </div>
  4. <SCRIPT language="Javascript">
  5. document.getElementById("window" ).scrollLeft = 100px;
  6. </SCRIPT>


---------------
HFR Links Preview | HFR Giphy
Reply

Marsh Posté le 16-06-2010 à 14:30:11    

et ca marche chez toi?
parce que je viens de tester

Code :
  1. <html>
  2. <head>
  3. </head>
  4. <body>
  5. <div id="window" style="overflow:auto;width:600px;">
  6.     <div id="data" style="width:800px;height:600px;"></div> 
  7. </div>
  8. <SCRIPT language="Javascript">
  9. document.getElementById("window" ).scrollLeft = 100px;
  10. </SCRIPT>
  11. </body>
  12. </html>


sous chrome et firefox (pas essayé sous internet explorer parce que je suis sous linux) et pour les deux la barre de scroll reste a gauche.
 
Au cas ou j'aurai pas été clair plus tot, j'aimerai que la barre de scroll se retrouve directement placée au milieu.
 
En tout cas merci d'essayer de m'aider a resoudre le probleme.
 
si je trouve pas de solution pour ca j'ai une autre idée, utiliser un slider de jquery-ui qui est comme une scrollbar mais construite avec des elements du dom et javascript, et definir avec javascript la position de depart
http://jqueryui.com/demos/slider/#side-scroll
 
Mais bon si y a une solution plus rapide avec les scrollbars et donc ce scrollLeft qui n'a pas l'air de marcher chez moi, ca m'arrangerait


---------------
Toinou87 ;-p May the force be with you!!
Reply

Marsh Posté le 16-06-2010 à 14:56:50    

ceci fonctionne, merci pour l'aide
 

Code :
  1. <html>
  2. <head>
  3.     <script>
  4.         function Scroll () {
  5.             var myCont = document.getElementById ("window" );
  6.             myCont.scrollLeft = 100;
  7.             myCont.scrollTop = 100;
  8.         }
  9.     </script>
  10. </head>
  11. <body onLoad="Scroll ();">
  12. <div id="window" style="overflow:scroll;width:600px;height:400px;">
  13.     <div id="data" style="width:800px;height:600px;"></div>
  14. </div>
  15. </body>
  16. </html>


---------------
Toinou87 ;-p May the force be with you!!
Reply

Sujets relatifs:

Leave a Replay

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