...

View Full Version : div layer dimensions = to image dimensions (that dramatically changes)



rhinodog8
08-18-2008, 12:48 AM
<!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!

JUD
08-18-2008, 03:15 AM
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.



<!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 (http://www.hull101.co.uk/test_area)

Hope that's helped you out a bit.

rhinodog8
08-18-2008, 05:50 AM
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:

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?

JUD
08-18-2008, 11:29 PM
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.

rhinodog8
08-18-2008, 11:45 PM
I just show you cause it's kinda hard to explain...click here. (http://ryanh.110mb.com/wed.html)
[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;.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum