Newsgroup: it.comp.lang.javascript
Titolo: TIMER GRAFICO

LeavesLeavesVorrei realizzare un timer grafico che mi permetta di effettuare
un
conto alla rovescia partendo da 5(min):00(sec.). appena lanciato deve essere
di dimensioni abbastanza grandi al centro della schermo poi dopo 2 o tre
sec. si deve ridurre di dimennsionie posizionarsi in alto a destra rimanendo
sempre in primo piano ma  permettendomi però di aprire tutte le finestre che
voglio senza problemi. Stavo pensando ad un layer mobile completamente
esterno al browser. Se qualcuno di voi è in grado di realizzare lo script si
guadagna il link nel mio sito(Cazzo che premio) e tantissima ma tantissima
riconoscenza da parte mia....
Ciao a tutti...
--
            \ | /
         (@ @)
--oOO-(_)-OOo-----------------------------SEMIDOPPIO.

Bhe sì non presenta difficolta' tecniche, l'unico problema e' che è lunghetto e
uno dovrebbe passare un ora o due a scrivertelo...
1) browser sniffing
2) posizionamento del layer al centro (coordinate finestra
innerWidth, innerHeight per NS4, NS6
document.body.clientWidth, document.body.clientHeight per IE4 IE5++
divise per due e sottraendo la dimensione veritcale e orizzontale del layer:
queste ultime si danno con css: width e height ma NS4 allarga il layer solo in
base all'oggettio che c'è dentro: ergo mettici una table con una width= alla
width e SENZA
proprietà align=center o NS4 crasha)
3) scrittura sul layer (document.layers['layerName'].document.write per NS4
document.all.....innerHtml per IE4
document.getElementById(..)....innerHtml per NS6, IE5++
)
4) aggiornamento della scrittura con timeout
5) dopo due secondi spostamento del layer a
orizzontale: window width
verticale: zero
6) si continua a scrivere ogni secondo.
Ora, capsici da te che pur conoscendo il "tracciato", farti lo script è chome
chiedere di alvorare un due ore:
lo sai anche tu, il debug, i test sui vari browsers.
Comunque la mia risposta vuole significare: si può fare, non è straordinario:
ma richiede un po' di tempo.
ciao
TrueLies
http://www.unitedscripters.com/
-- 
Posted from  [212.141.82.13] 
via Mailgate.ORG Server - 
http://www.Mailgate.ORG

Ciao a tutti...
il link al tuo sito mi fa gola... anche se il mio sito č vuoto!!!
:-PPPP
Non ti assicuro niente, ma magari stasera o domani provo a buttar giů
qualcosa... ma senza layer... magari in un frame separato.
--
Ciao!
Davide

<script language="JavaScript"><!--
//con il word-wrap di default in email o newsgroup, le linee di codice possono
//venire inopportunamente spezzate
//mi pare sia proprio quello che cercavi...
//... poi dicono che TrueLies č cattivo brutto e non conosce la materia!
//me lo sono guadagnato un link permanente?
// 
http://www.unitedscripters.com
// mica l'avrebbero fatto tutti un lavorino cosě per uno sconosciuto!!
// se poi non realizzi la pagina, linkami dove puoi appena puoi
//mi pare uno scambio piu' che equo!
navName=navigator.appName.toLowerCase();
navVer=navigator.appVersion
NS6=0;NS4=0;IE4=0;IE5=0;
var preDiv="";var styleDiv="";
var innerW,innerH,offsetW,offsetH;
if(navName.indexOf("netscape")!=-1){
if(parseInt(navVer.version)==5){
NS6=true
preDiv="document.getElementById('"
scrittore="').innerHTML"
styleDiv="').style"
}
else{
styleDiv="']"
preDiv="document.layers['"
scrittore="'].document"
NS4=true
}
offsetW="pageXOffset"
offsetH="pageYOffset"
innerW="innerWidth"
innerH="innerHeight"
}
else if(navName.indexOf("explorer")!=-1){
if(document.getElementById){
styleDiv="').style"
preDiv="document.getElementById('"
scrittore="').innerHTML"
IE5=true
}
else{
styleDiv="'].style"
preDiv="document.all['"
scrittore="'].innerHTML"
IE4=true}
offsetW="document.body.scrollLeft"
offsetH="document.body.scrollTop"
innerW="document.body.clientWidth"
innerH="document.body.clientHeight"
}
function muovi(layer,T,L){
var ogg=eval(preDiv+layer+styleDiv);
ogg.left=L;ogg.top=T
}
function centra(ogg,oW,oH){
var hw=eval(innerH);hw/=2
var ww=eval(innerW);ww/=2
var marginH=eval(offsetH)
var marginW=eval(offsetW)
var H=hw-(oH/2)+marginH
var W=ww-(oW/2)+marginW
muovi(ogg,H,W)
}
function vedi(layer,v){
var ogg= eval(preDiv+layer+styleDiv);
if(!v){
if((v+"")=="0"){
ogg.visibility="hidden"
}
else{
ogg.visibility= (ogg.visibility== "hidden"||ogg.visibility=="hide")? "visible":
"hidden";
}
}
else if(v){
ogg.visibility="visible"
}
else if(v&&(v+"")=="0"){
ogg.visibility="hidden"
}
}
function altoDestra(){
var dx=eval(innerW)
dx-=200
muovi("orologio",0,dx)
}
function scrivi(){
var j=preDiv+"orologio"+scrittore;
var X=tempo()
var messaggio=scrivi1+X+scrivi2
if(NS4){
j=eval(j);
j.write(messaggio);
j.close()
}
else{
j+="=messaggio";eval(j)
}
}
//editabile senza inserire apici singoli o cancellare quelli presenti
//se si modifica la width tavola, si possono verificare disallineamenti
//i colori sono tutti modificabili
var scrivi1= '<table border="3" cellspacing="0"
bordercolor="#cc0000"cellpadding="0" width="200" bgcolor="#0033ff"><tr><td
align="center"><font color="#00ffff" size="3"><strong>'
var scrivi2= '</strong></font></td></tr></table>'
//fine editabile
function tempo(){
var d=new Date()
var h=d.getHours()
var m=d.getMinutes()
var s=d.getSeconds()
m=(parseFloat(m)<10)?"0"+m:m
s=(parseFloat(s)<10)?"0"+s:s
return(h+" "+m+" "+s)
}
var trig;
function inizia(ogg,oW,oH){
centra(ogg,oW,oH)
vedi(ogg,1)
trig=setInterval("scrivi()",1000)
setTimeout("altoDestra()",5000)
}
/*
il seguente tag va sotto il tag body, senza modificarlo:
<div id="orologio" style=
"position:absolute;top:0;left:0;visibility:hidden;z-index:3;">
</div>
*/
/////////////////////////////////////
/*
per avviare:
o body onLoad="inizia('orologio',200,10)"
o un evento su pulsante tipo
onClick="inizia('orologio',200,10)"
*/
//--></script>
-- 
Posted from  [212.141.82.72] 


 //venire inopportunamente spezzate
-- 
Posted from  [212.141.82.62] 


Non solo, ma quando rinsaldi il codice (altro mio msg), non eliminare gli
spazi: ci deve essere unos apzio bianco tra le proprietà.
Anzi già che ci sei correggi tu una svista al momento di incollare:
bordercolor="#cc0000"cellpadding="0" 
deve essere
bordercolor="#cc0000" cellpadding="0" 
e se ti va, a voler essere pignoli,
var innerW,innerH,offsetW,offsetH;
dovrebbe essere
var innerW,innerH,offsetW,offsetH,scrittore;
La tavola serve per dare una width al layer 8senza il che NS4 non setta alcuna
larghezza al layer).
SE scroci la width, anche alcuni dettagli dello script dovrebbero essere
leggermente puntualizzati
nelle funzioni
altoDestra() la riga -=200 andrebbe modificata in -=xxx (altro numero)
e nella invocazione di inizia() il 200 va modioficato se la width viene
modificata
Mi pare sia tutto.
ciao
TrueLies
http://www.unitedscripters.com/
-- 
Posted from  [212.141.82.62] 


Uh Uh ! vedo ora che volevi che prima fosse un po' più grande e poi si
ridimensionasse.
Allora prova lo script, dimmi se 200 ti va bene, poi fammi sapere width di
inizio e width finale che vorresti, cambiare questo dettaglòio è una
sciocchezza batsa fare due diversi setInterval.
Piuttosto mi dirai che rilego ora che volevi un countdown e non un orologio;
bhe, se abbiam fatto l'orologio, abbiamo fatto il più.
Mi pare che il 90% del lacvoro è fatto, se solo avessi visto prima volevi un
countdwon anzichè un orologio. ora è un po' tardi, se non sai come cavartela
con
sto countdown fammi sapere, anche se il link me lo sono aggiudicato lo stesso
vero? :o)


<script language="JavaScript"><!--
/* 
//versione tutto incluso, countdown e resizing dopo 5 secondi:
//con il word-wrap di default in email o newsgroup, le linee di codice possono
//venire inopportunamente spezzate
//ricostruire le righe spezzate con DILIGENZA, CALMA, senza togliere nulla
//non contiene errori (debug completo NS4, IE5, NS6), se ne genera, sono righe
spezzate
//il rendering di NS6 crea un leggero sfarfallio alla riscrittura: problemi di
NS6!
//i secondi vanno in avanti (da 0 a 59)
//i minuti indietro (da 5 a 0)
//credo sia molto piu' di effetto (e logico) così in realtà che con entrambi
indietro!
//ha tutte le caratteristiche che chiedevi:
//comincia al centro, grande
//5 secondi si sposta in alto, e contestualmente rimpicciolisce
//arrivato a 0 min e 0 secondi si ferma a 0:00
//modificata anche l'invocazione, ora è più semplice
//corretto un bug nella individuazione di NS6
//anche l'apparizione e' istantanea
//inserito un blinker per separare minuti da secondi
//conosco gente che t'avrebbe fatto tirar fuori il libretto degli assegni ha
ha! :o)
//mi pare sia proprio quello che cercavi...
//... poi dicono che TrueLies è cattivo brutto e non conosce la materia!
//me lo sono guadagnato un link permanente?
// 
http://www.unitedscripters.com
// mica l'avrebbero fatto tutti un lavorino così per uno sconosciuto!!
// se poi non realizzi la pagina, linkami dove puoi appena puoi
//mi pare uno scambio piu' che equo!
*/
navName=navigator.appName.toLowerCase();
navVer=navigator.appVersion
NS6=0;NS4=0;IE4=0;IE5=0;
var preDiv="";var styleDiv="";
var innerW,innerH,offsetW,offsetH,scrittore;
var fontSizer=6
var theWidth=300
var secs=0;
var mins=5;
var fixer=0;
var trig;
if(navName.indexOf("netscape")!=-1){
if(parseInt(navVer)>=5){


function centra(ogg,oW,oH){
//necessario per evitare sovrapposizione di due clicks....
if(trig!=null||trig!=false){clearInterval(trig)}
fixer=0;
theWidth=300
fontSizer=6
secs=0;
mins=5
//fine necessario
//prepara prima apparizione layer
//editabile senza inserire apici singoli o cancellare quelli presenti
//se si modifica la width tavola, si possono verificare disallineamenti
//i colori sono tutti modificabili
var scrivi1= '<table border="3" cellspacing="0"
bordercolor="#cc0000"cellpadding="0" width="'+theWidth+'"
bgcolor="#0033ff"><tr><td align="center"><font color="#00ffff"
size="'+fontSizer+'"><strong>5 : '
var scrivi2= '00</strong></font></td></tr></table>'
//fine editabile
var j=preDiv+"orologio"+scrittore;
var messaggio=scrivi1+scrivi2
if(NS4){
j=eval(j);
j.write(messaggio);
j.close()
}
else{
j+="=messaggio";eval(j)
}
//fine prima apparizione
//centra:
var hw=eval(innerH);hw/=2
var ww=eval(innerW);ww/=2
var marginH=eval(offsetH)
var marginW=eval(offsetW)
var H=hw-(oH/2)+marginH
var W=ww-(oW/2)+marginW
muovi(ogg,H,W)
}
function vedi(layer,v){
var ogg= eval(preDiv+layer+styleDiv);
if(!v){
if((v+"")=="0"){
ogg.visibility="hidden"
}
else{
ogg.visibility= (ogg.visibility== "hidden"||ogg.visibility=="hide")? "visible":
"hidden";
}
}
else if(v){
ogg.visibility="visible"
}
else if(v&&(v+"")=="0"){
ogg.visibility="hidden"
}
}
function altoDestra(){
var dx=eval(innerW)
dx-=100
theWidth=100
fontSizer=3
muovi("orologio",0,(dx-3))
}
function scrivi(){
fixer++
if(fixer==6){theWidth=100;fontSizer=3}
//editabile senza inserire apici singoli o cancellare quelli presenti
//se si modifica la width tavola, si possono verificare disallineamenti
//i colori sono tutti modificabili
var scrivi1= '<table border="3" cellspacing="0"
bordercolor="#cc0000"cellpadding="0" width="'+theWidth+'"
bgcolor="#0033ff"><tr><td align="center"><font color="#00ffff"
size="'+fontSizer+'"><strong>'
var scrivi2= '</strong></font></td></tr></table>'
//fine editabile
var j=preDiv+"orologio"+scrittore;
var X=tempo()
var messaggio=scrivi1+X+scrivi2
if(NS4){
j=eval(j);
j.write(messaggio);
j.close()
}
else{
j+="=messaggio";eval(j)
}
}
function tempo(){
if(secs==59){
mins-=1
secs=0
}
else{
++secs
}
var inter=(secs%2)?"&nbsp;&nbsp;&nbsp;":" : "
var secondi=(parseFloat(secs)<10)?"0"+secs:secs
//riga sotto blocca tutto se countdown finito
if(mins==0){
inter=" : "
clearInterval(trig)}
return(mins+inter+secondi)
}
function inizia(ogg){
centra(ogg,300,20)
vedi(ogg,1)
trig=setInterval("scrivi()",1000)
setTimeout("altoDestra()",6000)
}
/*
il seguente tag va sotto il tag body, senza modificarlo:
<div id="orologio" style=
"position:absolute;top:0;left:0;visibility:hidden;z-index:3;">
</div>
*/
/////////////////////////////////////
/*
per avviare:
o body onLoad="inizia('orologio')"
o un evento su pulsante tipo
onClick="inizia('orologio')"
ciao
TrueLies
http://www.unitedscripters.com/
*/
//--></script>
-- 
Posted from  [212.141.82.234] 


A me però non fa il conto alla rovescia: parte da 5 e va avanti, ma forse ho
capito male la richiesta.
Poi volevo dirti che in IE 5.0 per Mac l'orologio si posiziona fuori
dall'oggetto contenitore (sotto, per l'esattezza) e ci rimane anche quando
il timer salta nell'angolino a destra.
Per il resto mi pare che funzioni :-)
ciao
Roberto