HTML Iframe

I would move the SlideOne.html file into the same folder as your index.html file and change your src attribute to reflect the location.

<iframe src="SlideOne.html" width="100%" height="100%"></iframe>

I have tried that already unfortunately it does not work. @nik

Is your iframe nested inside a element like a div? Since the width and height is set to a percentage, maybe it's not showing because the container is not big enough? At this point if you have a demo or can post the code /w css I can take a look.

Yes it is nested, here is my code: HTML

<div id="specialBox">
  <iframe src="SlideOne.html" width="100%" height="100%"></iframe>
  <button onmousedown="toggleOverlay()">Close Overlay</button>
</div>

CSS

div#specialBox {
    display: none;
    position: relative;
    z-index: 3;
    margin: 150px auto 0px auto;
    width: 500px; 
    height: 300px;
    background: #FFF;
    color: #000;
}

nik

Okay, I put it into my codepen to see how it works and I'm able to get the iframe to show. I had to disable the display property in the css though and I see you have what looks like a button that functions as a reveal? well hope this helps

http://codepen.io/v90k/pen/EaLowb

I can get the frame too show outside of the overlay that the button reveals. Inside though, I can only display files which are not local like the dummy site you used. However, at the moment I need to display a local html file. Any ideas? Again, thank you so much. nik

No problem Steve it got me curious too. Since the trouble seems to be local, the only other suggestion I have would be developing your site using WAMP (I assume you're using a MAC from the path) to simulate a real webserver locally on your computer.

That should help troubleshoot problems as if the site was actually live. I use XAMPP to make dummy wordpress sites and fine tune it before uploading to a webserver and it works out pretty good. Beats doing live editing and updates.

If you are unfamilar with this, one of the courses here on Treehouse shows you how to set up and use this. Grrr I just can't find a direct link for you at the moment. They changed the courses around since I last took it.

I believe I made a mistake in taking out the display:none part. I have taken it out however this presents another problem. I am displaying the iframe inside a div overlay. The javascript code is the following for displaying the overlay when the button is clicked: Javascript

function toggleOverlay(){
    var overlay = document.getElementById('overlay');
    var specialBox = document.getElementById('specialBox');
    overlay.style.opacity = .8;
    if(overlay.style.display == "block"){
        overlay.style.display = "none";
        specialBox.style.display = "none";
    } else {
        overlay.style.display = "block";
        specialBox.style.display = "block";
    }
}

When the button is clicked toggleOverlay is called, and when you make the display: none, the overlay is displayed when the page is first loaded, not when the button is pressed.

Here is the CSS when the display is none, but the iframe shows:

CSS

div#specialBox {
    position: relative;
    z-index: 3;
    margin: 150px auto 0px auto;
    width: 500px; 
    height: 300px;
    background: #FFF;
    color: #000;
}

HTML

<div id="specialBox">
  <iframe src="SlideOne.html" width="100%" height="100%"></iframe>
  <button onmousedown="toggleOverlay()">Close Overlay</button>
</div>

nik

Again, thank-you for helping.

I believe I made a mistake in taking out the display:none part. I have taken it out however this presents another problem. I am displaying the iframe inside a div overlay. The javascript code is the following for displaying the overlay when the button is clicked: Javascript

function toggleOverlay(){
    var overlay = document.getElementById('overlay');
    var specialBox = document.getElementById('specialBox');
    overlay.style.opacity = .8;
    if(overlay.style.display == "block"){
        overlay.style.display = "none";
        specialBox.style.display = "none";
    } else {
        overlay.style.display = "block";
        specialBox.style.display = "block";
    }
}

When the button is clicked toggleOverlay is called, and when you make the display: none, the overlay is displayed when the page is first loaded, not when the button is pressed.

Here is the CSS when the display is none, but the iframe shows:

CSS

div#specialBox {
    position: relative;
    z-index: 3;
    margin: 150px auto 0px auto;
    width: 500px; 
    height: 300px;
    background: #FFF;
    color: #000;
}

HTML

<div id="specialBox">
  <iframe src="SlideOne.html" width="100%" height="100%"></iframe>
  <button onmousedown="toggleOverlay()">Close Overlay</button>
</div>

nik

Again, than-you for helping.

Hi Steven okay check this one out

http://codepen.io/v90k/pen/EaLowb

So when the page first loads the button only shows and when clicked, the iframe comes up. hopefully this helps.

nik The problem does not lie in actually displaying the iframe, but rather the contents. When I put a website in the iframe it works, however with a local html file, it comes up blank. Try you're code with a local html file in the iframe, and see what comes up in the iframe. What do you think? Thanks again.

Hi Steven,

I have tried it on my end and yes it works. I created two html files in the same folder. I inserted the iframe code on the index.html pulling up the other html file. I also tested it using XAMP and have the same results. I tested with Chrome and Firefox and it is able to pull the second html file into the iframe.

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Nik's Page</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
    </head>
<body>
  <div id="overlay">
    <div id="specialBox">
      <iframe src="testing.html" width="100%" height="100%"></iframe>
    </div>
 </div>
 <button onmousedown="toggleOverlay()">Close overlay</button>
 <script src="js/custom.js"></script>
</body>
</html>

testing.html

<!DOCTYPE html>
<html>
    <head>
        <title>Nik's Page</title>
    </head>
<body>
    <img src="images/geekwall.png">
    <p>THIS IS A TEST</p>
</body>
</html>

custom.js

function toggleOverlay(){
    var overlay = document.getElementById('overlay');
    var specialBox = document.getElementById('specialBox');
    overlay.style.opacity = .8;
    if(overlay.style.display == "block"){
        overlay.style.display = "none";
        specialBox.style.display = "none";
    } else {
        overlay.style.display = "block";
        specialBox.style.display = "block";
    }
}

style.css

#overlay {
  width: 100%;
  border: 1px dotted black;
}
#specialBox {
    display: none;
    position: relative;
    z-index: 3;
    margin: 0 auto;
    width: 500px; 
    height: 300px;
    background: #FFF;
    color: #000;
}

Have you tried using XAMPP or WAMP to develop your site? It simulates a webserver and displays your site as if it was on a live server. I think iframe has some limitations when trying to work with local file paths.

I used MAMP and it now works fine. Thank-you for your help. nik