javascript - re-sizing iframe inside div with js -


trying figure out way to re-size iframe inside class="col-md-4 col-sm-12".

i tried resizing inside class attempt failed.

var xx = document.queryselectorall("#homepage > div:nth-child(2) > div.col-md-4.col-sm-12 > div");  (var = 0; < xx.length; i++) {     xx[i].style.width="450px"; } 

html:

<div class="col-md-4 col-sm-12">                 <div class="ms-webpart-zone ms-fullwidth">         <div id="msozonecell_webpartctl00_ctl42_g_ee6207c9_12ab_4c71_aa01_3d615b36437c" class="s4-wpcell-plain ms-webpartzone-cell ms-webpart-cell-vertical ms-fullwidth ">             <div class="ms-webpart-chrome ms-webpart-chrome-vertical " style="width:320px">                 <div class="ms-webpart-chrome-title" id="webpartctl00_ctl42_g_ee6207c9_12ab_4c71_aa01_3d615b36437c_chrometitle" style="width:320px;">                         <span title=" basic app part custom properties." id="webparttitlectl00_ctl42_g_ee6207c9_12ab_4c71_aa01_3d615b36437c" class="js-webpart-titlecell"><h2 class="ms-webpart-titletext" style="overflow:hidden;text-overflow:ellipsis;text-align:justify;"><a accesskey="w" href="###"><nobr><span>/span><span id="webpartcaptionctl00_ctl42_g_ee6207c9_12ab_4c71_aa01_3d615b36437c"></span></nobr></a></h2></span>                     </div><div webpartid="ee6207c9-12ab-4c71-aa01-3d615b36437c" haspers="false" id="webpartctl00_ctl42_g_ee6207c9_12ab_4c71_aa01_3d615b36437c" class="ms-wpbody ms-wpborder noindex ms-wpcontentdivspace " allowdelete="false" allowexport="false" style="width:320px;height:210px;"><div id="ctl00_ctl42_g_ee6207c9_12ab_4c71_aa01_3d615b36437c" style="width: 450px;">      <iframe src="###" id="g_49a1549f_f388_4175_836c_c54ba7e29505" frameborder="0" width="320px" height="210px"></iframe>     </div></div>                 </div>             </div>         </div>                 </div> 

"div.col-md-4.col-sm-12 > div" 

this give first div in class.

what can query both divs , iframe can traversed.

var xx = document.queryselectorall("div.col-md-4.col-sm-12 div, div.col-md-4.col-sm-12 iframe"); (var = 0; < xx.length; i++) {     xx[i].style.width="450px"; } 

if want iframe extend it's parent's width , height set iframe's width , height 100% in css.

iframe{     width: 100%;     height: 100%; } 

Comments

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

java - No use of nillable="0" in SOAP Webservice -

ubuntu - Laravel 5.2 quickstart guide gives Not Found Error -