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.
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.
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.
Works like a charm! Thanks!
For what it’s worth, this doesn’t work in IE 7. Arg.
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.
okay. I installed XP in a virtual image and managed to get the splitter running. I’ve updated the splitter.js file.
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!
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.
Very very nice job
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
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.
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
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.
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.
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!
How to modify its style…? Can you have a demo or sample code to change the style of the splitter? thanks
Pingback: Mootools - 40 przyk?adowych zastosowa? | Ptaszor i jego blog! Lol...
I really like this, was perfect for what I need, and most importantly it did not give me a headache to implement.
Thanks!
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!
@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)
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!
… also – can minimum size be set in percents?
@Temuri
I’ll do some work on this later today hopefully to get those two requests working.
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?
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);
};
sorry – replace
$M(
with$(
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
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
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]
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('*');
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
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
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
@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.
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
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…
hello kae,
sorry to disturb u once again. splitter control is not working in mozilla browser. could u tell me any suggestion on that
@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.