[sinucello]

Hi,

I had a closer look at the mod and will post now a summary of my understanding of how the mod works and how it can be improved:

1. It adds a div element with the id "forumhome_tabs_switch_content" which will contain the first category of forums on your forum-startpage. This category will be displayed initially / by default when loading the page.
2. Then all categories including their forums are displayed again and wrapped with a div element with the id "forumhome_tabs_$forum[forumid]". This means the first category will be included twice in the generated HTML-Source code which unnecessarily increases the size and loading time of the start page. It`s also confusing for visually impaired people if their screen-readers read the first cat twice.
3. The categories also get a "display: none" inline style so they don`t appear but instead work as content-containers for the little java-script that pulls the content in these containers to the "forumhome_tabs_switch_content" when clicking on a tab.
4. To make the containers invisible via an inline style has the drawback of making all categories and their forums inaccessible for users that have deactivated JavaScript.

So the three major disadvantages are:

• repetition of the first category and all it`s forums
• non-functional links in the tabs when JS is turned off
• all categories and their forums are hidden and unaccessible when JS is turned off

To get rid of the disadvantages you should change the tab-links from

<a href="#" onclick

to

<a href="#forumhome_tabs_$forum[forumid]" onclick

in template: g_forumhome_tabs_headbits
so they work as link to local anchors when JS is not available.

To make the local anchors work, you should give the div-content-containers a name attribute with the same value as their id:

<div style="display: none;" id="forumhome_tabs_$forum[forumid]" name="forumhome_tabs_$forum[forumid]">

in template g_forumhome_tabs_forumbit_1

That was the easy part. I don`t have enough knowledge and experience yet to make the next steps myself but it shouldn`t be too difficult for someone who knows a bit of DOM-scripting.

Basically you should remove the style="display: none;" for the content containers and stop the repitition of the first category. Then you should give the first category a different id then the other categories (might be there already) and hide all the other categories via DOM-script instead with inline style.

After that you would have to change the JS-function that gets called by the tab links so it switches the desired category visible and all others invisible.

I`ll try to solve it myself and find the necessary DOM-script snippets. But I hope there are few devs here who can help.

edit: I think I found a solution: http://www.stilbuero.de/2006/05/13/a...s-with-jquery/
Will try tomorrow.

all the best,
Sacha