By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,361 Members | 1,700 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,361 IT Pros & Developers. It's quick & easy.

hide/show an iframe ?

P: n/a
Mel
i need to have 2 side by side iframes, a link on top of the one will
show/hide the other

can someone help me pleeeeezzzzz ?
Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a


Mel wrote:
i need to have 2 side by side iframes, a link on top of the one will
show/hide the other


An <iframe> element is an element like others, you can (in browsers like
IE 5+, Netscape 6+, Opera 7+) change its CSS display property e.g.
<iframe id="iframe1" src="whatever.html" ...></iframe>

function hideElement (element) {
if (element.style) {
element.style.display = 'none';
}
}

function showElement (element) {
if (element.style) {
element.style.display = '';
}
}

var iframe;
if (document.getElementById && (iframe =
document.getElementById('iframe1'))) {
hideElement(iframe);
}

--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #2

P: n/a
Mel
i tried:
<iframe id="ME" src="http://www.yahoo.com" frameborder=1></iframe>

<script>
function hideElement (element) {
if (element.style) {
element.style.display = 'none';
}
}

function showElement (element) {
if (element.style) {
element.style.display = '';
}
}

var iframe;
if (document.getElementById && (iframe = document.getElementById('ME'))) {
showElement(iframe);
}

</script>

<BR><BR>
<a href="#" onclick="javascript:hideElement('ME')">XXXXXXXXXXX X</a><BR><BR>

when i click on the link, the iframe will not hide, can you please help me ?

thanks a lot
"Martin Honnen" <ma*******@yahoo.de> wrote in message
news:42***********************@newsread2.arcor-online.net...


Mel wrote:
i need to have 2 side by side iframes, a link on top of the one will
show/hide the other


An <iframe> element is an element like others, you can (in browsers like
IE 5+, Netscape 6+, Opera 7+) change its CSS display property e.g.
<iframe id="iframe1" src="whatever.html" ...></iframe>

function hideElement (element) {
if (element.style) {
element.style.display = 'none';
}
}

function showElement (element) {
if (element.style) {
element.style.display = '';
}
}

var iframe;
if (document.getElementById && (iframe =
document.getElementById('iframe1'))) {
hideElement(iframe);
}

--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #3

P: n/a


Mel wrote:
i tried:
<iframe id="ME" src="http://www.yahoo.com" frameborder=1></iframe>

<script>
function hideElement (element) {
if (element.style) {
element.style.display = 'none';
}
}

function showElement (element) {
if (element.style) {
element.style.display = '';
}
}
</script>
<a href="#" onclick="javascript:hideElement('ME')">XXXXXXXXXXX X</a>


You need to find the right element object of course as the code above showed
<a href="#"
onclick="var iframe;
if (document.getElementById) {
iframe = document.getElementById('ME');
}
if (iframe) {
hideElement(iframe);
}
return false;">...</a>
--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #4

P: n/a
Mel
thanks a lot for your help. it works fine.

sorry for the next question, but i am a newbeee

i need my link to display "show" when the iframe is hidden and "hide" when
it is visible. i struggled with it for while and now i have "given up :-)"

if its not a bother, can you put me on the right path ?

thanks again

"Martin Honnen" <ma*******@yahoo.de> wrote in message
news:42***********************@newsread2.arcor-online.net...


Mel wrote:
i tried:
<iframe id="ME" src="http://www.yahoo.com" frameborder=1></iframe>

<script>
function hideElement (element) {
if (element.style) {
element.style.display = 'none';
}
}

function showElement (element) {
if (element.style) {
element.style.display = '';
}
}
</script>


<a href="#" onclick="javascript:hideElement('ME')">XXXXXXXXXXX X</a>


You need to find the right element object of course as the code above

showed <a href="#"
onclick="var iframe;
if (document.getElementById) {
iframe = document.getElementById('ME');
}
if (iframe) {
hideElement(iframe);
}
return false;">...</a>
--

Martin Honnen
http://JavaScript.FAQTs.com/

Jul 23 '05 #5

P: n/a
Mel wrote:
thanks a lot for your help. it works fine.

sorry for the next question, but i am a newbeee

i need my link to display "show" when the iframe is hidden and "hide" when it is visible. Have a span surrounding the anchor text that you would like to change.

<a href="javascript:HideFrame()">Hide Frame</a>

now becomes

<span id="sFrameAnchor"><a href="javascript:HideFrame()">Hide
Frame</a></span>

and
<script language="Javascript">
function HideFrame()
{
var obj = document.getElementById ('sFrameAnchor');
obj.innerHTML = '<a href="javascript:ShowFrame()">Show Frame</a>';
// Set the frame as invisible here - you have the code to do so
return;
}
function ShowFrame()
{
var obj = document.getElementById ('sFrameAnchor');
obj.innerHTML = '<a href="javascript:HideFrame()">Hide Frame</a>';
// Set the frame as visible here - you have the code to do so
return;
}
</script> i struggled with it for while and now i have "given up :-)"

if its not a bother, can you put me on the right path ?

thanks again

"Martin Honnen" <ma*******@yahoo.de> wrote in message
news:42***********************@newsread2.arcor-online.net...


Mel wrote:
i tried:
<iframe id="ME" src="http://www.yahoo.com" frameborder=1></iframe>
<script>
function hideElement (element) {
if (element.style) {
element.style.display = 'none';
}
}

function showElement (element) {
if (element.style) {
element.style.display = '';
}
}
</script>


<a href="#"
onclick="javascript:hideElement('ME')">XXXXXXXXXXX X</a>
You need to find the right element object of course as the code

above showed
<a href="#"
onclick="var iframe;
if (document.getElementById) {
iframe = document.getElementById('ME');
}
if (iframe) {
hideElement(iframe);
}
return false;">...</a>
--

Martin Honnen
http://JavaScript.FAQTs.com/


Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.