Skip to content

Instantly share code, notes, and snippets.

@leowebguy

leowebguy/index.html

Last active October 7, 2024 23:27
Show Gist options
  • Save leowebguy/a16c66f98fe8f1daa0ba to your computer and use it in GitHub Desktop.
Save leowebguy/a16c66f98fe8f1daa0ba to your computer and use it in GitHub Desktop.
Download ZIP
Responsive iframe full screen. Display page without and hide original url address.
Raw
index.html
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
html body {width: 100%;height: 100%;padding: 0px;margin: 0px;overflow: hidden;font-family: arial;font-size: 10px;color: #6e6e6e;background-color: #000;} #preview-frame {width: 100%;background-color: #fff;}</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
//function to fix height of iframe!
var calcHeight = function() {
//var headerDimensions = 0; //$('#header-bar').height();
$('#preview-frame').height($(window).height());
}
$(document).ready(function() {
calcHeight();
/*$('#header-bar a.close').mouseover(function() {
$('#header-bar a.close').addClass('activated');
}).mouseout(function() {
$('#header-bar a.close').removeClass('activated');
});*/
});
$(window).resize(function() {
calcHeight();
}).load(function() {
calcHeight();
});
</script>
</head>
<body>
<iframe id="preview-frame" src="https://oatweb1.myshopify.com/" name="preview-frame" frameborder="0" noresize="noresize" style="height: 902px;">
</iframe>
</body>
</html>
@bferronato
Copy link

<title>Test Layout</title> <style type="text/css"> body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; } 
        #content
        {
            position:absolute; left: 0; right: 0; bottom: 0; top: 0px; 
        }
    </style>
</head>
<body>
    <div id="content">
        <iframe width="100%" height="100%" frameborder="0" src="http://cnn.com" />
    </div>
</body>

https://stackoverflow.com/questions/17710039/full-page-iframe/17714422#17714422

@a7madev
Copy link

a7madev commented May 5, 2021

Thank you!

@anselmobattisti
Copy link

@leowebguy GG! Flawless victory! Thanks!

@Matt-TheRat
Copy link

This works great, thanks, but I'm using it in WP and have a scrolling header with a sticky menu. This makes the entire header sticky. Any solutions?

@billjay4real
Copy link

Thank you so mcuh

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment