Results 1 to 10 of 10

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

  1. #1
    Join Date
    Feb 2006
    Posts
    225
    Thanks
    7
    Thanked 3 Times in 3 Posts

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

    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:
    Code:
    <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:
    Code:
    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

  2. #2
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    Code:
    <script type="text/javascript">
    function writeIntoDiv() {
    
    document.getElementById('divname').innerHTML = 'content content'
    
    }
    </script>
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

  3. #3
    Join Date
    Feb 2006
    Posts
    225
    Thanks
    7
    Thanked 3 Times in 3 Posts

    Default

    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:
    Code:
        <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:
    Code:
    <div class="imageBar" name="imageBar" id="imageBar" style="float:left; overflow:auto; height:510px; width:90px; left:10%; top:120px">
    and
    Code:
    <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.....

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    function iecompattest(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
    }
    Code:
    winSize = {
                 x: (window.innerWidth)? window.innerWidth : iecompattest().clientWidth,
    	     y: (window.innerHeight)? window.innerHeight : iecompattest().clientHeight
    	     }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Feb 2006
    Posts
    225
    Thanks
    7
    Thanked 3 Times in 3 Posts

    Default

    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

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Feb 2006
    Posts
    225
    Thanks
    7
    Thanked 3 Times in 3 Posts

    Default

    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.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <!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:

    Code:
    <!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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Feb 2006
    Posts
    225
    Thanks
    7
    Thanked 3 Times in 3 Posts

    Default

    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:
    Code:
    	<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:
    Code:
        <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.

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
  •