Solved

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

Posted on 2004-03-11
15
728,844 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
Comment
Question by:gagaliya
15 Comments
 
LVL 16

Accepted Solution

by:
jaysolomon earned 500 total points
ID: 10573032
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
ID: 10573373

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
ID: 10573392
all say will cause problems, but nobody says what kind of problem :)
0
Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

 
LVL 16

Expert Comment

by:jaysolomon
ID: 10573450
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
ID: 10573545
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 16

Expert Comment

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

Expert Comment

by:devic
ID: 10573661
@ 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
ID: 10574445
oo so that's what return false is for, thanks:)
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10574493
glad to have helped thanks
jAy
0
 

Expert Comment

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

Expert Comment

by:devic
ID: 10753869
0
 

Expert Comment

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

Expert Comment

by:Pawel Witkowski
ID: 21166382
<a href="#" onclick="blabla()">

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

Expert Comment

by:laurent_roy
ID: 23690864
@ 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
ID: 25482377
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

Featured Post

ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…

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