...

View Full Version : How to replace iframes



NewbNeedHelp
01-26-2007, 04:44 PM
In the past, I've used an iframe as part of an image gallery. The user would click on the thumbnail and the target of that link would be the iframe. It makes for a neat and simple image gallery that is contained on one page. I know that iframes are being depreciated so I looked at Dynamic Drive CSS library model (http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/#thumb) but I don't like the fact that all the images have to be loaded at once (makes for high load times) not to mention the increased code. I was wondering if there was any way to emulate this, possibly using an object tag?

Here is a very simple version (that uses an iframe) of what I want to do: http://activities.fit.edu/aiaa/Test/FITUltimate/roster.htm

Thanks

1212jtraceur
01-26-2007, 05:37 PM
Try using an object element (http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.5) instead of your iframe. Your thumbnails would change the object's data attribute.



<script type="text/javascript">
function changeData(filePath)
{
document.getElementById('I1').data = filePath;
}
</script>

<div id="border">
<dl>
<dt>Officers</dt>
<dd onclick="changeData('theman.htm');">President: The man</dd>

<dd>Vice President: the other man</dd>
<dd>Treasurer: other other man</dd>
<dd>Captain: the other</dd>
<dd>Coach: the other other</dd>
<dt>Average Beings</dt>
<dd>Peasant1</dd>
<dd>peasant2</dd>
<dd>peasant3</dd>
<dd>peasant4</dd>
</dl>

<object id="I1" type="text/html" data="Rosterblank.htm" style="height: 420px; width: 520px;">
Your browser does not support object elements. Use a real browser, like <a href="http://mozilla.com/firefox/">Mozilla Firefox</a>
</object>

</div>

NewbNeedHelp
02-01-2007, 05:57 PM
I've been working with the above script, trying to get it to work. But due to my limited Javascript knowledge I can't figure it out. Anyone else know what to do?

neomaximus2k
02-03-2007, 10:52 PM
what is it you need the above script to do?

Arragon
02-04-2007, 10:50 PM
I am intrigued about using the object tag to include other files. In my tests it works wonderfully well in FF, I could include an assortment of images, text and html. But IE6 does not display the html, chokes on the images and generally fails.

Do you have any links or more how to info on using the object tag (on things other than applets and flash files which is all that google can apparently find.) Is IE6 incompatible with this technique?



<object data="includefile.html" type="text/html"></object>


Thanks

EDIT:
Well I jumped in too soon. I answered my own questions with some tinkering around.
IE requires that the height and width of the object be explicitly set. Otherwise you get a 1px object. I am still wrapping my head around the implications of this but it may cause problems for percentage based flowing layouts.

IE has other quirks as well. It will always try to insert a scrollbar and a border with each html doc. These can't be controlled from the main page style sheet, so the included file needs to have something like this in its style sheet:


body {
overflow:auto;
border:0;
}

NewbNeedHelp
02-07-2007, 01:00 AM
neomaximus2k,

I was hoping the above script would replace the data in an object. So that I could load different htm files into the object when the user clicked on the text. I wanted something that would work the same as targeting an iframe only without the iframe...

Thanks

Arbitrator
02-07-2007, 04:39 AM
I managed to create a script that turns an object element into an inline frame. It works fine in Firefox and Opera, but Iím not sure how to get it working in Internet Explorer. In that browser, the new object that I insert ends up being blank.

The top script is standards‐compliant. The second is for Internet Explorer.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-US">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Author" content="Patrick Garies">
<title>HTML 4.01 Strict Document</title>

<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body, div {
height: 100%;
}
html {
padding: 0 1em;
background-color: white;
color: black;
font: small-caps 16px/1.2 "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
ul {
padding: 1em 0 1em 2em;
}
a.intra-document {
color: red;
}
object {
display: block;
width: 100%;
height: 70%;
border: 1px solid black;
}
</style>

<script type="text/javascript">
document.defaultView.addEventListener("load", basic, false);

function basic() {
var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
if (anchors[i].className.match(/intra-document/)) {
anchors[i].addEventListener("click", function(e) {
e.preventDefault();
var object = document.createElement("object");
object.setAttribute("type", "text/html");
object.setAttribute("data", this.getAttribute("href"));
var objects = document.getElementsByTagName("object");
objects[0].parentNode.appendChild(object);
objects[0].parentNode.removeChild(objects[0]);
}, false);
}
}
}
</script>

<!--[if IE]>
<script type="text/javascript">
window.onload = IEbasic;

function IEbasic() {
var anchors = document.getElementsByTagName("a");
for (var i = 0; i < anchors.length; i++) {
if (anchors[i].className.match(/intra-document/)) {
anchors[i].setAttribute("rel", anchors[i].getAttribute("href"));
anchors[i].removeAttribute("href");
anchors[i].onclick = function(e) {
var object = document.createElement("object");
object.setAttribute("classid", "clsid:25336920-03F9-11CF-8FD0-00AA00686F13");
object.setAttribute("type", "text/html");
object.setAttribute("src", this.getAttribute("rel"));
var objects = document.getElementsByTagName("object");
objects[0].parentNode.appendChild(object);
objects[0].parentNode.removeChild(objects[0]);
}
}
}
}
</script>
<![endif]-->

</head>
<body>

<div>
<ul>
<li><a class="intra-document" href="http://www.webdevout.net/browser-support-html">Web Browser <abbr title="Hypertext Markup Language">HTML</abbr> Support</a></li>
<li><a class="intra-document" href="http://www.webdevout.net/browser-support-css">Web Browser <abbr title="Cascading Style Sheets">CSS</abbr> Support</a></li>
<li><a class="intra-document" href="http://www.webdevout.net/browser-support-dom">Web Browser <abbr title="Document Object Model">DOM</abbr> Support</a></li>
<li><a class="intra-document" href="http://www.webdevout.net/browser-support-ecmascript">Web Browser <abbr title="European Computer Manufacturers Association Script">ECMAScript</abbr> Support</a></li>
</ul>
<object type="text/html" data="http://www.webdevout.net/browser-support">
<a href="http://www.webdevout.net/browser-support">Web Browser Standards Support</a>
</object>
</div>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum