Solved

Hide an iFrame until link is clicked

Posted on 2006-11-29
9
1,457 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
Comment Utility
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
Comment Utility
...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
Comment Utility
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
 
LVL 3

Expert Comment

by:johnsy32
Comment Utility
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 4

Author Comment

by:KellyCraig
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
actually, hang on a sec
0
 
LVL 4

Author Comment

by:KellyCraig
Comment Utility
nevermind!
Thank you so much!

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

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

772 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now