Diese Seite mit anderen teilen ...

Informationen zum Thema:
WinDev Forum
Beiträge im Thema:
Erster Beitrag:
vor 5 Jahren, 7 Monaten
Letzter Beitrag:
vor 3 Jahren, 1 Monat
Beteiligte Autoren:
Michael Drechsel, Piet van Zanten, Michael Q, Gianni Spano, Allard, Pragma Tix

[WB17] Where are the HTML Gurus ? I need a splitter

Startbeitrag von Michael Drechsel am 09.11.2012 10:09


I ask some days ago for a splitter in webdev.

The scenario is:

I have a treeview at the left side and a content at the right side. (Like the file explorer)
If the treeview words are to large the user want to resize the treeview part so that the can see the whole words.

Splitter are not availible in Webdev. Is there any way to do that with other methods ?


Hi Michael,

I could use splitters too.
Probably jquery wil be the way to go, I'll check this weekend if I can use it in Webdev and let you know.


von Piet van Zanten - am 09.11.2012 11:14
ok, thx

von Michael Drechsel - am 09.11.2012 11:35

You could work with frames?

regards Allard

von Allard - am 09.11.2012 11:58
Hi Alard,

This was my first idea. But I believe we cannot change the width of the frames at runtime.

von Michael Drechsel - am 09.11.2012 12:02
As Piet allready mentioned, Javascript is what you need.
--I guess Piet is talking about jQuery UI.

The Dojo/Dijit toolkit has some outstanding layout managers. Unfortunately I have not been able to convince WB17 to cooperate with this toolkit

This is the most relevant link I could find.

HTH and PLEASE let me/us know If you are able to make it work ! (in case that you give it a try)

von Pragma Tix - am 09.11.2012 12:33
After some cups of coffee:

The quick and dirty method (also known as the "PC Soft"-way :rp:) is:

You define 2 cells, one with the treeview in it and another with your table and 2 buttons under there with "move right" and "move left"

In the button code:


and so on.

Unfortunatly we don´t have a mouse down and up event ...

von Michael Drechsel - am 09.11.2012 13:49

here is a little test project with the "poor man's" splitter. If anyone can insert a method with a smooth mouse movement please call me.


von Michael Drechsel - am 11.11.2012 16:37

I tried http://methvin.com/splitter/vsplitter.html.
In its simplest form it uses a div with two divs inside.
So I put the required div tags in the html before and after the controls.
Indeed I could get a splitted area in Webdev, but unfortunately I could not get any Webdev controls to appear INSIDE the divs.
Because Webdev 17 still uses html tables for formatting (even with two simple statics), the divs appear inside table cells, which is not the document structure javascript expects.

So unfortunately no go with javascript.
I already suspected it would not be easy, because otherwise the splitter would probably have been announced in v18.


von Piet van Zanten - am 12.11.2012 09:27
Hi Michael,

It's a nice solution, well done.
If I can find the time I'll try and modify the javascript code of vSplitter to handle Webdev objects by id.
For now there are more urgent tasks.


von Piet van Zanten - am 12.11.2012 11:22
Hie Piet,

if I put this code in the mouse Move event of a splitter button


the splitter moves in the right direction (but not in the left ...)

If I could find out why the problem is solved ...

von Michael Drechsel - am 12.11.2012 11:36
Hi Folks,

here is it:


It works up to 98 % like a common splitter.

Moving the splitter while pressing the mouse doesn´t work. you must press the mouse, release and move and click again to stop it.

maybe can anybody found a solution for the last problem ...

von Michael Drechsel - am 12.11.2012 12:25
Hi Michael,

This is good teamwork, I got it working and we have us a real splitter!
todo: Ajaxexecute on Mouseup to pass the final position to the server, so the splitter will not return to basic on pagerefresh.


von Piet van Zanten - am 12.11.2012 15:08
Hi Piet,

did you use my last upload or got we the same goal at different ways ?

Anyway ... change the cursor type to ArrowWE and its the same as my solution :-)

von Michael Drechsel - am 12.11.2012 15:34
Hi Michael,

I used your most recent upload (unless you changed it in the mean timer) and did some adjustments:
- added a global variable to check if a splitter move is in progress.
- moved the resizing operations to a local browser procedure
- moved the mouse up process to page code (the splitter move ran into a undefined state if the resizing could not keep up with the mouse movement)
- moved some variables outside the splitter procedure to reduce the number of calculations

It now runs smoothly.


von Piet van Zanten - am 12.11.2012 15:57
Hi Piet

Good job!!! I was searching for an easy solution and i found it!!



von Gianni Spano - am 13.11.2012 09:50

The link to your code in this thread is dead. Any chance you could send me a copy or refresh the link?

Many thanks,

von Michael Q - am 29.04.2015 18:44
Zur Information:
MySnip.de hat keinen Einfluss auf die Inhalte der Beiträge. Bitte kontaktieren Sie den Administrator des Forums bei Problemen oder Löschforderungen über die Kontaktseite.
Falls die Kontaktaufnahme mit dem Administrator des Forums fehlschlägt, kontaktieren Sie uns bitte über die in unserem Impressum angegebenen Daten.