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
Solved

Iframe taking up space :(

Posted on 2009-04-11
3
467 Views
Last Modified: 2012-05-06
Hi,
I have an invisible iframe on a page, but even though its invisible its taking up the space that it would take up when visible :(

I want it to be completly invisible and then when visible it should expand the page...
(code is below)
<html>
      <head>
            <meta  name="vs_targetSchema"  content="http://schemas.microsoft.com/intellisense/ie5">
            <script  id="clientEventHandlersJS"  language="javascript">
<!--
function ShowWebSite(val)
{
      document.all.myFrame.src=val;
      document.all.myFrame.style.visibility="visible";
}
 
function Button1_onclick() {
var v = document.all("txtWebSite").value;
ShowWebSite(v);
}
//-->
            </script>
      </head>
      <body>
            <iframe  id="myFrame"  frameborder="0"  vspace="0"  hspace="0"  marginwidth="0"  marginheight="0"
                  width="600"  scrolling="yes"  height="1000"  style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; Z-INDEX: 999; LEFT: 20px; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid;  visibility:hidden;">
            </iframe>
            <form  id="form1">
                  Enter website:<input  type="text"  id="txtWebSite"  NAME="txtWebSite"  value="http://www.yahoo.com">
                  <input  type="button"  value="Show"  id="Button1"  name="Button1"  onclick="return Button1_onclick()">
            </form>
      </body>
</html>

Open in new window

0
Comment
Question by:jumanj1
  • 2
3 Comments
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 200 total points
ID: 24122505
jumanj1,

Instead of visibility: hidden you need to use display.  The value is none to hide it and inline to show it (or clear the value).  E.g.

display: none;
display: inline;

Visibility doesn't remove it from the page; just hides it.

Let me know if you have any questions or need more information.

b0lsc0tt
0
 

Author Comment

by:jumanj1
ID: 24122621
Exactly what i was looking for, thanks!
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 24122680
Your welcome!  I'm glad I could help.  Thanks for the grade, the points and the fun question.
bol
0

Featured Post

How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

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

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
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…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

790 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