Frameset + cols IE10

L

8

7

I was testing some scripts in IE10, seems that the browser has problems in setting attribute cols.

Example:

parent.middle.document.getElementById("middle_frames").cols = "0,*"

This works perfect for SAF/Chrome/FF/IE7/IE8/IE9, but in IE10 it doesn't work.

Anyone with some help?

I can't show my problem in my project, but I made a dummy script to show you the problem. Make 3 files (these below) and run them in IE10 and click the button "change cols". Works perfect for every browser except IE10. In my example you see I used a doctype, tried also without a doctype, same problem.

frameset_main.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Framesets</title>
    </head>
    <frameset id="framesets" cols="200,*" frameborder="0" border="0" framespacing="0">
        <frame src="frame1.html" name="frame1" id="frame1" scrolling="vertical" noresize="noresize">
        <frame src="frame2.html" name="frame2" id="frame2" scrolling="vertical" noresize="noresize">
    </frameset>
</html>

frame1.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Frame 1</title>
    </head>
    <body style="background-color: green;">
    </body>
</html>

frame2.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Frame 2</title>
        <!-- ONPAGE JAVASCRIPT -->  
        <script type="text/javascript">
        function dothis(){
            parent.document.getElementById("framesets").cols = "500,*";         
        }       
        </script>
    </head>
    <body style="background-color: red;">
    <div id="main_container" class="cls_main_container">
        <input type="button" id="btn_do_this" onclick="dothis();" value="change cols" />
    </div>
    </body>
</html>

Libeler answered 3/9, 2012 at 13:55 Comment(2)

Can you link to a demo where this fails? I'd check your doctype etc – framesets aren't common anymore, and I wouldn't be surprised to see edge cases that aren't covered. – Deviant 3/9, 2012 at 14:13

Updated with an example. – Libeler 4/9, 2012 at 8:38

T

11

For me the following seems to work (Its somewhat like Raads fix)

parent.document.getElementById("framesets").cols="0,24%,*";
parent.document.getElementById("framesets").rows=parent.document.getElementById("framesets").rows;  //IE10 bug fix

Tadich answered 9/4, 2013 at 8:41 Comment(1)

I prefer your solution because it is plain javascript, does not depend on jQuery. Thanks for posting it. – Never 1/5, 2013 at 16:11

L

5

Looks like it's IE 10 bug. No resolution so far.

http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/dd6bdecf-5751-4343-8cfd-bcfd7a14b144

Leavening answered 26/10, 2012 at 20:16 Comment(0)

H

2

I've found a Solution

(it's a workaround til Microsoft solves IE 10 bug):

After working on .cols I call a script that forces frame redraw, in your example the result should look like this:

parent.document.getElementById("framesets").cols = "500,*";
$('#frame2').forceRedraw(true);

The forceRedraw script can be found here: Howto: Force a browser redraw/repaint, and needs a link to jQuery to work.

Hasid answered 5/12, 2012 at 10:36 Comment(0)

D

1

I've got the same problem in IE10. It worked in IE8 and IE9 and it works also in IE11 preview. So it seems to be an IE10 bug.

My simplest workaround is one line, requires no plugins or additional function and looks like this:

$('#framesetId').hide().attr('cols', '50,*').show();

This solution works for me in IE10 and is still working in all other modern browsers.

Disputable answered 16/8, 2013 at 9:21 Comment(0)

W

0

I spent quite a bit of time on this. I wanted to get this resolved without the need of jQuery.
Use this code to make Internet Explorer 10 take effect on the change of cols:

parent.document.getElementById("framesets").removeAttribute("cols");
parent.document.getElementById("framesets").setAttribute("rows", "500,*");
parent.document.getElementById("framesets").removeAttribute("rows");
parent.document.getElementById("framesets").setAttribute("cols", "500,*");

Wodge answered 6/3, 2013 at 14:31 Comment(0)

O

0

Here's what worked for me...

The redraw method that Emanuele describes above is the right solution. However, the referenced plugin is no longer available at the jQuery plugin site.

Here's what worked for me to force IE10 to set a frame column attribute...

1) Create a small jQuery plugin that instantly hides and shows an element, effectively redrawing it.

(function ($) {
    $.fn.redrawFrame = function () {
        return $(this).each(function () {
            $(this).hide();
            $(this).show();
        });
    }
})(jQuery)

2) Reference it in your JavaScript as follows:

$('#framesetId').attr('cols', '50,*').redrawFrame();

Oilstone answered 5/4, 2013 at 18:33 Comment(0)

H

0

I solved this IE10 bug with adding these lines after cols attribute update line (using jquery):

$('#yourframeid').height( $('#yourframeid').height()+1 ); $('#yourframeid').height( $('#yourframeid').height()-1 );

I hope it will work for you...

Hiss answered 24/4, 2013 at 10:20 Comment(0)

H

0

I resolved this ie 10 bug after a bit research. I found that only 'cols' attribute is not working for iframes but the 'rows'attribute is working, so i added a row and it worked for me.

var frameSet = document.getElementById("uxResultsFrameset");

if ($.browser.msie && $.browser.version == 10) 
     frameSet["rows"] = "100%"; //sets a row to overcome the issue in case of ie10 only

frameSet[orient] = "50%,50%";

Haldeman answered 26/6, 2013 at 7:23 Comment(0)

I've found a Solution

Here's what worked for me...

Recommended topics

Hot tags