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 on July 27, 2007 at 8:33 am said:

    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. 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.

  3. Burton on July 27, 2007 at 10:46 am said:

    Works like a charm! Thanks!

  4. Burton on July 28, 2007 at 1:35 am said:

    For what it’s worth, this doesn’t work in IE 7. Arg.

  5. 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.

  6. okay. I installed XP in a virtual image and managed to get the splitter running. I’ve updated the splitter.js file.

  7. Burton on July 29, 2007 at 11:49 pm said:

    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. 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.

  9. Very very nice job

  10. 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. 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.

  12. Well, it would be more nice if you can make the divs not only can be resized but also can slide in and slide out like in this page : http://www.mibhouse.org/pokemon_jojo/dev/test-pbbsidebar.html

  13. 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. 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. 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!

  16. How to modify its style…? Can you have a demo or sample code to change the style of the splitter? thanks

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

  18. Paul Clift on March 27, 2008 at 12:48 pm said:

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

    Thanks!

  19. 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!

  20. @Steve, you could use CSS to set it. what is the problem? if it’s possible for me to see it, it would make it easier to solve (my email address is kae@verens.com, if that’s possible)

  21. Temuri on May 21, 2008 at 2:43 pm said:

    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!

  22. Temuri on May 22, 2008 at 2:37 pm said:

    … also – can minimum size be set in percents?

  23. @Temuri

    I’ll do some work on this later today hopefully to get those two requests working.

  24. Robert Briggs on July 1, 2008 at 3:40 pm said:

    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. 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);
    };

  26. sorry – replace $M( with $(

  27. Matt Nolte on July 23, 2008 at 6:51 pm said:

    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. 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. 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. 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 on November 11, 2008 at 2:11 pm said:

    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. 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 on April 21, 2009 at 5:52 am said:

    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. @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 on April 21, 2009 at 12:04 pm said:

    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 on April 21, 2009 at 2:04 pm said:

    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 on April 22, 2009 at 5:32 am said:

    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. @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.

Post Navigation

%d bloggers like this: