views:

329

answers:

1

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 ).

+1  A: 

You've already hit on the why part a bit, which is discussed here: http://stackoverflow.com/questions/1160196/why-does-jquery-show-hide-use-displaynone-instead-of-visibilityhidden

I also think part of the "why" is due to an IE7 non-standard CSS implementation/interpretation (aka bug).

I believe the fix is outlined here: http://stackoverflow.com/questions/652286/fading-issues-in-internet-explorer-7-when-using-jquery

and http://jquery-howto.blogspot.com/2009/02/font-cleartype-problems-with-fadein-and.html

Shawn
I no longer have the problem as that part of the website has been deprecated. However, that information you just gave me most probably would have solved it and the filter issue is very valuable information to me. Thank you very much for answering this question which has been open for a long time.
Peter