frameset do not resize correctly after resize by mouse

Asked 3/12, 2012 at 15:56 Answered 15/11, 2016 at 10:50

I have a frameset where in one frame have a button that minimize its parent frameset to a certain size.

The code works but the problem is if I choose to resize frame with my mouse manually first and then press the minimize button it will resize incorrectly in IE8 and Chrome. It resize correctly in FF.

I have this HTML structure

...
<frameset cols="32%,*" border="2" frameborder="1" framespacing="1">
    <frameset rows="350,*" border="2" frameborder="1" framespacing="1" id="searchResultFrameset">
        <!-- The minimize button are in this frame searchResultFrame -->
        <frame name="searchResultFrame" scrolling="no" src="dummy">
        <frame name="itemFrame" frameborder="1" scrolling="no" id="itemFrame" src="dummy2"></frameset>
    <frame name="contentFrame" frameborder="0" scrolling="yes" id="contentFrame" src="dummy3">
</frameset>
...

and this code that executes when pressing on the button.

// Minimize frame button
$('.minimizeFrame').toggle(function () {
    parent.document.getElementsByTagName('frameset')[1].setAttribute('cols','22,*');
}, function () {
    parent.document.getElementsByTagName('frameset')[1].setAttribute('cols','32%,*');
});

I can see that cols="32%,*" changes to cols="22,*" in the developer tools, but still it render in wrong size.

Why do it resize incorrectly after changes by the mouse? Am I missing something or is it a bug in browser? Or are there maybe an alternative solution to resize the frame without this bug?

Example

http://jsbin.com/ohihiy/2

Delanie answered 3/12, 2012 at 15:56 Comment(3)

I am also having this problem. It seems that whatever you set the cols to, it is always relative to what you have resized it to, rather than total. This appears to be a webkit bug as Safari acts the same was as Chrome whereas Firefox acts as expected! – Pravit 14/2, 2013 at 11:43

It appears once you have resized manually using the frame border, there is no way to resize the frame correctly programatically. – Pravit 14/2, 2013 at 11:45

In Codlers example js-code, the cols attribute of the second (inner) frameset is set. I'm guessing the outer frameset was meant to be set. – Confidante 20/2, 2013 at 16:9

Looks like it's this bug in Webkit that has been ignored since 2010:

https://bugs.webkit.org/show_bug.cgi?id=36584

Sextet answered 1/10, 2013 at 17:31 Comment(0)

This worked for me. I created a function that "resets" cols and "later" sets correct widths. It seems there must be a timeout after reset or a kind of loop that "touches" child frames

function init_page() {
  function setCols(frms, cols) {
    // for some magic reason we have to 1st -> reset current cols 
    frms.setAttribute('cols', '');
    // and 2nd ask about child width (it's now clientWidth)
    for (var i = 0; i < frms.children.length; ++i) {
      if (frms.children[i] && (typeof frms.children[i].clientWidth != "undefined" || typeof frms.children[i].width != "undefined")) {
      }
    }
    frms.setAttribute('cols', cols);
  }
  // Minimize frame button
  $('#minimizeButton')
    .toggle(function () {
      setCols(parent.document.getElementsByTagName('frameset')[0], '50,*');
    },
    function () {
      setCols(parent.document.getElementsByTagName('frameset')[0], '50%,*');
    });
}

Cormier answered 15/11, 2016 at 10:50 Comment(0)

If I understand correctly your trying to set an attribute of an object that's in a different frame. Some browsers don't accept that.

If I try to reproduce your problem I can see that in firefox I can toggle the frame's size (no problem).

In chromium however, I get a security error because I'm trying to set a property on another page namely the frameset page from within a page inside a frame.

edit: The following code works in IE8. Is that what you need?

Don't forget to add the jquery-1.8.2.min.js file

file: index.html

<!doctype html public "-//w3c//dtd html 4.01 frameset//en"
   "http://www.w3.org/tr/html4/frameset.dtd">
<html>
<head>
<title>a simple frameset document</title>
</head>

<frameset cols="32%,*" border="2" frameborder="1" framespacing="1">
    <frameset rows="350,*" border="2" frameborder="1" framespacing="1" id="searchResultFrameset">
        <!-- The minimize button are in this frame searchResultFrame -->
        <frame name="searchResultFrame" scrolling="no" src="frame1.html">
        <frame name="itemFrame" frameborder="1" scrolling="no" id="itemFrame" src="dummy2"></frameset>
    <frame name="contentFrame" frameborder="0" scrolling="yes" id="contentFrame" src="dummy3">
</frameset>

</html>

file: frame1.html

<html>
  <head>
    <script src="jquery-1.8.2.min.js"></script>

    <script>

    $(init_page);

    function init_page()
        {
        // Minimize frame button
        $('#minimizeButton')
        .toggle(function ()
            {
            parent.document.getElementsByTagName('frameset')[0].setAttribute('cols','22,*');
            },
            function ()
            {
            parent.document.getElementsByTagName('frameset')[0].setAttribute('cols','32%,*');
            });
        }

    </script>
  </head>
  <body>
  <button id='minimizeButton'>toggle</button>
  </body>
</html>

Confidante answered 18/2, 2013 at 9:26 Comment(2)

I don't think you have understood. We are attempting to set the cols property of a resizeable frameset, from any window scope (top, same as frameset, child), gives the same result. It's a problem with how the frameset is being rendered after resizing it with the mouse, not security issues with accessing frame properties. – Pravit 20/2, 2013 at 14:29

Surprisingly when I test on IE8 again today it seems to work but still bugging in Chrome. – Delanie 22/2, 2013 at 14:47

I was having the same issue, and I used the suggestion of hiding, then setting and then reappearing and it worked for me. See below example:

var $frames = $( <parentElement> ).find( '<framesetname>' )[ 0 ];
frames.hide().attr('cols', '*,500').show();

They worked for Chrome, Firefox, IE11 & Opera. Hope it works for you.

Orella answered 2/11, 2016 at 20:29 Comment(1)

It seems that you can't call the hide() function on a frameset object. Would have to remove from the container, then set the attributes and then re-add to the container. – Orella 2/11, 2016 at 21:0

Recommended topics

Hot tags