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 Coder
    Join Date
    Aug 2008
    Location
    Colfax, California USA
    Posts
    64
    Thanks
    3
    Thanked 5 Times in 5 Posts

    div layer dimensions = to image dimensions (that dramatically changes)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Blank</title>
    <style type="text/css">
    body, html {height:99%}
    #blank {border:2px solid;
    width:100px;
    }
    #test {height:100px;}
    </style>
    <script type="text/javascript">
    function blank()
        var test = document.getElementByName('test').height.;
        var x=document.getElementById('blank').style.height = ( test +"px");
        }
    </script>
    </head>
    <body>
    <div id="blank" onload="blank()"></div>
    <div id="test" name="test"></div>
    </body>
    </html>
    thats my attempt, but of course it doesn't work at all, I don't javascript much but if i could get this one function working that would be great! If anyone could help that would be really appreciated!

  • #2
    JUD
    JUD is offline
    New Coder
    Join Date
    Jul 2005
    Location
    I'm right here
    Posts
    92
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Here's something I've just put together. It sets the initial width and height of the container DIV to 0 and then changes it dynamically inside the function to the size of the images.

    The images are set to change every 5 seconds. Each image is a different size and the DIV element has a 4 pixel border so you can see it changing size as the images change.

    Code:
    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
     <!--
      #picHolder{
       width:0;
       height:0;
       padding:5px;
       border:4px solid #666666;
      }
     -->
    </style>
    <script type="text/javascript">
     //<![CDATA[
      var pic = new Array();
      
      function getImages(image1,image2,image3){
       var a = getImages.arguments;
       for(var i = 0; i < a.length; i++){
        pic[i] = new Image();
    	pic[i].src = 'images/' + a[i];;	
       }
      }
      
      getImages('image1.jpg','image2.jpg','image3.jpg');
      
      var picNo = 0;
      
      function changePic(){
       var oPic = new Object();
       
       oPic.parentDiv = document.getElementById('picHolder');
       oPic.pic = oPic.parentDiv.firstChild;
       
       oPic.pic.src = pic[picNo].src;
       oPic.parentDiv.style.width = oPic.pic.width + 'px';
       oPic.parentDiv.style.height = oPic.pic.height + 'px';
       
       picNo = (picNo < pic.length-1) ? picNo + 1 : 0;
       setTimeout(changePic, 5000);
      }
      
      window.onload = function(){
       setTimeout(changePic, 1000);
      };
     //]]>
    </script>
    </head>
    
    <body>
     <div id="picHolder"><img id="pic" src="" title="Various Images" /></div>
    </body>
    </html>
    You can see it working HERE

    Hope that's helped you out a bit.
    Last edited by JUD; 08-18-2008 at 03:41 AM.

  • #3
    New Coder
    Join Date
    Aug 2008
    Location
    Colfax, California USA
    Posts
    64
    Thanks
    3
    Thanked 5 Times in 5 Posts
    Thanks, your post showed me a little more insight on how javascript works but it didn't exactly show me what I need for my specific problem.

    my div layer is separate from my image.

    I want to use something like this:
    Code:
    var x=document.getElementById('div').style.height = ( image +"px");
    where image represents the height of a select image...I do I go about doing that, how do I define image?

  • #4
    JUD
    JUD is offline
    New Coder
    Join Date
    Jul 2005
    Location
    I'm right here
    Posts
    92
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Maybe if you describe exactly what you're trying to do, I or somebody else maybe able to help you more. i.e. why do you need the DIV element the same size as the image.

  • #5
    New Coder
    Join Date
    Aug 2008
    Location
    Colfax, California USA
    Posts
    64
    Thanks
    3
    Thanked 5 Times in 5 Posts
    I just show you cause it's kinda hard to explain...click here.
    [click on a image btw. It's my modified version of lytebox( i modified the js and css), not working in IE yet though(of course)]

    You see the image in the middle of the middle row..I want that div layer that it is in to be the same dimensions as the image next to it.. that way I can center the image inside of and still keep the resizing feature of the images.

    Yes you can center it with css, but only until the top row starts expanding, and vise-versa. I consider myself pretty knowledge when it comes to css and tricks, and I have tried everything using it and it does not work 100&#37;.
    Last edited by rhinodog8; 08-19-2008 at 12:22 AM. Reason: grammar


  •  

    Posting Permissions

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