Possible to move an Absoulte position if another absoulte position is already on that spot?

Question

Hi

I am trying to make a calendar on my website. So in my C# code I make all the table cells for that calendar(I return it as a string of html into my View). While doing that I check my database to see if any tasks go in that cell and loop through it till no tasks are left. I then move on to the next cell and do the same thing again.

However some tasks span over one day so when I am generating the task I figure out how many days it spans over and make a div that surrounds the task to span across those days by putting a width that goes that many number of table cells.

However to show this div that is spans over multiple days I have to have all these divs with css absolute. Otherwise since I am using "css overflow" anything that does not fit in the cell gets hidden so if I have a background color on this div it will only show the background color for that cell since the rest gets hidden. So even though the width is long enough it always get hidden underneath.

So by using "css absolute" all the tasks in the same cell just get piled on each other. I found if I put a margin-top on each div I can avoid this piling. However it won't help me for the next problem.

Say I have a task that spans over 2 days Jan 1st to Jan 2nd. It width spans exactly 2 cells.

Since this div has absolute set and spans across 2 days.

http://img35.imageshack.us/img35/3808/screenshot001mo.jpg

This image shows that how it would look if it spans 2 days.

Now they go and add another task to Jan 2nd. This task will be placed right on top of the yellow background of the task that spanned over Jan 1st and Jan 2nd making it not obvious anymore that the task in Jan 1st spanned over to Jan 2nd.

http://img35.imageshack.us/img35/806/screenshot002ml.jpg

This image shows that I added another task on January 2nd. So overlapping has happened it it is hard to tell that the first task spans 2 days. Now imagine if you had to tasks that spanned 2 those same 2 days.

So I need some way to detect these collisions or something so that if something is occupying that space it moves it down or something.

I hope that made sense

You can see this jquery plugin that I am sort of modeling mine after. They some how have it tasks don't overlap each other.

http://arshaw.com/fullcalendar/

Using

asp.net mvc C# jquery html css

Answer 1

This is a tough one.

When working with absolute positions, there is no way to make things automatically shift to another position if the spot is taken.

You could cheat, leave them all overlapped and work with transparencies (50% opacity) and z-index. When periods overlap, they'd shine through. You could then give each period a onclick event that puts the bar's z-index one step in the background to achieve a very primitive kind of shuffling. Very roughly:

<div class="period" onclick="this.style.zIndex = this.style.zIndex-2;">1 Day span</div>

you would have to implement a mechanism that deals with the fact that the z-indexes will constantly decline down to below zero, so this is only a very rough outline.

This is not great in terms of user experience but it would do the job and all information would remain accessible to the user.

If you want to do this properly, I think you won't get around keeping track of the current "clear lanes" in each row, i.e., how many running periods there are and by how much you would need to adjust the starting y position of a new period.

Another, simpler approach would be not to work with absolute positioning, but with normal run-off-the-mill divs within a container that spans a whole row. Edit: But that is going to give you trouble when a period spans over multiple rows. No, you won't get around calculating the positions yourself.