Resizable iframes jquery
I want to have a <frameset> while using HTML5 and I managed to create
something using html code and I want to make the two iframes resizable but
also stay side by side and I have a problem between the two iframes
because my code makes them resize independently and I want to have a
resize like the one that is implemented in the old <frameset>.
This is my 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 is my 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 is my jQuery script:
$(function() {
$(".resizable1").resizable({
animate : true,
animateEasing : 'swing',
imateDuration : 500
});
$(".resizable2").resizable({
animate : true,
animateEasing : 'swing',
imateDuration : 500
});
});
</script>
No comments:
Post a Comment