Javascript DOM writes for <div>, <iframe> tags

[Strangeplant]

Hi,

I'm tryiing to place Javascript variables inside <div> and <iframe> tags and have not been able to get it working yet. Could someone tell me what I'm missing?

The normal html code would be this:

<div style="position: fixed; width:790px; height:510px; left:20%; top:120px;">
<iframe style="width:790px; height:510px; border:none;" class="imageframe" name="imageframe" id="imageframe" src="http://somewhere.com/image.jpg">

And I'm replacing all the hard-coded widths & heights with the numbers in the winSize properties h, w and t.

But this doesn't work and, oh yeah, I've tried a few others:

document.write('<div style="position:fixed; width:'+winSize.w+'px; height:'+winSize.h+'px; left:20%; top:'+winSize.t+'px;">');
document.write('<iframe style="width:'+winSize.w+'px; height:'+winSize.h+'px; border:none;" class="imageframe" name="imageframe" id="imageframe" src="http://somewhere.com/image.jpg">');

BTW, this is written by a php program and at the place I'm using it, I'm breaking out of php into html and wrapping it in the <script type="text/javascript"> </script> tags

[tech_support]

<script type="text/javascript">
function writeIntoDiv() {

document.getElementById('divname').innerHTML = 'content content'

}
</script>

[Strangeplant]

Thanks for your input. It got me on the right track. Well, I didn't get the exact same thing running, but I did do something similar:

    <script type="text/javascript">
    var winSize = null;
    window.onresize = windowResize;
    window.onload = windowResize;   
    function windowResize() {
	var changebar = document.getElementById('imageBar');
	var changediv = document.getElementById('imageDiv');
	var changeframe = document.getElementById('imageFrame');
	winSize = {
	     x: ( document.body.clientWidth ) ? document.body.clientWidth : window.innerWidth,
	     y: ( document.body.clientHeight ) ? document.body.clientHeight : window.innerHeight
	     }
	winSize.h = Math.ceil((winSize.y-80)*.9);
	winSize.w = Math.ceil(winSize.x*.8)-100;
	winSize.t = 90 + Math.ceil((winSize.y-90)/40);
	winSize.l = Math.ceil(winSize.x*.1)+100;
	changebar.style.height = winSize.h;
  	changediv.style.width = winSize.w;
  	changediv.style.height = winSize.h;
  	changediv.style.top = winSize.t;
  	changediv.style.left = winSize.l+'px';	
  	changeframe.style.width = winSize.w;
  	changeframe.style.height = winSize.h;
  	changeframe.style.top = winSize.t;
}	
</script>

And I just change the properties of the lines in the page, which are:

<div class="imageBar" name="imageBar" id="imageBar" style="float:left; overflow:auto; height:510px; width:90px; left:10%; top:120px">

and

<div class="imageDiv" name="imageDiv" id="imageDiv" style="position: fixed; width:790px; height:510px; left:20%; top:120px;">
	<iframe class="imageFrame" name="imageFrame" id="imageFrame" src="http://earth.engr.ccny.cuny.edu/noaa/wc/DailyGraphs/CurrentWeather000.jpg" style="width:790px; height:510px; border:none;" >
	</iframe>
</div>

So, it works pretty good in FF, but in IE looks like I have to allow for a smaller iframe in the div (?), but in Opera, things are bizarre! To get this running, looks like I need to detect browser type and do something different for each. What is the best method? Am I missing something on the way div works in IE? The test URL is: http://earth.engr.ccny.cuny.edu/noaa...DirSelect4.php , and the unmodified version is at:http://earth.engr.ccny.cuny.edu/noaa...ends/index.phpCould you suggest what to do? The goal is to get the page to look right in all browser resolutions. Once I get this working right, I'll go on to use these methods elsewhere.....

[jscheuer1]

It has been my experience that it is usually better to test for innerHeight before clientHeight and innerWidth before clientWidth.

Also, for IE you should check for documentElement:

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

winSize = {
             x: (window.innerWidth)? window.innerWidth : iecompattest().clientWidth,
	     y: (window.innerHeight)? window.innerHeight : iecompattest().clientHeight
	     }

[Strangeplant]

Thanks for your input, but this doesn't seem to make a difference, yet. Something else is going on. I think there are strange workings about in IE's <div> or <iframe> because the table on the left resizes the height properly in both IE and FF (and its inside a <div>), while the image in the <iframe> contained inside the next <div> is not resized in IE (but works perfectly in FF) and instead develops scroll bars making it impossible to see the entire image on smaller browser windows or when various toolbars and browser histories are on the screen (as it seems to be usual now [ugg]).

So, here I don't know what the real problem is, but it looks to me like both <div> are being resized correctly and the inner <iframe> style attribute is not performed on the image, or?

I'm hoping you can suggest something more to try........

The way it was before is at: http://earth.engr.ccny.cuny.edu/noaa...DirSelect4.php and with your change incorporated at: http://earth.engr.ccny.cuny.edu/noaa...DirSelect5.php

[jscheuer1]

When you have an iframe, you have a window object that is associated with it. This is a separate window object from the top window. The way any given browser treats this window object varies, especially as regards how images are displayed in it when the image itself is the source for the iframe.

When you have a regular window object, just one window and its source is an image file, most browsers now (this is a somewhat recent 'feature') do some sort of resizing if the image is too large for the window. Even how this is done though, varies from browser to browser. With an iframe window object, this is even less consistent.

Is this the sort of variation you are talking about?

[Strangeplant]

In my code above, I'm changing both the height and width of the <div> and the <iframe> inside it, depending on the screen area. In FF, things resize fine to fit the available window, whatever the size, but in IE, the image inside the <iframe> does not change when the properties change, only the <div> size changes, causing the image to be scrollable so the graph can't be seen entirely.

[jscheuer1]

A simple yes would have done, perhaps. Anyways, I think you are over complicating it. IE just doesn't do that. Some browsers do, IE is not one of them. If you want it to, you would need to put the image on a page and set its width to a percent. 100% would do. Example files -

The iframe:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<iframe src="image_size.htm" width="300" height="300" scrolling="auto" frameborder="1"></iframe>
</body>
</html>

image_size.htm:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<body>
<img src="some_real_big.jpg" width="100%">
</body>
</html>

[jscheuer1]

Here's a slightly more involved page combo as a demo:

http://home.comcast.net/~jscheuer1/s...me_im_size.htm

I must admit I haven't been paying close attention to all of the details of this thread but, is there any reason why you cannot just resize the image? I mean forget about the iframe. Have an image tag in its place and resize that tag's dimensions.

[Strangeplant]

Works fine now! You are totally right. I was very much over-complicating things. But then again, I didn't know that <img> tags had all of the style attributes and id's, and I should have because when I think about it now, its just another object, so why not? I got rid of the <div> and the <iframe> causing the problem, and did this:

	<img class="imageFrame" name="imageFrame" id="imageFrame" src="http://somesite.com/image.jpg" style="width:790px; height:510px; border:none; margin-left:5px" >
	</img>

and then in the function, had the size control:

    <script type="text/javascript">
    var winSize = null;
    window.onresize = windowResize;
    window.onload = windowResize;
       
    function windowResize() {
		var changebar = document.getElementById('imageBar');
	        var changeframe = document.getElementById('imageFrame');
		winSize = {
        	x: (window.innerWidth)? window.innerWidth : iecompattest().clientWidth,
	    	y: (window.innerHeight)? window.innerHeight : iecompattest().clientHeight
	    }
		winSize.h = Math.ceil((winSize.y-80)*.86);
		winSize.w = Math.ceil(winSize.x*.75)-100;
		winSize.l = Math.ceil(winSize.x*.1)+100;
		changebar.style.height = winSize.h;
  		changeframe.style.width = winSize.w;
  		changeframe.style.height = winSize.h;
	}
	
	function iecompattest() {
		return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
	}
		
	</script>

Of course, I see now that I could have left the <div> and the <iframe> and it would have worked if I were to name the <img> tag and resized its properties also. A triple overkill.

Thank you for your help and patience. I must remember to think in DOM.