Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Toggle DIV Help

Status
Not open for further replies.
seanjamesbarry

seanjamesbarry

Programmer
Jul 9, 2007
3
GB
Hi,

The following page - - contains a button next to "Email a friend" that when clicked displays a hidden div. On Firefox it displays fine, but on IE the graphic for the send button does not display. However, when I try the code locally it works fine. Any ideas? Apologies for the formatting I've tried to make it look half decent for display here.

What I don't get is that the SRC for the send image is fine - - that path exists, but it doesn't display anything. When I make the DIV that it is in either not hidden or move the send button code outside of the hidden DIV it works fine. When I run it all from my hard drive it all works fine and the online page works fine in Firefox.

The code is as follows (a subset of that page):

<html>
<head>
<title>Test toggle</title>
<script type="text/javascript" language="javascript">

function toggleSlide(objname1,objname2){

if(document.getElementById(objname1).style.display == "none"){

var browserDetails = navigator.userAgent;

if (browserDetails.indexOf('Firefox') != -1) {
document.getElementById(objname1).style.display = "inline";
}
else {
document.getElementById(objname1).style.display = "inline-block";
}

}else{
document.getElementById(objname1).style.display = "none";
}

if(document.getElementById(objname2).style.display == "none"){
document.getElementById(objname2).style.display = "block";
}else{
document.getElementById(objname2).style.display = "none";
}
}

</script>
<link href=" rel="stylesheet" type="text/css">
</head>
<body>
<div class="red_bold_12 marginTop10px floatLeft">Email a friend
&nbsp;</div>

<a href="javascript:;" onmousedown="toggleSlide
('send','emailFriend');">
<img src=" RedArrow.png" width="14" height="14" class="marginTop10px" /></a>

<div id="emailFriend" style="display:none">
<table>
<tr><td valign="top" align="left">
<h1 class="width100MarginBottom10">Email A Friend</h1></td></tr>
<tr><td valign="top" align="left">
<div class="width100MarginBottom10">To:</div></td><td>
<input type="text" id="toEmail" name="toEmail" size="28" /></td></tr>
<tr><td valign="top" align="left">
<div class="width100MarginBottom10">From:</div></td><td>
<input type="text" id="fromEmail" name="fromEmail" size="28 " /></td></tr>
<tr><td valign="top" align="left">
<div class="width100MarginBottom10">
Comments:</div></td><td><textarea id="messageBox"
name="messageBox" rows="5" cols="28"></textarea></td></tr>
</table>

<div><span class="red_bold_12"
onmousedown="emailToFriendAndReturn('toEmail','fromEmail','messageBox','emailFriend');">Send&nbsp;

<img src=" style="display:none" name="send" id="send" width="14" height="14" class="marginTop10px" /></span></div>

</div>
</body>
</html>
 
Sort by date Sort by votes
Check the case of the full path. If you are using Windows, it won't care what case you use... upload it to an ISP host that is running a non-Windows environment and it will do as you describe.

My suggestion to you... always name all files that you intent to serve over the internet as lower case. No exception. And never use a space character (or any of the other weird characters like : and / and -). If you follow that rule you will NEVER hqve to deal with problems like this. Ever.

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
It looks fine for me in IE7. Maybe try pulling a fresh copy of the page? CTRL + F5

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
 
Upvote 0 Downvote
Maybe that was a bit harsh... sorry if I appeared a bit opinionated (for a change)... but you get the drift [smile]

Another suggestion - check you don't have an ad blocker active... weird as it seems! You might have blocked an ad where the served ad had a similar name (although RedArrow.png seems pretty safe to me).

Cheers,
Jeff


[tt]Jeff's Page [!]@[/!] Code Couch
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Upvote 0 Downvote
Hi Guys,

Thanks for your quick response. I think it's hosted on a Linux server, not too sure, but that wouldn't explain why it displays fine outside of the div with the emailFriend id.

I tried Ctrl + F5 as suggested and it displayed the Send Button but then when I tried again and again it went away again. I don't see how it is the code because it works fine on Firefox.

Kaht could you please try clicking on the email a friend button once to display the form and again to close it and then try again. Thanks.
 
Upvote 0 Downvote
You're correct, the 2nd time I click it the arrow image does not reappear. A quick question though - why are you even changing it's display status in the first place? If it's enclosed in the div that is set to display:none, then there's not really any sense in changing the arrow's display properties because it's all taken care of by the div (unless I'm missing something)

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
 
Upvote 0 Downvote
Hi Kaht,

Yes that's a good point. I'm changing the send button separately because it wasn't displaying the button on unhiding the DIV. That said that was before I fixed the problem with having to set the display to inline-block on IE and inline on Firefox. Do you think this will fix it?

Thanks,

Sean
 
Upvote 0 Downvote
Do you think this will fix it?
Click to expand...

Yeah, probably. But wouldn't it be better to try it out and see for yourself [wink]

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
1K
ggriffit
ggriffit
tyutghf
  • Locked
  • Question
Konami code help 3
Replies
10
Views
346
tyutghf
tyutghf
Disskyz
  • Locked
  • Question
Need help with javascript date 1
Replies
4
Views
178
Smurfmania
Smurfmania
obtur
  • Locked
  • Question
function below calculates day of the week for any given date. not returning correctly, plz help
Replies
2
Views
168
obtur
obtur
waubain
  • Locked
  • Question
Syntax help to create values list for table column
Replies
1
Views
151
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top