Solved

Hide an iFrame until link is clicked

Posted on 2006-11-29
9
1,479 Views
Last Modified: 2012-05-05
Hello.
I recently made this page
http://www.eol.ucar.edu/cds/help.html
for my company.
Before I begin, let me state three things to make all of our life's easier and to satisfy your curiosity.
1. I am not a webdesigner, thus not that great at Javascript, just a simple SystemsAdmin.
2. You won't see the pages the three button links go to, because the links require you be inside our firewall :)
3. I know the page doesn't looks great under IE, but thats because we don't support it nor want anyone using it (FireFox ftw!)

Ok, so, lets roll!
As you can see by opening the page on the link provided, there are three main buttons that link to a web based help request system.
Those buttons have a target of "_iFrame" and just below them, there is an iFrame with the name "_iFrame".
The links all work, when you click them the iframe shows the content and cleats when you click clear frame, great, however the iFrame takes alot of space up.

Is there a javascript code I can use that will effectively hide the iframe until one of those buttons is clicked and again when Clear Frame is clicked?
Even if it is just changing the value of the height to 0 and back.
--Kelly
0
Comment
Question by:KellyCraig
  • 5
  • 2
  • 2
9 Comments
 
LVL 2

Assisted Solution

by:score_under
score_under earned 250 total points
ID: 18040414
This HTML will hide it, even though it is a bit crude. I had to change it to make it compatible with my browser :S.
Here it is:
<script>
function unhideframe()
{
iFr.style.width=300;
iFr.style.height=300;
}
</script>

code before it


<br>
<iframe src="http://www.google.co.uk" name="_iFrame" id="iFr" style="width:0;height:0;"></iframe>
<br>
<a href="javascript:void(0); //or anything else." onclick="unhideframe();">Link goes here</a><br>


code after it
0
 
LVL 2

Expert Comment

by:score_under
ID: 18040422
...and adapt a new function to make the height and width go to 0 again for the next link that makes it hide.
BTW google.co.uk was an example site.
0
 
LVL 4

Author Comment

by:KellyCraig
ID: 18040600
Hello.
So I did what you said, as seen if you go to the link again.
However it works great in FireFox, all that is required actually, but I feel bad that it doesn't even attempt to work in IE.
Is there a way to get it to just work in IE even if it isn't pretty?
If not, can javascript detect your browser and then re-direct you to an IE friendly page should you not be using FireFox?
--Kelly
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 3

Expert Comment

by:johnsy32
ID: 18054058
How about putting the iframe into the div tag and using the following javascript to show and hide each layer


<script type="text/javascript">

      function toggleIframe(target) {
      targetLayer = document.getElementById(target).style;
      targetLayer.display = (targetLayer.display == "none") ? "" : "none";

      }
</script>

<a href="javascript:toggleIframe('iframe1');">Help Iframe</a>
<a href="javascript:toggleIframe('iframe1');">Close Help Iframe</a>
<a href="javascript:toggleIframe('iframe2');">Web Iframe</a>
<a href="javascript:toggleIframe('iframe2');">Close Web Iframe</a>
<a href="javascript:toggleIframe('iframe3');">Admin Iframe</a>
<a href="javascript:toggleIframe('iframe3');">Close Admin Iframe</a>

<div id="iframe1" style="display: none;">IFRAME CODE HERE</div>

<div id="iframe2" style="display: none;">IFRAME CODE HERE</div>

<div id="iframe2" style="display: none;">IFRAME CODE HERE</div>
0
 
LVL 4

Author Comment

by:KellyCraig
ID: 18054337
No, that wont work as it could lead to multiple frames opened at the same time.
It also doesn't seem to work in IE7
0
 
LVL 3

Accepted Solution

by:
johnsy32 earned 250 total points
ID: 18055122
How about this...

Define the source of each of the pages in the JavaScript


      function updateIframe(target) {

      var source1 = "http://www.google.com";
      var source2 = "http://www.msn.com";
      var source3 = "http://www.yahoo.com";

                document.getElementById('iframeHolder').style.display = "";

      if (target == 1) {
      document.getElementById('theIframe').src = source1;}
      if (target == 2) {
      document.getElementById('theIframe').src = source2;}
      if (target == 3) {
      document.getElementById('theIframe').src = source3;}

      }

      function hideIframe() {
             document.getElementById('iframeHolder').style.display = "none";
      }

And the HTML something like

<a href="javascript:updateIframe(1);">Help</a><br />
<a href="javascript:updateIframe(2);">Web</a><br />
<a href="javascript:updateIframe(3);">Admin</a><br />
<a href="javascript:hideIframe();">Close Iframe</a><br />

<div id="iframeHolder" style="display: none;"><iframe src="http://www.google.com" id="theIframe" style="width:200;height:200;"></iframe></div>

Change settings for your needs
0
 
LVL 4

Author Comment

by:KellyCraig
ID: 18055652
http://www.eol.ucar.edu/cds/help-temp.html

Yea, your idea doesn't work so well :/
Sorry
0
 
LVL 4

Author Comment

by:KellyCraig
ID: 18055669
actually, hang on a sec
0
 
LVL 4

Author Comment

by:KellyCraig
ID: 18055687
nevermind!
Thank you so much!

having href="script" didnt work, sO i took out href and made it OnClick
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Sorting a string 1 29
how can i count words? 2 43
execute script based on HTML event 7 23
JavaScript behaviour different on local machine and network share 11 47
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question