BB Code Enhancements - BB Code [table]

BB Code [table]
by StGaensler

Description
This Hack provides a BB code [table] to add a table to the post
The skin of the table automatically fits the style because the CSS classes of vBulletin are used.

A table is simply made of some lines (will be the rows). The cols are seperated by |. So this will be a table:

[table="head"]head col1|head col2|head col3
row1 col1|row1 col2|row1 col3
row2 col1|row2 col2|row2 col3[/table]

A screenshot of a "ready" table is attached

Usage

1. install attached product XML through product manager (overwrite existing)
2. install at least one language pack in AdminCP -> Languages & Phrases -> Download / Upload Languages -> Import Language XML File
   Important: Select the language you want to import the phrases into, not "(Create New Language)" - this won't work! If you use another version of vBulletin than I use enable "Ignore Language Version" to import the language pack.

Please note: (installing)
Installing this product will: (reverted during uninstall)

1. rename a existing BB code "table" to "table_saved"
2. add a new BB code [table]

If you want to have live sortable columns (JavaScript): Download attached sorttable.js.txt rename it to sorttable.js and place it into the /clientscript/ folder of your vBulletin. Then go to AdminCP -> vBulletin Options -> BB Code [table] Settings -> Enabled Features Of This BB Code and enable sortable
Note: Including the file on the webpages where it is necessary is done by my product. So if sortable is disabled, it won't be included automatically.
If you want to have a icon for the editor you may use this for free: Download this icon and place it in your /images/editor/ folder.

Please note: (usage)

• Of course you can use vB Code and smilies inside the table!
• The first line defines how much columns are in the table. If the other lines have more or less colums they are cut off or filled with   (space)
• You can find a detailed description of the options (please read it before requesting help)
• Empty rows are (should be ) removed.

New features

• define colspan of cells
• small panel in AdminCP
• define CSS class of table and tablerows
• live sorting of table through clicking the head of a column
• defining maximum width of a table

Maybe planned features

• detailed description of the vB Code in misc.php?do=bbcode depending on the features enabled in AdminCP (planned for next beta version)
• define formatting (bold, italic), align (left, right, center) and width of the cols

Suggested but not planned features

• none

Known problems

• Bugfix of version 0.1.1 doesn't work if vBulletin should write template names into the source code

Version history:
0.0.1 - 0.0.5 internal releases for testing purposes (Thanks to Zombie79 from powerforen.de for testing)
0.1 first official release
0.1.1 fixed small bug: if a line ends with eg vbcode quote no new row was generated (should already have been fixed but did not work)
0.1.2 workaround: removed call to function bcmod(), it could also be done another way
0.1.3.x beta version described here (and following) - added admin panel, colpan and css feature
0.1.4 stable version - no significant changes to the last beta (0.1.3.8)
0.1.5.x beta version described here (and following) - added sortable, maxwidth, versioncheck, upgrade message, compatibility to vB 3.6
0.1.6 stable version - two bugfixes to last beta, {br} for posting linebreaks in a tablecell
0.1.7.x stable version - compatibility to vB 3.7 (description) - added tab seperated tables

This hack can be used for free. If you want to make a small donation, just contact me. We will find a way
I don't want this product to be distributed from other sources. Please don't upload it to other vBulletin related boards etc.

[toucan42]

anyone able to implement rowspan? the documentation handles colspan but I can't get rowspan to behave.

[toucan42]

giving up on rowspan I am trying nested tables - but the outermost table breaks such that i get two tables "stacked" but the outer table code is not parsed. (see screenshot attached)

My code is as follows:

[table width=100%]|
[table=head; width=80%]{colsp=2}

A Place To Eat - Some Named Object

Name:|Some Named Object
Address:|Address 1{br}Address 2{br}Some City, GA 32434
Phone:|
Guide Description:|some descriptive text [/table]|
[table=head; width=20%]Map Location map goes here|[/table]
[/table]

[toucan42]

it's really treating the second table as another ROW instead of column - arrrgh! anyone?

[Eagle Creek]

I love it!
Thx.

What's live sortable columns?

[evesve]

Originally Posted by toucan42

it's really treating the second table as another ROW instead of column - arrrgh! anyone?

I don?t know how you want it to be but this is a guess:

[table]|
[table=head; width=80%]{colsp=2}
A Place To Eat - Some Named Object
Name:|Some Named Object
Address:|Address 1{br}Address 2{br}Some City, GA 32434
Phone:|
Guide Description:|some descriptive text
[/table]| [table=head; width=20%]Map Location map goes here
[/table]
[/table]

[Eagle Creek]

HU??
What am I doing wrong:



[table="head;width=100%"][size=3][B]Verkeerde anti-spywareprogramma's[/B][/size]
Blablabla[/table]

[table="head;width=100%"][size=3][B]Verkeerde anti-spywareprogramma's[/B][/size]
Blablabla[/table]

As you can see I use the exact same piece of HTML code twice. Nevertheless, it appears not the same on my screen. Only the second table has a width of 100%.

Please advice.

[MikQuattro]

Concerning the border problem which was discussed and solved in the posts (around the 180's), I seem to be having the same problem and can't sort it out. Obviously I'm doing something wrong, can someone help? My CSS and screenie are attached. Basically, I don't want the white border and have tried setting everything I could to border: none and nothing worked. After unsuccessfully trying to use the fix in the posts mentioned above, I now am looking for help...

.stg_table
{
border: 1px #09335e solid;
padding: 0px;
}
.stg_table_sigtable
{
border: 1px #09335e solid;
padding: 0px;
}
.stg_table_sigtable thead
{
background-color:#09335e;
}
.stg_table_sigtable .alt1
{
background-color:#00458d;
color: #ffffff;
}
.stg_table_sigtable .alt2
{
background-color:#00458d;
color: #ffffff;
}

[triff]

So... My main goal is to be able to make a table with two columns, writing on one side and a picture on the other, preferably with the table invisible.

I found this code-thingy: .stg_table_transp {border: none; padding: 2px; background:transparent;} , which I added to my CSS Classes for the Table. This is supposed to hide the table, yeah? How do I activate it for my table? where do I put it in?

Also, can I set a defined width for one of the rows? If so, how?


Say my table goes somewhat like this:

[table="width=100%"]yadayadaday{br}yadayadayada{br}yada|[img]imageURL[/img][/table]

How would I go about to "hide" the table, and set the second column width to 200 px for example?

SGL.

EDIT: Also, is it possible to see the coding for the 3rd screenshot?

[StGaensler]

Originally Posted by triff

The description of how to use this plugin is quite horrible, actually the worst I've ever come across so far.

This is no good feedback. Either you tell me what you don't understand and what I should describe better in my description of the options or I will plonk your post...
Anyway: I'm searching someone to write a description of the features for the users of my vB Code - feel free to contact me, if you think you can do this better than me.

Originally Posted by triff

I found this code-thingy: .stg_table_transp {border: none; padding: 2px; background:transparent;} , which I added to my CSS Classes for the Table. This is supposed to hide the table, yeah? How do I activate it for my table? where do I put it in?

As you can see in my description of the options you are supposed to put only the name of the css class (as it is transp here) into the preferences of my vB Code, not the full CSS code. The CSS has to be put to the other CSS code of vBulletin: The css code has to be added to "Additional CSS Definitions" of your style (AdminCP -> Styles & Templates -> Style Manager -> (Dropdown) Main CSS -> Additional CSS Definitions)

Originally Posted by triff

Also, can I set a defined width for one of the rows? If so, how?

As you can see in the description of my mod, this feature is maybe planned, not currently working.

Originally Posted by triff

Say my table goes somewhat like this:

[table="width=100%"]yadayadaday{br}yadayadayada{br}yada|[img]imageURL[[B]/[/B]img][/table]

How would I go about to "hide" the table, and set the second column width to 200 px for example?

If you set the CSS code correct as I explained it earlier this post, you have to apply it to the table: [table="width=100%;css=transp"]
As I said, column width currently isn't possible. You could kind a "minimum width" through adding a (blind) image with this width.

Originally Posted by triff

EDIT: Also, is it possible to see the coding for the 3rd screenshot?

No, this isn't possible as I accidentally lost the database of my test-forum (where this screenshot comes from) through an unsuspected hard disc error.
I "randomly" clicked the vB Codes, nothing special...

Stefan

[StGaensler]

Originally Posted by toucan42

giving up on rowspan I am trying nested tables - but the outermost table breaks such that i get two tables "stacked" but the outer table code is not parsed. (see screenshot attached)

Originally Posted by toucan42

it's really treating the second table as another ROW instead of column - arrrgh! anyone?

First of all: Please use valid vB Code syntax. It has to be: [table="option=value"]
Every linebreak opens a new row - you wrote the new table into a new line and so it gets a new row. Put it into the same row if you you want it in the same row.
Currently I have problems with vB Codes generating a block level element (such as center, left, ...) at the end of a line, because vBulletin removes the linebreak after this element. Please use CSS for centering the head column.
I currently don't know why {br} there makes a new line - I suggest because of the two nested tables. This hasn't been tested very well.

Here is the new code:
[table="width=100%"]|
[table="head;width=80%"]{colsp=2}[b]A Place To Eat[/b] - [i]Some Named Object[/i]
[b]Name:[/b]|Some Named Object
[b]Address:[/b]|Address 1, Address 2, Some City, GA 32434
[b]Phone:[/b]|
[b]Guide Description:[/b]|some descriptive text [/table]|[table="head;width=20%"]Map Location map goes here|[/table]
[/table]

Originally Posted by Eagle Creek

I love it!
Thx.

What's live sortable columns?

Thanks With live sortable colums, the head colums are klickable. When you klick on the head of the first column, the table gets sorted for the first column. If you click again it gets sorted reverse. You can do this for every column.
Take the second table here: http://www.jabber.org/software/clients.shtml
They use merely the same code for this.

Originally Posted by Eagle Creek

HU??
What am I doing wrong:

Sorry, I can't reproduce this. Please try it with a clean install, and report the modification causing this.

Originally Posted by MikQuattro

Concerning the border problem which was discussed and solved in the posts (around the 180's), I seem to be having the same problem and can't sort it out.

Are you using a non-standard style? I think it would be the easiest if you provide me a example thread with this table and its vB Code (use the [noparse] tags for it) of the table.

Stefan