25
07
2007
a few Splitter enhancements.
Posted by: Kae Verens, in javascript, splitter, web developmentas 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.
Entries (RSS)
July 27th, 2007 at 8:33 am
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.
July 27th, 2007 at 9:56 am
Yes. Using the above example, you could do:
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.
July 27th, 2007 at 10:46 am
Works like a charm! Thanks!
July 28th, 2007 at 1:35 am
For what it’s worth, this doesn’t work in IE 7. Arg.
July 28th, 2007 at 7:43 am
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.
July 29th, 2007 at 1:33 pm
okay. I installed XP in a virtual image and managed to get the splitter running. I’ve updated the splitter.js file.
July 29th, 2007 at 11:49 pm
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!
July 30th, 2007 at 9:27 am
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.
September 6th, 2007 at 5:49 am
Very very nice job
September 6th, 2007 at 3:04 pm
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
September 6th, 2007 at 8:24 pm
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.
September 19th, 2007 at 3:22 pm
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
September 19th, 2007 at 6:55 pm
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.
September 20th, 2007 at 5:35 am
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.
September 20th, 2007 at 7:12 pm
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!
December 18th, 2007 at 3:23 am
How to modify its style…? Can you have a demo or sample code to change the style of the splitter? thanks
February 6th, 2008 at 11:42 am
[...] Rozdzielacze (mootools) [...]
March 27th, 2008 at 12:48 pm
I really like this, was perfect for what I need, and most importantly it did not give me a headache to implement.
Thanks!
April 24th, 2008 at 8:44 am
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!
April 24th, 2008 at 11:46 am
@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)
May 21st, 2008 at 2:43 pm
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!
May 22nd, 2008 at 2:37 pm
… also – can minimum size be set in percents?
May 22nd, 2008 at 2:45 pm
@Temuri
I’ll do some work on this later today hopefully to get those two requests working.
July 1st, 2008 at 3:40 pm
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?
July 1st, 2008 at 4:07 pm
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);
};
July 1st, 2008 at 4:19 pm
sorry – replace
$M(with$(July 23rd, 2008 at 6:51 pm
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
July 29th, 2008 at 2:38 am
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
September 17th, 2008 at 1:29 am
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: “0×80004003 (NS_ERROR_INVALID_POINTER)” location: “JS frame :: file:///C:/downloads/Truptis_mooToolsStuff/scripts/splitter.js :: Splitter__addWidget :: line 159″ data: no]
September 18th, 2008 at 3:31 am
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('*');November 11th, 2008 at 2:11 pm
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
March 26th, 2009 at 11:11 am
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
April 21st, 2009 at 5:52 am
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
April 21st, 2009 at 9:50 am
@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.
April 21st, 2009 at 12:04 pm
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
April 21st, 2009 at 2:04 pm
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…
April 22nd, 2009 at 5:32 am
hello kae,
sorry to disturb u once again. splitter control is not working in mozilla browser. could u tell me any suggestion on that
April 22nd, 2009 at 7:24 am
@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.