change z-index equivalent for relatively positioned divs

[mufflon]

I have a small conumdrum with a recent project I'm working on which I don't seem to be able to fix. I have acalendar (no design effort yet, this is just testing out what I want, the text, content and colors are kinda crap) where I want to be able to change which div overlap which.

I would like to be able to change which calendar object is above others,
I know this can be done with position:absolute, but it seems to break my prototype framework, not to mention really making future php-related code generation harder.

The way it's made now I can simply add new elements (and insert relevant css above which is basicly height and offset), if ofset is negative they overlay the latest calendar object, so if I could change their relative placement in the code that would also be nice

<div id="events">
				<div id="pensionar"><div id="event"><span id="eventDatum">5:30-12:25</span><br /><div id="content"><span id="eventRubrik">klappa ankor</span><br /><br />Ankor finns i parken, du borde gå dit</div></div></div>
			</div>

 

[SrWebDeveloper]

Hmm... assuming I am following this correctly (I might not be)...

You might want to update your JS function toggleVisibility to have 3 arguments (all div ID's) of the day, hour and event. Then use "position: relative" and set the offset based on the parent div which is determined by the day and hour. Name all the div ID's for each day/hour sensibly to help accomplish this since you are preloading the event.

That's the best I can think of using your existing system of preloading div's and toggling visibility.

May I offer a suggestion?

Have you considered creating a function that passes the day and hour to an Ajax call that queries the database for any event data. Also returned in the query is the event start and end time frame. Based on that, simply update the innerHTML.value of the correct div (or divs) in the time frame for that event as you wish it to look. Also dynamically adjust the CSS for each with the solid background color, etc. as desired. You can always store the default div content in an array for restoring original content and CSS values for anything that was toggled.

This method means no worries with positioning issues.

This method also means no pre-loading of event data on every page which seems very wasteful of resources.

Please note I base the last sentence on your current implementation so if you're just testing with temporary static event data then forget what I said about Ajax. But the other recommendations stand, i.e. you might consider the alternative approach. I have done this for one of my calendars for a project at work so I speak from experience.

I hope this helps you, honestly. My apologies if I am way off base here.

-jim

 

[mufflon]

The html I linked is merely something to test out an idea, the end result is a php/mysql driven calendar with some cache optimization for the more php-unfriendly operations, where events are able to be toggled through javascript.

What isn't really implemented yet is the ability to chose which tag overlaps which - some events are bound to overlap to some extent, I was going to use scriptaculous (a php friendly implementation) to have sortable lists which would define which category would overlap which.

To do this the only thing I need to know is how to change the relative order of divs, had they been position:absolute I could just change the z-index, but positioning of objects will suddenly be a whole lot more complex, so not something I'm overly keen on.

I'm also not very good with AJAX, the project has a rather short deadline so I'm not overly keen to experiment with that

 

[SrWebDeveloper]

Using Scriptaculous is a great idea, I noticed in their docs you can animate shrink and grow effects which might help with overlaps. For example, all events are shrunken by default, a user clicks on an expand icon to toggle growth/shrink of an event that overlaps another.

Another suggest I just thought of is to display the data as a time line, such as the DHTML framework found here. It involves Ajax and of course timelines are all about visualizing overlapping events in a human readable format.

I'm all out of ideas since you're still testing. Have fun! If anyone else has suggestions please post feel free to contribute!

-jim