Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    javascript code doesn't work on google chrome

    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?

    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>

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    For the begining: remove the comments (see the red). They are absolutely usless these days and they are even harmfull under an XHTML Doctype.
    Code:
    <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> 
    ...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    mehmeton (02-07-2011)

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Use rather onclick, instead of onfocus. And return false the click action:
    Code:
    <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
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I would have simplified (and make it more dynamic) the code like:
    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>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>
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • Users who have thanked Kor for this post:

    mehmeton (02-07-2011)

  • #6
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Kor. Thank you very much for your time. It works perfect now. Thanks a lot.

  • #7
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Similar problem

    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:

    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>

  • #8
    New to the CF scene
    Join Date
    Jun 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Quote Originally Posted by Kor View Post
    I would have simplified (and make it more dynamic) the code like:
    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>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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •