Workspace Javascript

Often times I want to display similar but mutual exclusive information within a web page. For example, a view of an address and the form to update the address. Displaying the address in a form is functional but isn't very nice because it doesn't look great and the web page user can't select the entire text and copy it for use in other things. On the other hand, the traditional model of web pages would mean that you have a "view" web page and an "edit" web page with a form and so on. This isn't really great because the user is looking at a wrong address and then clicks "edit" to get the editing web page with the same data but different html markup.

I guess, you could get all fancy with AJAX and whatnot, but I already have something that will take an array of Javascript data and plug it into html. I just need something that will allow me to switch from the view to the update display without recoding in a bunch of onclick="changedisplay(edit_view)"'s. Enter the workspace switcher. Basically, you point it to where the workspace is and where the menu should be added and it seeks out the divs within the workspace. It hides the divs that don't have an attribute of class="active" and makes a menu with the ID attribute of the divs (capitalized and with spaces for underscores, rails-style). Very simple, very easy, now I can get back to whatever it was that I forgot about while doing this.

Type html in here and then click on Html Output to see the HTML:

Below is a second workspace within the Html Output element of the first workspace: