Solved

Determine whether you are overlapping divs

Posted on 2006-10-19
2
171 Views
Last Modified: 2010-04-06
Hi,

Im currently writing a basic calendar application. On screen the days are shown down the left hand side (Mon-Sun) and across the top are the time intervals. Im trying to position coloured blocks (div) of a fixed height that lines up with the hours across the top of the table to represent events going on. The width of these blocks will be determined by the left of time the specific event is on. I have got the horizontal positioning and width of the divs working exactly how I want. The problem Im having is if two events are on the same day at the same time then the first div is hidden beneath the second. I need to figure out a way of positioning it 10 pixels lower if a div already occupys that space.

Basically , when creating a new div, I want to be able to check to make sure it would not be sitting on top of an existing div. If there was a div in place that the new one would cover up in some way I want to be able to move the new div down a set number of pixels.

Im using and XML doc converted by XSL to create the page.

Cheers, I know this sounds confusing...
Martin


0
Comment
Question by:Scoobymib3
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 16

Accepted Solution

by:
ThinkPaper earned 500 total points
ID: 17776217
The way I was able to do it was using a matrix array which basically mapped out the calendar. It kept track of which "spots" where filled up and which weren't. Originally the matrix is empty (with 0's) but when a new calendar event is added, i calculate where in the array to fill up with 1's - which means that spot is taken up.

matrixArray(col, row)

For instance (in a weekly calendar view) I declare an matrixArray(24,7) - for each of the 7 days and 24 hours per day (you can increase the # of cols to correspond to the minute instead of hours if you wanted to). Initially it's all zeros. When you put in an event for Monday at 1:00 to 3:00, the matrix get's filled accordingly...

matrixArray(0,1) = 1
matrixArray(1,1) = 1

So from here you visually see which spots get filled up...

                                column #
                     0       1        2         3        4        5       6
                   1:00  2:00    3:00    4:00     5:00  6:00   7:00  etc..
          0  S       0      0        0          0        0       0       0
          1  M      1      1        0          0        0       0       0
r        2  T       0      0        0          0        0       0       0
o        3  W      0      0        0          0        0       0       0
w       4  R       0      0        0          0        0       0       0
#        5  F       0      0        0          0        0       0       0
          6  S       0      0        0          0        0       0       0


And before you add or display a new event for the same date, you can check to see if it's been taken up, and if it has adjust your divs accordingly.
Hopefully this type of solution will work for you.


0
 

Author Comment

by:Scoobymib3
ID: 17788615
Excellent, we've kind of used your idea as a basis.

We've set up a dayView object which contains an array of rows, which in turn contains an array of events. When a new event is added it checks the first row to see if there is an event on in that timeframe. If so, it trys the next row, else it just adds it to that array.

Thanks for the inspiration =))
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Most of the sites are being standardized with W3C Web Standards. W3C provides lot of web standard services to the web. They have the web specification, process and documentation for all the web standards. You can apply HTML, CSS and Accessibility st…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

687 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question