it seems it has more to do with PIE.htc and the redrawing, so how about not making the browsers redraw - just move the div out of the way and then back again..
<script type="text/javascript">
$(document).ready (function () {
$('#show_div').bind ('click', function () {
// show it by returning it to it's default position
$('#tab_container_3').css ( {position : 'static'} );
});
$('#hide_div').bind ('click', function () {
// hide it again by making it read the z-index
$('#tab_container_3').css ( {position: 'relative'} );
});
});
</script>
and change this CSS to:
#tab_container_3{
position: relative;
top: -9999px;
}
that's just moving it out of the way, by changing the position
to static
with the jQuery you switch the a
back to it's default, and any element with a position
of static
does not accept a z-index
, so you don't need to change that
UPDATED
as per accessibility (or not) information
OK to avoid content being accessible, the bulletproof way is to use display: block
and visibility: hidden
together, but as per the above problems already noted with them I thought it would be a good idea to hide the parent <li>
itself rather than the <a>
with the behaviour, and this time I did it by adding and removing a class
this appears to work:
$(document).ready (function () {
// to make tab hidden and inaccessible onload
$('#tab_container_3').parent().addClass("element-invisible");
$('#show_div').bind ('click', function () {
$('#tab_container_3').parent().removeClass ("element-invisible");
});
$('#hide_div').bind ('click', function () {
$('#tab_container_3').parent().addClass ("element-invisible");
});
});
with this class added in the CSS (#tab_container_3
no longer needs any extra CSS)
.element-invisible {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
visibility: hidden;
display: none;
}
does that work for you now, I tested the CTRL+F in FF and it's not finding the hidden tab
Note I don't think the first 3 positioning and clip rules are necessary with this method, I tried them on the a
first and the didn't completely crop the effect in IE - so I moved the class to the parent li.. but I'll leave the rules in to show what I tried - just in case you're wondering what they are ;)
Third Time Lucky
this time I tried a combination, first loading the parent li
off the page with negative z-index, the setting up a delay so that 0.5 seconds later it hides and corrects the z-index, the theory here was trying to make PIE.htc draw the corners before hididng them, I figured nobody will be searching the content within 0.5secs ;) - it's not totally smooth in IE but I think it's because of the positioning of the effects PIE.htc uses to draw the corners and shadows, but the effect does draw now, I tried slide down to reveal the div as that seems to "hide" the worst of IE's jaggy reveal
$(document).ready (function () {
// to make tab hidden but accessible onload, accessible at first to allow link to draw, then hide it after 0.5 seconds
$('#tab_container_3').parent().css('top','-9999px').delay(500).hide('fast', function() {$(this).css({'top' : '0px'});});
$('#show_div').bind ('click', function () {
$('#tab_container_3').parent().slideDown(200);
});
$('#hide_div').bind ('click', function () {
$('#tab_container_3').parent().hide(100);
});
});