如何在相对容器中定位绝对时避免div重叠

Question

HTML

<td title='10:00 AM-wed 09-01-2013'><div style="position:relative;height:60px">
        <div style="position:absolute;top:00px;" class='entry'>Demo patient</div>
        <div style="position:absolute;top:20px;" class='entry'>New patient</div>
        <div style="position:absolute;top:40px;" class='entry'>fool patient</div>
</div></td>

pic

PHP used to generate entries

echo"<div style='position:absolute;top:".date("i", strtotime($data['time_booked']))."px;'>{$data['name']}</div>";

i made a simple a jquery/php day scheduler(calendar), as show above.

as u can see i have parent div height:60px(1px each min) and position relative then i position child divs absolute according to its min (eg: demo patient is 10:00 so top:00px , fool patient is 10:40 so its top:40px). this is working fine except when there is overlapping time.. example if i have 2 entries same time then both will be positioned on top of each other.

Question how can i avoid this ? like google calendar if 2 booking exist the are moved side by side instead of on top of each other.

thanks

Problem solved:

using This plugin and following code

var n=$('div.entry').overlaps().length;var vol=(100/n);var round=0;
    $('div.entry').overlaps().each(function(){
        $(this).css('left',((vol-1)*round)+'%');
        $(this).css('width',(vol-n)+'%')
        round=round+1;
    });

Now it works perfectly as google calendar :D.. thanks all

Answer 1

If you want a jquery solution to check if any elements overlaps then you can use this plugin brandonaaron/jquery-overlaps. You can do the checks for each element to check if any overlap then perform the function that will reposition the events within the parent