Solved

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

Posted on 2004-03-11
15
729,421 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
Suggested Courses

710 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