force refresh of part of page in browser
- by Jeremy
I have the following html:
<ul class="scr">
<li class="scr">
<input type="checkbox" class="chkscr"/>
<h3>Item Name</h3>
<div class="scr">Contents</div>
</li>
....
</ul>
And the following jQuery:
//Set initial state of each scr section
$('.chkscr input, input.chkscr').each(function() {
chkSCR_Click($(this));
});
//Setup click event
$('.chkscr input, input.chkscr').click(function() {
chkSCR_Click($(this));
});
//Toggle corresponding scr section for the checkbox
function chkSCR_Click(ctl) {
if (ctl.attr('checked')) {
ctl.parents('li.scr').find('div.scr').stop().show();
}
else {
ctl.parents('li.scr').find('div.scr').stop().hide();
}
}
My issue is that when I toggle the last li element to display, the h3 element contents disapear, until I click somewhere else on the page, or scroll the page up and down to cause the browse to repaint that portion of the window. I don't get this behavior in Opera for example, and even in IE the behavior only happens on the last li element, so I'm pretty sure it's an IE quirk and not my code. Is there any workaround I can do through jquery/javascript to force it to repaint the h3 element?
