Basically, I want to offer the page visitor the ability to resize the bar on the left and I tried to use jQuery UI Resizable for this. It works fine when the div next to the #left-bar does not contain an iFrame but if it has an iFrame, the result looks like this:
#main{
height: 900px;
width: 1800px;
background-color: aqua;
display: flex;
}
#left-bar{
height: 100%;
width: 250px;
background-color: blue;
outline: medium solid red;
margin-right: 1px;
display: inline-block;
}
#topic-window{
height: 100%;
width: 100%;
background-color: navy;
outline: medium solid red;
display: inline-block;
}
#docWindow{
width: 100%;
height: 100%;
position:relative;
background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="index.css" rel="stylesheet" type="text/css"/>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://rawgit.com/tannernetwork/resizable/master/resizable.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/tannernetwork/resizable/master/resizable.min.css">
<script>
$(function(){
$("#left-bar").resizable({
direction: 'right'
})
})
</script>
</head>
<body>
<div id="main">
<div id="left-bar"></div>
<div id="topic-window">
<iframe id="docWindow"></iframe>
</div>
</div>
</body>
</html>
Here is how it works when there is no iFrame in the #topic-window div:
#main{
height: 900px;
width: 1800px;
background-color: aqua;
display: flex;
}
#left-bar{
height: 100%;
width: 250px;
background-color: blue;
outline: medium solid red;
margin-right: 1px;
display: inline-block;
}
#topic-window{
height: 100%;
width: 100%;
background-color: navy;
outline: medium solid red;
display: inline-block;
}
#docWindow{
width: 100%;
height: 100%;
position:relative;
background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="index.css" rel="stylesheet" type="text/css"/>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://rawgit.com/tannernetwork/resizable/master/resizable.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/tannernetwork/resizable/master/resizable.min.css">
<script>
$(function(){
$("#left-bar").resizable({
direction: 'right'
})
})
</script>
</head>
<body>
<div id="main">
<div id="left-bar"></div>
<div id="topic-window">
</div>
</div>
</body>
</html>
So as you can see, it’s pretty smooth when there is no iFrame. That’s the performance I want.
I am new with jQuery so I can’t figure a way around this, can anyone point me in a direction to overcome this issue?
2
Answers
With help from CBroe and some additions from myself, I got the result that works just the way I wanted.
Here is the snippet for all who are interested:
This would be the effect of the iframe window "swallowing" the mouse move events, which the resize plugin itself needs to determine which way you are moving the divider.
You should be able to counter-act this, by setting
pointer-events: none
for all elements inside the panels, when resizing starts – and removing it again, when it stops.