javascript - how to increase iframe width on onclick of image.? -
i getting troubled when click on show/hide image div_20 hide & width of iframe increased space of div_20 blank space & iframe width increased in horizontal. please give me guidance related problem.
i have tried following jquery code show/hide left menus.
$('#mainmenu').toggle( function() { $('#ifrm').css("width", '100%') $('#div_20').css("width", '5%') $('#ifrm').css("margin-left", '0') }, function() { $('#ifrm').css("width", '83.5%') $('#div_20').css("width", '17%') $('#ifrm').css("margin-left", '0%') }); <div id="mainmenu"> <a> <i class="fa fa-align-justify"></i> </a> </div> <div id="div_20"> //list of menus </div> <iframe id="ifrm" src="dashboard.php" name="ifrm2" scrolling="yes"></iframe>
if can specify lies within #div_20 help, thus:
<div id="mainmenu"> <a><i class="fa fa-align-justify"></i></a> </div> <div id="div_20"> <ul> <li>menu1</li> <li>menu1</li> <li>menu1</li> <li>menu1</li> <li>menu1</li> </ul> </div> <iframe id="ifrm" src="dashboard.php" name="ifrm2" scrolling="yes"></iframe> you can use following jquery code
var newwidth; $('#ifrm').css({ marginleft: 0 }); $('#div_20').height(100); $('#mainmenu > a').on('click', function() { $('#div_20 > ul').toggle(); newwidth = $('#ifrm').width()+10; $('#ifrm').width(newwidth); $('#ifrm').css({ marginleft: 0 }); });
Comments
Post a Comment