I'm attempting to create a layout with two divs positioned side by side, featuring a draggable center slider that can expand or contract the widths of these adjacent divs.
To accomplish this, I've integrated the jQuery Resizable plugin. Although the slider bar is visible, it's not responsive to dragging left or right.
The jQuery plugin has been properly enqueued to the Wordpress API:
wp_register_script('csukcode_script_9', plugins_url('assets/js/jquery-resizable-master/src/jquery-resizable.js', __FILE__));
wp_enqueue_script('csukcode_script_9');
How do I ensure that the slider correctly functions as intended? The jQuery code is embedded within a function set to trigger upon page load and accurately references the relevant div selectors.
jQuery(function($) {
$(".pan1").resizable({
handleSelector: ".rpanrResize",
resizeHeight: false
});
}).outerSplitPane {
display: flex;
flex-direction: row;
border: 1px solid silver;
overflow: hidden;
xtouch-action: none;
}
.pan1 {
flex: 0 0 auto;
padding: 10px;
width: 300px;
min-height: 200px;
min-width: 150px;
white-space: nowrap;
background: #838383;
color: white;
}
.pan2 {
flex: 1 1 auto;
padding: 10px;
width: 100%;
min-height: 200px;
min-width: 200px;
background: #eee;
}
.rpanrResize {
flex: 0 0 auto;
width: 18px;
background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat #535353;
min-height: 200px;
cursor: col-resize;
} <div class="outerSplitPane">
<div class="pan1" id="pan1">
<textarea id="yourcode" cols="40" rows="10">#Write your code here</textarea>
</div>
<div class="rpanrResize" id="rpanrResize"></div>
<div class="pan2" id="pan2">
<pre id="output" class="output"></pre>
<!-- If you want turtle graphics include a canvas -->
<div id="mycanvas"></div>
</div>
</div>
</div>View the development site live for an example: