 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
dareskog
Joined: 20 Oct 2009
Posts: 6
|
 Posted: Tue Oct 20, 2009 2:48 am iframe positioning along-side a div element instead of below |
 |
|
|
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: 2308
|
| Posted: Tue Oct 20, 2009 7:51 am |
|
|
|
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> |
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|
Forum Home
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
