Solved

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

Posted on 2004-03-11
727,353 Views
Last Modified: 2011-08-18
<a href="javascript:expand()">  and <a href="#" onclick="javascript:expand()">

what's the difference? i know the href="#" is the more standard way nowdays to do it. my problem is 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 expand the page ALWAYS scroll right back to the top which isnt acceptable from a user friendly point.  If i use href="javascript:expand()" when user clicks expand, the page doesnt move and everything is ok.  So will there be any problems if i just use href="javascript:expand()" instead?  or how do i fix the href="#" so the page doesnt scroll back to the top whenever user clicks expand.  thanks.

<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>
0
Question by:gagaliya
    15 Comments
     
    LVL 17

    Accepted Solution

    by:
    this is the outdated way and will cause problems
     <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;">

    0
     
    LVL 7

    Expert Comment

    by:searlas

    You can use href and onclick together to provide the same functions
    to people who have javascript turned off.  e.g.
    <a href="some.jsp?expand=1" onclick="expand(); return false;">[+]</a>

    If onclick returns false, the browser never even looks at the href attribute, and so it is not followed.
    Suppose a user has javascript disabled; in this case the browser ignores the onclick handler
    and loads the url given in the href - which in this case is supposed to send back HTML
    showing the tab expanded.

    So, as jaysolomon says, you must return false if you do not want the browser to follow the href.

    The other way of coding it is to ensure the expand function return false, but note, even in this case your onclick handler should include the keyword return:

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

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

    0
     
    LVL 25

    Expert Comment

    by:devic
    all say will cause problems, but nobody says what kind of problem :)
    0
     
    LVL 17

    Expert Comment

    by:jaysolomon
    if you have say for example a animated gif in a page and you click the javascript: protocol link the ani will quit running and you have to refresh the page to start again.

    you see?
    0
     
    LVL 25

    Expert Comment

    by:devic
    he he jay,

    ok i try to explain, how i see this problem:

    The problem is that the page stops loading. For exmaple i have some gallery with 30 pictiures on the page and every picture has popup viewBigPic()
    and if i click on the first image, and call javascript:viewBigPic()  (for example in popup), the main page stops loading...


    BUT!
    if href=javascript: is for navigation OR submit, then is doesn't matter

    0
     
    LVL 17

    Expert Comment

    by:jaysolomon
    >>BUT!
    you may be right BUT! i still do not use the protocol
    0
     
    LVL 25

    Expert Comment

    by:devic
    @ jaysolomon
    ok :)

    @ gagaliya
    for your example, also you can avoid <a>

    one style
    <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>

    0
     
    LVL 1

    Author Comment

    by:gagaliya
    oo so that's what return false is for, thanks:)
    0
     
    LVL 17

    Expert Comment

    by:jaysolomon
    glad to have helped thanks
    jAy
    0
     

    Expert Comment

    by:kgpretty
    hi, i'm new to the site. how do i make my own thread?
    0
     
    LVL 25

    Expert Comment

    by:devic
    0
     

    Expert Comment

    by:VINAGAME_SD
    I usually use href="javascript:void(0);" onclick="return func()"
    0
     
    LVL 18

    Expert Comment

    by:wilq32
    <a href="#" onclick="blabla()">

    Makes reload page in OPERA - this is sometimes unwanted behaviour...
    0
     
    LVL 2

    Expert Comment

    by:laurent_roy
    @ devic
    your example with <style>...</style> is not very good because it doesn't work if javaScript is disabled. For me, the full answer if the one by searlas. This method is called "hijax" for those who want to find more info about it.
    0
     
    LVL 29

    Expert Comment

    by:Badotz
    Hijacking a link makes it impossible to drag to another window. It also screws with the right-clicking of said link.

    Coding JavaScript inside the HTML tag is ugly to boot. Far better to rely on a JavaScript function to handle the "onclick" event than to cripple the anchor tag and uglify your page.

    Just try to drag a link from the new EE (Beta) page into a different browse window to see how this DOESN'T WORK.
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone. Privacy Policy Terms of Use

    Featured Post

    Course: JavaScript Coding - Massive 12-Part Bundle

    Regardless of your programming skill level, you'll go from basics to advanced concepts in a vast array of JavaScript subjects including Sammy.js, Agility.js, Ember.js, Node.js, jQuery, AJAX, Extjs, AngularJS, Knockout.js, and JSON.

    Suggested Solutions

    A common challenge, or question, when working with two calendar dates is: What is the difference between the specified days? As is frequently the case, the answer is: It depends... What kind of difference do you want? Given two date obje…
    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    678 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    28 Experts available now in Live!

    Get 1:1 Help Now