SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    expanding div won't open smoothly when nested

    Hi folks

    Need some help from CSS / JS gurus.

    I have some JS code that makes a div "grow and shrink".
    This works fine when the div is at not nested. (Top example). When the div is nested within another div acting as a container (used for overflows etc) the same code forces the div to jump between open and closed ? (Second example).
    I have to flick the "display" css attribute from none -> block and in the nested div this seems to cause the jumping behaviour

    This behaviour is apparent in Firefox 1.04 and Opera but not IE6.

    http://cgi.polymorphic-music.co.uk/p...ivs_test2.html

    TIA

  2. #2
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    Code:
    	if (divObj)
    	{
    		if (debug)
    			alert('found div'+divObj.id);
    			
    		if ((divObj.currentStyle || window.getComputedStyle(divObj, null)).display == 'none')
    			divObj.style.display = 'block';
    		else
    			divObj.style.display = 'none';
    		
    		/* remove the px or % suffix */
    		var regex=/px|%/gi;
    		// need to make it a number
    		var height = divObj.style.height;
    		height = parseInt(height.replace(regex,""));
    
    		if(height>=100&&div.state==0){div.state=1;return;}
    		if(height<=0&&div.state==1){div.state=0;return;}
    
    		var q;
    		if(div.state)
    			q=offset * -1;
    
    		if(!div.state)
    			q=offset;
    
    		height=height+q;
    		
    		/* cater for IE which will display a divs contents even if height == 0*/
    		if (debug)
    			alert(method+'changing CSS display');
    		
    		if (debug)
    			alert(method+'setting height ['+height+']');
    		divObj.style.height = height + '%';
    
    		if (debug)
    			alert(method+'set height on div '+divObj.id+' to ['+divObj.style.height+']');
    		t=setTimeout("changeHeight();",0);
    	}
    BTW, if you're the author of that polymorphic script, you can pass functions instead of strings into setTimeout and setInterval. That's a really useful feature, since strings can't be closures.

  3. #3
    SitePoint Member
    Join Date
    May 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Maian

    Thanks very much for the reply. Unfortunately this didn't seem to help ?
    I don't think the problem was about my method for getting the 'style' elements, but I need to do read more about this issue.

    Do you have any more suggestions ?

    Bear in mind it works perfectly for non contained divs.

    Thanks

  4. #4
    SitePoint Guru
    Join Date
    Feb 2005
    Posts
    602
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the problem stems from using height as a percentage. When you specify height as a percentage, the browser renders it as a percentage of the parent rendering object. The non-nested one's parent is the window/viewport (or the HTML document - not sure) itself. The nested one's parent is the collapsed div, and 100% of a collapsed div is still 0.


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
  •