The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

problem display:none/block divs via javascript.

hello,

Rather than going on a wild explanation on what's the the problem, it'll be much quicker and easier if i let you look at it yourself, so I'll post my page source (actual contents taken out, of course).

Firstly try the above code in Firefox and opera. It works well. Try clicking then in order and randomly e.g:- 'button1' then 'button4' then 'button2' everything will be good.

Similarly try the code in the above manner in internet explorer, the results are different. It just isn't working the way it's supposed to, as which you can understand from trying it out in ff and opera.

in ie if done like this: 'button1' then 'button4' then 'button2', it the shows div with id 'button4' with no text, instead of the div with id 'button2' and text saying "button2".

Also notice that in clicking 'close' the function closeMsg() is run, wich sets all to 'display: none'.

Just check out the code, you'll understand what's the problem. I'll only complicate thinks if i try to explain it.

i'm trying to rewrite this to see if there is anything wrong, but I can't find what it is. What are you trying to do?

well i think that would be obvious if you tried out the code on browser, anyway here is what I'm trying to do

suppose there are four buttons, each brings up a div when clicked, which is closed upon clinking "close" on the div.

There are 4 buttons and 4 divs associated to the content related to each buttons (text, images etc.. in div).

Consider example a button "gallery" brings up a div with image thumbnails.

here the the 4 divs share the global background div and the containing div. only the contents in the containing div are different. so Different divs are placed in the containing div, eg:- gallery, logos, portfolio etc..

i don't know what's wrong, the script works perfect in all browsers except internet explorer. Its probably an IE "block" rendering bug.

So in a nutshell, what I'm trying to do is make it work on IE without completely changing the script if possible (because I'm almost sure it's a IE bug and not a error in script)

hope i explained it correctly, I'm really not good at explaining things

I use this general method for a set of drop down menus on my website. Let me poke around and see what I can come up with too.

Whatever you can do or dream you can, begin it.
Boldness has genius, power and magic in it. Begin it now. Chroniclemaster1, Founder of Earth ChronicleA Growing History of our Planet, by our Planet, for our Planet.

ok, I've diagnosed the problem. In IE, clicking a button fundamentally changes favArea. It applies the color of the button, and each button overrides the lower numbers.

In Firefox, favArea is always white when it's first called so that the final step, button, applies the appropriate color and text. In IE favArea is only white the very first time it's called. Then the button you click applies that color to favArea. So when you click your second button, favArea comes up the color of the previous button. If your second button is higher than the first, the button function overlays that color, but if the second (and successive) buttons are lower, the button function is apparently applied "under" the color.

I can also doesn't seem to be a cascade issue. Changing the order of the button styles doesn't affect which takes precedence. Button 4 always trumps the other styles.

Whatever you can do or dream you can, begin it.
Boldness has genius, power and magic in it. Begin it now. Chroniclemaster1, Founder of Earth ChronicleA Growing History of our Planet, by our Planet, for our Planet.

ok, I've diagnosed the problem. In IE, clicking a button fundamentally changes favArea. It applies the color of the button, and each button overrides the lower numbers.

In Firefox, favArea is always white when it's first called so that the final step, button, applies the appropriate color and text. In IE favArea is only white the very first time it's called. Then the button you click applies that color to favArea. So when you click your second button, favArea comes up the color of the previous button. If your second button is higher than the first, the button function overlays that color, but if the second (and successive) buttons are lower, the button function is apparently applied "under" the color.

I can also doesn't seem to be a cascade issue. Changing the order of the button styles doesn't affect which takes precedence. Button 4 always trumps the other styles.

i put each color specific for each button so that everyone can understand better, so there are 4 divs within favArea. Each is toggled to display:none/block depending on which button is clicked. and all the button divs are set to display:none on clicking close. and also when the "error" happens, the text are also displayed.

I agree with both of you. It's a problem in how IE renders it, and I think we've localized it to the favArea/favBg javascript. I've tried two main tacks so far. Preventing IE from imposing default color on the favArea, or failing that, refreshing the favArea so it goes white again.

It goes well, really.

Whatever you can do or dream you can, begin it.
Boldness has genius, power and magic in it. Begin it now. Chroniclemaster1, Founder of Earth ChronicleA Growing History of our Planet, by our Planet, for our Planet.

don't we all? No apologies necessary. We're all part of the same crazy club.
No breakthroughs yet. Usually I find a way to fix a piece of code for a browser that makes it break even worse in the other, but so far no dice. And I'm really frustrated that I can't figure out why it gives priority to the higher numbers. That seems like something we should be able to track it down.

Whatever you can do or dream you can, begin it.
Boldness has genius, power and magic in it. Begin it now. Chroniclemaster1, Founder of Earth ChronicleA Growing History of our Planet, by our Planet, for our Planet.

i tried using without any numbers i.e. "hotel" instead of "button1" and so on, until there are no id's functions etc with numbers. It still does the same. IE seems to give priority to the one which defined after another. Moreover what truly baffles me is that, if it's going to keep showing a div that it gave priority to then why the text of that div is also not appearing. I can't seem to figure out why it's this way.

But the thing is, i have seen many sites using the same approach and they all seem to work on IE. Maybe it couldn't be done by this method. Well I'll keep on experimenting...

you may be on to something there, so it doesn't care about the numerics? It still does it when you deploy non-integer ids?

hmmmmm... is it following the order of the CSS definitions (what was .button1, .button2, etc.), or the order of the javascript functions (what was button1(), button2(), etc.)? Which determines the preference?

Whatever you can do or dream you can, begin it.
Boldness has genius, power and magic in it. Begin it now. Chroniclemaster1, Founder of Earth ChronicleA Growing History of our Planet, by our Planet, for our Planet.

you may be on to something there, so it doesn't care about the numerics? It still does it when you deploy non-integer ids?

hmmmmm... is it following the order of the CSS definitions (what was .button1, .button2, etc.), or the order of the javascript functions (what was button1(), button2(), etc.)? Which determines the preference?

i did a through check, this happens in IE regardless of the following.
1. with or without numerics.
2. any order of declaration of javascript functions.
3. any order of declaration of CSS definitions.

At first i tried reversing the order (.button4, .button3.. so on)/(button4(), button().. so on) still no luck. I even tried completely randomizing the order. Still no chance.

There, I feel a little better. How in the @$#%^@#$^ is it getting an order from the colors! Wait, no I'm rereading.... hang on...

ok, so it's the order of the divs? hmmm.... I thought I'd tried changing the order of the divs already (but leaving the colors the same), and the colors still had the same order of priority.

May I just say, in the perfect English accent of a good butler, of course... this is infuriating.

Well, look at it this way, at least you know your command of javascript and CSS are good if nobody can find a solution yet. I'll go back and look at the divs specifically again. Maybe it IS an issue with the cascade, if the Javascript or the HTML somehow are exposing each class as we activate and it wipes any attempts to trigger previous divs.

Whatever you can do or dream you can, begin it.
Boldness has genius, power and magic in it. Begin it now. Chroniclemaster1, Founder of Earth ChronicleA Growing History of our Planet, by our Planet, for our Planet.

I played around with it here at work. I've got Firefox and IE7 on an XP box and it works beautifully

I even played with it. I'm not sure how it works on other computers, but it's all pretty standard syntax and works identically on my work computer & browsers. I think it should transport well. I was able to reduce the If statement to...

Whatever you can do or dream you can, begin it.
Boldness has genius, power and magic in it. Begin it now. Chroniclemaster1, Founder of Earth ChronicleA Growing History of our Planet, by our Planet, for our Planet.

I'm glad that changing from display to visibility making the positioning absolute finally got it to behave. It doesn't look like you had to change any of the real javascript at all. Just switch the CSS.

I hope other people found this interesting as well. I know I did. If fact, now that it looks like we're finished with this, I posted my own problem. It's not as sophistacated but it is using unobtrusive javascript. I'd appreciate if anyone reading this has any ideas. Stop on by. http://www.sitepoint.com/forums/showthread.php?t=488973

Whatever you can do or dream you can, begin it.
Boldness has genius, power and magic in it. Begin it now. Chroniclemaster1, Founder of Earth ChronicleA Growing History of our Planet, by our Planet, for our Planet.