Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Hide an iFrame until link is clicked

Posted on 2006-11-29
9
Medium Priority
?
1,608 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 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one 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…
Suggested Courses

916 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