jQuery UI Resizable - wonky resizing if element is placed next to an iFrame

ataerena
August 2, 2023
211 views
0 votes
2 Answers

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?

Answers

Chosen as BEST ANSWER

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:

#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;

    flex: 0 0 auto;
}

#topic-window{
    height: 100%;
    width: 100%;

    background-color: navy;

    outline: medium solid red;

    flex: 1 1 0;
}

#docWindow{
  width: 100%;
  height: 100%;

  position:relative;

  background-color: yellow;
}

.ignore-pointer-events > * {
  pointer-events: none;
}

<!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',
                resizeWidthFrom: 'left',
                start: function() {
                  $('#left-bar, #topic-window').addClass('ignore-pointer-events');
                },
                stop: function() {
                  $('#left-bar, #topic-window').removeClass('ignore-pointer-events');
                },               
            });
        });
    </script>
</head>
<body>
    
    <div id="main">
        <div id="left-bar"></div>
        <div id="topic-window">
            <iframe id="docWindow"></iframe>
        </div>
    </div>



</body>
</html>

(Edit)

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.

#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;
}

.ignore-pointer-events > * {
  pointer-events: none;
}

<!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',
                start: function() {
                  $('#left-bar, #topic-window').addClass('ignore-pointer-events');
                },
                stop: function() {
                  $('#left-bar, #topic-window').removeClass('ignore-pointer-events');
                },               
            })
        })
    </script>
</head>
<body>
    
    <div id="main">
        <div id="left-bar"></div>
        <div id="topic-window">
            <iframe id="docWindow"></iframe>
        </div>
    </div>



</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

jQuery UI Resizable – wonky resizing if element is placed next to an iFrame

Answers