Forum Moderators: not2easy
First I will describe what I'm trying to accomplish. Then I will describe my first unsuccessful attempt. I have created a calendar system. The events added to the calendar have two attributes, layer and category. A layer is basically a set of events that may apply to your user account and thus be available. For example, department X will have a layer that department Z can't see. However, one user may have access to 5 or more different layers.
At the top of the calendar I have two drop down menus which list the layers and categories with a checkbox. If you uncheck the checkbox it should hide that layer or category.
I've accomplished this, however with a problem. My first solution:
1 - Create a DIV class for each layer and each category.
.layer_agency { }
.layer_department { }
.layer_personal { }
.category_birthdays { }
.category_holidays { }
.category_meetings { }
2 - Surround each event with a div that uses both the layer and category class that it belongs to.
<div class="layer_agency category_holidays">Memorial Day</div>
3 - When unchecking a layer, set the visibility attribute of the layer class to hidden. Same with category.
The problem: After you uncheck, and then check a category it then sets visibility to visible. Now if you uncheck a layer it wont effect that category because the visibility attribute of the category overrides the visibility attribute of the layer.
Is there a way to do this that I'm missing? I think if the browser would override the attribute when hidden instead of when visible, the way I'm attempting this would work. Any help would be greatly appreciated. Thanks.
Have you tried using an ID instead of a class to control the visibility of the the element?
I have approached it that each div has a unique id, and that you can turn the visibility on and off by changing the visibility attribute of that div via your checkboxes.
For example,
<style type="text/css">
.c1 { COLOR: red; }
.c2 { COLOR: blue; }
</style>
<div class="c1 c2">This is the string</div>
This would result in a blue string.
<style type="text/css">
.c2 { COLOR: blue; }
.c1 { COLOR: red; }
</style>
<div class="c1 c2">This is the string</div>
This would result in a red string.
If that's the case, I guess I can create a JS routine to loop through the array and set the visibility. That may work...unless the browser handles the visibility the same way with nested div's.
I wonder if this problem should be readdressed from a 1st principles standpoint. That is, go right back to the beginning and see if there is another way to approach it.
