Advanced Search

Results 1 to 2 of 2

Thread: resize iframe to loading image height/width

  1. #1
    Join Date
    Jul 2006
    Posts
    64
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Default resize iframe to loading image height/width

    I'm loading images directly into an iframe to embed on a page. is it possible to resize the iframe to the height/width of the loading jpg? the script i'm using is a flash image slider so its using the iframe name tag to output the image large image when clicked. I would love to be able to use a DIV tag but it doesn't have a name property that I can use.

    HTML Code:
    <iframe name="imgdisplay" id="imgdisplay" style="float: middle" border="0" frameborder="0" scrolling="no" width="600px" height="515px">
    </iframe>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,684
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    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">
    <style type="text/css">
    #image_frame {
    border-top:2px solid #666666;
    border-right:2px solid #dddddd;
    border-bottom:2px solid #dddddd;
    border-left:2px solid #666666;
    }
    </style>
    <script type="text/javascript">
    function frame_image(im){
    var wf='image_frame', fr=document.getElementById(wf), nim=new Image(),
    doit=function(){window.frames[wf].location.replace(nim.src); fr.width=nim.width; fr.height=nim.height;};
    nim.onload=doit;
    nim.src=im;
    }
    onload=function(){window.frames['image_frame'].location.replace('about:blank');};
    </script>
    </head>
    <body>
    <iframe id="image_frame" name="image_frame" src="about:blank" width="300" height="300" scrolling="no" marginheight="0" marginwidth="0" frameborder="1"></iframe>
    <br>
    <a href="image1.jpg" onclick="frame_image(this.href);return false;">Test 1</a>
    <br>
    <a href="image2.jpg" onclick="frame_image(this.href);return false;">Test 2</a>
    <br>
    <a href="image3.jpg" onclick="frame_image(this.href);return false;">Test 3</a>
    
    </body>
    </html>
    Added Later:

    There is no style:

    float:middle;
    Last edited by jscheuer1; 07-24-2007 at 08:07 AM. Reason: add info/fix ie box model bug
    - John
    ________________________

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

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
  •