nh0ck0n10b
New Member
I have an iframe within a div(as popup) whose height and width can be variable.I tried to set the height and width in all possible ways but I was not succeeded.
I am unable to understand the reason.
Can somebody helpe me out.Here is a jsbinHere is the code that I guess should work:\[code\]<!DOCTYPE HTML PUBLIC><html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script><style type="text/css"> #irmNPopupContainer { border: 2px solid; display: none; top: 10px; left: 10px; } #irmNPopupHdr { height: 30px; width: 100%; background: #F0F0F0; }</style> </head> <body> <button onClick="showIrmNPopup('Window Title','http://www.w3schools.com',200,200)">W3 Schools</button> <br/> <div id="irmNPopupContainer" > <div id="irmNPopupHdr"><span></span><span><img src="http://stackoverflow.com/questions/15739283/round_black_close2.png" title="Close">X</span></div> <div id="irmNPopupContent" > <iframe frameborder=0 id="irmNPopupContentFrame" name="irmNPopupContentFrame" scrolling=auto width="100%" height="100%"> </iframe> </div> </div> </body> <script> function showIrmNPopup(_title,_src,_width,_height){ //Assign source to iframe and set width and height of the iframe var iframeObj = document.getElementById('irmNPopupContentFrame'); iframeObj.src = http://stackoverflow.com/questions/15739283/_src; $('#irmNPopupHdr span:first-child').text(_title); $('#irmNPopupContainer').show(600); // $('#irmNPopupContainer').outerWidth(_width); //$('#irmNPopupContainer').outerHeight(_height); $('#irmNPopupContainer').css({width:_width+"px",height:_height+"px"}); // document.getElementById('irmNPopupContainer').style.width = _width+"px"; } $('#irmNPopupHdr span:last-child').click(function(){ $('#irmNPopupContainer').hide(600); }) </script></html>\[/code\]
I am unable to understand the reason.
Can somebody helpe me out.Here is a jsbinHere is the code that I guess should work:\[code\]<!DOCTYPE HTML PUBLIC><html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script><style type="text/css"> #irmNPopupContainer { border: 2px solid; display: none; top: 10px; left: 10px; } #irmNPopupHdr { height: 30px; width: 100%; background: #F0F0F0; }</style> </head> <body> <button onClick="showIrmNPopup('Window Title','http://www.w3schools.com',200,200)">W3 Schools</button> <br/> <div id="irmNPopupContainer" > <div id="irmNPopupHdr"><span></span><span><img src="http://stackoverflow.com/questions/15739283/round_black_close2.png" title="Close">X</span></div> <div id="irmNPopupContent" > <iframe frameborder=0 id="irmNPopupContentFrame" name="irmNPopupContentFrame" scrolling=auto width="100%" height="100%"> </iframe> </div> </div> </body> <script> function showIrmNPopup(_title,_src,_width,_height){ //Assign source to iframe and set width and height of the iframe var iframeObj = document.getElementById('irmNPopupContentFrame'); iframeObj.src = http://stackoverflow.com/questions/15739283/_src; $('#irmNPopupHdr span:first-child').text(_title); $('#irmNPopupContainer').show(600); // $('#irmNPopupContainer').outerWidth(_width); //$('#irmNPopupContainer').outerHeight(_height); $('#irmNPopupContainer').css({width:_width+"px",height:_height+"px"}); // document.getElementById('irmNPopupContainer').style.width = _width+"px"; } $('#irmNPopupHdr span:last-child').click(function(){ $('#irmNPopupContainer').hide(600); }) </script></html>\[/code\]