Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

show/hide div not fully working in IE

Newbie
  
Join Date: May 2008
Posts: 19
#1: May 28 '08
Hi,
Im making a 'contact us' page. The user click on the div, this then reveals another larger div displaying more information giving the effect of the box expanding or dropping down.

I have 3 starting divs on my page, each one expanding onclick. The show/hide elemant works fine. There is one slight problem... I want the user to be able to click anywhere inside the starting div in order for the hidden div to be revealed. This is ok for the first set of divs, but you can only click on the text or border for the second and third div sets. I can't figure out for the life of me why the second and third divs aren't allowing the onclick anywhere inside the div. The HTML and CSS are identical for all 3 so i guess it must be a JS issue.
The whole thing works fine in Firefox just not IE!

Here's an online example:
http://testsite.fisher.co.uk/2008_Re..._us_TEST2.html

Here's my HTML:

[HTML]<div id="contact_us_conatiner">

<div id="gallery">

<!-- TAB 1 -->
<div class="off" title="tab1"><p>UK Orders</p></div>
<div id="tab1" class="hide">
<p>Question 1</p>
</div>

<!-- TAB 2 -->
<div class="off" title="tab2"><p>Product Technical Support</p></div>
<div id="tab2" class="hide">
<p>Question 2</p>
</div>

<!-- TAB 3 -->
<div class="off" title="tab3"><p>Regional Sales Specialists</p></div>
<div id="tab3" class="hide">
<p>content 3</p>
</div>

</div><!-- END - gallery div -->
</div><!-- END - contact_us_conatiner -->
[/HTML]
CSS:
Expand|Select|Wrap|Line Numbers
  1. * {
  2. padding:0;
  3. margin:0;
  4. }
  5. #contact_us_conatiner {
  6. width:727px;
  7. position:relative;
  8. float:left;
  9. margin-left:30px;
  10. margin-top:30px;
  11. }
  12. #gallery {
  13. font:11px arial,sans-serif;
  14. width:700px;
  15. height:33px;
  16. line-height:15px;
  17. position:relative;
  18. float:left;
  19. z-index:200;
  20. }
  21. #gallery div.off {
  22. width:600px;
  23. color:#000;
  24. float:left;
  25. border:1px solid #ddd;
  26. cursor:pointer;
  27. text-align:center;
  28. height:33px;
  29. line-height:33px;
  30. position:relative;
  31. z-index:120;
  32. margin-bottom:20px;
  33. }
  34. #gallery div.on {
  35. width:600px;
  36. color:#c00;
  37. float:left;
  38. border:1px solid #000;
  39. border-bottom:0;
  40. cursor:pointer;
  41. text-align:center;
  42. height:33px;
  43. line-height:32px;
  44. position:relative;
  45. z-index:100;
  46. }
  47. div.hide {
  48. display:none;
  49. width:0;
  50. overflow:hidden;
  51. }
  52. div.show {
  53. width:600px;
  54. height:115px;
  55. margin-top:0;
  56. border:1px solid #000;
  57. border-top:0;
  58. position:relative;
  59. z-index:50;
  60. font-family:Arial, Helvetica, sans-serif;
  61. font-size:12px;
  62. float:left;
  63. margin-bottom:20px;
  64. }
  65. .clear {clear:both;}
  66.  
JS:
Expand|Select|Wrap|Line Numbers
  1. onload = function() {
  2. var e, i = 0;
  3. while (e = document.getElementById('gallery').getElementsByTagName ('DIV') [i++]) {
  4. if (e.className == 'on' ¦¦ e.className == 'off') {
  5. e.onclick = function () {
  6. var getEls = document.getElementsByTagName('DIV');
  7. for (var z=0; z<getEls.length; z++) {
  8. getEls[z].className=getEls[z].className.replace('show', 'hide');
  9. getEls[z].className=getEls[z].className.replace('on', 'off');
  10. }
  11. this.className = 'on';
  12. var max = this.getAttribute('title');
  13. document.getElementById(max).className = "show";
  14. }
  15. }
  16. }
  17.  
  18. }
Any help would be MUCH appreciated!
Thanks in advance

Ryan

hsriat's Avatar
Expert
  
Join Date: Jan 2008
Location: Bath, UK
Posts: 1,609
#2: May 28 '08

re: show/hide div not fully working in IE

Working fine in IE, Fx, Opera and Safari...

What's not happening according to you?
Newbie
  
Join Date: May 2008
Posts: 19
#3: May 28 '08

re: show/hide div not fully working in IE

in IE you have to click on the text inside the second and third bars (product technical support and Regional sales specialists)
I want the user to be able to click anywhere inside the bars, like with the top bar.
hsriat's Avatar
Expert
  
Join Date: Jan 2008
Location: Bath, UK
Posts: 1,609
#4: May 28 '08

re: show/hide div not fully working in IE

That's what is happening with my IE. I click on either of the bars (not text), it opens the div. Exactly like what happens in Fx, Op and Sf.

I'm using IE6.
hsriat's Avatar
Expert
  
Join Date: Jan 2008
Location: Bath, UK
Posts: 1,609
#5: May 28 '08

re: show/hide div not fully working in IE

Quote:

Originally Posted by hsriat

That's what is happening with my IE. I click on either of the bars (not text), it opens the div. Exactly like what happens in Fx, Op and Sf.

I'm using IE6.

May be its working fine with my IE as I keep on cursing it. You try the same trick.
(j/k)
Newbie
  
Join Date: May 2008
Posts: 19
#6: May 28 '08

re: show/hide div not fully working in IE

well im glad it works in IE6! I've been unable to test it with that. However IE7 is still proving to be a problem!
hsriat's Avatar
Expert
  
Join Date: Jan 2008
Location: Bath, UK
Posts: 1,609
#7: May 28 '08

re: show/hide div not fully working in IE

Quote:

Originally Posted by ryrocks

well im glad it works in IE6! I've been unable to test it with that. However IE7 is still proving to be a problem!

Oh.. so its an IE7 thing...

You are assigning function to the click event of the div: e.onclick = function ()
Then how can it work only when text is clicked and not the empty part of the div?

I guess there's some problem either with some other part of the code, or IE7 is confused.
Newbie
  
Join Date: May 2008
Posts: 19
#8: May 28 '08

re: show/hide div not fully working in IE

Quote:

Originally Posted by hsriat

Oh.. so its an IE7 thing...

You are assigning function to the click event of the div: e.onclick = function ()
Then how can it work only when text is clicked and not the empty part of the div?

I guess there's some problem either with some other part of the code, or IE7 is confused.

Exactly! I've not idea why it only works when you click the text or the border. And why does it work fine on the top bar? Yes I think IE7 is getting confused... like me!
hsriat's Avatar
Expert
  
Join Date: Jan 2008
Location: Bath, UK
Posts: 1,609
#9: May 28 '08

re: show/hide div not fully working in IE

Quote:

Originally Posted by ryrocks

Exactly! I've not idea why it only works when you click the text or the border. And why does it work fine on the top bar? Yes I think IE7 is getting confused... like me!

See if this works (though I could not guess what was the problem with IE7)
Expand|Select|Wrap|Line Numbers
  1. window.onload = function() {
  2.     var e, i = 0;
  3.     while (!!(e = document.getElementById('gallery').getElementsByTagName ('div') [i++]))
  4.     if (e.title.match(/^tab/))
  5.     e.onclick = function () {
  6.  
  7.         var getEls = document.getElementsByTagName('div');
  8.         for (var z=0; z<getEls.length; z++) {
  9.             if (getEls[z].id.match(/^tab/)) getEls[z].className = getEls[z].id == this.title ? "show" : "hide";
  10.             if (getEls[z].title.match(/^tab/)) getEls[z].className = getEls[z] == this ? "on" : "off";
  11.         }
  12.     }
  13. }
Newbie
  
Join Date: May 2008
Posts: 19
#10: May 28 '08

re: show/hide div not fully working in IE

Thanks for trying but that JS broke it:
http://testsite.fisher.co.uk/2008_Redesign/contact_us/contact_us_TEST2.html
Newbie
  
Join Date: May 2008
Posts: 19
#11: May 28 '08

re: show/hide div not fully working in IE

original version:
http://testsite.fisher.co.uk/2008_Redesign/contact_us/contact_us_TEST3.html
hsriat's Avatar
Expert
  
Join Date: Jan 2008
Location: Bath, UK
Posts: 1,609
#12: May 28 '08

re: show/hide div not fully working in IE

Lol!...

Could not open your page though, but if replaced in your old code, it works perfectly fine, on all browsers.

Oh... may be ... you copied that space in TagName. Remove it. It was an editor's error.

Click on reply button on my last past and copy code, instead of copying as it is.
Newbie
  
Join Date: May 2008
Posts: 19
#13: May 28 '08

re: show/hide div not fully working in IE

I've remove my JS code and replaced it entirely with your code:
Expand|Select|Wrap|Line Numbers
  1. window.onload = function() {
  2.     var e, i = 0;
  3.     while (!!(e = document.getElementById('gallery').getElementsByTagName ('div') [i++]))
  4.     if (e.title.match(/^tab/))
  5.     e.onclick = function () {
  6.  
  7.         var getEls = document.getElementsByTagName('div');
  8.         for (var z=0; z<getEls.length; z++) {
  9.             if (getEls[z].id.match(/^tab/)) getEls[z].className = getEls[z].id == this.title ? "show" : "hide";
  10.             if (getEls[z].title.match(/^tab/)) getEls[z].className = getEls[z] == this ? "on" : "off";
  11.         }
  12.     }
  13. }
I have the same original problem:
http://testsite.fisher.co.uk/2008_Re..._us_TEST2.html

We're almost there! I can feel it!
hsriat's Avatar
Expert
  
Join Date: Jan 2008
Location: Bath, UK
Posts: 1,609
#14: May 28 '08

re: show/hide div not fully working in IE

I'll be honest. I've no idea what's causing this incompatibility in IE7.

My Firebug says theres' no error, nor there's any warning!
My Web Developer tool bar (Fx) says there's no error, no warning... even in the strict mode.
IE6's Developer bar says there's no error, nor any warning!

So what can it be?

Last thing I can suggest it to add a function on onload event of the body
<body onload ="init()">

And name that function as init()
Newbie
  
Join Date: May 2008
Posts: 19
#15: May 28 '08

re: show/hide div not fully working in IE

nope that didn't work :-(
Thanks for all your help
hsriat's Avatar
Expert
  
Join Date: Jan 2008
Location: Bath, UK
Posts: 1,609
#16: May 28 '08

re: show/hide div not fully working in IE

Good luck...
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,135
#17: May 28 '08

re: show/hide div not fully working in IE

i personally would try to use a redesign where the second div would be inculded in the corresponding first div ... so you don't need to match id and title everytime, and could use some simpler css-classes ...

kind regards
Newbie
  
Join Date: May 2008
Posts: 19
#18: May 29 '08

re: show/hide div not fully working in IE

I've fixed it! (sort of)
I've changed the title of the bars to an image with text rather than just a <p>text</p>

Its a bit of a bodge but at least it works!

Thanks to everyone for their help, especially hsriat

Ryan
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#19: May 29 '08

re: show/hide div not fully working in IE

The original code works fine in IE7 with one caveat - no doctype. When IE7 goes into strict mode, i.e. not quirks mode, it seems to have problems.
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,467 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved