iflame_test

In this example below you will see how to do a iflame_test with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by JunkiSuzuki, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright JunkiSuzuki ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>iflame_test</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!DOCTYPE html>
<body>
<div id="equal">
<header>Basic Responsive Web Design Example</header>
<div id="left"><IFRAME name=Frame src=http://pokevibe.webs.com/TEST/concept.htm scrolling=auto></IFRAME></div>
<div id="right">
</div>
  <footer>|<a href="http://pokevibe.webs.com/TEST/concept.htm" target="Frame">Concept</a> | <a href="http://pokevibe.webs.com/TEST/lorem-ipsum.htm" target="Frame">Page Example 1</a> | <a href="http://pokevibe.webs.com/TEST/more-lorem-ipsum.htm" target="Frame">Page Example 2</a> | <a href="http://pokevibe.webs.com/TEST/myfluid.htm" target="blank">New Window Example</a>|</footer>
</div></body></html>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/JunkiSuzuki/iflame_test-zwMggm */
<style>
/* Update 3/28/13: So the footer acts really weird in FireFox. This still has some glitches. Works best in Google Chrome. I'll eventually add media queries to increase the size of the max-width for mobile devices. */
body {
   margin: 0 auto;
   height: 100%;}
html {
   height: 100%;}
a{
   text-decoration:none;
   color:#000000;
   outline: none}
header{
   background-color:#FFFF00;
   text-align:center;
   height:auto;
   font-size:250%;}
#left {
   float:left;
   width:70%;
   background-color:#FF0000;
   text-align:center;
   height:100%;}
#right {
   float:right;
   width:29%; /* this will partially overlap at 30%, not sure why */
   background-color:#00FF00;
   text-align:center;
   height:100%;}
footer{
   clear:both;
   background-color:#0000FF;
   text-align:center;}
iframe{
   width:100%;  /* allows iframes in a div to have a fluid width */
   height:100%;
   border: none;}
#equal{
   margin: 0 auto;
   min-height:100%;
   width:85%; /* gives more flexibility to the width */
   background-image: -webkit-gradient(linear,left top,right top,color-stop(0, #FF0000),color-stop(70%, #FF0000),color-stop(70%, #00FF00),color-stop(100%, #00FF00));   	
   background-image: -webkit-linear-gradient(left, #FF0000, #FF0000 70%,#00FF00 70%,#00FF00 100%);
   background-image: -moz-linear-gradient(left, #FF0000, #FF0000 70%,#00FF00 70%,#00FF00 100%);
   background-image: -ms-linear-gradient(left, #FF0000, #FF0000 70%,#00FF00 70%,#00FF00 100%);
   background-image: -o-linear-gradient(left, #FF0000, #FF0000 70%,#00FF00 70%,#00FF00 100%);}
</style>


/*Downloaded from https://www.codeseek.co/JunkiSuzuki/iflame_test-zwMggm */
// $(function(){
//   $(window).on('load resize',function(){
//     var windowWidth = $(window).width();
//     if (windowWidth <= 800) {
//       var productCount = $(".product").length;
//       var productWidth = $(".product").width(); 

//       console.log(productCount);
//       console.log(productWidth);
//       $(".slider_flipsnap").width( Math.floor(productCount * productWidth));
//       $(".slider_flipsnap").height(Math.floor(productWidth));   
//     }
// 	});
// });

Comments