Ok,
I have made a twitter-style control panel to apply filters and sorting to a list, the code for it is like this:
<div id="drawer">
<div id="orderDrawer" class="subDrawer" >
<div class="closeDrawer clearfix ui-icon ui-icon-closethick">close</div>
<h4>sorteer</h4>
<div id="orderPanel">
<!--some content-->
</div>
</div>
<div id="filterDrawer" class="subDrawer" >
<div class="closeDrawer clearfix ui-icon ui-icon-closethick">close</div>
<h4>Filters</h4>
<div id="filterPanel">
<!-- some content -->
</div>
<div id="filterButtonBar" class="drawerButtons">
<button id='applyFilter' name='applyFilter'>Apply</button>
</div>
</div>
</div>
This works together with the following JS code:
$("#orderPanelButton").click( function(){
if( $(".subDrawer[id!=orderDrawer]").is(":visible") ) {
$("#drawer").slideUp( function() {
$(".subDrawer").hide();
$("#orderDrawer").show();
$("#drawer").slideDown();
});
} else {
$(".subDrawer").hide();
$("#orderDrawer").show();
$("#drawer").slideToggle();
}
});
$("#filterPanelButton").click( function(){
if( $(".subDrawer[id!=filterDrawer]").is(":visible") ) {
$("#drawer").slideUp( function() {
$(".subDrawer").hide();
$("#filterDrawer").show();
$("#drawer").slideDown();
});
} else {
$(".subDrawer").hide();
$("#filterDrawer").show();
$("#drawer").slideToggle();
}
});
and finally I use jQuery UI button to shape the button:
$("#applyFilter").click(function(){
$("#filterForm").submit();
});
$("[name='applyFilter']").button({icons: {
primary:'ui-icon-arrowreturnthick-1-e'}});
This works great in all tested browsers (FF, chrome, IE8), but not in IE7. There, when I change the content of #drawer from 'filter' to 'order' with the necessary hides and slideToggles an empty ghost of the applyFilter button appears. A ghost that will disappear when you hover over it.
Anybody here got any idea why this happens and how I can get rid of this annoying little bug in my code for IE7?
[update 22/Jul/10] I have found a temporarily solution but hope to find something a little more neat. I added the following JS, based on MSIE 7.0 detection by PHP:
$(".subDrawer[id!=' . $drawer . 'Drawer]").find("button").each(function(){
$(this).css("display","none");
});
$(".subDrawer[id=' . $drawer . 'Drawer]").find("button").each(function(){
$(this).css("display","");
});
Where $drawer = the first part of the subDrawer ID (filter / order ).