25 Jul

a few Splitter enhancements.

as promised, the Splitter can now do vertical splitting as well as horizontal.

Also, I’ve implemented minimumSize for the panels.

An example:

top left, minimum height 50px
bottom left, minimum height 100px
right, minimum width:50px

The HTML for the above is this:

<div id="splitter_wrapper" style="height:200px;border:1px solid #000">
  <div id="topleft">top left, minimum height 50px</div>
  <div id="bottomleft">bottom left, minimum height 100px</div>
  <div id="right">right, minimum width:50px</div>
</div>

and the javascript is this:

var horizontal=new Splitter($("splitter_wrapper"));
var vertical=new Splitter(false,{orientation:1});
vertical.addWidget($("topleft"),{minimumSize:50});
vertical.addWidget($("bottomleft"),{minimumSize:100});
horizontal.addWidget(vertical);
horizontal.addWidget($("right"),{minimumSize:50});

The Splitter class requires Mootools. You can get the class file here.

38 thoughts on “a few Splitter enhancements.”

  1. Burton -

    Great work; I really like it! Is there a way to set the starting width of a div, instead of it defaulting to the splitter being positioned halfway?

    Again, I really appreciate your work! I’ve got to start playing around with mootools.

  2. Kae Verens -

    Yes. Using the above example, you could do:

    vertical.setSizes([10,90]);
    horizontal.setSizes([45,55]);

    Note that the numbers I’ve provided here are not exactly equal to the actual width and height of the splitters. The numbers are just a guide to the ratio. If you want to use the exact numbers, you can, but if you’re a bit off in your calculation, that’s fine as well – the Splitter class will fix the numbers for you.

  5. Kae Verens -

    lol! there’s always something! I never seem to think of IE these days… I’ll see what I can do about it (haven’t got Windows on any of my machines here, but I may be able to get a virtual machine image with it). I’ll have it fixed soon.

  7. Burton -

    Well, I looked at the sample in both Firefox and IE 7. The slider doesn’t seem to work anymore in Firefox. And while it works in IE now, focus is stolen away from any textboxes on the page. For example, I’m writing this in Firefox, because I couldn’t in IE.

    Hope that was helpful!

  8. Kae Verens -

    solved.

    the Firefox problem appears to have been caused by WordPress (window.ie is ‘true’ even in Firefox).
    the IE problem was my own fault – type which removing a document.mousemove event.

  10. Kow -

    Hi,

    Great job, but I don’t get it, why you decided to use MooTools. I love that framework, but it’s not necessary to use it here. It would come extremly useful to me in a recent project…

    Consider a rewrite,

    Cheers

  11. Kae Verens -

    I used MooTools because I was considering using the Splitter idea in two projects, both of which use MooTools.

    Consider a rewrite? lol! no. It works as it is.

  13. Kae Verens -

    I /could/, but that would miss the point of the class – the class’s point is not to be cool, but to provide functionality which was previously absent. I needed a Splitter class – not a cool slidy thing.

    Your example is pretty funky, but I don’t think it really applies to what I was trying to do.

  14. Newbie -

    http://extjs.com/deploy/ext/docs/index.html

    I see that in the ExtJs first page demo, between the 2 divs “Documentation Explorer” & “View Documentation” is a splitting control but when you click on the small button “<<” then the “Documentation Explorer” will be hidden. It’s so cool but ExtJs is so big that I hope Mootools’s scripts can do something like this.

  15. Kae Verens -

    ooh, now /that’s/ nice! I won’t do it today (exhausted), but will do something like that over the weekend.

    also, I’ll add the ability to make a panel size static (ie, to stop it from growing or shrinking) and a “maximum size” as well. Should have all this done by Sunday – or tomorrow if I get the time!

  17. Pingback: Mootools - 40 przyk?adowych zastosowa? | Ptaszor i jego blog! Lol...

  18. Paul Clift -

    I really like this, was perfect for what I need, and most importantly it did not give me a headache to implement.

    Thanks!

  19. Steve -

    We are using this in our project but we have some slight problem with the initial width when the page is loaded. Can give me some hint how to set the initial width? Thanks!

  21. Temuri -

    Hi Kae,

    Thank you for your efforts!

    Question – do you consider building in functionality to resize panels to fit browser window width & height in the event of resize?

    Thanks again!

  24. Robert Briggs -

    I am getting the error ‘object does not support this property or method’ in the Splitter.js file on the following line:

    pseudoHandle.remove();

    Also – I had another minor issue with the use of the $ES selector – in the Mootools 1.2 I downloaded, it did not have this alias defined?

  25. Kae Verens -

    you can rewrite that line like this: pseudoHande.parentNode.removeChild(pseudoHandle);.

    you can add the $ES function to the splitter file if it’s missing:
    function $ES(selector, filter){
    return ($M(filter) || document).getElementsBySelector(selector);
    };

  27. Matt Nolte -

    Hi Kae,

    I tried to add the $ES function, but I get an error: “Object doesn’t support this property or method” when it tries to call getElementsBySelector(). This happens when it is called like this: var children=$ES(‘*’,this); from Splitter__setSizes(). I have “mootools-1.2-core-nc.js” for the mootools core.

    Matt

  28. Wes -

    Hi Kae,

    I’m getting the same. I get “Object doesn’t support this property or method” on .getElementsBySelector. I tried replacing this with getElementsByTagName and getElementsByName, but then I got an error on the children.each(…) in the calling code.

    I’m using the same mootools as Matt.

    Wes

  29. Trupti -

    Hi Kae…

    I was trying to use your splitter functionality..However it doesnt work with mootools-1.2-core.js. Do u have an updated version of the splitter.js that works with mootools-1.2??. This is the exception that I get , if I use mootools-1.2-core with ur current version of splitter. js

    Error: uncaught exception: [Exception… “Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMHTMLDivElement.appendChild]” nsresult: “0x80004003 (NS_ERROR_INVALID_POINTER)” location: “JS frame :: file:///C:/downloads/Truptis_mooToolsStuff/scripts/splitter.js :: Splitter__addWidget :: line 159” data: no]

  30. Trupti -

    Hi Kae,

    I figured out the changes myself , so now the modified version of splitter.js works with mootools-1.2-core.js :). Not many conversions..I m pasting them here..so that others can benefit from them…Would also like to email/upload the modified file if you send me the email address. Thanks!!

    Hope this helps others!!
    ********************************************************
    Converting splitter.js to make it compatible with mootools-1.2-core.js
    —————————————————————————————–

    Line No
    1.1 version
    1.2 version

    41
    var children=$ES('*');
    var children = document.getElements('*');

    122
    pseudoHandle.remove();
    pseudoHanlde.dispose()

    259
    var children=$ES('*',this);
    var children = this.getElements('*');

  31. Matthew -

    The convert to mootools-1.2 isn’t complete, or at least doesn’t work.

    Instead of:
    var children=document.getElements(‘*’);
    use:
    var children=$(this).getElements(‘*’);

    otherwise it won’t work and you’ll probably get a “too much recursion” error

  32. mona -

    hi used the above code but it is showing error like class is not defined and $ isi not defined can anybody tell me how to use this code and how to add this class in php page i used like this

    var horizontal=new Splitter($(“splitter_wrapper”));
    var vertical=new Splitter(false,{orientation:1});
    vertical.addWidget($(“topleft”),{minimumSize:50});
    vertical.addWidget($(“bottomleft”),{minimumSize:100});
    horizontal.addWidget(vertical);
    horizontal.addWidget($(“right”),{minimumSize:50});

    top left, minimum height 50px
    bottom left, minimum height 100px
    right, minimum width:50px

    can anybody help me it’s very urgent

    Thanks in advance

  33. Jithendra -

    Hi Kae,

    your tool is great.. I’m using it in my project and i’m so weak in javascript. could u tell me how to keep the position of the spitter on postback. thanks in advance

  34. Kae Verens -

    @Jithendra – that is not implemented in this version. It is not obvious how it should be done – one method might be for the script to keep its own cookie for the exact URL the splitter is displayed on. Another method might be for you do write a JS script to get the position of the splitter as an onsubmit() action.

    Neither of those would be easy or perfect (the easiest would be the onsubmit(), but you say you are weak in JS).

    I can’t spend any time working on a solution, but I would suggest you look into the onsubmit() solution – when the form is submitted, send the splitter positions as a hidden variable. Then if the page is shown again, use that information to preset the position of the splitter.

    You might get a friend or colleague to work on it.

  35. jithendra -

    hai kae,
    i have another doubt,when i put this in my page the splitter takes the entire page. how can i put that in a particular row of a table without problems in the page design. plz help me

  36. jithendra -

    hai kae,
    sorry to disturb u again… i cleared all the problems with this splitter control. thnk u so much for such a great and simple control…

  37. jithendra -

    hello kae,
    sorry to disturb u once again. splitter control is not working in mozilla browser. could u tell me any suggestion on that

  38. Kae Verens -

    @Jithendra – I’ve no idea. it’s working fine in this exact page, so that means that there must be something about how you installed it into your own page.

    Try installing Firebug (http://getfirebug/) to find where the problem is – there’s a good JS debugger that comes with it.

Comments are closed.