5 replies to this topic

[Ghost]

Hey,

I was hoping to have a feature on my site where you can collapse the side panel (the right column with navigation, sotw winner, tutorials, etc) to make a larger reading area for people on 1024x768 - but I'm stuck and have no idea how to do it.

The template uses a table for its structure, with div's inside. Basically, I need to have something like:

Default: displaying menu

When they click it, the td class='side_menu' changes to another class, such as td class='side_menu_hidden' which styles the hidden menu.

Then, when they click it again, it returns to the expanded view.. It would be great if the info was stored in a cookie, but once again, I have no knowledge on it what so ever and reading tutorials gets me no where Goes in one ear and out the other, haha.

Any help would be greatly appreciated

[Ghost]

That's kinda similar - but it's changing styles instead of classes.

To make it simpler, I need to know how to:
1. Click on a td, and make it change from class='class1' to class='class2' and vica versa without a page refresh
2. Possibly store the info in the cookies if it isn't too hard..

Thanks for the reply though

[rc69]

Never dealt with cookies, but change of class onclick is one of the simplest things to do in JS. In fact, if this were a more frequently asked question, i would be tempted to give you my usual answer. But i can't think of it having been "asked..."

For things like this, i have to same, the Firefox DOM inspector comes in really handing (part of the development side of the default installation).

<td onClick="this.className='class2';">
// Or for expand/collapse
<td onClick="this.className = (this.className=='class2') ? 'class1' : 'class2';">

You could also use a function to create a more dynamic effect, but as for the changing of class names, that's about it.

Visit quirksmode for more information on event handling/anything else javascript (again, don't know about cookies).

If for some reason table cells don't support onClick events, i'm sure you can find a way to make the side bars in to divs with css. Of which, i must comment, if i was Adobe (or macromedia, what ever they're called now), i would sue the crap out of you. It looks kinda awesome though.

p.s. If you find some incompatability with JS cookies, there's always AJAX

Edit: HAH! Found something
Alter Table Row Background Colors Using JavaScript (note example 1).
It's not onclick, but it illustrates the idea in a more dynamic, less applicable to the original question kind of way.

Edited by rc69, 02 November 2007 - 11:39 PM.

[Ghost]

Yay, I was waiting for you to reply, haha.. excellent.

I'll give it a go Might add the alternating colours thing into the skin aswell. The left navigation on this page is exactly what I was after.

And yes, I HATE tables aswell.. I use div's 100% of the time, EXCEPT for the 2/3 column layouts, where I use the table as a container

Anyway, thanks for the reply. I'll let you know how it goes!


Edit: Okay.. it semi-worked. The expanding/collapsing works well.. BUT, if I click on a link inside the td, it also collapses the column, which isn't good. Instead of clicking the td, do you know how to make a link collapse it? That way, I could add a small arrow image at the top, and once clicked, the td would collapse... ahhh! Sorry for being a pain

Edit 2: Actually, what I pretty much need is just a hide/reveal div I guess.. I'll look around for one of those and shove a div in the <td>... That should work..

Edit 3: Did it! I tried cookies, but got stuck half way, so no cookies will have to do for the moment, haha.

Thanks for the reply!

[rc69]

First edit: That's event bubbling. You'd have to cancel the bubble some where (can't remember if it is at the link or later, if it's at the link, the arrow idea would be best). Ref: http://www.quirksmode.org/js/events_order.html

Second edit: If hiding the td worked, then it's the same as a hide/reveal div, just with a td

Third edit: Contrats Again, don't know about cookies, but if i wanted to know how to work with them in JS, i just found this: http://www.quirksmode.org/js/cookies.html I guess you can come back to it later though.

Edit: Damn my faulty memory!
Change style with JavaScript

Edited by rc69, 03 November 2007 - 12:26 PM.