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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  image centrée dans div overflow

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

image centrée dans div overflow

n°2002023
Toinou87
That misread could have been.
Posté le 16-06-2010 à 09:07:57  profilanswer
 

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!!
mood
Publicité
Posté le 16-06-2010 à 09:07:57  profilanswer
 

n°2002026
garath_
Posté le 16-06-2010 à 09:13:24  profilanswer
 

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


---------------
HFR Links Preview | HFR Giphy
n°2002034
Toinou87
That misread could have been.
Posté le 16-06-2010 à 09:38:47  profilanswer
 

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!!
n°2002041
garath_
Posté le 16-06-2010 à 09:56:34  profilanswer
 

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
n°2002193
Toinou87
That misread could have been.
Posté le 16-06-2010 à 14:30:11  profilanswer
 

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!!
n°2002204
Toinou87
That misread could have been.
Posté le 16-06-2010 à 14:56:50  profilanswer
 

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

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

  image centrée dans div overflow

 

Sujets relatifs
XML - XSLT : mettre title dans imageImage de bannière toujours en bas
CV_IMAGE_ELEM ?insérer une image dans un pdf généré par du php
zone de séléction sur une image en PHP[resolu] GWT et image
[Résolu] Positionnement d'une image/banniere dans le CSSAfficher commentaire dans une gallerie d'image
Image dans un champ BLOB sous MySQL ???Problème affichage image dans un JButton se grise sur une action.
Plus de sujets relatifs à : image centrée dans div overflow


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