While this approach may not be the most efficient, it could serve as a preliminary solution. I have not conducted any extensive research on this topic and have relied solely on basic reasoning. One significant challenge I encountered was determining the mouse position over an iframe, which I attempted to solve by adjusting the z-index of both the iframe and an overlay div accordingly. Please note that this code has only been tested in Chrome and may not function properly across all browsers. It is advisable to copy and paste this code for local testing purposes, as it is divided into two separate files.
First File:
<!DOCTYPE html>
<html>
<head>
<style>
#main_wrapper{
position:relative;
display:block;
width:810px;
height:800px;
}
#left_wrapper{
background-color: yellow;
position:relative;
float:left;
width:400px;
height:800px;
padding:0px;
margin:0px;
}
#right_wrapper{
background-color: blue;
position:relative;
float:right;
width:400px;
height:800px;
padding:0px;
margin:0px;
}
#middle_bar{
background-color: black;
position:relative;
float:left;
width:10px;
height:800px;
margin:0px;
}
#middle_bar:hover{
cursor:move;
}
#overlay_div{
z-index: 1;
background-color: rgba(10,10,10,.1);
position:absolute;
width:100%;
height:100%;
}
#my_iframe{
z-index: 2;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
starting_mouse_pos = 0;
mouse_down = false;
$('#middle_bar').on('mousedown', function(event){
starting_mouse_pos = event.pageX;
mouse_down = true;
$('#overlay_div').css('z-index', '2');
$('#my_iframe').css('z-index', '1');
});
$('#main_wrapper').on('mouseup', function(){
mouse_down = false;
$('#overlay_div').css('z-index', '1');
$('#my_iframe').css('z-index', '2');
});
$('#main_wrapper').on('mousemove', function(event){
if(mouse_down){
var ending_mouse_pos = event.pageX;
update_the_sizes(ending_mouse_pos);
starting_mouse_pos = ending_mouse_pos;
}
});
function update_the_sizes(ending_mouse_pos){
var length_of_move = starting_mouse_pos - ending_mouse_pos;
$('#left_wrapper').css('width', '-='+length_of_move);
$('#right_wrapper').css('width', '+='+length_of_move);
$('#my_iframe').css('width', '+='+length_of_move);
}
});
</script>
</head>
<body>
<div id="main_wrapper">
<div id="left_wrapper"></div>
<div id="middle_bar"></div>
<div id="right_wrapper">
<div id="overlay_div"></div>
<iframe id="my_iframe" width="400px" height="800px" src="myIframe.html" seamless></iframe>
</div>
</div>
</body>
</html>
Second File (myIframe.html):
<!DOCTYPE html>
<html>
<head>
<style>
#main_wrapper{
position:relative;
display:block;
width:150px;
height:150px;
margin-left:auto;
margin-right:auto;
background-color: purple;
}
body{
background-color: green;
}
</style>
<script>
</script>
</head>
<body>
<div id="main_wrapper">
</div>
</body>
</html>