Newsgroup: it.comp.lang.javascript
Titolo: Effetto scorrimento con DIV

Volevo realizzare un semplicissimo effetto di scorrimento con i DIV,
mentre l'utente muove il mouse su una mappa anche del testo dovrebbe
scorrere in maniera (secondo me) simpatica accanto alla mappa. Bene
Explorer fa tutto bene, Netscape no, se ne sbatte allegramente
soprattutto del fatto che il DIV esterno (contenitore) ha un height
impostato ad un certo valore e quindi i div interni vengono mostrati
solo in parte!
CSS:
DIV.contenitore {
	position: absolute;
	top: 200px;
	left: 100px;
	width: 254px;
	height: 54px;
	border-width: 2px;
	border-color: #ff0000;
	overflow: hidden;
	visibility: show;
	z-index: 4;
}
DIV.zona {
	position: absolute;
	font-family: Century Gothic, Arial, Helvetica, sans-serif;
	font-size: 14pt;
	color: #003999;
	top: 0px;
	left: -250px;
	width: 250px;
	height: 50px;
	padding: 10px;
	border-width: 2px;
	border-color: #003999;
	background-color: #21D5FB;
	layer-background-color: #21D5FB;
	visibility: show;
	z-index: 5;
}
DIV.scegli {
	position: absolute;
	font-family: Century Gothic, Arial, Helvetica, sans-serif;
	font-size: 14pt;
	font-weight: bold;
	width: 250px;
	height: 30px;
	top: 170px;
	left: 100px;
	background-color: #ffffff;
	z-index: 4;
}
HTML:
<DIV class="scegli">Scegli la zona</DIV>
<DIV id="contenitore" class="contenitore">
<DIV id="vernio" class="zona"><A href="htm/vernio.htm">Zona
Vernio</A></DIV>
<DIV id="cantagallo" class="zona"><A href="htm/canta.htm">Zona
Cantagallo</A></DIV>
<DIV id="vaiano" class="zona"><A href="htm/vaiano.htm">Zona
Vaiano</A></DIV>
<DIV id="montemurlo" class="zona"><A href="htm/monte.htm">Zona
Mentemurlo</A></DIV>
<DIV id="prato" class="zona"><A href="htm/prato.htm">Zona
Prato</A></DIV>
<DIV id="poggio" class="zona"><A href="htm/poggio.htm">Zona Poggio a
Caiano</A></DIV>
<DIV id="carmignano" class="zona"><A href="htm/carmi.htm">Zona
Carmignano</A></DIV>
<DIV id="altre" class="zona"><A href="htm/altre.htm">Altre
Zone</A></DIV>
</DIV>
Nel tag BODY:
onLoad="if (browser) { initMenuAScorrimento();}"
All'interno della mappa:
OnMouseOver="ScorriDiv('vernio'); return true;"
JS:
<!--
// Variabili di riconoscimento dei vari browser
var n = 0;
var ie = 0;
// Controllo se l'utente utilizza NetScape o Explorer e che versione
usa
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser = ((n || ie) && parseInt(navigator.appVersion)>=4);
// Velocita' di scorrimento dei div
var VelScorr = 10;
// Gap di scorrimento in pixel
var pxScorr = 5;
// Div attivo
var DivAttivo = "";
var LarghezzaDiv = 250;
// Array contenente le varie zone
Zone = new Array("altre", "vernio", "vaiano", "cantagallo",
"montemurlo", "prato", "poggio", "carmignano");
function initMenuAScorrimento() {
	// Div che e' attivo al caricamento della pagina
	DivAttivo = "altre";
	(n) ? document.contenitore.document[DivAttivo].left = 0 :
document.all[DivAttivo].style.left = 0;
//	show_props(document.all.altre.style);
	if (ie) document.all.contenitore.style.border="thin solid
#ff0000";
	if (n) {
		document.contenitore.bgColor = "#ff0000";
		for (var i in Zone)
document.contenitore.document[Zone[i]].bgColor = "#21D5FB";
//		show_props(document.contenitore.document.altre.clip);
	}
	return true;
}
function ScorriDiv(div) {
	if (DivAttivo == div) return true;
	var valore = 0;
	valore = (n) ?
parseInt(eval('document.contenitore.document.'+div+'.left')) :
parseInt(eval('document.all.'+div+'.offsetLeft'));
	if (valore < 0) {
		valore += pxScorr;
		(n) ? document.contenitore.document[div].left = valore
: document.all[div].style.left = valore;
		(n) ? document.contenitore.document[DivAttivo].left =
(LarghezzaDiv + valore) : document.all[DivAttivo].style.left =
(LarghezzaDiv + valore);
		setTimeout("ScorriDiv('"+div+"')", VelScorr);
	}
	else {
		(n) ? document.contenitore.document[DivAttivo].left =
-LarghezzaDiv  : document.all[DivAttivo].style.left = -LarghezzaDiv;
		DivAttivo = div;
	}
}
function show_props(obj) {
	var result = ""
	for (var i in obj) {
		result += "."+i +"="+obj[i] + " ** "
	}
	window.alert(result);
}
//-->
Se qualcuno mi spiegasse come mai NetScape si comporta cosi' gliene
sarei grato.
Grazie David.

alcuni errori con netscape tipo:
(n) ? document.contenitore.document[div].left = valore
ci si dovrebbe riferire con ....document.layer[div]...
perché non usi la libreria dHTML,
la trovi in:
http://jslabs.webhostme.com
... ti eviti un mucchio di problemi di compatibilità,
inoltre ne sta uscendo una versione  aggiornata anche
per N6, che come saprai ignora i layers...
quindi a breve dovresti mettere in tutti i tuoi script:
(n4) ?document.layers
:(n6)?document.??
:(IE4)?document.all
... ecc..
--
Bye
Ro<*¿*>berto


http://jslabs.webhostme.com
Mi piaceva fare da me...comunque ora vado a vedere la libreria.
Grazie, David

Scusa la mia ignoranza ma:
<div id="layerid" style="position:absolute; left: 10px; top:
10px">Text</div>
<script language="JavaScript">
<!--
/* moving by layer object and x, y integer values */
moveLayer(layerid,50,50)
/* moving by layer id string and x, y string values */
moveLayer("layerid","50","50")
/* moving by layer source order index and x, y integer values */
moveLayer(0,50,50)
//-->
</script> 
A te funziona sia con netscape che con explorer?
A me funziona solo con IE, con N devo riferirmi a layerid con
document.layerid, mentre in questo modo IE non funziona!
Grazie di nuovo, David


 Mi piaceva fare da me...
Eh, se ti capisco. :) C'e' molta piu' soddisfazione nel realizzare le cose
di proprio pugno, e non di meno si impara molto di piu'.
Ovviamente il prezzo e' sbattere la capoccia piu' volte contro un problema,
ma credo che ne valga la pena, considerato che all'inizio tutti ci passano.
:)
Una volta imparati i trucchi del mestiere, ovviamente, e' molto piu' comodo
farsi una libreria. Ma a quel punto, cmq, e' una libreria fatta da se'. :)
Non ho potuto dare che un occhiata veloce al tuo codice, ma posso darti un
paio di consigli:
a) Attento agli stili con i bordi. Qualche volta Netscape fa casino
(soprattutto nei resize, e' risaputo.. ma layer di quel genere sono piu'
"soggetti" ad incasinamento).
b) lo Z-Index. Tale proprieta' funziona solo con IE, nei DIV. NS se ne frega
bellamente, la considera SOLO nei tag "<LAYER>". Ricordati che l'ordinamento
di un layer e' dato dalla sua creazione cronologica, quindi se non devi
usare lo z-index in modo particolare, inserisci a livello di codice PRIMA i
layer che "devono" stare sotto, e poi quelli che devono stare sopra.
c) Mi pare che tu abbia usato solo la proprieta' "overflow: hidden". Setta
anche la clip. In NS risolve un sacco di problemi.
Ti faccio un esempio riprendendo il tuo codice:
DIV.contenitore {
position: absolute;
top: 200px;
left: 100px;
width: 254px;
height: 54px;
border-width: 2px;
border-color: #ff0000;
overflow: hidden;
clip:rect(0,254,54,0);
visibility: show;
z-index: 4;
}
Mi spiace non aver avuto il tempo di controllare realmente il tuo codice, ma
spero cmq di esserti stato di aiuto. Per qualcunque cosa, siam qui. Ciao!

chi fa da se fa per trč!
non la applico quasi mai ,
il lavoro di gruppo da molte ma molte
piů soddisfazioni e risultati,
naturalmente ti devi fidare delle
persone che ti passano utility
o librerie ... ma questo č un
altro discorso :-)
--
Bye
Ro<*ż*>berto



ciao,
prova su :
http://www.probo.it/aoj/preview/fly/dHTML.html
ci dovrebbe essere una versione in italiano..


 piů soddisfazioni e risultati,
La penso allo stesso modo anche io.
Lavorando in un gruppo ben affiatato, con conoscenze etereogenee, c'e' anche
una maggior crescita professionale.
Anche per il semplice fatto di poter confrontare opinioni con altre persone,
fa scaturire nuove idee ed approcci a cui probabilmente, da solo, non si
sarebbe arrivati.
Ma quel di cui parlavamo in precedenza era una cosa NETTAMENTE differente,
non credi?
Si parlava del fatto (gia' ampiamente discusso in altre sedi, e' un
argomento sempre interessante) di avere la pappa gia' fatta da terzi,
evitandoci in molti casi inutili mal di testa, oppure se valeva la pena
farseli venire, un paio di mal di testa, per arrivarci da soli.
Non ha molto a che vedere col "LAVORARE" in gruppo. Qui di lavoro di gruppo,
in entrambi i casi, non c'e' nulla.

cosa NETTAMENTE differente, non credi?
se parli di capire quello che stai usando
sono d'accordo, non lo sono invece sul
"me lo faccio io", a questo punto estendendo
il discorso uno si dovrebbe fare anche il
sistema operativo...


 sistema operativo...
Stai lentamente scivolando al di fuori del discorso originale, sempre di
piu', portando il tutto a degli estremismi paradossali. :)
Il mio pensiero, sostanzialmente e' il seguente.
a) Lavorare e cooperare insieme, in un gruppo ben affiatato, e' cosa buona e
giusta per una serie di ottimi motivi (ne ho illustrato uno o due nel post
prec.)
b) Rinunciare a realizzare una cosa da se', con le proprie mani, soprattutto
all'inizio, per affidarsi a qualcosa fatto da terzi e' pericoloso.
Soprattutto se quella cosa sarebbe stata possibile realizzarla da solo con
poco sforzo in piu'.
E' pericoloso, perche' si rischia di non imparare. E' pericoloso, perche' si
rischia di prenderla come abitudine (Mi riesce difficile fare qualcosa?
Cerco qualcuno che l'ha gia' fatto); è pericoloso, perche' cosi' si ha una
conoscenza superficiale della "materia" (se mi passate il termine).
Questo, ribadisco, sostanzialmente se uno e' agli inizi e premesso che
questo qualcuno sia intenzionato a "imparare" la materia, ed impararla bene.
Altrimenti, ovviamente, tutto il discorso cade.
A questo punto fammi divagare un po' anche a me.
Quante persone conoscete che al minimo problema di Windows9x, chiama
"l'amico che e' un genio dei computer" o addirittura un tecnico?
Questo perche' sono "nate" sotto Windows9x, che gli ha dato una buona
padronanza nell'uso superficiale del PC, senza capire pero', nemmeno le basi
essenziali. Non parlo di divenire programmatori con gli attributi cubici, ma
di semplici users di qualche tempo fa.
Questi utenti della nuova generazione non hanno mai conosciuto il dos,
l'autoexec.bat ed il config.sys e l'avvento miracoloso del multiconfig. ^__^
(vero messia per il popolo videoludico del periodo... :D ).
Ok, ho finito il delirio. Vado a pranzo. A dopo. :)

 sistema operativo...
non sono una cima, ma penso di saper fare qualcosa
con il pc... eppure se mi trovo a dover decidere
fra fare io una cosa che al limite sarei anche in
grado di fare , o rivolgermi a persone che ritengo
esperte dell'argomento ....non ho dubbi!
ma ritorniamo al discorso originale..
.. la libreria dHTML, non l'ho fatta io,
anche se Darius e Fly mi hanno voluto citare,
(farò qualcosa nel renderla compatibile con il DOM di N6),
però la stò implementando in tutti i miei siti,
la trovo utile ed inoltre preferisco concentrarmi
sull'effetto che voglio ottenere invece di dover
stare attento alla sintassi dei diversi riferimenti
agli oggetti che ci sono nei diversi browser..
poi è free , ben spiegata, e di facile comprensione
se uno ha voglia di leggere il codice. :)
--
Bye
Ro<*¿*>berto
PS: buon appetito :-)

 PS: buon appetito :-)
Many Thanks. :) Scusa per prima se ho dovuto troncare a meta' del delirio,
avrei voluto riallacciarmi poi al discorso originale (non era un delirio
fine a se' stesso) ma mi stava scappando il tipo che doveva darmi
passaggio... ^___^

poffarbacco e perdindirindina!
sembrano discorsi da politicanti questi, non da
scripters..
in fondo "nun me ne frega niente" del processo alle
intenzioni su quello che pensavi volessi dire o che
non ho letto fra le righe o che il discorso ..
ed alla fine concordo che se un utonto non la capisce
č giusto che ci sbatta la testa per arrivare a comprendere
il diverso funzionamento degli oggetti dhtml fra i
diversi browser ..


ci dovrebbe essere una versione in italiano..
Ciao di nuovo,
mi spiace molto vedere che la mia 'ignoranza' ha portato ad una
discussione cosi' accesa :(
Ero gia' a conoscenza della libreria (bazzico newsgroup e siti di JS
da diversi mesi oramai), ma non l'ho mai guardata seriamente,
scusatemi.
Quello che volevo dire realmente e' che non mi piace programmare
usando librerie senza sapere nemmeno lontanamente cosa fanno (vengo
dal C/C++). Per questo mi piaceva fare un po' da me, creare casomai
una bella libreria come la vostra e utilizzarla, ma ancora non sono
riuscito bene a capire come comportarmi con layer, div etc...
figuratevi se sono in grado di creare una libreria cross-browser!
Anche se ovviamente e' la cosa giusta da fare, crearne una leggera, e
aggiornarla costantemente in modo che tutto il sito ne abbia
giovamento.
Grazie, di nuovo. 
Cerchero' di studiarmi la vostra libreria e di fare domande piu'
mirate.

ciao,
nessun problema, anzi dovrei chiedere scusa
io per l'arroganza di certe risposte :(
cmq. fino alla prevista standardizzazione del
DOM dove (si spera!) gli oggetti dhtml avranno
sintassi comune, per ora il "difficile" e il riferimento
al layer..
il document.all[idElemento], va bene per tutti
gli oggetti, mentre in Netscape il document.layer[idlayer]
ritorna un oggetto che ha proprieta e riferimenti simili
ad un window.
questo porta a ragionare in un modo diverso ed a
rifersi ad esso condirerandolo in questo modo,
ad esempio se voglo scrivere dentro un layer
devo usare un document.layer[idlayer].document.write(..
se voglio andare in un layer che e dentro ad un altro
usero document.layer[idlayer].document.layer[idaltrolayer],
ecc.
certo, se non si legge da nessuna parte o nessuno lo spiega
e difficile vedere o capire con le sole prove tale comportamento,
ma credimi se consideri il layer come un window tutto diventa piu
facile..
poi capito il layer si passa alle proprieta..
PS: se fai dei miglioramenti o crei una bella libreria
ce la passi vero?
ciao alla proxy..;-)
Bye
Ro<*?*>berto

ce la passi vero?
Ci mancherebbe! 
Ciao.

(tre considerando Opera)  browser?
si, il dom che ad esempio puoi trovare nel livello 1 in:
http://www.w3.org/TR/REC-DOM-Level-1/ecma-script-language-binding.html
quindi come dicevo in un altro post ..
document.getElementById('idElement').style.left = 100;
funzionera con IE5, N6 ed Opera4
e per un poco dovremmo abituarci a scrivere nei
nostri script:
if(document.getElementById)
..
else if(document.all)
..
else if(document.layer)
...
e appunto per evitare noiose e credo inutili
attenzioni di scritture di codice come sopra
che ritengo utile l'uso di una libreria alla
quale passi un oggetto o un id e che
ti ritorna valori o riferimenti ....
--
Bye
Ro<*?*>berto

ach, ...tutti gli accenti spariscono!!
:-(
scusate , non mi ricordo mai che se
rispondo ad un messaggio di Forte Agent
devo mettere l'apice..
