473,320 Members | 1,933 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 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 and the JS seems to be fine.
The whole thing works fine in Firefox just not IE!

Here's an online example:
http://testsite.fisher.co.uk/2008_Redesign/contact_us/contact_us_TEST2.html

Here's my 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 -->

CSS:
* {
padding:0;
margin:0;
}
#contact_us_conatiner {
width:727px;
position:relative;
float:left;
margin-left:30px;
margin-top:30px;
}
#gallery {
font:11px arial,sans-serif;
width:700px;
height:33px;
line-height:15px;
position:relative;
float:left;
z-index:200;
}
#gallery div.off {
width:600px;
color:#000;
float:left;
border:1px solid #ddd;
cursor:pointer;
text-align:center;
height:33px;
line-height:33px;
position:relative;
z-index:120;
margin-bottom:20px;
}
#gallery div.on {
width:600px;
color:#c00;
float:left;
border:1px solid #000;
border-bottom:0;
cursor:pointer;
text-align:center;
height:33px;
line-height:32px;
position:relative;
z-index:100;
}
div.hide {
display:none;
width:0;
overflow:hidden;
}
div.show {
width:600px;
height:115px;
margin-top:0;
border:1px solid #000;
border-top:0;
position:relative;
z-index:50;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
float:left;
margin-bottom:20px;
}
.clear {clear:both;}

JS:
onload = function() {
var e, i = 0;
while (e = document.getElementById('gallery').getElementsByTa gName ('DIV') [i++]) {
if (e.className == 'on' ¦¦ e.className == 'off') {
e.onclick = function () {
var getEls = document.getElementsByTagName('DIV');
for (var z=0; z<getEls.length; z++) {
getEls[z].className=getEls[z].className.replace('show', 'hide');
getEls[z].className=getEls[z].className.replace('on', 'off');
}
this.className = 'on';
var max = this.getAttribute('title');
document.getElementById(max).className = "show";
}
}
}

}

Any help would be MUCH appreciated!
Thanks in advance

Ryan
May 28 '08 #1
3 3888
hsriat
1,654 Expert 1GB
working fine in all browsers for me....
May 28 '08 #2
ryrocks
19
Yes it works, but 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
Yes it works, but 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.
Hey, I'm the same guy in the JavaScript forum :D
We'll continue it there only.
May 28 '08 #4

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

Similar topics

13
by: genetic.error | last post by:
I'm moving from Vb6 to VB.Net. I have a feeling this has come up before... The VS.Net MSDN file seems to state that the following should work: Form1.Show Form1.Visible = True Form1.Hide...
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...
2
by: John Doe | last post by:
I have a webpage which shows and hides divs as a method of navigation. It works great in the ever evil IE. It works not so great (read not at all) in any standards compliant browser. I haven't...
2
by: MOHSEN KASHANI | last post by:
Hi, I am trying to hide some form elements in a form by default and show/hide depending on which radio button is clicked. This is what I have but it is not working: <head> <style> ..noshow {...
4
by: jerryyang_la1 | last post by:
I've found this script that allows be to hide/show form elements.. <script language="JavaScript"><!-- var toggle = true; function show(object) { if (document.layers && document.layers)...
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...
9
by: b007uk | last post by:
Hi! Really need help, dont know whats wrong :( I am trying to show images using php script, it works fine, pictures are shown, but if i right click on it and choose "save picture as" it offers me...
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...
18
by: Liquidtouch | last post by:
I have been searching on this for awhile and cant find anything and playing around with it got me no where. I will start with what I am after and then explain what I have. I have a table with 3...
18
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: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

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.