Newsgroup: it.comp.lang.javascript
Titolo: setTimeout su element width

Ciao.
Ho questo semplice snippet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
" xml:lang="it" lang="it"
dir="ltr">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
	margin:0px;
	padding:0px
}
body {
	background-color: #000000;
	text-align:center;
}
a:link, a:visited,a:hover,a:active {
	text-decoration: none;
}
ul {
	list-style-type:none;
}
#navigation{
	height:70px
}
#navigation ul {
	width:100%;
	background-color:#d41e00;
}
#navigation li {
	float:left ;
}
#navigation li a {
	display:block;
	width:180px;
	line-height:70px;
	border-right:2px solid #000;
	background-color:#d41e00;
	color:#fff;
	text-align:center;
	text-transform:uppercase;
	text-decoration:none;
}
#navigation li a:hover,#navigation li a:focus,#navigation li a:active
{
	background-color:#d41e00;
}
#navigation li a.current {
	background-color:#720000;
}
#heading{
	height:60px;
	background-color:#DC2301;
}
#heading h1{
	line-height:60px;
	background-color:#FE3704;
}
#container{
	margin: 0 auto;
	text-align: left;
	background-color:#FFFFFF;
	width: 955px;
}
#content{
	background-color:#CCC;
}
#footer{
	background-color:#CCFF00;
}
#footer p{
	text-align:center;
	background-color:#FFFFFF;
}
</style>
<script type="text/javascript">
/* Events */
function addEvent(elm, evType, fn, useCapture){
	if (elm.addEventListener){
			elm.addEventListener(evType, fn, useCapture);
			return true;
	} else if (elm.attachEvent) {
		var r = elm.attachEvent('on' + evType, fn);
		return r;
	} else {
		elm['on' + evType] = fn;
	}
};
function getTarget(e){
		var target = window.event ? window.event.srcElement : e ? e.target :
null;
		if (!target){return false;}
		return target;
};
function mooMenu(){
	var counter= 180;
	var defaultWidth= 180;
	var maxWidth= 280;
	var timeoutID= 0;
	function getPixel(num){
		return ''.concat(parseInt(num),'px');
	};
	function getTab(e){
		var currentLink= getTarget(e);
		currentLink.style.width= getPixel(maxWidth);
//fire(currentLink);
	};
	/*function fire(el){
		if (counter < maxWidth){
			counter++;
			el.style.width= getPixel(counter);
			timeoutID= window.setTimeout("fire("+el+")",100);
			//alert(timeoutID);
	   }
	}*/
	function init(){
		if(!document.getElementById || !document.getElementsByTagName || !
document.createTextNode){return;}
		var target= document.getElementById('menu');
		if(target==null){return;}
		var aList= target.getElementsByTagName('a');
		var aListWidth= new Array();
		for(var i=0;i<aList.length;i++){
			aList.item(i).style.width =getPixel(defaultWidth);
			addEvent(aList.item(i),'mouseover',getTab,false);
		}
	};
	init();
};
addEvent(window,'load',mooMenu,false);
</script>
</head>
<body>
<div id="container">
	<div id="heading"><h1>Test</h1></div>
	<div id="navigation">
		<ul id="menu">
		<li>
		<a href="
http://localhost/index.php
" title="Home">Home</a>
		</li>
		<li>
		<a href="
http://localhost/about.php
" title="About">About</a>
		</li>
		<li>
		<a href="
http://localhost/contact.php
" title="Contact">Contact</a>
		</li>
		</ul>
	</div>
	<div id="content">Content</div>
	<div id="footer"><p>Blogerino by Whisher</p></div>
</div>
</body>
</html>
 quello che vorrei ottener usando la function fire
 è dare a currentLink la proprietà width in modo
graduale in modo da rendere + gradevole l'effetto
ma non riesco a venirne fuori c'è qc che sa come fare ?
Penso si capisca a  che errore vado incontro ;(
Grazie in anticipo ;)

 	}*/
pero' come vedrai ci saranno altri problemi...
nel metterli a posto riscrivi il codice evitando questa chiamata ricorsiva
ma fai un'unica chiamata ad una funzione che chiami a sua volta in maniera
opportuna setInterval...

 };
[cut]
Non centra niente con la risoluzione dei tuoi problemi, cmq questa funzione
puoi riscriverla un po' meglio:
function getTarget( e )
{
	e = e || event;
	return e.target || e.srcElement	|| null;
}

 ma non riesco a venirne fuori c'è qc che sa come fare ?
Ti consiglio di cercare su questo NG; circa le animazioni in JS se ne
è parlato più volte, e credo tu possa trovare informazioni utili.
Ad esempio quando è il caso di usare un timeout o un interval, e come
avere delle buone performance su animazioni concorrenti.
Ricordati che un timeout/interval non crea un nuovo thread, ergo devi
usarli con parsimonia.
-- 
"Se c'è qualcosa di più importante del mio ego su questa nave,
la voglio catturata e fucilata."

O questa? Che senso ha?
Gli passi un numero e ti restituisce
numeropx non mi sembra male ;)
ti evita di fare nume + px
Che dici un po prolissa ?
Statemi bene.
La prima versione del semplice script
http://www.blogial.net/demo/easy-mootools-menu/

 Che dici un po prolissa ?
e beh ;)  confrontala con la mia

 Che dici un po prolissa ?
Dico che in questo caso ha ben poco senso.


 e beh ;)  confrontala con la mia
Ok a tutti e due non lo faccio + ;)


Vedi la risposta che ho dato a Ugo ;)

 Mi accontento anche di qc Zero made
Ciò che ho sviluppato è legato ad un framework interno, non andrebbe
rilasciato. Dovrei mettermi a scriverti qualcosa ad hoc, e visto che
ci sono a zonzo già codici che non usano l'attachEvent, fai di certo
prima a cercare quelli. :)
-- 
~ Tenete la morte lontano dalle strade. Guidate sul marciapiede.


GRAZIE ;)
Alla prossima ............

Scusate ma l'entusiasmo ;)
forse dico forse sono riuscito a capirci qc
che mi dite di questo metodo
function a(e) {
		this.currentLink= getTarget(e);
		function b() {
			if(counter < maxWidth){
				counter= counter+5;
				var diff= ((defaultWidth*listIdLength)- counter)/
(listIdLength-1);
				diff1= Math.floor(diff);
				diff2= Math.ceil(diff);
				/*
				Serve a pareggiare il valore di counter dopo l'arrotondamento
				*/
				for(var i=0;i<tabList.length;i++){
					if(tabList.item(i) == this.currentLink){
						tabList.item(i).style.width= getPixel(counter+diff2-diff1);
					}
					else{
							tabList.item(i).style.width= getPixel(diff1);
					}
				}
				var timeoutID= window.setTimeout(b,speed);
    	    }
        	else if(counter == maxWidth){
            	clearTimeout(timeoutID);
            	counter=defaultWidth;
    		}
		}
		b();
	}
è una closure ma dovrebbe molto + facile da gestire
o sbaglio ?
-Pista e ripista -