Yeah there's a value in the dbxGroup constructor to specify that. Have a look in Section 3 of the setup instructions ("Implementing the script") for "restrict drag movement to container axis"

Fred

Hmm yeah, I have seen it behave a bit like that ... I think it's margin values on the dbx-box element that do it. Try having no margins on those elements, and use padding or margin on other elements to create the spacing you want - that might avoid this quirk.

You can override the cookie yourself from other scripting - as long as the scripting is on the same domain, you can delete or overwrite the cookie whenever you want.

I need to implement something like a Yahoo-style portal where I can drag an article from any position in a column to a position in another column.

It seems that the dbx code only keeps track of 10 dbx-box's (within a group?) across page reloads. Is this known behaviour? Any constant I could modify to change this?

--- dbx[commented].js 2006-03-13 02:10:26.000000000 +0000
+++ dbx[commented].js 2006-03-13 02:20:43.000000000 +0000
@@ -471,6 +471,7 @@
{
//dbx.output.value += this.gid + '=' + dbx.cookiestate[this.gid] + '&';

+ var regex = new RegExp('-$','');
//iterate through values
for(i=0; i<num; i++)
{
@@ -482,7 +483,7 @@

//if we're using toggle buttons, and
//if the box (in its corresponding place in boxes array) should be closed
- if(this.toggles && dbx.cookiestate[this.gid][i].charAt(1) == '-')
+ if(this.toggles && regex.test(dbx.cookiestate[this.gid][i]))
{
//send this box button to toggle box state method, but don't save
this.toggleBoxState(this.buttons[index], false);

But what you're describing would certainly be useful - I'm looking into the possibility of wider functionality to allow users to remove boxes forever, and add them back via some kind of generated control panel, so it's not far from that to adding the functionality for the number of boxes to be truly dynamic.

What did you have in mind specifically - that the number changes via your own mechanism and the states are retained on a "best fit" basis? Or a user-centered mechanism for adding or removing different kinds of content?

@ward - thanks for the update, and I will be incorporating that into an incremental update very soon.

Any suggestions on this?
Thanx

Question: I'm trying to use dbx to maintain lists of URLs that are user-editable after pageload. I've been successful at dynamically inserting new dbx-content entries (which are also subsequently deletable) with this line of code:

N.B.:
divINSERT is a blank div already living at the right place within an existing db-box div
u ensures div id uniqueness
xButtonTiny2.bmp is a little button that appears to the right of each URL allowing the user to delete the entry


document.getElementById("divINSERT").innerHTML +=
"<div id='liveURL" + u + "'>" +
"<LI><A href='" + incomingURL + "'" +
" target='AuxWindow'>" +
incomingURL + "</A>" +
"<a href='javascript:;' onclick='removeEntry(\"liveURL" + u + "\")'><img src=\"xButtonTiny2.bmp\" border=0></a>" +
"</LI></DIV>"


When I attempt a similar stunt to insert new a dbx-box div, it seems like it's working -- a new blank box appears, except it has no toggle, and it kills the draggability of all db-box divs. What am I doing wrong, or is what I'm attempting not feasible? Thanks in advance,
--Eric

Not at the moment no, because the number of boxes has to be stable - if you add new boxes into the group then they will not be dynamic, and the other boxes will freak out because their group content has changed and so the DOM relationships are different.

But ... I can now announce that dbx3 is well in development, including all the new features that have been requested, and some very tasty stuff besides :) A quick precis:

* support for two-dimensional sorting, including a rules engine for defining and limiting the movement of objects within a grid

* the number of boxes in a group can be truly dynamic; you can add or remove boxes externally to the program and subsequent page views will handle it, and you can add or remove boxes in the middle of a page view and call a refresh() method to re-initialize them

* you can move boxes between groups on the same page

* there are new API methods that allow you open, close and move the boxes programmatically

And of course, all the behaviors are accessible to the keyboard as well as the mouse. There'll be a version 3 beta in the next few weeks.

In the meantime, I've just upblished a 2.02 update that patches a couple of bugs, including the 10-box limit mentioned in this thread.

http://trac.wordpress.org/ticket/2660

The reporter suggests encoding the commas in the cookies. Alternatively, you could use a different delimiter.

Cheers!

I think the best thing (keeping down the data size) is to use a different delimiter, probably a "|" symbol; then the script will have to recognise the existing comma-based format, and convert to the new format seamlessly.

I'll try to get a patch out in the next few days. Thanks for the heads-up :)

That would be pretty cool! Got 2 menu's (left and right) and I want to swap boxes between them.

Any idea how I can fix the no-select thing in IE? When I remove the document.selecstart = return false; part the selection works but the menu's don't anymore ...

And I got some page where selection is needed :/
But also the menu's ... Hard choice.

@Thijs van Ham You've got me worried now :-O The selectstart is added and removed dynamically, so it should only affect the page while a drag is actually happening - as soon as you let go of a box, the selecstart is released and text selection should work as normal.

Is that not what you're seeing?

But no, indeed. I can't select anything, not while dragging nor when I don't touch the boxes at all.

Even on your own page (http://www.brothercake.com/site/resources/scripts/dbx/) I can't select any text in IE. So it's not the modifications I made to the file (even the default one doesn't work).

Using IE 6.0 Build 2900.2180 Service Pack 2 on Windows XP Pro.

For page selection - it's not supposed to do that! It should be transparent .. I shall investigate further. Ta :)

Thanks,
Ward.

Probably the problem is in the way Firefox "parses" a website that way and you'll get stuck on that problem. I think - correct me if I'm wrong - you can't do anything about that ...

But as I was musing this I had an idea that might work ... basically the idea is to do immediate procedural coding in the main script (which is in the <head> section - or should be ;)) and use that to generate a stylesheet which applies a closed state to the content area by default; since it's procedural and in the head section, it should kick in immediately and hence the boxes will be rendered closed.

This would have no access to the HTML structure, but it would have access to config data - so although it would not be possible to use this to pre-close selective individual boxes, it should be possible to use it where all the boxes are closed (such as when the config is auto-hide and no user settings yet apply).

Worth doing do you think?

Let's say i will like to use a 2 columns structure. It is possible to move one box from one column to another ( from possition 1-2 to 2-3 for ex )... ? sorry for my english

I am having a problem with my script in IE. After some debugging, it is throwing an error on this line:

var button = arguments[0].appendChild(dbx.createElement('a'))

...and throwing this error:

"Unexpected Call to Method or Property Access"

any ideas?

I needed to set the item "include open/close toggle buttons ['yes'|'no']" to 'no'.

Thanks again!

I am seeing some bizarre behavior - whenever I initialize the dbxManager object, the script re-orders all my boxes. Seems to be pretty random what order it chooses - it seems to vary from load-to-load and from ie to firefox.

Anything I am missing?

Ben

One thing - I tried to set it up so that a table is the "group" and the individual columns in the tables are "boxes". Looks like that's not working for me. You ever see it work?

Ben

@ashley I'm just getting an "account suspended" message from that link.

I removed your first message because you yourself said it was badly formatted. Can I suggest you get together exactly what the problem is - description of circumstances, and a demo, and then post your question again. In the meantime I'm going to delete your other posts.

my problem is that when in ie (im currently using 7 but it also happened in 6) the right hand menus (boxes) do not function properly and an error is thrown when attempting to move them. also note how the boxes do not close up to have round edges at the bottom.. on my local machine they do

however when usng firefox the boxes function correctly.

i just updated to 2.04 that fixed the selection error

don't access via treble.lfhost.com/1024/index.php - it won't work because of my php includes file (fixing that now)

thanks

Excellent script that has saved me a lot of time and I'm really looking forward to the dbx3 update! :D

One of the things that I'd like to do is move individual content items between boxes e.g. say I have the following structure:
Box 1
*item 1
*item 2
*item 3

Box 2
*item a
*item b
*item c

Is it possible to move item 2 from Box 1 into Box 2?

For example:
if I close all teh boxes and then I reload the page and the last box is now opened.

I should stress that it really is an alpha, in that:

- the script files are huge
- and not entirely stable
- there are lots of little bugs in various browsers
- it probably doesn't work in IE

Having said that, it is feature complete - everything that it's going to do is there, and there's a range of demos in the zipfile that show off the various new features.

Definitely don't use this on a production site, and even pre-development with it would probably be premature, but it should give a good sense of what the new version will do and how it can integrated.

Thanks for any light you can shed on this. Again - nice code.

~c

In my case the issue seems to be the product sharing a cookie with another (in my case WebWiz Forums). I come to this conclusion as if I delete the cookie then go into the site, the boxes work as expected. However as soon as I go in to my forums and the forums add their bit to the end of the cookie (which doesn't seem to affect the dbx part), the box opens up again and there is no way to get it to remain closed.

I am not sure if this is a v2 issue or not. Any thoughts on how to fix, or whether v3 might address the problem?

TIA

dbx-main
cabsidenav:0+|1-|3-|2-|4+
cabnet/
1088
1204705792
29865298
3476361888
29791872
*
WWF
LTVST=38891%2E6188541667&UID=browndaC4BC36E651&NS=0
cabnet/
1024
484705792
29865298
2767431888
29791872
*

I don't have an online demo as this is for an intranet site.

Doesn't seem to be linked to the cookie issue above - the brothercake cookie I have is only being used by the dbx application.

Suggestion?

RE: JAWS support: The script is actually designed so that the scripted handlers don't work in JAWS and other screenreaders. The problem is that what the script does, fundamentally, is a linear re-ordering of content, and for a user who can't see that happen it's difficult to convey the meaning of it.

In the absence of any way to make the reader just speak the explanation (because you can't make a reader just "say something" on demand), how does a blind user know that the content has changed? And how meaningful is that change in content anyway?

These are tricky questions, and I don't have the answers, so it seemed to me the safest thing to do overall was to degrade the content to non-scripted, as it is for non-JS devices.

But sure, it's not an ideal situation. Really we'd like to be able to make scripts that do work and provide meaningful functionality to screen readers and other access devices. Google for "screen readers javascript" ... :)

and the next time when a user logs in i want to populate the elements order from the databse. Is this possible?

Could you explain me how to do it?

and the next time when a user logs in i want to populate the elements order from the databse. Is this possible?

Could you explain me how to do it?

Since Version 3 is still a little way off (stability is not a feature :D) I'll publish another v2 update soon to patch this problem.

If anyone has any other minor glitches or bugs to report - now's the time :)

I to am experencing the 'open box issue'

Again, this thing RULZ

By the way nice script, no problems at all!

Congratulations for this great script - it's exactly what I was looking for!

I'm wondering if you could perhaps put me on the right track concerning a small mod though. I'd like to keep the cookie on the user's computer and always read from it even after several days without visiting the site etc. Of course I understand that if the user cleans his browser's cookies he'll loose his layout and go back to the default one, but that's ok. I'd just like to know if it's possible for me to change the code so that the cookie stays active throughout several sessions. Any tips really appreciated. :)

I'm also really looking forward to version 3 and using multiple groups!!!!

Best regards,
AndieR

Congratulations for this great script - it's exactly what I was looking for!

I'm wondering if you could perhaps put me on the right track concerning a small mod though. I'd like to keep the cookie on the user's computer and always read from it even after several days without visiting the site etc. Of course I understand that if the user cleans his browser's cookies he'll loose his layout and go back to the default one, but that's ok. I'd just like to know if it's possible for me to change the code so that the cookie stays active throughout several sessions. Any tips really appreciated. :)

I'm also really looking forward to version 3 and using multiple groups!!!!

Best regards,
AndieR

My idea: Start the dbx with an opacity (by example 50) and when the users moves over the dbx-box it fades in. Then when another box gets the focus, the former fades out and the selected box fades in.

Best Regards

Urs Widmer

dbx2.04 implicitly requires that the dbx-box elements are direct children of the dbx-group elements (as opposed to grandchildren, etc.). If this requirement were made explicit, and if dbx-handle elements were similarly required to be direct children of the dbx-box elements (which is currently not required), control over nested dbx-groups can be accomplished fairly easily with a little CSS and JS.

Would you consider this for your next release? I can offer the actual code I'm working with as an example if you'd like to see it.

Thanks for the awesome script.


--- dbx[commented].js 2006-05-20 14:34:18.000000000 -0700
+++ dbx[commented]-new.js 2006-07-26 23:01:32.000000000 -0700
@@ -343,7 +343,7 @@
for(var i=0; i<this.eles.length; i++)
{
//if it's a docking box and not a dummy
- if(/dbx\-box/i.test(this.eles[i].className) && !/dbx\-dummy/i.test(this.eles[i].className))
+ if(/dbx\-box/i.test(this.eles[i].className) && !/dbx\-dummy/i.test(this.eles[i].className) && this.eles[i].parentNode == this.container)
{
//re-inforce relative positioning and block display
this.eles[i].style.position = 'relative';
@@ -378,7 +378,7 @@
}

//if it's a handle
- if(/dbx\-handle/i.test(this.eles[i].className))
+ if(/dbx\-handle/i.test(this.eles[i].className) && this.eles[i].parentNode.parentNode == this.container)
{
//re-inforce relative positioning and block display
this.eles[i].style.position = 'relative';


Any chance dbx3 will support nesting?

I'm particular interested in the new feature being able to move boxes between groups.

Best,

Jesper
http://www.jesper.com

re: trademark Yes I'm aware that there is already a product called "dbx", but the trademark is one of that name with a specific appearances and context - there's no trademark or copyright in just the word, and there's no connection or passing-off between what I'm doing here and that product. Correct me if I'm wrong, but I don't believe there's any reason why I can't use this name?

re: nested boxes That's not directly supported no, but with Version 3 will come the ability to move boxes between groups, and that can amount to the same thing - it's just a case of styling and semantics - nested boxes is the same as groups of boxes.

FYI - v3 will also include the ability to re-initialise all or individual groups at any time after page load, and this will allow for AJAX-controlled dynamic groups.

As to when v3 will be ready - well I gotta be honest and say it won't be for a little while yet; there's quite a lot of work still to do, and I don't have a lot of time. It could be a few months yet.

So for example, you instantiate a dbxGroup and save the reference:

var group = new dbxGroup

Then you'll be able to identify specific boxes and manipulate them, for example:

group.toggle('box1', true); //to open the box with ID 'box1';
group.move('box1', false); //to move 'box1' up/left within a row or column
group.swap('box1', 'box2'); /to exchange 'box1' and 'box2'


What kind of mashups are you looking to be able to do, that aren't possible now?

I was trying to tie in to the scriptaculous library so the open/close toggle could be smooth.

Scriptaculous requires an id and for the id to be used in the toggle button, hence the id would need to be included in the parent div?
eg
<div class="dbx-box">
<span class="title">Thanks dbx!</span>
<div class="dbx-handle" id="myBox"></div>
<div id="myBoxCont" class="dbx-content"><div><!--2 divs for scrptcls -->
<a href="">a heap</a><br>
<a href="">a tonne</a><br>
</div></div><!-- end dbx-content -->
</div><!-- end dbx-box -->

this way in the dbx function that writes the toggle button i could include something like (im not a programmer) button.onclick=javascript("Effect.slide([parent.id] + "Cont"))

??

thanks in advance for comments

@Mosey Sounds cool :) What hard edits were required, maybe that's something I can cater for?

In a nutshell, is there a proper way to have 2 different columns with 2 different widths?

Any help is appreciated.

-Suri

I found that the this problem occurs when the DOM is dynamically created. Basically I am adding a dbx-box dynamically within a dbx-group. When I try to move the boxes around, it fails with the error mentioned.

Any help in making dbx work in a dynamic DOM situation is appreciated.

Regards,

-Suri