Have Geek Brain

Div not hiding correctly in IE

I have several divs in my site - on load I want some of them to be hidden, some of them to be shown. I hide the ones I don't need:

$(".divToHide").hide();

This works well in Chrome, Firefox, IE8 Opera ... It's not in IE6 (I haven't tested the previous version yet ...) - all divs are hidden properly when the page loads. When I click on a link that makes one of them visible, it displays correctly. Problems show when I click on another link that should hide the first div and show the other. The text of the first div is hidden, but the image remains and blocks the newly shown div. I'm pretty sure this is a bug - when I zoom in or out the page, the divs that should have been hidden suddenly disappear - they are only visible on page load.

Is there a way?

EDIT: I am using jQuery v1.3.2

EDIT: Unfortunately, the solution to use addClass

to add the css class that says display: none

doesn't really work - it seemed like it was at first, but the problem still exists.

UPDATE: The js file I wrote can be found here and the html is here . The problem is that when you move from one portfolio to another, the image of the first one remains there obstructing the next, although it should be hidden (the text under the changes is correct). Disappears incorrectly when you try to zoom in or out on the page.
I used to hide all portfolios using $("#divId").hide()

, but as stated below, I now use $(".classToHide").hide()

.

UPDATE: Issue resolved on IE8 - I forgot to enable the standards mode declaration ... However, there is still a problem in IE6.

0


source to share


5 answers


Are you hiding multiple divs with an ID selector?

Try giving these divs the class "divToHide" and then use:



$(".divToHide").hide();

Perhaps IE8 handles duplicate id in a different way than other browsers.

+3


source


Just a thought: you're not using the old (pre-IE8) version of jQuery, are you?



Edit: No, grycz is using the current version.

+2


source


Edit: Simplified to use toggleClass ()

You can try doing it manually, for example toggling the css class called "hidden". It might look something like this:

function myToggle(element_id)
{
    mydiv = $('#' + element_id);
    mydiv.toggleClass("hidden");;
}

And your css file will have:

.hidden
{
    display:none;
}

I haven't tested this, but this is the kind of workaround I assume you want to consider if this is indeed a bug in jQuery / IE8.

+2


source


Are you sure the call to hide () is even called on page load? Try putting alert('hi')

right before this function call and see if it happens in IE8.

0


source


try it

$ ("# divToHide") CSS. ('Display: no');

0


source






More articles:


All Articles