472,950 Members | 2,633 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,950 software developers and data experts.

show/hide div not fully working in IE

19
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
May 28 '08 #1
18 4799
hsriat
1,654 Expert 1GB
Working fine in IE, Fx, Opera and Safari...

What's not happening according to you?
May 28 '08 #2
ryrocks
19
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.
May 28 '08 #3
hsriat
1,654 Expert 1GB
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 28 '08 #4
hsriat
1,654 Expert 1GB
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)
May 28 '08 #5
ryrocks
19
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!
May 28 '08 #6
hsriat
1,654 Expert 1GB
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.
May 28 '08 #7
ryrocks
19
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!
May 28 '08 #8
hsriat
1,654 Expert 1GB
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. }
May 28 '08 #9
ryrocks
19
Thanks for trying but that JS broke it:
http://testsite.fisher.co.uk/2008_Redesign/contact_us/contact_us_TEST2.html
May 28 '08 #10
ryrocks
19
original version:
http://testsite.fisher.co.uk/2008_Redesign/contact_us/contact_us_TEST3.html
May 28 '08 #11
hsriat
1,654 Expert 1GB
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.
May 28 '08 #12
ryrocks
19
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!
May 28 '08 #13
hsriat
1,654 Expert 1GB
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()
May 28 '08 #14
ryrocks
19
nope that didn't work :-(
Thanks for all your help
May 28 '08 #15
hsriat
1,654 Expert 1GB
Good luck...
May 28 '08 #16
gits
5,390 Expert Mod 4TB
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
May 28 '08 #17
ryrocks
19
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
May 29 '08 #18
acoder
16,027 Expert Mod 8TB
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.
May 29 '08 #19

Sign in to post your reply or Sign up for a free account.

Similar topics

5
by: Zambien | last post by:
Hi all, Here's my problem. I have tables that are using the menu/submenu idea for hiding rows. This works fine in IE (of course) and does show/hide correctly in netscape, but as soon as the...
10
by: oLE | last post by:
I would like to add some javascript to show/hide a certain row of a table. The first row of the table contain the hyperlink that calls the javascript the second row is the one i want to show/hide...
4
by: bridgemanusa | last post by:
Hi All: I have a very long page of html that I want to take portions and hide them in divs, then show when a link is clicked. I have the hide show part working when the link is clicked, however...
1
by: asilverpeach | last post by:
Hey Guys! Found some great scripts here on this topic but have to make to changes to the code that I can't seem to figure out. First, In the following code clicking on the headers shows the...
3
by: therealvibe | last post by:
I have made a simple page with show hide layers with javascript and css. http://www.icatt.nl/special/test/salarisstrook_algemeen.html The idea is that the blue help text rechtangle will have...
1
by: pamate | last post by:
hi, I want to show hide layers. I am able to show and hide layers but i am facing problem that, cant view the cursor in Mozilla,but i can type in input text box, its overlapping the layers. ...
7
by: Tom | last post by:
By my estimate, greater than 90% of the online doco code does not work without additional coding effort. Fully working solutions are invaluable for the student. A guru's work measured in minutes...
3
by: ryrocks | last post by:
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...
0
by: Mushico | last post by:
How to calculate date of retirement from date of birth
2
by: DJRhino | last post by:
Was curious if anyone else was having this same issue or not.... I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Aliciasmith | last post by:
In an age dominated by smartphones, having a mobile app for your business is no longer an option; it's a necessity. Whether you're a startup or an established enterprise, finding the right mobile app...
0
tracyyun
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
3
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.