one frame hides another when zooming

Question

I have the following html with frameset. In Chrome, when I zoom the browser more than 100%, the second frame content start hiding the first one. as a requirement the first frame should not have a scroll. Do you have any suggestion? it works fine on IE.

<!DOCTYPE HTML>
<html>
  <head>
<title>HHH</title>
  </head>
  <frameset rows="120,*" frameborder="0">
      <frame name="nav" src="/file1.pl" noresize="true" scrolling="No"
         frameborder="0">
      <frame name="gdl" src="/second.pl" scrolling="auto"
       frameborder="0">
  </frameset>
</html>

score 0 · Answer 1 · edited May 23 '17 at 12:03

0

You can look at these:

Frameset not showing up in FireFox or IE. Fine in Chrome..?

Any way of using frames in HTML5?

Another idea is using instead. Maybe you will not have such issues.

I hope these helps

edited May 23 '17 at 12:03

Community

1
1

answered Jan 28 '14 at 11:16

Liam James

414
1
6
15

Thanks Anton, Changing the frameset is also under consideration, if you have a better replacement of the above code please let me know, it can be using iframe. – asahun Jan 28 '14 at 16:52

score 0 · Answer 2 · answered Dec 04 '14 at 05:23

myFix.js

//fix webkit browsers
if ('WebkitAppearance' in document.documentElement.style) {
    document.onreadystatechange = function() {
        if (document.readyState != 'complete')
            return;

        var oldLevel = 1;
        //whether we're fixing 'rows' or 'cols'
        var checking = 'rows';
        var frameset = document.getElementById('set');
        //get the hard coded values from the html
        var values = frameset.getAttribute(checking).split(',');

        //make sure not to change any %'s or *'s
        var isPixels = new RegExp('[0-9]+');
        for (var index = 0; index < values.length; ++index) {
            if (isPixels.test(values[index]))
                values[index] = new Number(values[index]);
        }

        var zoomCheck = function() {
            //calculate zoom level
            var level = window.outerWidth / window.innerWidth;
            //if it hasn't changed, ignore
            if (oldLevel == level)
                return;

            var newValues = new Array(values.length);
            //copy each of the original values
            for (var index = 0; index < values.length; ++index) {
                newValues[index] = values[index];

                //fix the ones we are meant to
                if (values[index] instanceof Number)
                    newValues[index] *= level;
            }

            //apply the fix
            frameset.setAttribute(checking, newValues.join(','));
            oldLevel = level;
        };

        //periodically check
        setInterval(zoomCheck, 1000);
    };
}

your.html

<html>
    <head>
        <title>HHH</title>
        <script type="text/javascript" src="myFix.js"></script>
    </head>

    <frameset id="set" rows="200,*" frameborder="0" border="0" framespacing="0">
        <frame name="nav" src="/file1.pl" noresize="true" scrolling="No" frameborder="0">
        <frame name="gdl" src="/second.pl" scrolling="auto" frameborder="0">
    </frameset>
</html>

one frame hides another when zooming

2 Answers2