SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Brazil
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Expanding elements

    Hi All,

    I´m trying to write a simple script which expands or contracts a element. At this time I´m working only with the expand part. But I´ve found a few problems that I am getting crazy to find a way around. I am posting here the script. The setInterval() function doesn´t seem to be cleared even with the clearInterval() one, can someone give a light why after clicking the first element to expand, the others epand to maximum width at once?

    Here´s the script:

    Code:
    /*
    * Aumento ou redução de elementos.
    */
    
    /*
    * Globais
    * Prefixo g_
    */
    
    var intervalo;
    
    var element_identity;
    
    var target_width;
    var current_width;
    
    var size_type;
    
    
    
    /* 
    * Object reference - Uma referencia ao elementos que disparou a funcao;
    * String meter - que metrica o elemento utiliza (%, px, em, etc);
    * Int width - Nova largura;
    * Int height - Nova altura;
    * Boolean changeWidth - A largura será modificada;
    * Boolean changeHeight - A altura será modificada.
    */
       
    function acordeon(reference, meter, width, expanding) {
    
    	clearInterval(intervalo);
    
    	element_identity = reference.id;
    	size_type = meter;
    
    	var element = document.getElementById(reference.id);
    	
    	current_width = parseInt((BrowserDetect.browser == 'Opera' ? element.style.pixelWidth : element.offsetWidth));
    	
    	target_width = parseInt((BrowserDetect.browser == 'Opera' ? element.style.pixelWidth : element.offsetWidth)) + width;
    	
    		if (parseInt(expanding) == 0) {
    			 expand();
    		}				
    		else {
    			contract();		
    		}	
    }
    
    
    function expand() {
    	
    	var element = document.getElementById(element_identity);
    
    		if (current_width <= target_width) {		
    		
    			current_width++;			
    			element.style.width = parseInt(current_width) + size_type;
    			
    			intervalo = setInterval("expand()", 10);
    		}
    		else {					 
    		
    			  clearInterval(intervalo);
    			  element.style.width = parseInt(current_width) + size_type;		  
    		}	  
    }
    
    
    
    function contract() {
    }

    HTML Code:
    <br />
    <div id="element" style="width: 200; height: 50px; border: 1px solid silver;" onClick="acordeon(this, 'px', 500, 0);">Isso funfa?</div>
    
    <br />
    <div id="element1" style="width: 200; height: 50px; border: 1px solid silver;" onClick="acordeon(this, 'px', 600, 0);">Isso funfa?</div>
    
    <br />
    <div id="element2" style="width: 200; height: 50px; border: 1px solid silver;" onClick="acordeon(this, 'px', 700, 0);">Isso funfa?</div>

    Thanks all!

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suggest you make sure that current_width and target_width are being reset correctly.

    Why do you make Opera use element.style.pixelWidth instead of element.offsetWidth?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Brazil
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Kravvitz,

    The problem seems to be the setInterval() it never stops! I tried different approachs to stop it, but none works. Is there some other way to stop the setInterval()?

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should check to see if the conditional in expand() ever evaluates to false.

    You didn't answer my previous question.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •