3

I need in my website to hide & show a rounded corner div that contains the pie.htc to round it in IE. But when I use display:none; and display:block; where initially it is not displayed when first display it not displayed correctly.

I overwrote this small problem by using visibility rather than display but other problems appear in both display & visibility. If I click any link with href then click to show/hide the div with the rounded corners, it will be displayed without styling

This is a live example

you can click "Show Container" then "Hide Container" several times and it works perfect, but if you click on "Click Here (Just Alert Link)", which is just link with alert, then click on "Show Container" it will display the content of the div without the background as an example (this is as tested in IE8).

Another Example Starting From The Tab Demo on the CSS3 Pie Site

Jon B
  • 51,025
  • 31
  • 133
  • 161
billoo
  • 115
  • 1
  • 9

3 Answers3

3

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);                            
    });
});
Community
  • 1
  • 1
clairesuzy
  • 27,296
  • 8
  • 54
  • 52
  • this works but i don't want to still show it i want to hide it, for example i have long article so user can search in the browser by "Ctrl+F" if he search in a word that in the hidden div and there other thing after click the alert, on mouseover the style & color not change anymore The Edited Example: [link](http://allabout.comze.com/pie_css3/index4.html) Thansk. – billoo Mar 28 '11 at 10:32
  • OK I see thanks, I have updated answer to remove the `li` instead it seems to work for me now, and not be findable by tabbing – clairesuzy Mar 28 '11 at 12:09
  • Thanks clairesuzy, thats true not been search anymore but still at first time show the tab, it will be displayed without background & any style in IE6 and IE8 at first time until mouseover will fix it and other issue that it is displayed the tab then will be hidden on document ready & i can't put to the li initially thst class or we will get same initial error, i update the changes to this link:[link](http://allabout.comze.com/pie_css3/index4.html) Thanks Again – billoo Mar 29 '11 at 08:48
  • lol.. trying so many different things forgot to go back and check the original problem.. there's more coed in the post, trying a combination of the z-index and display toggles (with a delay so that it eventually ends up hidden properly) – clairesuzy Mar 29 '11 at 11:46
  • Thanks again, but as i said initially at load it will appear then after a while will disappear and after click the alert() the hover on the tab not work anymore. i update the example link: [link](http://allabout.comze.com/pie_css3/index4.html) Thanks a lot. – billoo Mar 31 '11 at 11:56
  • just tested your latest link and it's working fine for me, I tried the show/hide then clicked the alert then show again the tab three showed fine.. I did it about 6 times and it worked fine each time. IE8 Standards Mode... maybe it's connection speed, try increasing the delay a bit say from 500 to 1000 ? don't know what else to suggest as I can no longer see the issue.. sorry – clairesuzy Mar 31 '11 at 13:15
  • ok clairesuzy, i said that it initially appear then disappear if i increase the delay this will clarify this problem and sorry about another problem as i returned to [my main example](http://allabout.comze.com/pie_css3/) you will see that it is of position fixed so i can't use the top -9999px anymore. thanks for your help – billoo Apr 02 '11 at 07:29
  • the second example had a wrapper the `li` was wrapping the `a` your main example needs a wrapper div, then you manipulate the wrapper.. your second example is easier : **http://jsbin.com/ejagi5** - you will need to copy/paste code and save beside the pie script to test in IE. This positions the wrapper off the screen to start then changes it to `fixed` and hiding it after 1 second.. the rounded div then just sits inside it, it draws while the wrapper is off the screen – clairesuzy Apr 02 '11 at 10:14
  • 1
    ok,thanks a lot clairesuzy finally it works [last version](http://allabout.comze.com/pie_css3/index5.html) Thanks Again – billoo Apr 02 '11 at 14:22
1

My page has tabs with rounded corners created by css3pie when viewed with IE7 or IE8. Then jquery adds the current class to the selected tab, which makes the tab change color or appear highlighted. However, the color does not change on page load. Only after hovering over the tab it will show the color change. The class and styles are there from the start but somehow it does not refresh or update the color, which is a background image. This may be due to css3pie running before the jquery adds the new class. Once the jquery class is added, the css3pie forgets to render the change or update the background image. Somehow I need the element to refresh in order for the class change to take effect.

This solution worked for me.

    //check if the current URL matches the href path of the tab
    if (strURL == baseHrefPath) {
        //remove any previously highlighted tabs
        $(".tabs li.current a").removeClass("current");
        //highlight the matching tab (li)
        $(this).parent().addClass("current");

        //this is a hack for IE7 and IE8 which use css3pie for rounded corners
        //issue: the jquery adds the class after the css3pie runs, thus the change is not displayed
        //the selected tab is not changing color properly in IE7 and IE8
        //solution: add any inline style (i.e. color white) to the element
        //this basically forces the element to refresh so the new styles take effect
        //thus highlighting the current tab
        $(".tabs li.current a").css("color","white"); 
    }

Simply add any inline style (i.e. color white) to the element, which basically forces the element to refresh. Thus the selected tab changes color.

hmc
  • 11
  • 1
1

I had a similar problem.

Here's the background:

We are switching between two buttons on a page, when one is hidden the other is shown. When one is clicked it is hidden and the other shown.

The first time the user clicks on the button it hides ok but the other button displays really strangely (the background is displayed way off to the left but the text is in the correct position). This only happens the first time, every subsequent click / transition works fine.

Solution:

We are using jquery's toggle to show/hide but I'm sure it'll work with other transitions. el is the element(s) that is/are being shown.

$(el).toggle(0, function() {       
                     if ($.browser.msie) {
                         $(this).each(function() { $(this).resize(); }); 
                     }
                });

The resize just causes the element to refresh, after that it is drawn correctly!

Wilfred Knievel
  • 3,225
  • 1
  • 26
  • 33