Problems combining a pane splitter and jstree with Javascript

Question

I'm trying to combine the tree display library jstree and a re-sizable plane splitter, Splitter.js library and am having problems.

The splitter library is at http://methvin.com/splitter/ . jstree is available from http://www.jstree.com/

I'm aiming for the tree to appear on the left and the content to appear on the right.

Both libraries work on their own but when I can't figure out how to combine them. The way each positions elements seems to conflict.

What I currently have is

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" type="text/css" href="../styles/splitterStyle.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SOPs jsTree</title>
    <script type="text/javascript" src="../_lib/jquery.js"></script>
    <script type="text/javascript" src="../_lib/splitter.js"></script>
    <script type="text/javascript" src="../jquery.jstree.js"></script>
    <script>
    jQuery(function($) {
       $('#elContainer').jstree({core : { animation : 50 }});
       // Breaks if this is added
       // $("#MySplitter").splitter();     
    });
    </script>
    <script>
    $().ready(function() {
       // Also breaks if this is added
       // $("#MySplitter").splitter();
    }); 
    </script>

 </head>
<body>

<div id="MySplitter">

  <div id="elContainer">
    <ul>
      <li id="phtml_1"><a href="someURL">treeRoot</A>
      <ul>
        <li id="phtml_2"><A HREF="someURL">leaf node</A></li>
        <ul>
        <li id="phtml_3"><a href="someURL">another leaf</A></li>
        </ul>
      </ul>
      </li>
    </ul>
  </div>

  <div id="content">
    Some content
  </div>
</div> 

</body>
</html>

score 0 · Answer 1 · edited May 23 '17 at 12:28

It looks like there is a problem with splitter and later versions of jquery.

This question discusses the issue:

Splitter.js won't work with new versions of jQuery

The answer from SpYk3HH refers to using jquery layout. This works. The code below shows an example.

<!DOCTYPE html>
<html>
<head>
<title>Layout Example</title>
<script type="text/javascript" src="_lib/jquery.js"></script>
<script type="text/javascript" src="_lib/jquery-ui-latest.js"></script>
<script type="text/javascript" src="_lib/jquery.layout-latest.js"></script>
<script type="text/javascript" src="jquery.jstree.js"></script>
<script type="text/javascript">  
$(document).ready(function () {
    $('body').layout({ applyDemoStyles: true });
    $('#elContainer').jstree({core : { animation : 50 }});
});
</script>
<script type="text/javascript">
    jQuery(function($) {
       $('#elContainer').jstree({core : { animation : 50 }});
    });
</script>
</head>
<body>
  <div class="ui-layout-center">Center content.</div>
  <div class="ui-layout-north">North</div>
  <div class="ui-layout-west">

    <div id="elContainer">
    <ul>
      <li id="phtml_1"><a href="someURL">treeRoot</A>
      <ul>
        <li id="phtml_2"><A HREF="someURL">leaf node</A></li>
        <ul>
        <li id="phtml_3"><a href="someURL">another leaf</A></li>
        </ul>
      </ul>
      </li>
    </ul>
  </div>

  </div>
</body>
</html>

Problems combining a pane splitter and jstree with Javascript

1 Answers1