css - Resizable iframes jquery -
i want have <frameset> while using html5 , managed create using html code , want make 2 iframes resizable stay side side , have problem between 2 iframes because code makes them resize independently , want have resize 1 implemented in old <frameset>.
this html code:
<body> <div class="resizable1"> <iframe class="menu" src="menu.html"></iframe> </div> <div class="resizable2"> <iframe class="maincontent" src="events.html"></iframe> </div> </body> this css:
.ui-resizable-helper { border: 1px dotted gray; } .resizable1 { float: left; width: 20%; height: 80%; display: block; border: 2px solid gray; overflow: hidden; position: relative; } .resizable2 { float: left; width: 75%; height: 80%; display: block; border: 2px solid gray; overflow: hidden; position: relative; } .menu { float: left; width: 20%; height: 80%; } .maincontent { float: left; width: 75%; height: 80%; } this jquery script:
$(function() { $(".resizable1").resizable({ animate : true, animateeasing : 'swing', imateduration : 500 }); $(".resizable2").resizable({ animate : true, animateeasing : 'swing', imateduration : 500 }); }); </script>
i agree above, suggest resizing them manually, if want keep animation, maybe this: (restrict height containment attribute , try calculate new width needs to manually resize second 1 after first 1 resized)
added container in html:
<div id="container"> <div class="resizable1"> <iframe class="menu" src="www.google.com"> bla </iframe> </div> <div class="resizable2"> <iframe class="maincontent" src="www.yahoo.com"></iframe> </div> </div> set height in css:
.ui-resizable-helper { border: 1px dotted gray; } #container{ height: 500px; width: 600px; } .resizable1 { float: left; width: 20%; height: 100%; display: block; border: 2px solid gray; overflow: hidden; position: relative; } .resizable2 { float: left; width: 75%; height: 100%; display: block; border: 2px solid gray; overflow: hidden; position: relative; } .menu { float: left; width: 20%; height: 80%; } .maincontent { float: left; width: 75%; height: 80%; } manually resized in jquery (doesn't work sorry, hope helpful)
$(function() { $(".resizable1").resizable({ animate : true, animateeasing : 'swing', imateduration : 500, containment: '#container' }); $(".resizable2").resizable({ animate : true, animateeasing : 'swing', imateduration : 500, containment: '#container' }); $(".resizable1").resize( function(e){ var fullwidth = $("#container").innerwidth(); var r1width = $(".resizable1").outerwidth(); $(".resizable2").width(fullwidth - r1width-6); var r2width = $(".resizable2").outerwidth(); console.log(r1width+" + "+r2width+" = "+fullwidth); } ); });
Comments
Post a Comment