I'm not a coder but have found what I want to achieve on codepen. I'm trying to combine the javascript with the html section on the demo page and have wrapped the js
<script>js copied from right-hand pane</script>
and moved it to the left-hand html section. I've tried it in the head and the body sections but it breaks the slide functionality. Can anyone tell me what I'm doing wrong please?
https://codepen.io/rstrahl/pen/eJZQej/
Thanks
You have add the following tags too:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
$(".panel-left").resizable({ handleSelector: ".splitter", resizeHeight: false }); $(".panel-top").resizable({ handleSelector: ".splitter-horizontal", resizeWidth: false });
html, body { height: 100%; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; padding: 0; margin: 0; overflow: auto; } .page-container { margin: 20px; } /* horizontal panel*/ .panel-container { display: flex; flex-direction: row; border: 1px solid silver; overflow: hidden; /* avoid browser level touch actions */ xtouch-action: none; } .panel-left { flex: 0 0 auto; /* only manually resize */ padding: 10px; width: 300px; min-height: 200px; min-width: 150px; white-space: nowrap; background: #838383; color: white; } .splitter { 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; } .panel-right { flex: 1 1 auto; /* resizable */ padding: 10px; width: 100%; min-height: 200px; min-width: 200px; background: #eee; } /* vertical panel */ .panel-container-vertical { display: flex; flex-direction: column; height: 500px; border: 1px solid silver; overflow: hidden; } .panel-top { flex: 0 0 auto; /* only manually resize */ padding: 10px; height: 150px; width: 100%; white-space: nowrap; background: #838383; color: white; } .splitter-horizontal { flex: 0 0 auto; height: 18px; background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/hsizegrip.png) center center no-repeat #535353; cursor: row-resize; } .panel-bottom { flex: 1 1 auto; /* resizable */ padding: 10px; min-height: 200px; background: #eee; } label { font-size: 1.2em; display: block; font-weight: bold; margin: 30px 0 10px; } pre { margin: 20px; padding: 10px; background: #eee; border: 1px solid silver; border-radius: 4px; overflow: auto; }
<html> <head> <title>Simple Split Panels - jquery-resizable</title> <meta charset="utf-8"/> </head> <body style=""> <div class="page-container"> <h1> jquery-resizable - A simple splitter panel </h1> <hr /> <p> Simple example that demonstrates how to create slidable two-pane layouts <a href="http://caniuse.com/#search=flexbox">using FlexBox</a> and the resizable plug-in. Note that Flexbox is not required, but used here to keep the layout simple. </p> <label>Horizontal Splitter Panes:</label> <div class="panel-container"> <div class="panel-left"> left panel </div> <div class="splitter"> </div> <div class="panel-right"> right panel </div> </div> <label>Vertical Splitter Panes:</label> <div class="panel-container-vertical"> <div class="panel-top"> top panel </div> <div class="splitter-horizontal"> </div> <div class="panel-bottom"> bottom panel </div> </div> <hr /> <p> This example creates two resizables for the horizontal and vertical splitter panes: </p> <pre> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="../src/jquery-resizable.js"></script> <script> $(".panel-left").resizable({ handleSelector: ".splitter", resizeHeight: false }); $(".panel-top").resizable({ handleSelector: ".splitter-horizontal", resizeWidth: false }); </script> </pre> </div> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.