iFrame alternative?

**muppetmaestro** · 03-04-2009, 10:43 PM

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.

**X96 Web Design** · 03-04-2009, 11:00 PM

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?

**muppetmaestro** · 03-05-2009, 09:22 AM

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?

**jscheuer1** · 03-05-2009, 10:55 AM

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.

**molendijk** · 03-05-2009, 12:44 PM

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.

**jscheuer1** · 03-05-2009, 02:54 PM

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

**molendijk** · 03-05-2009, 03:41 PM

Originally Posted by jscheuer1

In order to change its content, the object tag would require javascript I believe.

onclick (onmouseover etc.) ="frames['somename'].location.replace('somepage.html')"

Originally Posted by jscheuer1

It also has the drawback of being bookmark unfriendly.

So is the iframe (??).
===
Arie.

**molendijk** · 03-05-2009, 03:48 PM

Or you could do this.
===
Arie.

**jscheuer1** · 03-05-2009, 03:52 PM

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.

**molendijk** · 03-05-2009, 09:16 PM

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.

Thread: iFrame alternative?

Thread Tools

Search Thread

iFrame alternative?

Bookmarks

Bookmarks

Posting Permissions