Show/Hide div NOT workink in IE

J

jefzalez

Hello, I am a complete novice to javascript and css. I have taken this
piece of code and have it working correctly in Firefox, but cannot get
it to work in IE.Thank you for any advice.


I am attaching the HTML below:
Does it have anything to do with Doctype?


CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>hid show div</title>



<script type="text/javascript" language="JavaScript">
<!--
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none")
{ document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//-->
</script>


</head>

<table width="310" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/top_curve2.jpg" alt="" width="299"
height="30" /></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<a onRelease="ShowContent('step1div'); return true;"
href="javascript:ShowContent('step1div')" >

<img src="images/step1.jpg" width="299" height="120" border="0"/></a>

<div
id="step1div"
style="display:none;
position:absolute;
left:490px;
top:178px;
border-style: none;
padding: 0px;">

<a onRelease="HideContent('step1div'); return true;"
href="javascript:HideContent('step1div')" <img src="images/
step1_full_down.jpg" width="299" height="382" border="0"/>

</a> </div>


</td>
</tr>
<tr>
<td>

<a onclick="ShowContent('step2div'); return true;"
href="javascript:ShowContent('step2div')" >

<img src="images/step2.jpg" width="299" height="120" border="0"/></a>

<div
id="step2div"
style="display:none;
position:absolute;
left:490px;
top:298px;
border color:red;
border-style: none;
padding: 0px;">

<a onclick="HideContent('step2div'); return true;"
href="javascript:HideContent('step2div')" <img src="images/
step2_b_full_down.jpg" width="299" height="223" border="0"/>
</a>
</div>


</td>
</tr>
<tr>
<td>

<a onclick="ShowContent('step3div'); return true; "
href="javascript:ShowContent('step3div')" >

<img src="images/step3.jpg" width="299" height="160" border="0"/></a>

<div
id="step3div"
style="display:none;
position:absolute;
left:490px;
top:418px;
border-style: none;
padding: 0px;">

<a onclick="HideContent('step3div'); return true;"
href="javascript:HideContent('step3div')" <img src="images/
step3_c_full_down.jpg" width="299" height="160" border="0" />
</a>
</div>

</td>
</tr>
<tr>
<td>

<img src="images/bottom_curve2.jpg" alt="" width="299"
height="30" /></td>
</tr>
</table>

</body>
</html>
 
T

Thomas 'PointedEars' Lahn

jefzalez said:
Hello, I am a complete novice to javascript and css. I have taken this
piece of code
Click to expand...

Mistake #1. You can't build a house on quicksand.
and have it working correctly in Firefox, but cannot get it to work in IE.
Click to expand...

Mistake #2. Doesn't work is a useless error description.

Thank you for any advice.
Click to expand...

I am attaching the HTML below:
Click to expand...

That is _not_ HTML; it is XHTML, by a very wide margin.
Does it have anything to do with Doctype?
Click to expand...

Possible, since IE does not support XHTML (yet). However, your markup is
not Valid. It employs proprietary features that are possibly the source of
the observed incompatibily. You need to fix that first, and I strongly
suggest you use HTML in doing that.

<http://validator.w3.org/>


PointedEars
 
J

JR

Does it have anything to do with Doctype?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Click to expand...

Always validate your XHTML or HTML markup as Thomas pointed out. Use
http://validator.w3.org/
<script type="text/javascript" language="JavaScript">
Click to expand...

Remove that language attribute, leaving just what matters:
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";}
Click to expand...

d.length is useless if d is null or undefined. I suggest using
arguments.length instead, even though it's not necessary in this case.
See below:

function HideContent(d) {
if (document.getElementById) { // avoid problem with older browsers
versions.
var elem = document.getElementById(d);
if (elem) { elem.style.display = "none"; }
}
}
<a onRelease="ShowContent('step1div'); return true;"
   href="javascript:ShowContent('step1div')" >
Click to expand...

onRelease seems to be an IE's proprietary attribute. Change <a> to:

<a href="ShowContent('step1div'); return false;">Show</a>

and

<a href="HideContent('step1div'); return false"><img src="images/
step1_full_down.jpg" alt= "Hide div" width="299" height="382"
border="0"/> said:
<a onclick="ShowContent('step2div'); return true;"
   href="javascript:ShowContent('step2div')" >
Click to expand...

Should be:

<a href="ShowContent('step2div'); return false" >...</a> Why do want a
return of true and an onclick in a link?

And continue onwards with the rest of your XHTML markup

Cheers,
Joao Rodrigues
 
J

jefzalez

....
Click to expand...

Hi, I am sorry about the ignorance here on my part and thank you for
taking the time to even respond. I am struggling to learn as fast as I
can, but am still way behind and I am trying to show this for my boss
tomorrow (It was just an idea to show and hide something and I wanted
to be smart about it on a webpage...I spoke too quickly and now have
to show something Monday).
I am including an updated piece of code, that refers to a new Doc
type.
Basically, In firefox 3.0 I am able to show an image div on top of an
image with a click, AND remove it when I click again.
However in IE 7, I cannot actually make the hidden div appear, it just
doesn't show up:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hid and show DIV</title>


<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "block")
{ document.getElementById(d).style.display = "none"; }
else { document.getElementById(d).style.display = "block"; }
}
//--></script>


<style type="text/css">
a {
outline: none;
}
a img {
border:none;
}
</style>


</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="310" border="0" cellspacing="0" cellpadding="0">

<tr>
<td>

<a href = '#' onclick = "ShowContent('step1div'); return false;"
<img src="images/step1.jpg" width="299" height="120" border="0"></a>

<div
id="step1div"
style="display:none;
position:absolute;
left:490px;
top:178px;
border-style: none;
padding: 0px;">

<a href='#' onclick="HideContent('step1div'); return true;"
<img src="images/step1_full_downC.jpg" width="299" height="430"
border="0">
</a>
</div>

</td>
</tr></table>
</body>
</html>
 
J

JR

Oh boy! It's past 11 pm, I'm falling asleep and writing wrong href
attributes for your links. My bad..., sorry.

Instead of:
<a href="ShowContent('step1div'); return false;">Show</a>
Click to expand...

It should be: <a href="somepage.htm" onclick="ShowContent('step1div');
return false;">Show</a>

Or use the benign #.

<a href="#" onclick="ShowContent('step1div'); return false;">Show</a>

Wherever I put javascript code in href attrib, change it to <a
href="somepage.htm" onclick="javascript code">etc.</a>.

I think that href="javascript: pseudo-URL" works well in all modern
browsers (<a href="javascript:ShowContent(...)">), but it's advisable
to use onclick attribute. Why? Because strange things can happen if
javascript is disabled in a browser.

Hopefully I can sleep now...

Cheers,
Joao Rodrigues
 
J

jefzalez

Oh boy! It's past 11 pm, I'm falling asleep and writing wrong href
attributes for your links. My bad..., sorry.

Instead of:
Click to expand...
Cheers,
Joao Rodrigues
Click to expand...

Thank you,

I change the code to following but now it does not work in FF
either...I know your going to sleep, so thank you anyway for all the
ideas earlier.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hid and show DIV</title>


<script type="text/javascript"><!--
function HideContent(d) {
if(document.getElementById) { // avoid problem with older browsers
versions.
var elem = document.getElementById(d);
if (elem) { elem.style.display = "none"; }
}

}
function ShowContent(d) {
if(document.getElementById) { // avoid problem with older browsers
versions.
var elem = document.getElementById(d);
if (elem) { elem.style.display = "block"; }
}

}

//--></script>


<style type="text/css">
a {
outline: none;
}
a img {
border:none;
}
</style>


</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="310" border="0" cellspacing="0" cellpadding="0">

<tr>
<td>

<a href="#" onclick="ShowContent('step1div'); return false"; >

<img src="images/step1.jpg" width="299" height="120" border="0"></a>

<div
id="step1div"
style="display:none;
position:absolute;
left:490px;
top:178px;
border-style: none;
padding: 0px;">


<a href="#" onclick="HideContent('step1div'); return false;">
<img src="images/step1_full_downC.jpg" width="299" height="430"
border="0">
</a>
</div>


</td>
</tr></table>
</body>
</html>
 
T

Trevor Lawrence

2:45 PM here in Canberra

I use this (only tested in IE7)
<input type="button" value="Show/Hide"
title="Show/Hide" onclick="hidesv('pano')" />
<div id="pano">
<!-- STUFF TO SHOW /HIDE GOES IN HERE -->
</div>

where
function hidesv(panoId){
var d = document.getElementById(panoId);
var dd = d.style.display;
dd = d.style.display = ((!dd) || (dd == 'none')) ? 'block'
: (dd != 'none') ? 'none'
: dd ;
window.resizeBy(0, (dd != 'none') ? 300 : -300)
}
/** END hidesv() **/

--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org

Oh boy! It's past 11 pm, I'm falling asleep and writing wrong href
attributes for your links. My bad..., sorry.

Instead of:
Click to expand...
Cheers,
Joao Rodrigues
Click to expand...

Thank you,

I change the code to following but now it does not work in FF
either...I know your going to sleep, so thank you anyway for all the
ideas earlier.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hid and show DIV</title>


<script type="text/javascript"><!--
function HideContent(d) {
if(document.getElementById) { // avoid problem with older browsers
versions.
var elem = document.getElementById(d);
if (elem) { elem.style.display = "none"; }
}

}
function ShowContent(d) {
if(document.getElementById) { // avoid problem with older browsers
versions.
var elem = document.getElementById(d);
if (elem) { elem.style.display = "block"; }
}

}

//--></script>


<style type="text/css">
a {
outline: none;
}
a img {
border:none;
}
</style>


</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="310" border="0" cellspacing="0" cellpadding="0">

<tr>
<td>

<a href="#" onclick="ShowContent('step1div'); return false"; >

<img src="images/step1.jpg" width="299" height="120" border="0"></a>

<div
id="step1div"
style="display:none;
position:absolute;
left:490px;
top:178px;
border-style: none;
padding: 0px;">


<a href="#" onclick="HideContent('step1div'); return false;">
<img src="images/step1_full_downC.jpg" width="299" height="430"
border="0">
</a>
</div>


</td>
</tr></table>
</body>
</html>
 
T

Thomas 'PointedEars' Lahn

JR said:
Instead of:


It should be: <a href="somepage.htm" onclick="ShowContent('step1div');
return false;">Show</a>

Or use the benign #.
Click to expand...

There is nothing benign about unexpected scrolling to the top of the document.
<a href="#" onclick="ShowContent('step1div'); return false;">Show</a>
Click to expand...

No. Don't. Ever. If an `a' element is absolutely necessary, generate this
element dynamically, duplicating the `onclick' code in the `href' attribute,
something along

document.write(
'<a href="javascript:void(ShowContent(\'step1div\'))"'
+ ' onclick="ShowContent(\'step1div\'); return false">'
+ 'Show<\/a>');

However, `a' elements should not be abused this way; there are buttons
(<input type="button" value="..." onclick="..."> and <button type="button"
onclick="...">) which can be styled with CSS, and should be generated
dynamically as well.
Wherever I put javascript code in href attrib, change it to <a
href="somepage.htm" onclick="javascript code">etc.</a>.
Click to expand...

That's the ticket. However, somepage.htm should not simply state that the
functionality requires scripting but should offer a viable alternative to
the user (and to robots). If there is no such thing, the entire element
should be generated dynamically.
I think that href="javascript: pseudo-URL" works well in all modern
browsers (<a href="javascript:ShowContent(...)">), but it's advisable
to use onclick attribute. Why? Because strange things can happen if
javascript is disabled in a browser.
Click to expand...

Strange things can also happen if the proprietary `javascript:' scheme is
unsupported, like error messages. Most notably, whether it is supported or
not, animations are likely to stop and the document will lose its domain
binding (causing all kinds of SOP errors with following scripts).


PointedEars
 
S

SAM

Le 6/15/09 1:55 AM, jefzalez a écrit :
Hello, I am a complete novice to javascript and css. I have taken this
piece of code and have it working correctly in Firefox, but cannot get
it to work in IE.Thank you for any advice.


I am attaching the HTML below:
Does it have anything to do with Doctype?
Click to expand...

'onRelease' isn't it a Flash's function ?
Can that works in "normal" JavaScript with an HTML link ?
It could be preferable to use 'onclick' instead.

CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>hid show div</title>
Click to expand...


<script type="text/javascript">
// <![CDATA[

function toggleDisplay(d) {
if(document.getElementById(d)) {
d = document.getElementById(d).style;
if(d) d.display = d.display=='block'? 'none' : 'block';
}
return false;
}

/* the div 'd' must have a style attribute
with display: none/block
*/

// ]]>
</head>
Click to expand...
<body>
<p>
<a onclick="return toggleDisplay('step1div');" href="#" >
<img src="images/step1.jpg" alt="" width="299" height="120"
border="0"/>
</a>
<div
id="step1div"
style="display:none;
position:absolute;
left:490px;
top:178px;
border-style: none;
padding: 0px;">
Click to expand...

<a onclick="return toggleDisplay('step1div');" href="#">
<img src="images/step1_full_down.jpg" alt="" width="299" height="382"
border="0"/>
 
J

JR

There is nothing benign about unexpected scrolling to the top of the document.
Click to expand...

I think it's benign if you want to scroll the page to display a header
text saying more or less the following: " - If you insist on browsing
the Internet with Javascript disabled in 2009, then your place is
definitely not here ..." (just kidding).

No.  Don't.  Ever.  If an `a' element is absolutely necessary, generate this
element dynamically, duplicating the `onclick' code in the `href' attribute,
something along

  document.write(
    '<a href="javascript:void(ShowContent(\'step1div\'))"'
    + ' onclick="ShowContent(\'step1div\'); return false">'
    + 'Show<\/a>');

However, `a' elements should not be abused this way; there are buttons
(<input type="button" value="..." onclick="..."> and <button type="button"
onclick="...">) which can be styled with CSS, and should be generated
dynamically as well.
Click to expand...

If Javascript is disabled how could document.write() do the job? I
think you didn't understand that I was trying to give a "javascript
disabled" option, using href="#" or href="somepage.htm".
That's the ticket.  However, somepage.htm should not simply state that the
functionality requires scripting but should offer a viable alternative to
the user (and to robots).  If there is no such thing, the entire element
should be generated dynamically.
Click to expand...

If Javascript is disabled how could we generate elements dynamically?
Remember that the OP wants to display and hide some DIVs which
requires Javascript enabled.

Regards,
Joao Rodrigues
 
T

Thomas 'PointedEars' Lahn

JR said:
If Javascript is disabled how could document.write() do the job?
Click to expand...

It could not. See?
I think you didn't understand that I was trying to give a "javascript
disabled" option, using href="#" or href="somepage.htm".
Click to expand...

The first one is rubbish, as I explained; the second one I did understand.
Noticed that I commented on it?
If Javascript is disabled how could we generate elements dynamically?
Click to expand...

We could not. See?
Remember that the OP wants to display and hide some DIVs which
requires Javascript enabled.
Click to expand...

Initial hiding can and should be done `onload'. Which requires sufficient
script and DOM support to work. See?


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Help with Visual Lightbox: Scripts 2
SendGrid email issue in responsive Gmail 1
Sort by number of characters 1
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Clickable Div Block 1
Image not changing between "mute" & "un-mute" images. 5
Slideshow not working properly 2

Members online

Total: 35 (members: 1, guests: 34)
Robots: 263

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,066
Latest member
VytoKetoReviews

Latest Threads

Top