Theme Engine ~ Sidebar

QBPixel Sage October 14 2006 11:02 PM EDT

Okay dudes and dudettes. I'm formed a basic layout for the sidebar. I fiddled around with it since the last engine update, but I think it nearly ended up not changing due to some issues. Here's the way I laid out the content.

Logo
Options (Help!, My Account, Settings, Log Out)
Modules (Character, Opponents, News, etc.)
The modules each are laid out in a special way. (Periods used to indent code)

<div id="moduleName">
....<div class="sidebarSectionTop">(blank)</div>
....<div class="sidebarSection">
........<div class="sidebarHeader">moduleName</div>
........<div class="sidebarContent" id="moduleNameContent">(content)</div>
....</div>
....<div class="sidebarSectionBottom">(blank)</div>
</div>

Each module is encased in its own DIV. In it are three DIV's, and only one of those have actual content (the middle one). The other two are blank DIV's, which allow themers to use them to add extra goodies (which I have used in my theme, to add certain graphics here and there).

In the DIV with content, there are two things. Header and content. Header is self explanatory. The content, however, also has an extra ID. What is this extra ID for? It is for a javascript function that allows you to collapse the module so only the header appears. The content itself will disappear.

This seems like the best setup I can think of. Let me know if you have any ideas/suggestions/comments/hooligans. By the way Jon, your spellchecker is killing me here.

QBPixel Sage October 15 2006 3:13 AM EDT

You know, I'm starting to think this setup can go with most things on this website. Hmm..

AdminNightStrike October 15 2006 9:37 AM EDT

You cann use CSS to expand and collapse the divs, though it probably doesn't work in IE. I know that it works great in firefox. As a matter of fact, the only piece of CSS that really doesn't work in FF is coloring the scrollbars.

QBPixel Sage October 15 2006 8:10 PM EDT

Ah, well javascript will do the trick. It works for probably all browsers =D

QBPixel Sage October 15 2006 9:41 PM EDT

I guess with the lack of input, this approach is fine with all of you? If so, I shall continue =D

Miandrital October 15 2006 10:15 PM EDT

Well since most of us have no idea what is going on we say it looks good ;)
Just let us know when we can start making themes.

AdminJonathan October 16 2006 2:02 AM EDT

Isn't id="moduleNameContent" redundant? you don't even need css2 selectors -- simply

#moduleName .sidebarContent

should work fine to select it.

QBPixel Sage October 16 2006 3:10 AM EDT

Those tags are for javascript to find the specific DIV to hide them when the header is clicked. Collapsable tabs. Unless you can find another way to code the javascript, that's the solution I found.

bartjan October 16 2006 3:38 AM EDT

DOM

bartjan October 16 2006 4:34 AM EDT

My Javascript is very rusty, but something like the following should find the node you're interested in:

function getElementsByClass(node,searchClass,tag) {

    var classElements = new Array();

    var els = node.getElementsByTagName(tag);

    var elsLen = els.length;

    var pattern = new RegExp("\b"+searchClass+"\b");

    for (i = 0, j = 0; i 
        if ( pattern.test(els[i].className) ) {

            classElements[j] = els[i];

            j++;

        }

    }

return classElements;

}



var module = document.getElementById('modulename');

var sidebarcontent = getElementsByClass("sidebarContent",module,"div");

AdminJonathan October 16 2006 12:11 PM EDT

That looks like it would work to me.

But CB already uses the best javascript library around, MochiKit, and the MK dom library does this out of the box:

getElementsByTagAndClassName('div', 'sidebarContent', 'moduleName')

a little verbose but quite usable :)

AdminQBVerifex October 16 2006 2:52 PM EDT

Pixel, you only need the ID of "moduleName" to be able to staticlly address each individual element inside of it. For instance this is what I use quite frequently in my GM script. I modified it a bit for readability and to take out escape codes. (using tabbed layout for readability):

function toggle {
  if (this.parentNode.nextSibling.style.display==""){
    this.src="themedir\rightarrow.gif";
    this.parentNode.nextSibling.style.display="none"
  } else {
    this.src="themedir\downarrow.gif";
    this.parentNode.nextSibling.style.display=""
  }
}

See, no fuss, no mess. Simple little toggle switch. You don't need a ID for the content area, and you can use the same code for each toggle switch. (e.g. <img style='cursor:pointer' src='themedir\downarrow.gif' onClick='toggle()'>) just use the onClick of the toggle button to point to the function.

QBPixel Sage October 16 2006 2:52 PM EDT

Ah, there were several things online like that, but I didn't see examples of how to use. I'll test it out and let you know the results!

Theme Engine ~ Sidebar (in General)