Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: iFrame alternative?

  1. #1
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default iFrame alternative?

    I'm designing a site and I just wanted some opinions on a problem I've encountered. You can see the site at www.bouncydave.co.uk

    The plan is that once one of the buttons at the top is clicked, the left hand menu brings through a separate menu in the left hand box. (The Number button would bring through a different menu to the Algebra button) Now previously I would have gone ahead and used iFrames but would like to know if there are any others (fairly simple!) options you could suggest. I dont want to get into the whole iFrame debate but if there is something else quite simple I would appreciate it! Just FYI the buttons on the top were created in Flash but dont think this will cause any further issues.

  2. #2
    Join Date
    Feb 2009
    Location
    Victoria, BC, Canada
    Posts
    303
    Thanks
    18
    Thanked 36 Times in 36 Posts

    Default

    EDIT: I don't have any suggestions about the IFrame issue, sorry.

    Change your image file types! BMP files are NOT for the web - use PNG, GIF or JPG.

    Where did you get the idea to use BMP files?
    Last edited by X96 Web Design; 03-04-2009 at 10:04 PM. Reason: Spaced out lines
    Alex Blackie, X96 Design
    My Website
    I specialize in: HTML5, CSS3, PHP, Ruby on Rails, MySQL, MongoDB, Linux Server Administration

  3. #3
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    I had changed the pics to jpg's and gifs but the pictures were really blurred so I left them as bitmaps! I've now changed them to png and they seem to look great and the file size is way smaller! Thanks for that! Anyone got any ideas about the iframe issue?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    The only 'easier' method is to make up duplicate pages save for the content you want to show.

    If you want something robust and more modular, use PHP or another server side language. But depending upon just how many other pages you would have, just using separate pages may be just as good.

    Other than that (separate pages), iframe is really the simplest for what you are describing. It has advantages and disadvantages over other methods. If well thought out, no javascript is required, iframe is relatively easy to design with. The drawbacks are that it makes it difficult for folks to bookmark your individual pages and that as a design element it is in the process of being deprecated so there are no standards for it across browsers and it may one day end up completely unsupported.

    AJAX is handy but requires javascript and is also not bookmark friendly. Many people like it though, as content can be imported without refreshing the main page. If well thought out, there can be good non-javascript fall back. It is at least a little more complicated than iframe.
    - John
    ________________________

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

  5. #5
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,382
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    You could use a text/html-object:
    <object type="text/html" data="some_file.html" style="...">
    <p>Fallback text</p>
    </object>

    Inside 'some_file.html', put (needed for IE):
    <style type="text/css">
    body{border:0; overflow:auto}
    </style>

    Doesn't work offline in IE (but OK online), so use Firefox for testing.
    ===
    Arie.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    In order to change its content, the object tag would require javascript I believe. It also has the drawback of being bookmark unfriendly.
    - John
    ________________________

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

  7. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,382
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    Quote Originally Posted by jscheuer1 View Post
    In order to change its content, the object tag would require javascript I believe.
    onclick (onmouseover etc.) ="frames['somename'].location.replace('somepage.html')"
    Quote Originally Posted by jscheuer1 View Post
    It also has the drawback of being bookmark unfriendly.
    So is the iframe (??).
    ===
    Arie.

  8. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,382
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    Or you could do this.
    ===
    Arie.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,076
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    molendijk,

    Read the thread. I already said that iframe had the drawback as regards bookmark. However, if you mean to imply that iframe requires javascript, you are wrong. Javascript may be used with it, as you have outlined, or in other ways, but it is not required. The target attribute, as deprecated (another iframe drawback I already mentioned) as the iframe itself, works just fine.

    I wasn't recommending iframe over object, actually I recommend neither, they both have problems. But for ease of use, iframe is good (not best by any means). I would rather see separate pages or a server side solution, even AJAX, though that has its drawbacks if not done well, which can be tricky - the original question stipulated that the alternative had to be easy.
    - John
    ________________________

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

  10. #10
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,382
    Thanks
    31
    Thanked 148 Times in 142 Posts
    Blog Entries
    34

    Default

    Muppetmaestro,
    You may want something like this:
    index.html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html >
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title></title>
    
    <script type="text/javascript">
    origURL = parent.document.URL; 
    contentURL = origURL.substring(origURL.indexOf('?')+1, origURL.length);
    if (top.location == contentURL)top.location.href='index.html?menu1.html';
    </script>
    
    <script type="text/javascript">
    if(/*@cc_on!@*/false)
    {//if IE
    document.write('<iframe  style="position:absolute;width:24%;left:2.5%;top:28%;height:400px;border:1px dashed red;background:#ffffff" frameborder=0 src="' + contentURL + '"><\/iframe>');
    }
    else
    {
    document.write('<object type="text/html"  style="position:absolute;width:24%;left:2.5%;top:28%;height:400px;border:1px dashed red;background:#ffffff" data="' + contentURL + '"><\/object>');
    }
    </script>
    
    </head>
    
    <body style="font-family:verdana;font-size:12px;background:silver;padding-left:30%;padding-top:20%">
    
    <div style="position:absolute;top:4%;left:30%;border:1px solid red;padding:15px;background:#ffffff">
    <a href="index.html?menu1.html" >Load menu 1 and change main page</a><br>
    <a href="index.html?menu2.html" >Load menu 2 and change main page</a><br><br>
    
    <a href="menu1.html" onclick="frames[0].location.replace(this); return false">Load menu 1 and don't change main page</a><br>
    <a href="menu2.html" onclick="frames[0].location.replace(this); return false">Load menu 2 and don't change main page</a>&nbsp;<br><br>
    <a href="somepage.html">Go somewhere else</a>
    
    </div>
    CONTENT
    </body>
    
    </html>
    menu1.html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title></title>
    
    <style type="text/css">
    html{overflow-x:hidden}
    body{padding:10px}
    </style>
    
    </head>
    <body >
    MENU 1<br>
    
    <a href="menu1.html" onclick="top.location.href=this">menu 1.html in its own window</a> <br>
    <a href="menu2.html" onclick="top.location.href=this">menu 2.html in its own window</a> <br> <br>
    
    <a href="menu1.html">menu 1.html in this very window</a> <br>
    <a href="menu2.html">menu 2.html in this very window</a> <br> <br>
    
    <a href="menu1.html" onclick="document.location.replace(this); return true">Load menu 1 and don't change main page</a><br>
    <a href="menu2.html" onclick="document.location.replace(this); return true">Load menu 2 and don't change main page</a><br>
    
    
    </body>
    </html>
    menu2.html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title></title>
    
    <style type="text/css">
    html{overflow-x:hidden}
    body{padding:10px}
    </style>
    
    
    </head>
    <body style="overflow-x:hidden">
    <span style="color:red">MENU 2</span><br>
    <a href="menu1.html" onclick="top.location.href=this">menu 1.html in its own window</a> <br>
    <a href="menu2.html" onclick="top.location.href=this">menu 2.html in its own window</a> <br> <br>
    
    <a href="menu1.html">menu 1.html in this very window</a> <br>
    <a href="menu2.html">menu 2.html in this very window</a> <br> <br>
    
    
    <a href="menu1.html" onclick="document.location.replace(this); return true">Load menu 1 and don't change main page</a><br>
    <a href="menu2.html" onclick="document.location.replace(this); return true">Load menu 2 and don't change main page</a><br>
    </body>
    </html>
    An object is used for non-IE. We have to use an iframe (deprecated) for IE (until they give better support for the object).
    DEMO here.
    ===
    Arie.

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
  •