GUI Table Editor

[Fringe Pioneer]

Has making UBBC tables been a problem, or have you avoided making tables because you didn't know how to make them? Do those [tr] and [td] tags scare you?

Now you can create tables without worrying about that! Introducing the GUI Table Editor, you may now specify the size of your table in rows and columns, edit the cells themselves, and click OK to insert into the post!

To use the GUI, create or modify a post (not using Quick Reply, but the old fashioned way) and click on the button of the silver table with nine squares in it. The GUI will appear, and you can work its magic!

Additionally, you can use the Enhanced Table tags from the previous Forum Update announcement and check the "Ignore Blank Cells" checkbox to make your tables look 1337!

[disabled]

Again a few rants from some dude about the Javascript:
1) The IsNumeric function is pretty bad. The for loop will cause problems, if you use IsNumeric inside loops, because the variable i doesn't have the "var" statement, so i is global. And the function is slower then needed:
function IsNumeric(input)
{
  return (input - 0) == input && input.length > 0;
}

is around 60% faster (for my browser at least). (But it only works on Strings and returns false if you already pass it a number, but for this purpose its perfect.)
On the other hand, isNaN is already implemented in all major browsers and does the same thing again twice as fast.
2) Why not structure the tables at least a bit? I'd put a "\n" in front of every "t+=..." part of the addtable and inserttopost function. And probably add a few spaces to the "t+="[td]" (so it becomes t+="\n [td]"). Then the generated tables are a bit better to read and edit.
3) rename the "blah" function to something sane. Why does the only function that appears to the user have a useless name?

I know its not your code Veers, but what kind of idiot coded that thing? That are the things I can say in about 5 minutes, I won't even comment on the fact you have to open a (two) popup(s) to generate the tables...
But then again it only shows how horrible Proboards is, because you even have to use those crude workarounds...

BTW: I never had the need to use tables, thats why I never used them. I wonder if others feel the same or if they will start to use them now.

[Fringe Pioneer]

Ok, so far I substituted the isNumeric function and renamed the blah function to tableGUIEditorHome. Not very short, but descriptive.

I admit that, when I make my tables, I always prefer indenting only at every new row, not at every new cell like you describe, but I guess I could do it your way. Since I usually find myself coding tables by hand anyways, as has always been necessary, the fix shouldn't affect me too much if at all as a user...

Jan 24, 2011 13:09:24 GMT disabled said:

I know its not your code Veers, but what kind of idiot coded that thing? That are the things I can say in about 5 minutes, I won't even comment on the fact you have to open a (two) popup(s) to generate the tables...
But then again it only shows how horrible Proboards is, because you even have to use those crude workarounds...

I'm glad to know you know it's not something I coded, but now I wonder if I could come up with an alternative that wouldn't be near as unsightly. I can't promise efficiency, but maybe a better starting concept that won't take as much to improve. Since the mod bot is acceptably complete (it's like an essay - it can never truly be complete), I should make this my new project...

[disabled]

Since I don't have much need for tables, I don't care that much about how they are displayed. All I know its a paint to read non-intended tables. Sure, for smaller tables with nearly equally spaced cells, its faster to have one line of code per line of table, but for bigger ones its probably easier to have one line per cell.
Whatever, I kinda think the technical discussion should be continued somewhere apropriate. (To be honest, I think announcements should be auto locked and have a discussion topic somewhere else. Because else I always think there is something important, when someone just tries the tables (for instance). Important points could be back-ported to the announcements.)

[Fringe Pioneer]

Well, wouldn't technical discussion of a code be the kind of important subject that an announcement about a new code would include? The things such as the test tables and other non-pertinent discussion, I agree with, and have moved to a sister discussion thread.

As for taking input, what would you suggest in place of popups? Looking at W3 Schools, it seems that I could either use dialog boxes to take basic input (e.g. number of rows and columns in the table), open up new windows (which seems to be what the Proboards code did), or do something seemingly complicated to put the GUI directly into the Create Post / Modify Post page...

[disabled]

Well in an announcement I'd kinda expect exactly that, an announcement. The Staff has made or discovered or whatever something new they want to tell everyone.
I don't give much if the announcement is not that interesting to me, thats all I'm gonna read. And I'm pretty sure not many are interested in my technical discussions about JS code. So what I write shouldn't be in a thread that everyone sees on every page (unless the mods think its that interesting, that they repost my information there). But whatever, since I don't view the forum in its normal form, I don't really care either way...

About the technology, I'd use something like what the "page 1 of 6" mouseover thingie does. If you want to look at it, its the "loadPageSpan" function. Here is a small start to it. Its nowhere finished and it should probably be made a bit more beatiful. I especially didn't do anything to the "innerHTML" and the called functions have to be changed too... If you have any questions, be sure to ask, I just have other stuff to do right now.

[Fringe Pioneer]

Alright, I think I'm ready to ask for help, since I can be blind to my own errors regardless of whether I want to be blind.

Taking what you had, I'm pretty sure I implemented everything else necessary to work without any popups, other than an alert box for when a user uses invalid input to specify rows and columns. I have the code that edits the JavaScript of the table button, just as the Proboards code did. I have the function you started, slightly modified, which should bring up the DIV element with two text fields for input. I have a function that uses a regex test to check if the input is strictly a number with 1 or 2 digits, and conditionally either asks the user to reinsert input or changes the innerHTML of the DIV element to include a table of text areas. I finally have the function that takes input from the table of text areas, removes the DIV element, and inserts the appropriate UBBC into the post.

My problem seems to be that the DIV element won't appear. When I hover the mouse over the table button, Firefox's status bar indicates that the button would call "javascript:tableGUI();", but clicking that button doesn't seem to do anything. I think my main problem lies within the tableGUI function, which is ironically the one you started.

pastebin.com/8PY7ZHwU

Would you (or anyone else who is proficient with JavaScript) serve as another pair of eyes? Thank you...

[disabled]

Hmm weired... it seems bgcolor is not defined as a global variable anymore. I mean that code did run when I posted it. (I injected it with firebug and it did pop up something.)
I wonder don't you use firebug? Because when I run the code it immediately says "bgcolor is not defined"...
That wasn't the only problem though. But I think I fixed them all, so it now works for me.
I also restructured the newlines on the table elements a bit, so it looks nicer to me.
Here is the code:
pastebin.com/YzXapdER

[Fringe Pioneer]

Well, thank you yet again. Now the GUI Table Editor is back up...

[disabled]

Works quite well... unless there is one cell with no content.
I kinda wonder, what the ignoreEmptyCells things purpose is. Is there some situation, where you woudn't want empty cells to work?
This one should just work and don't ask about empty cells:
pastebin.com/Vn0R4Zs9

And we should probably add a button to cancel the thing without creating a table...

[Fringe Pioneer]

Alright, I added a Cancel button to both the row/column innerHTML and to the table edit innerHTML, and they seem to work without problems.

At first, it didn't work and Firebug indicated a problem with the new function I created for removing the DIV element. I didn't see what was wrong, but I copied the functions statement from a version before I made the function, pasted it into the function, and now it works. I must have made a spelling error when typing "getElementID"...