how to create a frame in HTML page

Forum Moderators: open

Message Too Old, No Replies

how to create a frame in HTML page

gracequeen

7:33 am on May 10, 2004 (gmt 0)

how to create a frame in a HTML page(main.html) without changing to another page? I know usually if i need to create a frameset, i will have to create another HTML page to insert all these frame, but now i wish to click on buttons on main.html, then the frames will appear somewhere in main.html. i mean there r few buttons there in main.html, each of the button will create 1 frame, if i click on 2nd button, the 2nd frame will appear, n the 1st frame will still stick on the main.html.

it's it possible to do so? and how?

thanks...

grace ^_^

Rambo Tribble

1:13 pm on May 10, 2004 (gmt 0)

I think you will find iframes (independent frames) will do what you want.

birdbrain

2:01 pm on May 10, 2004 (gmt 0)

Hi there gracequeen,

You may find this mildly interesting ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>hidden Iframes</title>
<style type="text/css">
/*<![CDATA[*/
html, body {
width:100%;
height:100%;
margin:0;
}
#divOne {
width:20%;
height:100%;
position:absolute;
left:0;
top:0;
background:#aaaaff;
text-align:center;
}
#divTwo {
width:80%;
height:100%;
position:absolute;
left:20%;
top:0;
background:#cccccc;
}
#frameOne {
width:100%;
height:50%;
position:absolute;
left:0;
top:0;
display:none;
}
#frameTwo {
width:100%;
height:50%;
position:absolute;
left:0;
top:50%;
display:none;
}
button {
width:100px;
margin-top:10px;
}
p {
padding:40px;
font-family:arial;
font-size:18px;
textalign:justify;
}
/*//]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function iframeDisplay(url,id) {
document.getElementById(id).style.display="block";
document.getElementById(id).src=url;
}
function iframeHide(url,id) {
document.getElementById(id).style.display="none";
document.getElementById(id).src=url;
}
//]]>
</script>
</head>
<body>
<div id="divOne">
<button onclick="iframeDisplay('http://www.w3schools.com','frameOne')">open w3schools</button><br />
<button onclick="iframeHide('','frameOne')">close w3schools</button><br />
<button onclick="iframeDisplay('http://www.webmasterworld.com/forum91','frameTwo')">open this</button><br />
<button onclick="iframeHide('','frameTwo')">close this</button>
</div>
<div id="divTwo">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus. Integer massa
libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos. Suspendisse potenti. Nunc vulputate magna non magna. Aenean l
orem eros, adipiscing quis, semper non, dictum a, nunc. Curabitur ut sem. Pellentesque a est id neque
hendrerit ultrices. Donec vulputate tincidunt turpis. Curabitur dignissim vestibulum nunc. Aliquam felis lorem,
ultrices sit amet, convallis a, accumsan vel, ante. Proin aliquam turpis sed augue. In pellentesque, magna a
pulvinar adipiscing, est orci adipiscing felis, sed laoreet urna magna quis neque. Proin facilisis aliquet urna.
</p><p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Sed cursus
feugiat mauris. Aenean pharetra purus a augue varius gravida. Aliquam gravida nibh ut nunc. Integer tortor
risus, posuere eget, rutrum non, semper a, tellus. Phasellus faucibus, elit nec egestas adipiscing, sapien
sapien lacinia nulla, et bibendum metus neque fermentum sapien. Etiam ante dui, tincidunt ac, auctor eu,
aliquet non, velit. Mauris enim libero, malesuada at, dignissim vitae, lobortis ut, enim. Sed porttitor consequat
eros. Morbi nec risus vitae diam sodales accumsan. Praesent ultrices magna sit amet enim. Proin convallis
ipsum non dolor. Donec eu tellus. Nam ut magna.
</p>
<iframe id="frameOne" name="frameOne"></iframe>
<iframe id="frameTwo" name="frameTwo"></iframe>
</div>
</body>
</html>

birdbrain

vkaryl

11:58 pm on May 10, 2004 (gmt 0)

Hi there birdbrain (and you are ANYTHING BUT!) My name's not gracequeen, but I do thank you very much for this nifty example of something I've been beating MY birdbrain against for a while.

Bless you my child....

gracequeen

10:32 am on May 11, 2004 (gmt 0)

thanks, buddies....

i have try so many method to solve the prob... but still not working....

currently i try to use this code, but i think the combination of 2 function is still having some prob.....

the code that i have apply in flash button:
---------------------------------
Code:

on(release) {
// change thisVar for each button
thisVar=1
getURL("java script:setVar('"+thisVar+"');");
}

------------------------------------------------------------------------------
and the html:

Code:
<HTML>
<script language="JavaScript">
var i = 0;
function deleteIframe () {
i--;
if (document.all)
document.all['iframe' + i].outerHTML = '';
else if (document.getElementById) {
var ifr = document.getElementById('iframe' + i);
ifr.parentNode.removeChild(ifr);
}
}
function addIframe () {
if (document.all)
document.body.insertAdjacentHTML('beforeEnd',url);
else if (document.getElementById) {
var ifr = document.createElement('IFRAME');
ifr.src = url;
document.body.appendChild(ifr);
}
}
</script>
<script language="JavaScript">
//detect which flash button have been clicked 1st
function setVar(id) {
var thisVar=id;
var ifr = document.createElement('IFRAME');
if(id==1){
document.getElementById.addIframe();
ifr.src="guide.html";
}else if (id==2){
document.getElementById.addIframe();
ifr.src="distance.html";
}else{
document.getElementById.addIframe();
ifr.src="both.html";
}
}

</script>

<HEAD>
<meta http-equiv=Content-Type content="text/html; charset=ISO-8859-1">
<TITLE>Enrich - MAS Frequent Flyer Programme</TITLE>
</HEAD>

<BODY bgcolor="#FFFFFF" topmargin="50">
<table cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td align="left">
<font face="arial" size="2"><b>ENRICH Product Training</b> - <i>Calculating Points from Flights</i></font>
</td>
<td rowspan="3"><img src="white.jpg"></td>
<td align="right">
<font face="arial" size="1">Page ID: 0003MAS_P02_05_0</font></td>
</tr>
</table>

<table cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td rowspan="3"><img src="left_border.jpg"></td>
<td valign="top"><img src="top_border.jpg"></td>
<td rowspan="3"><img src="right_border.jpg"></td>
</tr>
<tr>
<td><OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
WIDTH="600" HEIGHT="400" id="0003MAS_P02_05_0" ALIGN="">
<PARAM NAME=movie VALUE="0003MAS_P02_05_0.swf">
<PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=best>
<PARAM NAME=scale VALUE=exactfit>
<PARAM NAME=devicefont VALUE=true>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="0003MAS_P02_05_0.swf" quality=best scale=exactfit devicefont=true bgcolor=#FFFFFF WIDTH="600" HEIGHT="400" NAME="Mas=""
TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT></td>
</tr>
<tr>
<td valign="bottom"><img src="bottom_border.jpg"></td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td></td>
<td align="right"><font face="arial" size="1">[ <a href="page1.html">Home</a> ¦ <a href="page1.html">Previous</a> ¦ Next ]</font></td>
</tr>
</table>

</BODY>

</HTML>

anyone can help on this?