HTML Help

dareskog · Joined: 20 Oct 2009 Posts: 6

Ive been trying to make the iframe load alongside the div element. So the div is on the left and the iframe appears alongside it on the right instead of it appearing below the "side bar" (div element).
Heres the code:
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#first {
width: 228px;
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript">
function ifrm(id,ref) {
var term = document.getElementById('srchterm').value;
if (term == '') { alert("Enter a Search Term");
document.mf.srchterm.focus();}
else if (id) document.getElementById(id).src=ref+term;
else { link = document.getElementById('fs').getElementsByTagName('a');
for(var i = 0;i<link.length-1;i++) {
frames[i].location.href=link[i]+term;
}
}
}
</script>
</head>
<body>
<div id="first">
<form name="mf" id="mf" method="post" action="" onSubmit="return false;" enctype="multipart/form-data">
<input type="text" name="srchtrem" id="srchterm" value="" size="18" maxlength="100" />
</form>
<a class="aspace" id="google" href="http://www.google.com/search?q=" alt="Search with Google" title="Search with Google" onclick="ifrm('goo',this.href); return false"> Google</a> <a class="aspace" href="http://www.altavista.com/web/results?q=" alt="Search with Alta Vista" title="Search with Alta Vista" onclick="ifrm('goo',this.href); return false"> Alta Vista</a> <a class="aspace" href="http://www.dogpile.com/info.dogpl/search/web/" alt="Search with Dogpile" title="Search with Dogpile" onclick="ifrm('goo',this.href); return false"> Dogpile</a> <a class="aspace" href="http://search.yahoo.com/search?p=" alt="Search with Yahoo!" onclick="ifrm('goo',this.href); return false"> Yahoo</a> <a class="aspace" href="javascript:ifrm()" alt="Search All" title="Search All" /> All</a></fieldset><br />
</div>
<iframe id="goo" scrolling="auto" frameborder="0" style="width:100%; height:78%" name="goo"></iframe>
</body>
</html>
</code>
any help would be awesome! been trying to work it out for ages but i think im just starting to confuse myself :S
Thanks again

sticks464 · Joined: 31 Dec 2006 Posts: 2311

100% height does not work for iframs and I haven't found any javascript that will dynamically resize the iframe for content not contained within the root directory. You can set a height but it will be different for each search result page.

Div and iframe is floated left and right to get them on the same line.

Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
#container {
padding:10px;
}
#first {
width: 228px;
float:left;
}
#goo {
float:right;
margin-left:20px;
width:950px;
display:inline;
overflow:visible;
}
.clearer {
clear:both;
height:1px;
}
</style>
<script type="text/javascript">
function ifrm(id,ref) {
var term = document.getElementById('srchterm').value;
if (term == '') { alert("Enter a Search Term");
document.mf.srchterm.focus();}
else if (id) document.getElementById(id).src=ref+term;
else { link = document.getElementById('fs').getElementsByTagName('a');
for(var i = 0;i<link.length-1;i++) {
frames[i].location.href=link[i]+term;
}
}
}
</script>

</head>

<body>
<div id="container">
<div id="first">
<form name="mf" id="mf" method="post" action="" onSubmit="return false;" enctype="multipart/form-data">
<input type="text" name="srchtrem" id="srchterm" value="" size="18" maxlength="100" />
</form>
<a class="aspace" id="google" href="http://www.google.com/search?q=" alt="Search with Google" title="Search with Google" onclick="ifrm('goo',this.href); return false"> Google</a> <a class="aspace" href="http://www.altavista.com/web/results?q=" alt="Search with Alta Vista" title="Search with Alta Vista" onclick="ifrm('goo',this.href); return false"> Alta Vista</a> <a class="aspace" href="http://www.dogpile.com/info.dogpl/search/web/" alt="Search with Dogpile" title="Search with Dogpile" onclick="ifrm('goo',this.href); return false"> Dogpile</a> <a class="aspace" href="http://search.yahoo.com/search?p=" alt="Search with Yahoo!" onclick="ifrm('goo',this.href); return false"> Yahoo</a> <a class="aspace" href="javascript:ifrm()" alt="Search All" title="Search All" /> All</a></fieldset><br />
</div>

<iframe id="goo" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0"></iframe>
<br class="clearer" />
</div>
</div>
</body>
</html>