Although I'm making progress, I must confess that jQuery and CSS are not my strong suits.
The objective: To create a dynamic div within a table data cell for a calendar feature. The content of the div varies based on the date range input. A filled day is represented by a blue square using CSS, while a partial day has a triangular shape indicating morning or afternoon (also CSS).
The issue: There's an overlapping problem between morning and afternoon segments.
Here's what I've done so far: http://jsfiddle.net/9hnNk/1
Could someone pinpoint where I might be going wrong with my jQuery selectors/replacements?
HTML:
<table>
<tbody>
<tr>
<td>
morning:<br/>
<div class="morning"></div>
</td>
<td>
afternoon:<br/>
<div class="afternoon"></div>
</td>
<td>
split day:<br/>
<div class="morning"></div>
<div class="afternoon"></div>
</td>
</tr>
</tbody>
CSS:
.morning{width:0;height:0;border-bottom:60px solid transparent;border-left:94px solid #0066CC;font-size:0;line-height:0;}
.afternoon{width: 0; height: 0;border-bottom: 1px solid transparent;border-top: 59px solid transparent;border-right: 95px solid #0066CC;font-size: 0;line-height: 0;}
.fullDay{border:30px;border-color:#0066CC;border-style:solid;height:0;width:32px;float:left;color:#FFFFFF;margin-left:2px;}
.splitDay{line-height:0%;width:0px;border-top:60px outset #0066CC;border-right: 100px dashed #0066CC;}
Javascript:
jQuery(document).ready(function ($) {
if ($("td:has(div.afternoon):has(div.morning)")){
$(".morning").addClass('splitDay').removeClass('morning');
$(".afternoon").remove();
}
});