Scroll orizzontale x "TabStrip"

**Galex** · 26-07-2005, 12:30

con codice asp mi genere un "controllo" tabStrip che contiene in numero indefinito di tabs (dei div con del testo e gif).Siccome possono appunto esser un numero indefinito,le ho inserire in un livello di larghezza fissa ,che si può scorrere a dx e sx con lo script si seguito cliccando su due freccettine:

function scrollX(eyeD, ext){
timer=setInterval(function(){document.getElementBy Id(eyeD).scrollLeft += ext;},100);
document.getElementById(eyeD).scrollLeft += ext;
}

ora...è possibile fare in modo che le due freccettine (delle gif) compaiano solo quando le tab son effettivamente state spostate a dx o sx?
quindi la freccia a sx compaia quando le freccie son spostata a dx e viceversa...???

**Mich_** · 26-07-2005, 14:25

Tutto e` possibile (o quasi).

Devi analizzare i due div: quello che scorre e quello che lo contiene (immagino a larghezza determinata dalle dimensioni della finestra), ed inserire le freccette se la dimensione del div che scorre e` maggiore dell'altro.

Per determinare le dimensioni:
var w = document.getElementById('ID_OGGETTO').style.width;
(nota: non e` standard, ma dovrebbe essere ben supportato).

Per il resto ... buon divertimento: la cosa non e` difficle, ma e` piuttosto complessa, per cui e` facile fare errori.

**Galex** · 26-07-2005, 17:17

bhe si,in effetti ho fatto diverse prove,però non mi son spiegato bene..

per mostrare le freccie solo quando i div che scorrono son + grandi del contenitore non c'è problema...però io vorrei mostrare la destra o la sinistra solo quando si può efefttviamente scorrere a destra o a sinistra...

x farti un esempio,quando apro la pagina, i div contenuto son tutti allineati a sinistra,quindi la freccia x scorrere a sinistra nn dovrebbe esserci (o magari essere "grigia")...xchè non si può scorrere ancor di + a sinistra

...se invece poi scorro tutto a destra...dovrebbe scomparire lòa freccia x scorre a destra,xchè + di li nn posso andar,e comparire quella di sinistra non appena mi sposto un po + adestra dell'inizio del div contenitore...

è complicato da spiegare...

ho tentanto di fare qualcosa ragionando sulle posizioni dei due div agli "estremi" rispetto alla larghezza del contenitore...ma nn va...probabilmente nn ricavo bene le posizioni

sai darmi qualche consiglio...?

codice:

<html>
<head>
<title>Untitled</title>
<SCRIPT>
function scrollX(eyeD, ext){
	timer=setInterval(function(){document.getElementById(eyeD).scrollLeft += ext;},100);
	document.getElementById(eyeD).scrollLeft += ext;
     //var coo = {x: 0, y: 0}; 
	   //element=document.getElementById(eyeD+"_0")
     //while (element) { 
     //coo.x += element.offsetLeft; 
     //coo.y += element.offsetTop; 
     //element = element.offsetParent; 
     //} 
	//window.status=coo.x
}
</SCRIPT>

</head>
<body>
  <table border='0' width='98%' cellpadding='0' cellspacing='0'>
  <tr>
  		<td>
  		[img]images/slide_left.gif[/img]
  		</td>
  		<td>
  				<div id='Tabs1' style='height:18px;width:150px;overflow:hidden;border:1px solid #C0C0C0;'>
    				<div style='position:absolute;top:0px;left:+0px;width:80px;border:1px solid #000000;'id='Tabs1_0'>Cerca</div>
    			  <div style='position:absolute;top:0px;left:+82px;width:44px;border:1px solid #000000;'>Filtri</div>
            <div style='position:absolute;top:0px;left:+130px;width:94px;border:1px solid #000000;'>Report</div>
					</div>
  		</td>
  		<td>
  		[img]images/slide_right.gif[/img]
  		</td>
  </tr>
  </table>
</body>
</html>

**Mich_** · 26-07-2005, 17:31

C'e` un po' di confusione tra attributi di formattazione HTML ed attributi CSS.

Dovresti eliminare tutti gli attributi di formattazzione HTML e sostituirli con i corrispondenti CSS, altrimenti il browser non sa piu` quali seguire.

Vedi ad esempio http://www.w3schools.com/xhtml/xhtml_reference.asp per gli attributi validi.

**Galex** · 26-07-2005, 18:07

cioè,scusa,ad esempio?
di attributi html di formattazione html ci son solo quelli della table...(border='0' width='98%' cellpadding='0' cellspacing='0')...ma dici che questi creano confusione allo script?

il problema che ho trovato è che utiliazzando:

var coo = {x: 0, y: 0};
element=document.getElementById(eyeD+"_0")
while (element) {
coo.x += element.offsetLeft;
//coo.y += element.offsetTop;
element = element.offsetParent;
}

x avere le coordinate in x del primo div che scorre (e una volta ottenute confrontarle con quelle del div contenitore x capire se sta dentro o fuori l'area visibile) in realtà mi da sempre la stessa coordinata anche dopo uno scroll...dici che è dovuto alla formattazione HTML???

**Mich_** · 27-07-2005, 08:58

Se lavori con i CSS le formattazioni HTML sono solo una palla al piede: non puoi usare due tecnologie per fare le stesse cose. Tra l'altro non puoi sapere se il browser da` priorita` al CSS o alla formattazione HTML. Inoltre un browser potrebbe usare ambedue le formattazioni, per cui un
OGGETTO.style.margin
ha un valore, mentre
OGGETTO.margin
ne ha un altro (i due possono sommarsi oppure compenetrarsi)

Tieni presente che TUTTE le formattazioni HTML hanno un corrispondente CSS, e che tale corrispondente e` piu` razionale e uguale per tutti i browser - con qualche eccezione per IE (vedi box-model) che non e` ancora adeguato agli standard.

**Galex** · 27-07-2005, 15:46

daccordo,ho dato una ripulita alla formattazione HTML/CSS.

per la parte dello script invece, per ora o risolto così:

function scrollX(eyeD, ext){

document.getElementById(eyeD).scrollLeft += ext;

var inizio=document.getElementById(eyeD).scrollLeft
var fine=(document.getElementById(eyeD).scrollWidth-document.getElementById(eyeD).scrollLeft)
var widthTab=new Number(Left(document.getElementById(eyeD).style.wi dth,3))

if(inizio>0){
document.getElementById(eyeD+"_s").style.visibilit y='visible'
}else{
document.getElementById(eyeD+"_s").style.visibilit y='hidden'
}

if(fine>widthTab){
document.getElementById(eyeD+"_d").style.visibilit y='visible'
}else{
document.getElementById(eyeD+"_d").style.visibilit y='hidden'
}

}

**Mich_** · 27-07-2005, 15:55

OGGETTO.scrollLeft fa parte della formattazione HTML.
Prova ad usare invece:
OGGETTO.style.left

(il position di OGGETTO dovra` essere relative, credo)

**Galex** · 27-07-2005, 17:19

e "scrollWidth" con che cosa lo sostituisco in CSS?

**Galex** · 27-07-2005, 17:20

Originariamente inviato da Galex
daccordo,ho dato una ripulita alla formattazione HTML/CSS.

...le ultime parole famose

e "scrollWidth" con che cosa lo sostituisco in CSS?

Discussione: Scroll orizzontale x "TabStrip"

Strumenti discussione

Ricerca discussione

Visualizza

Scroll orizzontale x "TabStrip"

Permessi di invio