javascriptinternet-explorer-8html-object

HTML Object resize in internet explorer 8


I have a flash that I'm displaying on the popup window. When I resize the window; The width of the flash increases while the height remains constant.

var objectNode = document.createElement("object");
objectNode.appendChild(param); 
objectNode.id = viewerId;
objectNode.width = "100%";
objectNode.height = "100%";
objectNode.classid = "clsid:" + SOME_ID;
containerObject.appendChild(objectNode);

containerObject is a HTMLDivElement. This ofcourse works in all browsers except internet explorer 8.


Solution

  • For those who might one day face this issue:

    There were multiple issues in this.

    1. Setting width and height attributes as shown in the question doesn't work.

    2. In internet explorer height:100% will be ignored if it's parents' heights are not 100%

    Changing containerObject's, body's and html's height in this case to 100% fixed the issue.

    var htm = document.getElementsByTagName("html")[0].style.height="100%";
    var bod = document.getElementsByTagName("body")[0].style.height="100%";
    var objectN = document.createElement("object");
    containerObject.setAttribute("style", "height:100%");
    objectN.appendChild(param);
    objectN.setAttribute("id", "viewer");
    objectN.setAttribute("style", "width:100%;height:100%;");
    objectN.setAttribute("classid", "clsid:" + PLUGIN_CLSID)
    containerObject.appendChild(objectN);