Solved

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

Posted on 2004-03-11
727,169 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>
Good Question?
0
Question by:gagaliya
    890 Solutions
    Best Solution byjaysolomon
    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
    15 Comments
     
    890 Solutions

    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;">

    Good Solution?
    0
     
    133 Solutions

    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>

    Good Comment?
    0
     
    1,120 Solutions

    Expert Comment

    by:devic
    all say will cause problems, but nobody says what kind of problem :)
    Good Comment?
    0
     
    890 Solutions

    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?
    Good Comment?
    0
     
    1,120 Solutions

    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

    Good Comment?
    0
     
    890 Solutions

    Expert Comment

    by:jaysolomon
    >>BUT!
    you may be right BUT! i still do not use the protocol
    Good Comment?
    0
     
    1,120 Solutions

    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>

    Good Comment?
    0
     
    7 Solutions

    Author Comment

    by:gagaliya
    oo so that's what return false is for, thanks:)
    Good Comment?
    0
     
    890 Solutions

    Expert Comment

    by:jaysolomon
    glad to have helped thanks
    jAy
    Good Comment?
    0
     
    1 Solution

    Expert Comment

    by:kgpretty
    hi, i'm new to the site. how do i make my own thread?
    Good Comment?
    0
     
    1,120 Solutions

    Expert Comment

    by:devic
    Good Comment?
    0
     

    Expert Comment

    by:VINAGAME_SD
    I usually use href="javascript:void(0);" onclick="return func()"
    Good Comment?
    0
     
    373 Solutions

    Expert Comment

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

    Makes reload page in OPERA - this is sometimes unwanted behaviour...
    Good Comment?
    0
     
    7 Solutions

    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.
    Good Comment?
    0
     
    998 Solutions

    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.
    Good Comment?
    0

    Add a Comment

    Join our community to follow up on this question and 4 million more solutions.

    Join & Write a Comment

    Featured Post

    Course: Foundations of Front-End Development

    Jump-start a lucrative career in front-end web development, with zero previous coding experience required. This course covers the basic programming concepts and languages required for creating engaging websites from scratch.

    Suggested Solutions

    When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
    The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
    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…

    777 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

    21 Experts available now in Live!

    Get 1:1 Help Now