Newsgroup: it.comp.lang.javascript
Titolo: Menu con setInterval sequenza eventi (era setTimeout su element width)

Ciao.
Scusate il titolo che non rende bene
il problema ma ......
La discussione è iniziata
http://groups.google.com/group/it.comp.lang.javascript/browse_thread/thread/91f0477d0a835142/a931d664998da9d1#a931d664998da9d1
ne apro un'altra perchè secondo me
è tutt'altro genere di problema almeno ....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
">
<html xmlns="
http://www.w3.org/1999/xhtml
">
<head>
<title>Easy mootools menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* Main */
* {
    margin:0px;
    padding:0px
}
body {
    background-color: #000000;
    text-align:center;
}
a:link, a:visited,a:hover,a:active {
    text-decoration: none;
}
#heading{
    height:60px;
    margin-bottom:50px;
    border-bottom:2px solid #fe633a;
    background-color:#DC2301;
}
#heading h1{
    line-height:60px;
    text-align:center;
    background-color:#FE3704;
}
#container{
    margin: 0 auto;
    text-align: left;
    background-color:#FFFFFF;
    width: 730px;
}
#content{
    background-color:#CCC;
}
#footer{
    margin-top:50px;
    border-top:2px solid #fe633a;
    background-color:#d41e00;
}
#footer p{
    text-align:center;
    background-color:#d41e00;
    font-weight:700;
}
#navigation{
    text-align:center;
    height:70px;
    border-left:2px solid #fe633a;
    background-color:#d41e00;
}
/* Easy mootools menu */
ul#easy-mootools-menu {
    list-style-type:none;
    background-color:#d41e00;
}
ul#easy-mootools-menu li {
    float:left;
}
ul#easy-mootools-menu li a,ul#easy-mootools-menu li a:hover{
    display:block;
    width:180px;
    height:70px;
    line-height:70px;
    border-right:2px solid #fe633a;
    font-family:"Trebuchet MS",Helvetica,Arial,Geneva,sans-serif;
    font-weight:bold;
    text-align:center;
    text-transform:uppercase;
    text-decoration:none;
    letter-spacing:1px;
}
ul#easy-mootools-menu li a {
    background-color:#d41e00;
    color:#fff;
}
ul#easy-mootools-menu li a:hover {
    background-color:#d41e00;
    color:#C1FF6A;
}
.debug{
	background-color:#FF0000;
	color:#FFFFFF
}
</style>
<script type="text/javascript">
/*
You may use this script on your web site without seeking my
permission.
A link back to 
www.blogial.net
 is always appreciated.
The content provided in this article is not warranted or guaranteed by
<a href="
http://www.blogial.net
." target="_blank">
www.blogial.net
.</
a>
*/
function easyMooToolsMenu(){
	var checker= 0;
	var debug= true;
	var tabList= null;
	var speed= 5;
    var counter= 180;
	var counter2= 180;
    var defaultWidth= 180;
    /*
     * - maxWidth -
     * Width status tab over must be the same
     * of the background image.
     * The different between defaultWidth and maxWidth
     * must be divisible by tabs number - 1.
     * Larghezza del tab quando lo status è hover
     * che deve essere la stessa dell'immagine
     * di background.
     * Deve essere divisibile per tabs number - 1.
     */
    var maxWidth= 240;
    var listIdLength= 0;
    var ext= '.png';
    /* Utility Events */
	/* Debug */
	function _debug(str){
		var span= document.createElement('span');
		span.className= 'debug';
		span.appendChild(document.createTextNode(str));
		$('content').appendChild(span);
	}
    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( evt ){
        evt = evt || window.event || null;
        return evt?(evt.target||evt.srcElement||null):null;
    };
    /* Utility Dom */
    function $(element){
        return document.getElementById(element);
    }
    function getPixel(n){
           return +n + 'px';
    };
    function resizeTabs(e){
        var currentLink= getTarget(e);
        currentLinkId= currentLink.getAttribute('id');
        var newImage = "url(images/"+currentLinkId+ext+")";
        currentLink.style.backgroundImage= newImage;
        fire(currentLink);
    };
    function fire(el){
		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) == el){
					tabList.item(i).style.width= getPixel(counter+diff2-diff1);
				}
				else{
 					tabList.item(i).style.width= getPixel(diff1);
				}
			}
			var timeoutID= window.setTimeout(function(){fire(el)},speed);
		}
 		else if(counter ==  maxWidth){
            window.clearTimeout(timeoutID);
			counter2=counter+5;
			if(debug){
				checker++;
				_debug('Resize'+checker);
			}
		}
    }
	function resetTabs(){
      fire2();
    };
	function fire2(){
    	if(counter2 >  defaultWidth){
			counter2= counter2-5;
			var diff= ((defaultWidth*listIdLength)- counter2)/
(listIdLength-1);
            diff1= Math.floor(diff);
            diff2= Math.ceil(diff);
            for(var i=0;i<tabList.length;i++){
				if(tabList.item(i).style.width == getPixel(counter2)){
 					tabList.item(i).style.width= getPixel(counter2);
				}
				else{
 					tabList.item(i).style.width= getPixel(diff1);
				}
			}
			var timeoutID= window.setTimeout(fire2,speed);
		}
   		else if(counter2 == defaultWidth){
           window.clearTimeout(timeoutID);
 			counter=counter2;
			if(debug){
				checker++;
				_debug('Reset'+checker);
			}
        }
      }
     function init(){
        if(!document.getElementById || !document.getElementsByTagName
|| !document.createTextNode){return;}
        var target= $('easy-mootools-menu');
        if(target==null){return;}
        tabList= target.getElementsByTagName('a');
		var listId= [];
		for(var i=0;i<tabList.length;i++){
			var currentId= tabList.item(i).getAttribute('id');
			listId.push(currentId);
            var newImage = "url(images/"+ currentId+ext +")";
            tabList.item(i).style.backgroundImage= newImage;
            tabList.item(i).style.width =getPixel(defaultWidth);
            addEvent(tabList.item(i),'mouseover',resizeTabs,false);
            addEvent(tabList.item(i),'mouseout',resetTabs,false);
        }
 		listIdLength= listId.length;
    };
    addEvent(window,'load',init,false);
};
easyMooToolsMenu();
</script>
</head>
<body>
<div id="heading"><h1>Easy mootools menu</h1></div>
<div id="container">
    <div id="navigation">
        <ul id="easy-mootools-menu">
        <li>
        <a id="tab1" href="index.htm" title="Home">Home</a>
        </li>
        <li>
        <a id="tab2" href="index.htm" title="About">About</a>
        </li>
        <li>
        <a id="tab3" href="index.htm" title="Contact">Contact</a>
        </li>
        <li>
        <a id="tab4" href="index.htm" title="Credits">Credits</a>
        </li>
        </ul>
    </div>
    <div id="content"></div>
</div>
<div id="footer"><p>by Whisher</p></div>
</body>
</html>
Tutto bene fin quando entri n un tab ed esci
ma se da un tab passi ad un altro
invece di seguire l'ordine fa come gli pare.
Mi spiego mi aspetterei che passando da un
tab all'altro la sequenza sia
resize reset resize invece no senza ombra di dubbio
faccio qc altro errore ma PP non riesco a venirne fuori ;(
Help me, please ;)

Risolto bastava togliere questa
riga
 counter2=counter+5;
Ciao.