Newsgroup: it.comp.lang.javascript
Titolo: testo scorrevole javascript e xhtml strict

Salve a tutti.
Ho la necessità, su richiesta del cliente, di  inserire del testo
scorrevole in un sito.
Ho trovato diverse soluzioni, ovviamente in Javascript, ma l'unica che
funziona è anche l'unica a invalidarmi la pagina(che è xhtml strict).
La cosa curiosa è che tutti gli script che ho trovato, spacciati per
cross-browser, in realtà funzionano soltanto in IE mentre in FireFox
ad esempio soltanto senza la DTD...
Grazie per ogni consiglio.
V.
______________________________
Per contattarmi via e-mail:
conte.vlad.it
[at]
katamail.com

 scorrevole in un sito.
mmm
ma il tag marquee no?
comunque, grezzissimo, e assolutamente non testato :P
<html>
 <head>
  <title></title>
  <script type="text/javascript">
    function scorri(id) {
        var testo=document.getElementById(id).firstChild;
        testo.nodeValue=testo.nodeValue.slice(1,
testo.nodeValue.length)+testo.nodeValue[0];
        setTimeout("scorri('"+id+"')", 500)
    }
  </script>
 </head>
 <body onload="scorri('scorri')">
  <p id="scorri">testo scorrevole...</p>
 </body>
</html>
(in realta' a voler fare le cose bene, si potrebbe giocare tramite css coi
valori margin/padding del contenitore del testo scorrevole... ma oggi non
c' ho voglia)
-- 
Torno subito

 c' ho voglia)
Qualcosa tipo questo:
	<script type="text/javascript">//<![CDATA[
		window.onload=function(){
			setInterval(function(){
				var c=document.getElementById("scroller-content"),
					o=c.firstChild,
					l=o.offsetLeft;
				o.style.left=(-l>o.offsetWidth?c.offsetWidth:l-5)+"px";
			},100);
		}
	//]]>
	</script>
	<style type="text/css">
		#scroller-content{
			position:relative;
			width:160px;
			white-space:nowrap;			
			overflow:hidden;
			font:10px verdana;
			border:1px solid #e0e0ee;
			cursor:default;
		}
		#scroller{
			position:relative;
			left:100%;
		}
	</style>	
</head>
<body>
	<div id="scroller-content"><div id="scroller">
		She fills my bed with gasoline /
		You think I wouldn't notice /
		Her mind's made up /
		Her love is gone / 
		I think someone's trying to show us a sign
	</div></div>
</body>
Bisogna stare attenti a "giocare" con i margin e padding, perché possono
incidere sulle dimensioni dell'elemento.
-- 
~ L'intelligenza artificiale non può battere la stupidità naturale.
(Lemma di Sullivan)

 Qualcosa tipo questo:
Per uno scroll verticale, avevo provato inserendo un div con position:
absolute all'interno di un altro con altezza fissa e overflow: hidden; il
secondo lo muovo in verticale agendo sulla proprieta' top. Funziona bene in
tutti i browser moderni ma da' problemi se vengono ridimensionati i
caratteri, in quanto lo script necessita di sapere l'altezza del contenuto
(che gli passo "a mano") per far ripartire correttamente lo scroll. Esiste
un modo per ottenere l'altezza in pixel a runtime?
Il css e l'html sono i seguenti; quello che vorrei fare e' stabilire
l'effetiiva altezza in pixel di scrollerContent a runtime.
/CSS/
#scroller {
	position: relative; top: 10px; left: 0;
	width: 300px; height: 20px; overflow: hidden;
	background: #eee; color: #000;
	}
#scrollerContent {
	position: absolute; left: 0; top: 100%;
	width: 100%; height: auto; line-height: 20px;
	}
/HTML/
<div id="scroller"><div id="scrollerContent">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec nunc arcu,
pretium tristique, lobortis ut, ultricies interdum, magna.
</div></div>
-- 
~Nando~ :-/__.oO
Apostolo della Prova

 (che gli passo "a mano") per far ripartire correttamente lo scroll.
Lo script che ho fatto funziona benissimo anche per scroller verticali.
Ti basta ovviamente sostituire tutti i "left" che trovi con "top" e i
"width" con "height".
-- 
~ Il lavoro è prezioso. Non essere egoista! Lascialo agli altri!

 incidere sulle dimensioni dell'elemento.
beh, si'... e' che non avevo voglia di fare le cose per bene :P
-- 
Torno subito

 "width" con "height".
Lo devo provare e vedere se mi da' lo stesso problema che mi da' il mio...


 html piu' minimale possibile...)
Non è del tutto corretto. La cosa migliore è bilanciare i tre aspetti di
una pagina web. Se per eliminare un solo tag dal codice HTML devo scrivere
un js più lungo, verboso o complesso, allora non ne vale la pena.
Se posso farlo senza impattare troppo su js o css, allora ben venga.
E' sempre una questione di equilibri.
Nota: il codice l'ho scritto al volo, ho solo fatto una verifica veloce su
IE6/FF; l'ho stilato più che altro tenendo conto della DTD dell'XHTML
Strict. Ergo non tiene conto di eventuali bug di browser non conformi allo
standard, come potete vedere non fa neppure check particolari. Si tratta
unicamente di un codice d'esempio, dal quale eventualmente partire.
-- 
~ Always remember you're unique, just like everyone else.

 Lo devo provare e vedere se mi da' lo stesso problema che mi da' il mio...
Guarda, di solito prima si fa le dovute prove e ricerche, poi si scrive nel
NG se si ha qualche problema... hai invertito l'ordine delle cose da fare.
:)
-- 
~ "Quando i morti camminano, signori, bisogna smettere di uccidere.
O si perde la guerra." (Zombie)

 :)
Ti assicuro che di prove ne ho fatte parecchie... evidentemente non avevo
fatto la prova *giusta*. /Per me/ era il momento di rivolgermi a Voi :)
Figurati che sono convinto di aver provato anche il posizionamento
relativo, senza risolvere il problema... vabbuo', devo dormire di piu'.


 Ti assicuro che di prove ne ho fatte parecchie... 
Intendevo dire che prima di domandarmi qualcosa di inerente al codice che
avevo postato, dovevi quanto meno prima provarlo.
Poi, se qualcosa non andava, chiederlo. Anche solo per dire "non capisco
come mai il tuo codice mi funziona mentre quest'altro no."
Per questo ti ho detto che hai invertito l'ordine delle cose da fare.
-- 
~ Non esistono donne brutte. Dipende solo da quanta vodka bevi.
(proverbio russo)

 non ne valeva la pena.
clip-che? ^^;
-- 
Torno subito

 Per questo ti ho detto che hai invertito l'ordine delle cose da fare.
Sono abituato ad un altro tipo di dialettica :)
Capisco, peraltro, che mi sono espresso male risultando offensivo... dire
"provo per vedere se per caso e' sbagliato" non e' bello... ma sinceramente
non dubitavo che il tuo script fosse corretto, mi sono solo espresso male.


 clip-che? ^^;
Mhm, non conosci il clipping?
E' strano, perché è usato ovunque... da quando esiste la grafica 2d.
Comunque sia:
	<script type="text/javascript">
		window.onload=function(){
			var i=0;
			setInterval(function(){
				var o=document.getElementById("scroller-content"),
					x=(50+Math.sin(i/Math.PI)*50)>>1,
					y=(50+Math.cos(i/Math.PI)*50)>>1;
				i++
 
				o.style.clip="rect("+y+"px "+(50+x)+"px "+(50+y)+"px "+x+"px)";
			},100)
		}
	</script>
	<style type="text/css">
		body{
			background:#000;
		}
		#scroller-content{
			position:absolute;
			width:160px;
			overflow:hidden;
			font:11px/22px Times;
			cursor:default;
			padding:4px;
			clip:rect(0 0 0 0);
			background:#fff;
		}
	</style>	
	<div id="scroller-content">
		She fills my bed with gasoline<br />
		You think I wouldn't notice<br />
		Her mind's made up<br />
		Her love is gone<br />
		I think someone's trying to show us a sign<br />
	</div>
Divertiti. :)


 non dubitavo che il tuo script fosse corretto, mi sono solo espresso male.
No, tranquillo, non ho pensato una cosa del genere.
Tra l'altro tutti possiamo commettere errori nello scrivere codice.
Anzi se ciò che ti ho detto ti ha fatto pensare che intendessi qualcosa
tipo "prima di dire scemenze, provalo il mio codice ti pare che non
funzioni?" non era mia intenzione.
Se si hanno dei dubbi su un certo codice, andrebbe prima provato e poi se i
dubbi persistono, domandare sul Newsgroup, non viceversa... tutto qui. :)
Anche per evitare di scrivere post che poi risultano non necessari, un po'
come si dovrebbe leggere i messaggi dei giorni precedenti prima di scrivere
qualcosa sul NG; perché magari la risposta la si trova da soli.
Ripeto, questo mio discorso era una riflessione generale,
decontestualizzata.
-- 
~ Se i miei cattivi pensieri non fossero caricati a salve,
ogni giorno sarebbe una strage.

 dubbi persistono, domandare sul Newsgroup, non viceversa... tutto qui. :)
Stavo dialogando, in effetti ;-)
Ma capisco che qui ci sia (e ci debba essere) un modo dialettico diverso da
quello a cui sono abituato e mi adeguero', come trovo giusto fare.


 	<script type="text/javascript">
[cut]
Da qualche parte avevo letto che il clip non poteva essere modificato
tramite javascript in opera 6-7... ma non sono sicuro di ricordare bene :-S


 tramite javascript in opera 6-7... ma non sono sicuro di ricordare bene :-S
Parlare di Opera 6/7 e javascript nella stessa frase, è già di per sé un
azzardo.
-- 
"When you have eliminated the impossible, whatever remains,
however improbable, must be the truth."

 tramite javascript in opera 6-7... ma non sono sicuro di ricordare bene :-S
Parlare di Opera 6/7 e javascript nella stessa frase, è già di per sé un
azzardo. Il clip direi che é l'ultimo dei problemi.


 azzardo. Il clip direi che é l'ultimo dei problemi.
:-)


 quello a cui sono abituato e mi adeguero', come trovo giusto fare.
Si tratta semplicemente delle norme che troveresti in qualsiasi altro NG;
se si tratta di un NG "tecnico" c'è in aggiunta quella di sperimentare il
codice prima di fare domande sullo stesso, soprattutto se queste diventano
ovvie dalla suddetta sperimentazione. :)


 Divertiti. :)
carino! Cioe', in parole povere, con l' attributo clip setti la "parte
visibile" di un oggetto, esatto?
-- 
Torno subito

 Stiamo sempre parlando del nostro caso specifico, tienilo a mente.
No, non fallivo per questo. E falliva solo in Mozilla e Netscape, non in
Opera, FireFox e Explorer.
Credevo fallisse perche' non riuscivo a ricavare l'altezza effettiva del
contenuto... invece doveva esserci dell'altro. Probabilmente (non ricordo)
ho usato una proprieta' sbagliata per ricavare l'altezza effettiva del
contenuto.


 visibile" di un oggetto, esatto?
Si'. Di fatto, si "disegna" un rettangolo e solo la porzione che ricade in
questo rettangolo risulta visibile.
Ho sempre fatto un gran casino, ora credo di aver capito che
clip: rect(T, R, B, L)
"disegna" un rettangolo il cui lato superiore e' a distanza T dal top, il
lato destro a R dal left, il lato inferiore a B dal top, il lato sinistro a
L dal left.
Nella "figura" sotto, solo il rettangolo interno sara' visibile.
+----------------------------------+
|               ^    ^             |
|               |    |             |
|              T|    |             |
|               |    |B            |
|               v    |             |
|     L       +------|--+          |
|<----------->|      |  |          |
|             |      |  |          |
|<-------------------------------->|
|       R     |      |  |          |
|             |      v  |          |
|             +---------+          |
|                                  |
+----------------------------------+


 posizionamento relativo non mi fa vedere la divisione da muovere
Ah, e' chiaro che, con ogni probabilita', il mancato funzionamento dipende
dal fatto che, cambiando la situazione, va cambiata qualcosa nello script;
cosa, pero', non so (fondamentalmente, sono ignorante).
Ho sempre il timore di essere offensivo senza volerlo :(


 contenuto.
Può darsi (la butto lì perché non ho visto il codice che hai scritto) che
tu abbia cercato di recuperare l'altezza del contenuto partendo dal
contenitore, che nel caso di "position:absolute" risultava nulla; mentre il
mio script non lo fa, e se hai preso a modello quello ti sei autocorretto.
-- 
~ Io non soffro di pazzia, ne godo ogni minuto.
(I don't suffer from insanity, I enjoy every minute of it)

 clip: rect(T, R, B, L)
Tutte le misurazioni CSS vanno in senso orario. clip, margin, padding...
Ricorda questo e non farai più casino di sorta.
-- 
~ Io sono il più importante dei miei problemi.

 clip: rect(T, R, B, L)
Tutte le misurazioni CSS vanno in senso orario. clip, margin, padding...
Ricorda questo e non farai più casini di sorta.


 Ricorda questo e non farai più casini di sorta.
E questo lo sapevo... pero' ero (erroneamente) convinto che, per il clip, i
valori indicassero la distanza dei lati del clip dai *rispettivi* lati
dell'elemento clippato.


 mio script non lo fa, e se hai preso a modello quello ti sei autocorretto.
E certo che ho preso a modello il tuo :)


 visibile" di un oggetto, esatto?
Esattamente. Il "viewport".
Quello che viene fatto con elemento div, nel codice che ho scritto
inizialmente. Un elemento fa da "viewport", un altro fa da "contenuto". Il
primo delimita la "parte visibile" del secondo.
Questo, volendo, può essere fatto direttamente con il clipping, e quindi
usando un elemento solo; per tornare al discorso di partenza.
Solo che il codice è meno immediato da capire e gestire, e inoltre non
potresti mettere cose come il "bordo" (verrebbe clippato), cosa che invece
usando due div puoi fare, e cose del genere.
-- 
~ Chi segue gli altri, non arriva mai primo.

 E certo che ho preso a modello il tuo :)
Allora è tutto spiegato. :)
-- 
~ La donna è un male, ma un male necessario. (Aulo Gellio)

 tu non ne avessi mai sentito parlare neppure in altri ambiti. :)
il fatto e' che sono piccolo :)
no, in realta' io non ho mai lavorato col "vecchio" DHTML, ecco perche' mi
manca questa cosa... (e sicuramente altre mille, ma e' un altro discorso)
-- 
Torno subito

 (e sicuramente altre mille, ma e' un altro discorso)
Come a tutti noi, del resto. Ci si fa compagnia a vicenda.


 meno di non *aggiungere* attributi al CSS, non avrai il risultato sperato. 
E' verissimo. Anche se basta aggiungere un'altezza al contenitore per farlo
funzionare egregiamente... Ho anche provato ad aggiungere semplicemente un
padding di 5px al contenitore (mantenendo il posizionamento relativo)...
non dovrebbe cambiare niente, secondo me. Invece cambia tutto. Usando in
modo appropriato il posizionamento assoluto, invece, lo scroll funziona...
anche se il padding se ne va a spasso :)
Credo, in conclusione (che' devo andar via e, probabilmente, tu hai da
lavorare ), che ci siano inconvenienti risolvibili con entrambi i metodi.
Resto pero' convinto che il posizionamento assoluto sia *semanticamente*
piu' corretto.
Scusa l'insistenza :)
Buna giornata.


 Buna giornata.
"buna" giornata anche a te ;)
-- 
~ Il lavoro č quel lasso di tempo che intercorre tra una pausa caffč
 e l'altra.

 un po' di piů il codice.
Finora, l'unico inconveniente che vedo e' quello riguardante la dimensione
del viewport... ma puo' anche darsi che non abbia guardato a fondo ;-)
Sto imparando... porta pazienza!


 Sto imparando... porta pazienza!
La pazienza ce l'ho, è il tempo che mi manca. :)
-- 
~ L'ingegnere non vive, funziona.

 La pazienza ce l'ho, è il tempo che mi manca. :)
Oh, beh, a ma mancano entrambi... soprattutto la prima.
"Bun" lavoro :)


 ridimensionamento neanche usando il posizionamento assoluto...
Aggiungendo codice, come ti ho detto, puoi farlo. Ma scrivi del codice
aggiuntivo per simulare il risultato che avresti "nativamente" usando il
relative. Si torna al solito discorso del giusto strumento per il giusto
lavoro.
Inoltre, se lo vuoi fare solo con i CSS senza usare codice JS, come ho già
scritto, con il posizionamento assoluto l'altezza da impostare diventa un
po' empirica. Con il relative invece hai esattamente l'altezza del
contenuto, e in automatico.
-- 
~ Se potete leggere questo, la mia donna è caduta.
(Letta sul retro di una maglietta di un motociclista)

 "Benché cerchi" :-PPPPPP
Ero indeciso tra
"Cerco di stare attento, ma capita"
e
"Benché cerchi di stare attento, capita"
Alla fine ho optato per la seconda, ma mi son dimenticato il "cerco" :)
-- 
~ "When you have eliminated the impossible, whatever remains,
however improbable, must be the truth." (S.H.)

 Niente da fare, ormai sono nel partito di Nando: ti ho corretto!
invidiaaaaaaa, io ci provo da anni!! :-)
-- 
"Non sai che ci vuol scienza
 ci vuol costanza
 ad invecchiare senza maturità"
									    F.G.

 E quando mi ricapita? :-DDD
A livello di errori di battitura? Quando vuoi, se ti metti a ripescare nei
vecchi post ne troverai a iosa. :)


 invidiaaaaaaa, io ci provo da anni!! :-)
Beh, tu ci provi - giustamente - a livello tecnico, quello è uno zizzinino
più difficile. :)


 Guccini piu` o meno dagli anni '70 :-P)
:-) Eggià, il maestro lo ho visto l'anno scorso, purtroppo è parecchio
invecchiato ma è sempre il più grande! (e l'ultimo rimasto dopo Gaber e De
Andrè...se dovesse mai leggere questo messaggio immagino le toccate!)
-- 
"E' l' ignoranza che crea l'intolleranza
 di gente cieca e senza coscienza"
									  S.S.S.

 po' empirica.
E' esattamente questo che voglio capire meglio. Ma non spiegarmelo, che' se
non lo capisco da solo poi lo dimentico :)


 Niente da fare, ormai sono nel partito di Nando: ti ho corretto!
Oh, bene... inizio a far proseliti!
Ho deciso, fondo il CAZ
.
.
.
.
.
.
Comitato Anti ZER0
:-)


 :-)
Ci hanno già pensato altri prima di te; ma direi che in questo caso non so
quanto ti convenga aderire. :)
-- 
~ "Quando i morti camminano, signori, bisogna smettere di uccidere.
O si perde la guerra." (Zombie)

 quanto ti convenga aderire. :)
Mo' mi viene la curiosita' :)


 E perche' mai?
Per ragioni diverse, di cui alcune effettivamente molto valide.
Ma parlarne esula da questa sede, inoltre vorrei evitare di lasciare tracce
negli archivi della rete. :)
-- 
~ Neanche il futuro e' piu' quello di una volta.

</body>
Scusatemi se rispondo solo ora.
Non ho controllato il NG per una settimana causa impegni.
Questa soluzione proposta da zer0 è davvero interessante.
Poco javascript e css.
Purtroppo di javascript non so praticamente nulla.
Se però ho interpretato correttamente la funzione questa
sostanzialmente modifica la proprietà "left" di #scroller.
A questo punto, se volessi implementare a questo script un'evento al
passaggio del mouse(per fermare lo scroll in sostanza) come posso
fare? Mi basta anche un link a qualche tutorial volendo...
Grazie.
V.
 
______________________________
Per contattarmi via e-mail:
conte.vlad.it
[at]
katamail.com

 fare? 
Uno dei tanti modi:
var scrollerRunning = true;
 
window.onload=function(){
	var c = document.getElementById("scroller-content");
 
	c.onmouseover = c.onmouseout = function(e){
		scrollerRunning = (e||window.event).type == "mouseout";
	}
 
	setInterval(function(){
		var c=document.getElementById("scroller-content"),
			o=c.firstChild,
			l=o.offsetLeft;
 
		if (scrollerRunning)
			o.style.left=(-l>o.offsetWidth?c.offsetWidth:l-5)+"px";
	},100);
}
-- 
~ Non ci sono certezze, solo ragionevoli probabilità. (W. Howe)

}
Grazie mille.
Sei stato molto gentile.
Buona giornata.


 Buona giornata.
Altrettanto.
-- 
~ Io sono il più importante dei miei problemi.

migliorato; ma già così fa quel che deve fare.
Volevo farti notare una cosa su cui stavo per sbatter la testa... o
meglio, ci ho sbattuto la testa per un'oretta poi ho scoperto
l'arcano.. *_*
Inserendo lo script che mi hai dato così com'è, questo funziona
correttamente sia su IE che su FF.
Cosicchè ho provato a inserirlo nel sito che sto facendo e quindi ho
riscritto il codice con i div annidati in questo modo:
<div id="scroller-content">
	<div id="scroller">
		Questo è un semplice testo scorrevole... 
		Lorem ipsum dolor sit...
	</div>
</div>
... e cosa ti scopro?!?
Che su Firefox non scorre più un bel niente! 
...mumble-mumble...
Insomma ho cominciato a chiedermi come mai...
Alla fine ho scoperto che lo scorrimento funziona su FF solo se il
codice è scritto con i due <div> in linea.
Questa cosa ti torna o è una stranezza?
Dipende forse dal codice javascript?
Però su IE funziona...
Se c'è una spiegazione la ascolto volentieri.
Buona serata.


 Però su IE funziona...
Ricordati che questo generalmente non fa testo. IE ha delle "leggi della
fisica" tutte sue.
-- 
~ La donna è un male, ma un male necessario. (Aulo Gellio)

fisica" tutte sue.
Questo l'ho capito ormai da tempo e avevo il sospetto che IE in
qualche modo tutto suo aggirasse il problema.  :-)
Buona giornata.
