Centrare barre dell'overflow

**iacoposk8** · 20-03-2012, 16:02

ciao a tutti... ho una situazione di questo tipo:

codice:

<style>
.cella{
     float:left;
     width:20px;
     height:20px;
}
</style>
<div style="width:200px; height:200px; overflow:auto;">
     <div style="width:1000px; height:1000px">
          <div id="cella1" class="cella"></div>
          <div id="cella2" class="cella"></div>
          <div id="cella3" class="cella"></div>
          <div id="cella4" class="cella"></div>
          .............
          .............
          .............
          <div id="cella5" class="cella"></div>
     </div>
</div>

Quindi una "mappa" con tante celle contenuta in un div con overflow:auto.
io vorrei creare una funzione, che dato un id mi centri la mappa, per esempio:
centraMappa("cella52");
mi riesca a spostare le barre di scorrimento (destra e inferiore dell'overflow) in modo che il div con id cella52 mi risulti centrato.
come faccio? (con o senza jquery va bene)

**br1** · 20-03-2012, 16:35

Fatto al volo ed un pochino artigianale...

sfrutta l'idea

codice:

<BODY onload="pippo('cella2')">
<style>
.cella{
     float:left;
     width:20px;
     height:20px;
	 border:1px solid red;
}
</style>
<div style="width:200px; height:200px; overflow:auto;position:relative;">
     <div style="width:1000px; height:1000px;position:absolute;">
          <div id="cella1" class="cella">1</div>
          <div id="cella2" class="cella">2</div>
          <div id="cella3" class="cella">3</div>
          <div id="cella4" class="cella">4</div>
          <div id="cella5" class="cella">5</div>
     </div>
</div>
</BODY>
</HTML>
<script>
function pippo(s) {
	obj = document.getElementById(s);
	x = 100-obj.offsetLeft-20;
	y = 100-obj.offsetTop-20;
	obj.parentNode.style.left=(x)+"px";
	obj.parentNode.style.top=(y)+"px";
}
</script>

occhio agli stili dei due div esterni.

**iacoposk8** · 20-03-2012, 18:08

Mi son spiegato male

Io non volevo cambiare lo stile di top e left.
Ma che cambiasse il valore che in jquery sarebbe selettore.scrollLeft(valorex).scrollTop(valorey);
Come trovo valorex e valorey in questo caso?

o avevi capito bene e volutamente mi hai dato questa idea/script?

**br1** · 20-03-2012, 18:28

Originariamente inviato da iacoposk8
(con o senza jquery va bene)

Mi scuso, ho letto male

**iacoposk8** · 21-03-2012, 10:59

forse mi sbaglio... però penso che
style.left e style.top aggiungano all'elemento una cosa tipo: style="top:valore; left:valore;"
mentre io voglio cambiare la posizione dello scroll dell'elemento, non la posizione (left e top) dell'elemento

**Xinod** · 21-03-2012, 11:09

con jquery, trovati il position() left e top dell' elemento che vuoi centrare
setta a questi valori (opportunamente modificati per centrare l' elemento) lo scrollTop() e scrollLeft() del contenitore

ciao

**iacoposk8** · 21-03-2012, 15:14

ho fatto una cosa tipo questa di esempio:

codice:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<div id="scroll" style="width:200px; height:200px; overflow:auto;">
	<div id="contenitore" style="position:relative;"></div>
</div>

<script>
for(i=0;i<20;i++){
	for(j=0;j<20;j++){
		$("#contenitore").append("<div class='quad' id='quad_"+i+"_"+j+"' style='width:40px; height:40px; margin:"+(i*40)+"px 0 0 "+(j*40)+"px; position:absolute; border:1px solid #999;'>"+i+"|"+j+"</div>");
	}
}

function centra(quadrato){
	var posx=$("#"+quadrato).position().left;
	var posy=$("#"+quadrato).position().top;
	$("#scroll").scrollLeft(posx).scrollTop(posy);
}

centra("quad_8_8");
</script>

ma non va... ma poi c'è anche un problema di logica secondo me... perchè se le scrollbar sono a zero io non vedrò il quadratino più in alto a sinistra che ha cordinate zero zero

**Xinod** · 21-03-2012, 16:56

il problema e' come posizioni questi quadrati, se sono in posizionamento assoluto senza indicare un left e top sono implicitamente a left e top 0, infatti si trovano dove si trovano per via del margin
quindi scrollerebbe pure, ma a 0 0

se posizioni con questo margin ti dovrai andare a leggere il margin del quadrato non il suo left/top

il problema di logica non e' molto logico, secondo la mia logica

**iacoposk8** · 22-03-2012, 10:12

hai ragione! mettendo top e lef al posto dei margin va...

io credevo che, siccome la barra appare solo sopo che il contenuto di "#contenitore" supera i 200px, quello fosse il punto zero...

Discussione: Centrare barre dell'overflow

Strumenti discussione

Ricerca discussione

Visualizza

Centrare barre dell'overflow

Re: Centrare barre dell'overflow

Permessi di invio