Testing highlight fade color
With background set to an image the highlight on the checkbox cells transits from maroon, to white, to transparent. This is posted at StackOverflow at:
HTML
<script src="http://www.eventidewebdesign.com/public/jquery-ui-1.8.9.custom.min.js"></script>
<form id="addClassesToDoc" action="">
<table id="classesTable" style="border-collapse: collapse" cellpadding="3">
<thead>
<tr style="background-color: #a04a56; color: #ffffff;">
<td width="50px"></td>
<td width="75px"><b>Class<br />Number</b></td>
<td width="500px"><b>Class Name</b></td>
</tr>
</thead>
<tbody>
<tr bgcolor="#EFE5D3">
<td align="center"><input type="checkbox" class="chkAddClass" name="classesToAddToDoc[]" value="45" /></td>
<td>PHB7075</td>
<td>Organizational Systems and Leadership </td>
</tr>
<tr bgcolor="">
<td align="center"><input type="checkbox" class="chkAddClass" name="classesToAddToDoc[]" value="126" /></td>
<td>TEST111</td>
<td>Test add new class</td>
</tr>
</tbody>
</table>
<input type="submit" id="submitAddClassesToDoc" name="submitAddClassesToDoc" class="docAdminFormSubmit" value="Add Checked Classes" />
</form>
CSS
body {
font-family: Verdana, Tahoma, sans-serif;
font-size: 10px;
background-image: url('http://www.eventidewebdesign.com/public/bg.png');
background-repeat: repeat; }
td { position: relative; }
.checkwrap {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 13px;
background-color: #A04A56;
}
JavaScript
$(function() {
var buttonClicked;
$('.docAdminFormSubmit').click(function() {
buttonClicked = $(this).attr('name');
//alert('buttonClicked: ' + buttonClicked);
if (buttonClicked == 'submitAddClassesToDoc') {
AddClassesToDoc();
return false;
}
}); // End submit button function call
function AddClassesToDoc() {
var classesToAddToDoc;
//alert('number of checkboxes checked: ' + $('input.chkAddClass:checked').length);
if ($('input.chkAddClass:checked').length) {
// At least one class checked
// Get the id(s) of the checked class(es)
classesToAddToDoc = $('#classesTable input[name="classesToAddToDoc[]"]:checked').map(function() {
return $(this).val(); // probably want .val() over .attr('value')
}).get();
} else {
// No docs checked
//alert('No checkboxes checked');
$('#classesTable input:checkbox').parent().append('<div class="checkwrap" />');
$('#classesTable .checkwrap').fadeOut(1000,function(){
$(this).remove();
});
}
}
});