PDA

View Full Version : javascript code doesn't work on google chrome



mehmeton
Feb 7th, 2011, 01:47 PM
I'm new to the forum. So hi everyone.

The code below works fine on IE and FF but not on Google Chrome.
Can someone tell me where I'm doing wrong? :o

Thank you for your answers in advance. Im really looking forward much to hearing from you.

You can preview the below code by pasting it to Frontpage, Dreamweaver and etc.


<!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>Untitled Document</title>
<script type="text/JavaScript">

<!--
function show(id)
{
if (document.getElementById(id).style.display == 'none')
{
document.getElementById(id).style.display = '';
}
}
//-->

<!--
function hide(id)
{
document.getElementById(id).style.display = 'none';

}
//-->
</script>

</head>

<body>

<div>

<div>
<table cellspacing="1" cols="3" border="0">
<tbody>
<td><a onfocus="hide('tblB');hide('tblC');show('tblA');" href="#">A</a>
<td><a onfocus="hide('tblA');hide('tblC');show('tblB');" href="#">B</a>
<td><a onfocus="hide('tblB');hide('tblA');show('tblC');" href="#">C</a>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table id="tblA" style="DISPLAY: none" cols="1" cellpadding="2">
<tbody>
<tr valign="top" align="left">

<td>
You&nbsp;select A,
table
tblA is shown&nbsp;
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table id="tblB" style="DISPLAY: none" cols="1" cellpadding="2">
<tbody>
<tr valign="top" align="left">
<td>
You&nbsp;select B, table tblB
is shown&nbsp;
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table id="tblC" style="DISPLAY: none" cols="1" cellpadding="2">
<tbody>
<tr valign="top" align="left">
<td>
You&nbsp;select C, table tblC
is shown&nbsp;
</td>
</tr>
</tbody>
</table>

</div>
</div>
</body>
</html>

Kor
Feb 7th, 2011, 02:05 PM
For the begining: remove the comments (see the red). They are absolutely usless these days and they are even harmfull under an XHTML Doctype.


<script type="text/javascript">

<!--
function show(id)
{
if (document.getElementById(id).style.display == 'none')
{
document.getElementById(id).style.display = '';
}
}
//-->

<!--
function hide(id)
{
document.getElementById(id).style.display = 'none';

}
//-->
</script>
...

mehmeton
Feb 7th, 2011, 02:42 PM
Thank you for your quick suggestion Kor. I did so. But The issue still isn't fixed and remains the same. Can't understand what is wrong with Google Chrome. As the codes work perfect on IE and FF.

Kor
Feb 7th, 2011, 02:50 PM
Use rather onclick, instead of onfocus. And return false the click action:


<td><a onclick="hide('tblB');hide('tblC');show('tblA');return false" href="#">A</a>
<td><a onclick="hide('tblA');hide('tblC');show('tblB');return false" href="#">B</a>
<td><a onclick="hide('tblB');hide('tblA');show('tblC');return false" href="#">C</a>

Kor
Feb 7th, 2011, 02:57 PM
I would have simplified (and make it more dynamic) the code like:


<!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>Untitled Document</title>
<script type="text/JavaScript">
/*<![CDATA[*/
function showHide(obj){
var ids=['A','B','C'], t, i=0;
while(t=document.getElementById('tbl'+ids[i++])){
t.style.display=ids[i-1]==obj.firstChild.nodeValue?'':'none';
}
}
/*]]>*/
</script>
</head>
<body>
<div>
<div>
<table cellspacing="1" cols="3" border="0">
<tbody>
<td><a onclick="showHide(this);return false" href="#">A</a>
<td><a onclick="showHide(this);return false" href="#">B</a>
<td><a onclick="showHide(this);return false" href="#">C</a>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table id="tblA" style="display: none" cols="1" cellpadding="2">
<tbody>
<tr valign="top" align="left">

<td>
You&nbsp;select A,
table
tblA is shown&nbsp;
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table id="tblB" style="display: none" cols="1" cellpadding="2">
<tbody>
<tr valign="top" align="left">
<td>
You&nbsp;select B, table tblB
is shown&nbsp;
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table id="tblC" style="display: none" cols="1" cellpadding="2">
<tbody>
<tr valign="top" align="left">
<td>
You&nbsp;select C, table tblC
is shown&nbsp;
</td>
</tr>
</tbody>
</table>

</div>
</div>
</body>
</html>

mehmeton
Feb 7th, 2011, 04:48 PM
Kor. Thank you very much for your time. It works perfect now. Thanks a lot.

YYARDIM
Feb 13th, 2011, 08:54 AM
Hi, I have a similar problem and would appreciate any help. I am working on a classic ASP page with some javascript in it. The idea is, to show a div portion (divid='mainarea') if the javascript is enabled in user's browser (or network), to show another div (divid='noscript') if the javascript is disabled. The code is working just as I desire in IE. But it won't work at all in Chrome. Here is the code with full javascript and partial asp/html code:



<head>
<title>Initial Page</title>
<script language="javascript" type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != "function") {
window.onload = func;
} else {
window.onload = function () {
if (oldonload) {
oldonload();
}
func();
};
}
}

var noscript = addLoadEvent(noscript);

addLoadEvent(function() {
/*more code to run on page load*/
});

function noscript() {
if (document.removeChild) {
var div = document.getElementById("noscript");
div.parentNode.removeChild(div);
document.getElementById("mainarea").style.display = '';
}
else if (document.getElementById) {
document.getElementById("noscript").style.display = 'none';
document.getElementById("mainarea").style.display = '';
}
}
</script>
</head>


<body onload = "SetFocus();">
<div id="noscript">
<p>
This is the no javascript condition.
</p>
</div>

<div id="mainarea" style="display: none">
<form method="post" name="frmInitialPage" action="initial_page.asp"
onsubmit="if (isEmpty(document.frmInitialPage.txtLoginID))
{
alert ('Please enter your User ID to continue!');
document.frmInitialPage.txtLoginID.focus();
return false;
}
return true;">

<br />

--some lines of code I cut here

</form>
</div>

sbkhan303
Sep 29th, 2012, 06:13 PM
Dear Kor,
The mentioned below code is not working with Radio TYPE input.

Any idea, if i would like to work the below code with input buttons ??

Waiting of your quick reply.

Thanks.


I would have simplified (and make it more dynamic) the code like:


<!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>Untitled Document</title>
<script type="text/JavaScript">
/*<![CDATA[*/
function showHide(obj){
var ids=['A','B','C'], t, i=0;
while(t=document.getElementById('tbl'+ids[i++])){
t.style.display=ids[i-1]==obj.firstChild.nodeValue?'':'none';
}
}
/*]]>*/
</script>
</head>
<body>
<div>
<div>
<table cellspacing="1" cols="3" border="0">
<tbody>
<td><a onclick="showHide(this);return false" href="#">A</a>
<td><a onclick="showHide(this);return false" href="#">B</a>
<td><a onclick="showHide(this);return false" href="#">C</a>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table id="tblA" style="display: none" cols="1" cellpadding="2">
<tbody>
<tr valign="top" align="left">

<td>
You&nbsp;select A,
table
tblA is shown&nbsp;
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table id="tblB" style="display: none" cols="1" cellpadding="2">
<tbody>
<tr valign="top" align="left">
<td>
You&nbsp;select B, table tblB
is shown&nbsp;
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table id="tblC" style="display: none" cols="1" cellpadding="2">
<tbody>
<tr valign="top" align="left">
<td>
You&nbsp;select C, table tblC
is shown&nbsp;
</td>
</tr>
</tbody>
</table>

</div>
</div>
</body>
</html>