Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Apr 2004
    Location
    Chuluota, FL
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question trouble with dynamic sizing of nodes

    I am dynamically outputting a list of <dl> elements that i am displaying in a grid with css float. One of the elements contained in the <dl> is an image, which is a variable size. Here's the essential html structure of each <dl>.

    Code:
    <dl class="IDG_product">
      <dt>name</dt>
      <dd><a href="page.asp"><img src="img.jpg"></a></dd>
      <dd class="IDG_itemNumber">A230</dd>
      <dd class="IDG_productPrice">$4.50</dd>
    </dl>
    The variable height image is causing the height of the entire <dl> to vary, throwing off the float. To fix this I'm attempting to resize all the <dl>s to the height of the largest one in the set. This code below works fine in IE 6, but has no effect in Mozilla 1.6. I suspect IE is once again fooling me into thinking I've written compliant code by being too forgiving. What is the proper way to set a height/width of a node after retrieving it's offsetWidth/Height?

    Code:
    function sizeProductContainers()
    {
       if (document.getElementById)
       {
          var maxHeight = 0;
          var maxWidth = 0;
          var navRoot = document.getElementById("IDG_productList");
          for (i=0; i<navRoot.childNodes.length; i++) 
          {
             node = navRoot.childNodes[i];
             if (node.className == "IDG_product")
             {
                if (node.offsetHeight > maxHeight)
                   maxHeight = node.offsetHeight;
    				
                if (node.offsetWidth > maxWidth)
                   maxWidth = node.offsetWidth;
             }
          }
    	
          for (i=0; i<navRoot.childNodes.length; i++) 
          {
             node = navRoot.childNodes[i];
             if (node.className == "IDG_product")
             {
                node.style.height = maxHeight;
                node.style.width = maxWidth;
             }			
          }
       }						
    }
    
    window.onload = sizeProductContainers;
    Bill Lefler
    Intelligent Design Group

  • #2
    New to the CF scene
    Join Date
    Apr 2004
    Location
    California, USA
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    offsetHeight

    offsetHeight is not a standard property in the DOM.

    Instead of using the offsetHeight of the child nodes (dt and dd), why not obtain a reference to the img node and check the height property of the image directly?

    If you are outputting the img files from some sort of database on the server side, you could also obtain / store the image dimensions and specify height and width attributes as you output the lists.

  • #3
    New to the CF scene
    Join Date
    Apr 2004
    Location
    Chuluota, FL
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually I was considering modifying the image margin instead of the <dl>... I think it would look better.

    OffsetHeight aside (I see now the Dom Level 0 notation), why does setting the style.height on the <dl> not have any effect?
    Bill Lefler
    Intelligent Design Group

  • #4
    New to the CF scene
    Join Date
    Apr 2004
    Location
    California, USA
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'd want to see the CSS you're using before I could comment on that.

    I agree about setting the margin on the images instead of sizing the dl.

  • #5
    New to the CF scene
    Join Date
    Apr 2004
    Location
    Chuluota, FL
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, I changed the code to modify the margins of the images instead of the DLs. Once again though, I have the same problem. The code works in IE 6, but not in Mozilla 1.6. Putting an alert in the function shows that it is being called during the onload. When the alert pops, I can see all the page elements correctly. Is there something I'm missing with Mozilla on the onload timing or something?

    Here's the new function:
    Code:
    function sizeProductContainers()
    {
    	if (document.getElementById)
    	{
    		var maxHeight = 0;
    		var maxWidth = 0;
    
    		var imgNodes = document.getElementById("IDG_productList").getElementsByTagName("img");
    
    		for (i=0; i<imgNodes.length; i++) 
    		{
    			node = imgNodes[i];
    			if (node.height > maxHeight)
    				maxHeight = node.height;
    				
    			if (node.width > maxWidth)
    				maxWidth = node.width;				
    		}
    		
    		for (i=0; i<imgNodes.length; i++) 
    		{
    			node = imgNodes[i];
    			
    			node.style.marginTop = (maxHeight - node.height) / 2 + Mod(maxHeight - node.height, 2);
    			node.style.marginBottom = (maxHeight - node.height) / 2;
    			node.style.marginLeft = (maxWidth - node.width) / 2 + Mod(maxWidth - node.width, 2);
    			node.style.marginRight = (maxWidth - node.width) / 2;	
    		}
    	}						
    }
    
    function Mod(a, b) 
    {
    	return a - Math.floor(a / b) * b;
    }
    Bill Lefler
    Intelligent Design Group


  •  

    Posting Permissions

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