iFrame resize failure

doctorized · Post by **doctorized** » Sat Dec 29, 2018 10:18 pm

I want to make a web page that will have a vertical menu on the left and an iFrame on the right where pages will be loaded. I ended up with this code:
in html file:

Code: Select all

<html>
<head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <meta charset="ISO-8859-7"> 
<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>
</head>
<body>
    <div class="menu">
        <ul>
            <li><a href="start.htm" target="content">home</a></li>
            <li><a href="#" target="content">link 1</a></li>
            <li><a href="#" target="content">link 2</a></li>
            <li><a href="#" target="content">link 3</a></li>
            <li><a href="#" target="content">link 4</a></li>
            <li><a href="#" target="content">link 5</a></li>
            <li><a href="#" target="content">link 6</a></li>
            <li><a href="#" target="content">link 7</a></li>
        </ul>
    </div>
<div class="content"><iframe name="content" src="start.htm" frameborder="0" scrolling="no" onload="resizeIframe(this)"></iframe></div>
</div>
</body>
</html>

in styles.css:

Code: Select all

body
{
    background-image: url('background.png');
}
.menu
{
    margin: 0px auto 0px 0px;
    text-align: left;
    position: fixed;
    width: 300px;
}
a.parent, a.parent:hover/* attaches side-arrow to all parents */
{
    background-image: url(nav_blue.gif);
    background-position: right center;
    background-repeat: no-repeat;
}
.content {
    margin-left: 230px;
    margin-top: 10px;
    padding: 1px 16px;
    height: auto;
}

/* First Level */
.menu ul
{
    border: 1px solid rgba(55,55,155,0.5);
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.9);
    display: inline-table;
    padding: 20px 0;
    list-style: none;
}
.menu ul li
{    
    border: 1px solid rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.2s Ease;
    -moz-transition: all 0.2s Ease;
    -o-transition: all 0.2s Ease;
    position: relative;    
}
.menu ul li:hover
{
    
    box-shadow: inset 0px 0px 10px 0px rgba(100,100,100,0.2), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

/* Hyperlink Style */
.menu a
{
    font-family: Arial, Tahoma, Sans-Serif;
    font-size: 16px;
    font-weight: bold;
    color: rgba(0,0,0,0.5);
    text-decoration: none;
    text-shadow: rgba(0,200,255,0.3) 1px 1px 0px;
    display: block;
    padding: 20px 20px;
    width: 180px;
}

/* Drop down Levels */
.menu ul ul
{
    display: none;
    border-radius: 0px;
    padding: 0px;
}
.menu ul li:hover > ul
{
    display: inline-table;
    position: absolute;
    top: 0;
    left: 100%;
}
.menu ul ul li a
{
    padding: 8px 20px;
}

If the page opened is something small, for example:

Code: Select all

<h2>Home page</h2>
  <p>This is the home page</p>
  <p>In computing, plain text is a loose term for data (e.g. file contents) that represent only characters of readable material but not its graphical representation nor other objects (floating-point numbers, images, etc.). It may also include a limited number of characters that control simple arrangement of text, such as spaces, line breaks, or tabulation characters (although tab characters can "mean" many different things, so are hardly "plain"). Plain text is different from formatted text, where style information is included; from structured text, where structural parts of the document such as paragraphs, sections, and the like are identified); and from binary files in which some portions must be interpreted as binary objects (encoded integers, real numbers, images, etc.).</p>

it opens fine into the iFrame with Firefox, IE and Edge. If it is a big page like https://en.wikipedia.org/wiki/Plain_text then iFrame stays extremely small. In Chrome (v71) no resize takes place. Any help?

TI-994A · Post by **TI-994A** » Sun Dec 30, 2018 12:36 am

doctorized wrote:I want to make a web page that will have a vertical menu on the left and an iFrame on the right where pages will be loaded...

...If it is a big page like ... then iFrame stays extremely small...

If you're not averse to using jQuery, this works. Do note that some of the CSS has been overridden here:

Code: Select all

<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <style>
      html, body {
        height: 100%;
        overflow-y: hidden;
      }
      .menu {
        width: 20%;
      }
      .content {
        width: 80%;
        height: 100%;
      }
      object {
        width: 100%;
        min-height: 100%;
      }  
    </style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
      function showPage(id) {
        switch (id) {
          case "1":            
            $(".content").html('<object data="https://www.purebasic.com">');
            break;
          case "2":
            $(".content").html('<object data="https://www.purebasic.fr/english/">');
            break;
          case "3":
            $(".content").html('<object data="http://www.purearea.net/">');                        
            break;            
          case "4":            
            $(".content").html('<object data="https://en.wikipedia.org/wiki/PureBasic">');            
            break;
        }        
      }      
    </script>
    <meta charset="ISO-8859-7"> 
  </head>
  <body>
    <div class="menu">
      <ul>
        <li><a href="#" id="1" onclick="showPage(this.id)">PureBasic</a></li>
        <li><a href="#" id="2" onclick="showPage(this.id)">PureBasic Forum</a></li>
        <li><a href="#" id="3" onclick="showPage(this.id)">PureArea</a></li>
        <li><a href="#" id="4" onclick="showPage(this.id)">Wikipedia</a></li>
        <li><a href="#" id="5" onclick="showPage(this.id)">Blank</a></li>
        <li><a href="#" id="6" onclick="showPage(this.id)">Blank</a></li>        
        <li><a href="#" id="7" onclick="showPage(this.id)">Blank</a></li>
        <li><a href="#" id="8" onclick="showPage(this.id)">Blank</a></li>        
      </ul>
    </div>
    <div class="content">
    </div>
  </body>
</html>

It should also be noted that many sites, like Google, Yahoo, and YouTube, block cross-origin calls, and thus will not work here.

> Mozilla: X-Frame-Options

doctorized · Post by **doctorized** » Sun Dec 30, 2018 10:31 am

TI-994A wrote:

doctorized wrote:I want to make a web page that will have a vertical menu on the left and an iFrame on the right where pages will be loaded...

...If it is a big page like ... then iFrame stays extremely small...

If you're not averse to using jQuery, this works. Do note that some of the CSS has been overridden here:

Code: Select all

<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <style>
      html, body {
        height: 100%;
        overflow-y: hidden;
      }
      .menu {
        width: 20%;
      }
      .content {
        width: 80%;
        height: 100%;
      }
      object {
        width: 100%;
        min-height: 100%;
      }  
    </style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
      function showPage(id) {
        switch (id) {
          case "1":            
            $(".content").html('<object data="https://www.purebasic.com">');
            break;
          case "2":
            $(".content").html('<object data="https://www.purebasic.fr/english/">');
            break;
          case "3":
            $(".content").html('<object data="http://www.purearea.net/">');                        
            break;            
          case "4":            
            $(".content").html('<object data="https://en.wikipedia.org/wiki/PureBasic">');            
            break;
        }        
      }      
    </script>
    <meta charset="ISO-8859-7"> 
  </head>
  <body>
    <div class="menu">
      <ul>
        <li><a href="#" id="1" onclick="showPage(this.id)">PureBasic</a></li>
        <li><a href="#" id="2" onclick="showPage(this.id)">PureBasic Forum</a></li>
        <li><a href="#" id="3" onclick="showPage(this.id)">PureArea</a></li>
        <li><a href="#" id="4" onclick="showPage(this.id)">Wikipedia</a></li>
        <li><a href="#" id="5" onclick="showPage(this.id)">Blank</a></li>
        <li><a href="#" id="6" onclick="showPage(this.id)">Blank</a></li>        
        <li><a href="#" id="7" onclick="showPage(this.id)">Blank</a></li>
        <li><a href="#" id="8" onclick="showPage(this.id)">Blank</a></li>        
      </ul>
    </div>
    <div class="content">
    </div>
  </body>
</html>

It should also be noted that many sites, like Google, Yahoo, and YouTube, block cross-origin calls, and thus will not work here.

> Mozilla: X-Frame-Options

Good approach but if browser is not maximazed content's scrollbars are not visible. Can we use browser's scrollbars?

TI-994A · Post by **TI-994A** » Sun Dec 30, 2018 8:10 pm

doctorized wrote:Good approach but if browser is not maximazed content's scrollbars are not visible. Can we use browser's scrollbars?

A resize listener should handle this. I've added it here (do take note of the changes in the style and script blocks):

Code: Select all

<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <style>
      #content {
        width: 100%;
        height: 100%;
        overflow: auto;
      }            
    </style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
      $(function () {
        const estimatedScrollbarWidth = 30
        $(".content").height($(window).height() - estimatedScrollbarWidth);        
        $(window).resize(function(){
          $(".content").height($(window).height() - estimatedScrollbarWidth);          
        });
      });     

      function showPage(id) {
        switch (id) {
          case "1":            
            $(".content").html('<object id="content" data="https://www.purebasic.com">');
            break;
          case "2":
            $(".content").html('<object id="content" data="https://www.purebasic.fr/english/">');
            break;
          case "3":
            $(".content").html('<object id="content" data="http://www.purearea.net/">');                        
            break;            
          case "4":            
            $(".content").html('<object id="content" data="https://en.wikipedia.org/wiki/PureBasic">');            
            break;
        }        
      }      
    </script>
    <meta charset="ISO-8859-7"> 
  </head>
  <body>
    <div class="menu">
      <ul>
        <li><a href="#" id="1" onclick="showPage(this.id)">PureBasic</a></li>
        <li><a href="#" id="2" onclick="showPage(this.id)">PureBasic Forum</a></li>
        <li><a href="#" id="3" onclick="showPage(this.id)">PureArea</a></li>
        <li><a href="#" id="4" onclick="showPage(this.id)">Wikipedia</a></li>
        <li><a href="#" id="5" onclick="showPage(this.id)">Blank</a></li>
        <li><a href="#" id="6" onclick="showPage(this.id)">Blank</a></li>        
        <li><a href="#" id="7" onclick="showPage(this.id)">Blank</a></li>
        <li><a href="#" id="8" onclick="showPage(this.id)">Blank</a></li>        
      </ul>
    </div>
    <div class="content">
    </div>
  </body>
</html>

Besides an additional entry for the content selector, none of your original stylings are being overridden.

Hope it works!

doctorized · Post by **doctorized** » Sun Dec 30, 2018 10:25 pm

TI-994A wrote:
doctorized wrote:Good approach but if browser is not maximazed content's scrollbars are not visible. Can we use browser's scrollbars?
A resize listener should handle this. I've added it here (do take note of the changes in the style and script blocks):
Code: Select all
<html>
  <head>
    ........
  </body>
</html>
Besides an additional entry for the content selector, none of your original stylings are being overridden.

Hope it works!

It is umbelievable! It works fine with Chrome, IE and Edge but it is not working with Firefox. It show the menu but when I press any of the four buttons nothing appears.

EDIT: I found this code which does the job!

Code: Select all

<html lang="en"><head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Ben Alman » jQuery resize event » Examples » resize event</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript">

$(function(){
  // Add text after inline "add text" links.
  $('.add_text').click(function(e){
    e.preventDefault();
    $(this).parent().append( ' Adding some more text, to grow the parent container!' );
  });
  
  // Resize manually when the link is clicked, but only for the first paragraph.
  $('.add_text:first').click(function(){
    $(this).parent().resize();
  });
});
</script>
<style>
.test {
  background: #eee;
}
</style>
</head>
<body>

<div id="page">
<div class="container floaty clear">
  <div class="info">P width: 700, height: 284</div>
  <p class="test">
    <a href="#" class="add_text">Click this link to add text!</a> <em>Notice that the info box updates
    immediately, because the resize event is being triggered manually on click with <code>.resize()</code>. Resize
    the browser window to be smaller with the mouse to see the info box update more slowly.</em>
   Adding some more text, to grow the parent container! Adding some more text, to grow the parent container! Adding some more text, to grow the parent container! Adding some more text, to grow the parent container! Adding some more text, to grow the parent container! Adding some more text, to grow the parent container! Adding some more text, to grow the parent container!</p>
</div>
</div>
</body></html>

The only thing now is to manage to import it to my page. I did a try but failed.

TI-994A · Post by **TI-994A** » Sun Dec 30, 2018 11:48 pm

doctorized wrote:...it is not working with Firefox...

Too many W3C standards. This seems to work with all of them:

Code: Select all

<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <style>
      html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }            
    </style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>      
      $(function () {
        const estimatedScrollbarWidth = 30
        $(".content").height($(window).height() - estimatedScrollbarWidth);        
        $(window).resize(function(){
          $(".content").height($(window).height() - estimatedScrollbarWidth);          
        });
      });     

      function showPage(id) {
        switch (id) {
          case "1":            
            $(".content").html('<object data="https://www.purebasic.com">');
            break;
          case "2":
            $(".content").html('<object data="https://www.purebasic.fr/english/">');
            break;
          case "3":
            $(".content").html('<object data="http://www.purearea.net/">');                        
            break;            
          case "4":            
            $(".content").html('<object data="https://en.wikipedia.org/wiki/PureBasic">');            
            break;
        }
        $(".content object").css({width: '100%', height: '100%', overflow: 'auto'});
      }      
    </script>
    <meta charset="ISO-8859-7"> 
  </head>
  <body>
    <div class="menu">
      <ul>
        <li><a href="#" id="1" onclick="showPage(this.id)">PureBasic</a></li>
        <li><a href="#" id="2" onclick="showPage(this.id)">PureBasic Forum</a></li>
        <li><a href="#" id="3" onclick="showPage(this.id)">PureArea</a></li>
        <li><a href="#" id="4" onclick="showPage(this.id)">Wikipedia</a></li>
        <li><a href="#" id="5" onclick="showPage(this.id)">Blank</a></li>
        <li><a href="#" id="6" onclick="showPage(this.id)">Blank</a></li>        
        <li><a href="#" id="7" onclick="showPage(this.id)">Blank</a></li>
        <li><a href="#" id="8" onclick="showPage(this.id)">Blank</a></li>        
      </ul>
    </div>
    <div class="content">
    </div>
  </body>
</html>

Third time's the charm!

doctorized · Post by **doctorized** » Mon Dec 31, 2018 12:43 am

YES!!!! It is working now!! Thanx a lot my friend!!

EDIT: can we transfer the scrollbar directy to the browser?

TI-994A · Post by **TI-994A** » Mon Dec 31, 2018 4:25 am

doctorized wrote:YES!!!! It is working now!! Thanx a lot my friend!!

So glad to hear that. My absolute pleasure.

doctorized wrote:EDIT: can we transfer the scrollbar directy to the browser?

It doesn't sound impossible, although I've not tried it before. The trick would be to get the scroll height of the remote site and set the same to the body; that should activate the scrolling on the page itself. I've hit some walls while trying that, but I'll post the results if I manage to get it to work.

Until then, Happy New Year!

doctorized · Post by **doctorized** » Mon Dec 31, 2018 4:09 pm

TI-994A wrote:Until then, Happy New Year!

Happy new year my friend!!

doctorized · Post by **doctorized** » Sat Jan 05, 2019 10:46 pm

I tried to make my html menu from vertical to horizontal with now success It looks awful. I must do some small changes to make it look fine but I have no idea what to change. It could be nice if it was centered. Any ideas?
in html file:

Code: Select all

body
{
    background-image: url('background.png');
}
.menu
{
    margin: 0px 0px 0px 0px;
    text-align: left;
    position: fixed;
    width: auto;
}
a.parent, a.parent:hover/* attaches side-arrow to all parents */
{

    background-image: url(nav_blue.png);

    background-position: right center;

    background-repeat: no-repeat;

}

.options {
width: 100%;
}

.content {
    margin-left: 0px;
    margin-top: 0px;
    padding: 1px 0px;
    height: auto;
    overflow:hidden;    
}

/* First Level */
.menu ul
{
    border: 1px solid rgba(55,55,155,0.5);
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.9);
    display: inline-table;
    padding: 20px 0;
    list-style: none;
}
.menu ul li
{    
    border: 1px solid rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.2s Ease;
    -moz-transition: all 0.2s Ease;
    -o-transition: all 0.2s Ease;
    position: relative; 
    float: left; 
}
.menu ul li:hover
{
    
    box-shadow: inset 0px 0px 10px 0px rgba(100,100,100,0.2), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

/* Hyperlink Style */
.menu a
{
    font-family: Arial, Tahoma, Sans-Serif;
    font-size: 18px;
    font-weight: bold;
    color: rgba(0,0,0,0.5);
    text-decoration: none;
    text-shadow: rgba(0,200,255,0.3) 1px 1px 0px;
    display: block;
    padding: 20px 20px;
    width: 100%;
text-align:center;
}

/* Drop down Levels */
.menu ul ul
{
    display: none;
    border-radius: 0px;
    padding: 0px;
}
.menu ul li:hover > ul
{
    display: inline-table;
    position: absolute;
    top: 60px;

}
.menu ul ul li a
{
    padding: 8px 20px;
}

in styles.css

Code: Select all

body
{
    background-image: url('background.png');
}
.menu
{
    margin: 0px 0px 0px 0px;
    text-align: left;
    position: fixed;
    width: auto;
}
a.parent, a.parent:hover/* attaches side-arrow to all parents */
{

    background-image: url(nav_blue.png);

    background-position: right center;

    background-repeat: no-repeat;

}

.options {
width: 100%;
}

.content {
    margin-left: 0px;
    margin-top: 0px;
    padding: 1px 0px;
    height: auto;
    overflow:hidden;    
}

/* First Level */
.menu ul
{
    border: 1px solid rgba(55,55,155,0.5);
    box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.9);
    display: inline-table;
    padding: 20px 0;
    list-style: none;
}
.menu ul li
{    
    border: 1px solid rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.2s Ease;
    -moz-transition: all 0.2s Ease;
    -o-transition: all 0.2s Ease;
    position: relative; 
    float: left; 
}
.menu ul li:hover
{
    
    box-shadow: inset 0px 0px 10px 0px rgba(100,100,100,0.2), 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
}

/* Hyperlink Style */
.menu a
{
    font-family: Arial, Tahoma, Sans-Serif;
    font-size: 18px;
    font-weight: bold;
    color: rgba(0,0,0,0.5);
    text-decoration: none;
    text-shadow: rgba(0,200,255,0.3) 1px 1px 0px;
    display: block;
    padding: 20px 20px;
    width: 100%;
text-align:center;
}

/* Drop down Levels */
.menu ul ul
{
    display: none;
    border-radius: 0px;
    padding: 0px;
}
.menu ul li:hover > ul
{
    display: inline-table;
    position: absolute;
    top: 60px;

}
.menu ul ul li a
{
    padding: 8px 20px;
}

PureBasic Forums - English

iFrame resize failure

iFrame resize failure

Re: iFrame resize failure

Re: iFrame resize failure

Re: iFrame resize failure

Re: iFrame resize failure

Re: iFrame resize failure

Re: iFrame resize failure

Re: iFrame resize failure

Re: iFrame resize failure

Re: iFrame resize failure