CSS / Alternative iframe linking - Help!

**Spring09** · 03-01-2009, 03:04 AM

Hi, I'm having a bit of trouble on a CSS iframe alternative. The image attached is what I like to produce. I've scoured a bit on the internet on how to produce an alternative, scrollable iframe in CSS -- that was the easy part. I'm just stumped on how to link multiple pages to display in the same window in CSS. I don't think the "target" tag applies here. So can anyone enlighten me?

Thanks for any help!

**Snookerman** · 03-01-2009, 07:40 AM

You can't do this with CSS, you will have to use a script language like JavaScript or PHP.

**molendijk** · 03-01-2009, 03:31 PM

Spring09,
If I understand you well, you want to load HTML in a div that functions like an iframe (but which is just a div).

Do this:
Create 'blank.html' and put nothing in it.
Create 'contact.html' and 'main.html' and put something in both files.

Now create a page, say 'includer.html', which contains the div that should function as an iframe. The page should look like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Extract</title>
<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">
<style type="text/css">
body{font-family:arial;font-size:12px}
</style>

<!--[if IE]>
<style type="text/css">
body{width:100%;height:95%;overflow-x:hidden}
html{overflow-x:hidden}
</style>
<![endif]-->


<script type="text/javascript">
document.write('<object  type="text/html" data="blank.html" width="0" height="0" name="object"><\/object>');

function Transfer_To(InternalId){
try{document.getElementById(InternalId).innerHTML=window.frames['object'].body.innerHTML;}
catch(e){document.getElementById(InternalId).innerHTML=window.frames['object'].document.body.innerHTML;}
}

function Load_External(url){frames['object'].location.replace(url)}

function Remove(tag,SomeClass) {
var els = document.getElementsByTagName(tag)
    for (i=0;i<els.length; i++) {
            if (els.item(i).className == SomeClass){
            while (els.item(i).firstChild)
            els.item(i).removeChild(els.item(i).firstChild);
    }
   }
  }
</script>
</head>
<body>

<div id="content" class="remove" style="position:absolute;top:2%;height:70%;width:80%;left:10%;overflow:auto;border:1px dashed red;display:block;padding:10px">
The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement <br>The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement <br>The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement <br>The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement <br>The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement <br>The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement <br>The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement <br>The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement <br>The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement <br>The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement <br>The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement <br>The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement <br>The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement <br>The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement <br>The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement <br>The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement <br>The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement <br>The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement <br>The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement <br>The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement <br>
</div>

<div style="position:absolute;float:left;top:77%;left:20%"><a href="#null" onmousedown="Load_External('main.html')" onclick="Remove('div','remove');Transfer_To('content');">main</a></div>

<div style="position:absolute;margin-left:46%;top:77%;"><a href="#null" onclick="window.location.reload()">start all over</a></div>

<div style="position:absolute;margin-left:70%;top:77%;"><a href="#null" onmousedown="Load_External('contact.html')" onclick="Remove('div','remove');Transfer_To('content');">contact</a></div><br><br>
</body>
</html>

That should work.
===
Arie Molendijk.

Thread: CSS / Alternative iframe linking - Help!

Thread Tools

Search Thread

CSS / Alternative iframe linking - Help!

Bookmarks

Bookmarks

Posting Permissions