SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2006
    Location
    Colorado
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Javascript animation problem (different OP)

    Hi all,

    I am trying to create a fun navigation for my site. The HTML and javascript code is below. I have tried to comment the javascript as much as possible to help you help me. Here is the problem as clearly as I can describe it. I have a container element that has a height controlled by CSS to be larger than the content it holds when the page loads. It is larger because I am using CSS to hide some of the content within. When the script below runs, I need the container element to expand to accomodate the expansion. As I see it, this can be done one of two ways.

    1. Learn what the exentual size of the contaner needs to be and grow it to that height.
    2. Let the content expand until it is about to spill over the edge of the container, and then set the height of the container to auto.

    I have tried both methods. I have failed at both. Here's why.

    1. I cannot find a way to learn what the eventual height of the container will be. You can see in the middle of the script I designate a "Testing area" where I set the height of the paragraphs to block and then try to get a quick read of what the clientHeight of the container is. As you can see from the comments, this doesn't work.
    2. The only way I can think to accomplish this would be to add up the height of all the elements contained within the container and compare than to the clientHeight. There must be a better way.

    I just realized I didn't mention the problem I am trying to solve. The script below works fine. The problem is that when I set the height of the container to auto, the bottom snaps up before growing out again creating an annoying flicker effect.

    Anyway, thanks for even caring enough to read all this. I would really appreciate any help.

    Thanks much,
    swani
    P.S. I looked all over the FAQ for intructions on how to enter the javascript to be color coded and couldn't find the answer. I have seen it done so I know it is possible. But there is nothing here.

    HTML Code:
    <li class="card" id="websites" style="height:165px; left:10px; top:175px; width:128px"><a href="index.asp?p=websites">Websites</a>
            <ul>
              <li><a href="index.asp?p=new_stuff">New Stuff</a>
                <p>This is some of the stuff I have done that represents my current skill set. They are all coded using best practices. If you want to see what I can create for you, start here.</p>
              </li>
              <li><a href="index.asp?p=old_stuff">Old Stuff</a>
                <p>Have you ever looked back at something you did when you were first starting out and thought, "wow, I have come a long way"? This is like that for me. So, there are only a few of these that I want to show but each for a specific reason.</p>
              </li>
            </ul>
          </li>
    Code:
    // Using timeouts so the variables have to be global.
    var containerElem, elemArray;
    function expandElements(tagToExpand, elementID) {
    	// First we get the element that holds the items that we want to expand.
    	containerElem = document.getElementById(elementID);
    	// It needs to be able to expand with the content so we set height to auto.  This is the beginning of the problem
    	containerElem.style.height = 'auto';
    	// Then we get an array with all the elements to be expanded inside the container.
    	elemArray = containerElem.getElementsByTagName(tagToExpand);
    	// Now loop through the elements.
    	for (j = 0; j < elemArray.length; j++) {
    		// In the CSS the display is none, so we undo that here.
    		elemArray[j].style.display = 'block';
    		// The this is just an attempt at getting an accurate ending clientHeight.  
    		// Begin Testing Area.
    		elemArray[j].style.visibility = 'visible';
    		elemArray[j].style.position = 'relative';
    		if (j == elemArray.length-1) {
    			setTimeout('alert(\'Immediate:\' + ' +containerElem.clientHeight+')', 2000);  // This alerts the clientHeight at the time the script is running. It doesn't match the next one.
    			setTimeout('alert(\'Delayed:\' + containerElem.clientHeight)', 3000); // This alerts the final clientHeight.  It's right.			
    		}
    		// The attempt failed but we still have to put it back the way it started.
    		elemArray[j].style.visibility = 'hidden';
    		elemArray[j].style.position = 'absolute';
    		// End testing.
    		for (var k=1; k<=10; k++) {
    			// So in order to animate we look through setting the height to progressively higher precentage of the total.
    			setTimeout('elemArray['+j+'].style.height = ' + parseInt(elemArray[j].clientHeight*(k/10)) + ' + \'px\'', k*30);			
    			// And once we have the timeouts set we set the height to 0 and make them visible and relatively positioned so they'll be visible when they grow.
    			if (k == 10) {
    				elemArray[j].style.height = '0';
    				elemArray[j].style.visibility = 'visible';
    				elemArray[j].style.position = 'relative';				
    			}
    		}
    	}
    	// This is where I was trying to make the container grow.  See explanation in post.
    	for (i = 1; i <= 10; i++) {
    		//setTimeout('document.getElementById(\'feedback\').innerHTML += elem.clientHeight +\' || \'+  elem.style.height + \'<br>\'', i*50);
    		setTimeout(function() { if (containerElem.clientHeight > parseInt(containerElem.style.height)+20) containerElem.style.height = 'auto';  }, i*50);
    	}
    }
    Last edited by swani; Apr 17, 2009 at 15:09.


Tags for this Thread

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
  •