Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Hide an iFrame until link is clicked

Posted on 2006-11-29
9
Medium Priority
?
1,575 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 2
  • 2
9 Comments
 
LVL 2

Assisted Solution

by:score_under
score_under earned 1000 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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 1000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

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…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

722 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