iframes?Do you know about it? help me then

nerssi · September 22nd, 2004, 01:36 AM

hi all,
I guess I need to know all about iframes
can you give me a hint
Is there any link containing a pervasive and easy to learn
article about the matter?
Or do you have a very very simple tiny example of how to show and hide an iframe which has a html inside its src property and how to set its style and etc.(for example removing scrolling)?
I tried to give the iframe an id and call its methods and set its properties through that id but although microsoft script editor recognizes the id and its properties while editting the page, openning the page causes an undefined error for the iframe id I use in the script.I don't know why?help me out
Maybe what I'm looking doesn't exist, cos I know nothing about iframes and their use at all...

qazi_nomi · September 22nd, 2004, 02:04 AM

You can get it from here

http://www.google.com/search?hl=en&ie=UTF-8&q=iframe

Numan
--------------------------------------------------
Love is the most precious thing of this world. So find it and grab it!

nerssi · September 22nd, 2004, 09:07 AM

Nobody told me about the great scholar in wrox forums who has such a great sense of humor.
what a bright solution.
I can see the properties of iframe myself in any editor, how can I change them dynamically?
when I'm saying I don't know their use, it doesn't mean I haven't even tested them putting them
one a pege...

ChrisScott · September 22nd, 2004, 10:07 AM

Hi nerssi,

The following works for me

Code:

var f = document.getElementById("myIframe");
f.scrolling = "no";
f.frameBorder = "no";
f.outerHTML = f.outerHTML;

I have no idea why, maybe someone else can chip in, but in IE it won't work unless you add the line f.outerHTML = f.outerHTML; (it works fine without this line in Mozilla of course).

You can hide the frame using style.display = "none" & show it again with style.display = "inline"

HTH,

Chris

nerssi · September 25th, 2004, 10:51 AM

Thanks Chris:

Since I didn't manage to get the answer in time, I was forced to do it another way again.
I just put the iframe in a table cell and worked with the style.visibility of the table inorder to show and hide it.Putting the whole thing in another table cell resulted in a very neat menu showing another DHTML page in case it was clicked.
Since it took me a long time to find this piece of simple code I share
it in case someone might need:

Here's the whole code.You should just change the src property of iframe for your DHTML page and set the other iframe properties accorting to the properties of your inserted page.
The tough part was the event handling of the button oppening the iframe
which I wanted to resemble window's menus.I had to use so many flags sorry for the lack of any documentation.

<html>
<head>
<meta name=vs_targetSchema content="HTML 4.0">
<style>
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue
        background-color: #456789;
}
table.menu
{
background-color: #456789;
font-size:100%;
position:absolute;
visibility:hidden;
}
.demo{
cursor=pointer;
background-color=white;
}
</style>
<script type="text/javascript">
var status=1;
flag=0;
function showmenu(elmnt)
{
document.demo.all(elmnt).style.visibility="visible ";
}
function hidemenu(elmnt)
{
document.demo.all(elmnt).style.visibility="hidden" ;
}
function showHide(obj){
//alert("before showHide"+obj);
if(status==1){
   showmenu(obj);
   status=0;
   flag=0;
   }
else{
   hidemenu(obj);
   status=1;
   }
//alert("after showHide");
}
window.attachEvent("onload",hide);
function hide(){

showmenu('calendar');

hidemenu('calendar');
//alert("after load");
}

function out(){
//alert("before out");
if(flag==1){
hidemenu('calendar');
status=1;
}
flag=1
//alert("after out");
}
</script>
</head>

<body>
<form name="demo" onmouseup="out('calendar');" >
<h3>Drop down menu</h3>
<table width="5%" cellspacing="0" class="demo" border=0 height="5px" cellpadding="0">
<tr bgcolor="white" >
  <td onmouseup="showHide('calendar')" height="25" valign="center">
   <img src="datebutton.jpg" >
   <td>
   <br>
   <table class="menu" id="calendar" width="188px" cellspacing="0" cellpadding="0" border="0">
    <tr>
       <td class="menu" ><iframe name="aframe" src="calendarEnhanced.htm" bgcolor="black" width="188px" marginwidth="0" marginheight="0" hspace="0" frameborder="0" scrolling="no" height="145px"></iframe></td>
    </tr>
   </table>
   <td>
  </td>
  <td valign=top align="#D5E3F0">
  <input type="text" id="dateTextBox" name="dateTextBox" value="">
  </td>
</tr>
</table>
<p>press the button to see the drop down calander</p>
    12334531233453123345312334531233123345312334531233 453453
<br>1233453123345312334531233453123345312334531233 4531233453
<br>1233453123345312334531233453123345312334531233 4531233453
<br>1233453123345312334531233453123345312334531233 4531233453
<br>1233453123345312334531233453123345312334531233 4531233453
<br>1233453123345312334531233453123345312334531233 4531233453
<br>1233453123345312334531233453123345312334531233 4531233453
<br>1233453123345312334531233453123345312334531233 4531233453
<br>1233453123345312334531233453123345312334531233 4531233453
<br>1233453123345312334531233453123345312334531233 4531233453
<br>1233453123345312334531233453123345312334531233 4531233453
<br>1233453123345312334531233453123345312334531233 4531233453
<br>1233453123345312334531233453123345312334531233 4531233453
<br>1233453123345312334531233453123345312334531233 4531233453
<br>1233453123345312334531233453123345312334531233 4531233453
<br>1233453123345312334531233453123345312334531233 4531233453
<br>1233453123345312334531233453123345312334531233 4531233453
</form>
</body>

</html>