href="javascript:func()" vs href="#" onclick="javascript:func()"

**BansiJI** · 10-05-2010

<a href="javascript:expand()"> and <a href="#" onclick="javascript:expand()">

What's the difference? I know the href="#" is the more standard method now a days to do it. My issue is that I have a standard dropdown menu that expand/collapse when user clicks on toggle. If I do href="#" for the code below, whenever someone clicks on the expand control, the page always scroll right back to the top that is not acceptable from a user friendly point. If I use href="javascript:expand()" when user clicks on expand control, the page doesn't move and all is going fine. So will there be any issue if I just use href="javascript:expand()" instead? or how do I resolve the href="#" so the page doesn't scroll back to the top whenever user clicks expand.

Thanks.

Code:

<html>
<head>
<title> tabletest </title>
<script>
function expand(sec)
{
     thisSec = eval('e' + sec);
     if (thisSec != null){
          if (thisSec.length){
               if (thisSec[0].style.display != 'none'){
                    for (var i=0;i<thisSec.length;i++) {thisSec[i].style.display = 'none'}
               }
               else{
                    for (var i=0;i<thisSec.length;i++) {thisSec[i].style.display = 'inline'}
               }
          }
          else{
                         if (thisSec.style.display != 'none')     {thisSec.style.display = 'none'}
               else{thisSec.style.display = 'inline'}
          }
     }

}
</script>


</head>

<body>

<table cellpadding="0" cellspacing="0" width="950" border="0">

<tr>
        <td>col1</td>
        <td align="right">col2</td>
        <td align="right">col3</td>
        <td align="right">col4</td>
        <td align="right">col5</td>
        <td align="right">col6</td>
</tr>


<tr>
        <td><a href="javascript:expand(0)"> toggle      abbbccaaaaa</a></td>
        <td align="right">&nbsp;75</td>
        <td align="right">&nbsp;12</td>
        <td align="right">&nbsp;325</td>
        <td align="right">&nbsp;115</td>
        <td align="right">&nbsp;105</td>
</tr>

<tr id="e0" style="display:none">
<td colspan="99">
            <table border="0">
            <tr><td>column1</td><td>column2</td></tr>
            <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
            <tr><td>1</td><td>abadd</td></tr>
            <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
            <tr><td>5</td><td>cddad</td></tr>
            <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
            <tr><td>30</td><td>asfddf</td></tr>
            <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
            </table>
</td>
</tr>
<tr>
        <td><a href="javascript:expand(1)">toggle    abbbccaaaaa</a></td>
        <td align="right">&nbsp;75</td>
        <td align="right">&nbsp;12</td>
        <td align="right">&nbsp;325</td>
        <td align="right">&nbsp;115</td>
        <td align="right">&nbsp;105</td>
</tr>
<tr id="e1" style="display:none">
<td colspan="99">
            <table border="0">
            <tr><td>column1</td><td>column2</td></tr>
            <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
             <tr><td>1</td><td>abadd</td></tr>
             <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
             <tr><td>5</td><td>cddad</td></tr>
             <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
             <tr><td>30</td><td>asfddf</td></tr>
             <tr><td><img src="space.gif" height="1" width="100%"></td></tr>
             </table>
</td>
</tr>
</table>
</body>
</html>

**Praetor** · 10-05-2010

You are going fine and I am getting your code what you want to do but I need to tell you something that. The way that you are using has been outdated now and will occur some issues.

<a href="javascript:expand()">

And the reason this <a href="#" onclick="javascript:expand()"> scrolls to the top is
your not return false like so

<a href="#" onclick="expand();return false;">

**Katty** · 10-05-2010

You can use href and onclick both of them and together to facilitate with the same functions to the user who have javascript turned off. For example.

<a href="some.jsp?expand=1" onclick="expand(); return false;">[+]</a>

If onclick returns false, the browser never even redirected at the href attribute, and so it is not followed. Just assume, A user has javascript disabled; in such scenario, the browser ignores the onclick handler and loads the URL provided in the href - that in this case is supposed to send back HTML displaying the tab expanded.

So, as Praetor told that you must return false if you do not desired the browser to follow the href tag.

**kelfro** · 10-05-2010

There is another way of doing that. The other method of coding it is to ensure the expand function return false, but note, even in this scenario, your onclick handler should include the keyword return:

Code:

<script type="text/javascript">
function expand(sec) {
  // do your stuff...
  return false;
}
</script>

<a href="#" onclick="return expand()">[+]</a>

**BansiJI** · 10-05-2010

Thanks for all your kind replies but I have to ask something from you all. If you have say for instance, A animated gif in a page and you click the javascript: protocol link the ani will quit executing and you have to refresh the page to start that again.

If you all have anymore ideas then please let me know ?? thanks once again !

**Raine** · 11-05-2010

Hello,

OK I try to describe, how I see this issue:

The issue is that the page gets stop in the loading processing. For example, I have some gallery with 20 pictiures on the page and each and every picture has come up viewBigPic()and I clicked on the first image, and call javascript:viewBigPic() (for example in popup), the main page stops loading. But in case,
if href=javascript: is for navigation or submit, then is does not matter

**Praetor** · 12-05-2010

As an example, also you can ignore <a>

one style

Code:

<style>
.ss{color:blue;text-decoration:underline;cursor:hand;}
</style>

and then all attributes in <td>
<td class=ss onclick=expand(0)>toggle abbbccaaaaa</td>
<td class=ss onclick=expand(1)>toggle abbbccaaaaa</td>