Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > using href="#" vs href="javascript:func()" ?

Reply
Thread Tools

using href="#" vs href="javascript:func()" ?

 
 
kelvlam
Guest
Posts: n/a
 
      07-17-2006
Hello,

I'm a new begininer with JavaScript. I'm trying to figure out which is
the best approach, and to understand the differences between them.

I have a <A> element that's suppose to either launch a popup window, or
it will link you to some dynamic created page.

I have declared a global JavaScript function

function showStatus(sMsg)
{
window.status = sMsg ;
return true ;
}


I know there are 3 ways to create this <A> tag

Option 1)
<a id="element1" href="#"
onClick="launchLink(this)"
onMouseOut="return showStatus('')"
onMouseOver="return showStatus('{$positions}')">

This option seem to be the simpliest. But if say I scrolled to the
middle of a page, click the link, the entire page will jump to top.
This kind of page-juggling is undesirable.


Option 2)
<a id="element1" href="javascript:launchLink(this)"
onMouseOut="return showStatus('')"
onMouseOver="return showStatus('{$positions}')">

This seem to work fine, but some like the "this" that I pass into the
javascript function, isn't the same as the "this" in option 1. I seem
to have a difficult problem manipulating the element inside the
JavaScript and DOM.


Option 3)
<a id="element1" href="javascript:void(0)"
onClick="launchLink(this)"
onMouseOut="return showStatus('')"
onMouseOver="return showStatus('{$positions}')">

This seem to yield the same result as option, but without the page
juggling. The "this" passed into the javascript seem to behave the
same as option 1 also. So far this is my pick.


Can some JavaScript expert and Guru shed some light to this newbie
please?

Much appreciated for any pointer or advice.

--
Kelvin

 
Reply With Quote
 
 
 
 
Randy Webb
Guest
Posts: n/a
 
      07-17-2006
kelvlam said the following on 7/17/2006 5:19 PM:
> Hello,
>
> I'm a new begininer with JavaScript. I'm trying to figure out which is
> the best approach, and to understand the differences between them.


Did you try finding an FAQ for this group? This question is covered in it.

<URL: http://jibbering.com/faq/#FAQ4_24>

> I have a <A> element that's suppose to either launch a popup window, or
> it will link you to some dynamic created page.
>
> I have declared a global JavaScript function
>
> function showStatus(sMsg)
> {
> window.status = sMsg ;
> return true ;
> }


What makes you think that function does anything?

>
> I know there are 3 ways to create this <A> tag


There is, at least, one more way.


<snip>

> Can some JavaScript expert and Guru shed some light to this newbie
> please?


See Above.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
 
Reply With Quote
 
 
 
 
kelvlam
Guest
Posts: n/a
 
      07-17-2006
Sorry I haven't read through the FAQ. I will do so now.

I also found a link that I read upon, and I found it quite helpful for
myself to understand this issue --
http://www.quirksmode.org/js/this.html

Thanks for the pointer.

--
Kelvin

Randy Webb wrote:
> kelvlam said the following on 7/17/2006 5:19 PM:
> > Hello,
> >
> > I'm a new begininer with JavaScript. I'm trying to figure out which is
> > the best approach, and to understand the differences between them.

>
> Did you try finding an FAQ for this group? This question is covered in it.
>
> <URL: http://jibbering.com/faq/#FAQ4_24>
>
> > I have a <A> element that's suppose to either launch a popup window, or
> > it will link you to some dynamic created page.
> >
> > I have declared a global JavaScript function
> >
> > function showStatus(sMsg)
> > {
> > window.status = sMsg ;
> > return true ;
> > }

>
> What makes you think that function does anything?
>
> >
> > I know there are 3 ways to create this <A> tag

>
> There is, at least, one more way.
>
>
> <snip>
>
> > Can some JavaScript expert and Guru shed some light to this newbie
> > please?

>
> See Above.
>
> --
> Randy
> comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
> Temporarily at: http://members.aol.com/_ht_a/hikksnotathome/cljfaq/
> Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/


 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      07-17-2006

kelvlam wrote:
> Sorry I haven't read through the FAQ. I will do so now.


Please don't top post in com.lang.javascript.


> I also found a link that I read upon, and I found it quite helpful for
> myself to understand this issue --
> http://www.quirksmode.org/js/this.html


As much as I like Peter-Paul's stuff, I think his explanation of 'this'
in that article could be better. Try these Mike Winters posts:

<URL:http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/ff83b4ef623fd826/d0719ae5667a7ad8?q=mike+winter+this+object+scope+c hain&rnum=10#d0719ae5667a7ad8>
<URL:http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/27beecb64c504859/28e16b48661bf7e2?lnk=st&q=mike+winter+%22this+oper ator%22+object+scope+chain&rnum=1#28e16b48661bf7e2 >

Or this search:
<URL:http://groups.google.co.uk/groups/search?q=group%3Acomp.lang.javascript+%22this+oper ator%22+%7C+%22this+refers+%7C+references%22>


--
Rob

 
Reply With Quote
 
kelvlam
Guest
Posts: n/a
 
      07-17-2006

RobG wrote:
> kelvlam wrote:
> > Sorry I haven't read through the FAQ. I will do so now.

>
> Please don't top post in com.lang.javascript.
>
>
> > I also found a link that I read upon, and I found it quite helpful for
> > myself to understand this issue --
> > http://www.quirksmode.org/js/this.html

>
> As much as I like Peter-Paul's stuff, I think his explanation of 'this'
> in that article could be better. Try these Mike Winters posts:
>
> <URL:http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/ff83b4ef623fd826/d0719ae5667a7ad8?q=mike+winter+this+object+scope+c hain&rnum=10#d0719ae5667a7ad8>
> <URL:http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/27beecb64c504859/28e16b48661bf7e2?lnk=st&q=mike+winter+%22this+oper ator%22+object+scope+chain&rnum=1#28e16b48661bf7e2 >
>
> Or this search:
> <URL:http://groups.google.co.uk/groups/search?q=group%3Acomp.lang.javascript+%22this+oper ator%22+%7C+%22this+refers+%7C+references%22>
>
>
> --
> Rob


Still newbie with this usergroup. I won't top-post anymore

I read through the FAQ, the top-ten web-design mistake
(http://www.useit.com/alertbox/20021223.html) and the best practice
list (http://www.javascripttoolbox.com/bestpractices/), I am crossing
my finger that I'm not re-asking the same question.

I know using pseudo-javascript protocol is bad, so I tried the
following

<a
title="{document(concat($languageDisplay,'.xml'))/Nexa/execution_detail}"
href="blank.html"
onclick="return openDetail(this)"
onmouseout="return showStatus('');"
onmouseover="return showStatus('get detail');">Detail</a>

When my mouse over and mouse out, I am able to show the appropriate
text in the browser status window. But I always want to replace the
status bar text when the user click on the hyperlink. Currently if I
click, it'll show "http://blah/blank.html" in the status bar.

Which particular even should I be capturing in order to achieve this
feature?

Thanks again
--
Kelvin

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      07-18-2006
kelvlam wrote:

[...]
> Still newbie with this usergroup. I won't top-post anymore


Cool.


> I read through the FAQ, the top-ten web-design mistake
> (http://www.useit.com/alertbox/20021223.html) and the best practice
> list (http://www.javascripttoolbox.com/bestpractices/), I am crossing
> my finger that I'm not re-asking the same question.
>
> I know using pseudo-javascript protocol is bad, so I tried the
> following


The JavaScript pseudo-protocol.

It refers to entering "javascript:" instead of say "http:" as the
protocol in the URL.

Going back to your original question, the usual deal is to put a real
URL in the href attribute, then use the onclick attribute to call your
script and return false to cancel the href navigation if the script
successfully completed.


> <a
> title="{document(concat($languageDisplay,'.xml'))/Nexa/execution_detail}"
> href="blank.html"
> onclick="return openDetail(this)"
> onmouseout="return showStatus('');"
> onmouseover="return showStatus('get detail');">Detail</a>
>
> When my mouse over and mouse out, I am able to show the appropriate
> text in the browser status window. But I always want to replace the
> status bar text when the user click on the hyperlink. Currently if I
> click, it'll show "http://blah/blank.html" in the status bar.


What is shown in status bar depends on the browser and how it's
configured. Whether the bar is displayed or not, and whether you can
modify what it displays, is user configurable in most browsers. Some
don't show it at all by default (e.g. Safari), others show what the
href resolves to, still others things like 'Will open blank.html in a
new window'.


> Which particular even should I be capturing in order to achieve this
> feature?


Don't try. Leave the status bar alone, most browsers can prevent you
from setting its value anyway and do so by default (I'm pretty sure
Firefox is one).

--
Rob

 
Reply With Quote
 
kelvlam
Guest
Posts: n/a
 
      07-18-2006

RobG wrote:
> kelvlam wrote:
>
> [...]
> > Still newbie with this usergroup. I won't top-post anymore

>
> Cool.
>
>
> > I read through the FAQ, the top-ten web-design mistake
> > (http://www.useit.com/alertbox/20021223.html) and the best practice
> > list (http://www.javascripttoolbox.com/bestpractices/), I am crossing
> > my finger that I'm not re-asking the same question.
> >
> > I know using pseudo-javascript protocol is bad, so I tried the
> > following

>
> The JavaScript pseudo-protocol.
>
> It refers to entering "javascript:" instead of say "http:" as the
> protocol in the URL.
>
> Going back to your original question, the usual deal is to put a real
> URL in the href attribute, then use the onclick attribute to call your
> script and return false to cancel the href navigation if the script
> successfully completed.
>
>
> > <a
> > title="{document(concat($languageDisplay,'.xml'))/Nexa/execution_detail}"
> > href="blank.html"
> > onclick="return openDetail(this)"
> > onmouseout="return showStatus('');"
> > onmouseover="return showStatus('get detail');">Detail</a>
> >
> > When my mouse over and mouse out, I am able to show the appropriate
> > text in the browser status window. But I always want to replace the
> > status bar text when the user click on the hyperlink. Currently if I
> > click, it'll show "http://blah/blank.html" in the status bar.

>
> What is shown in status bar depends on the browser and how it's
> configured. Whether the bar is displayed or not, and whether you can
> modify what it displays, is user configurable in most browsers. Some
> don't show it at all by default (e.g. Safari), others show what the
> href resolves to, still others things like 'Will open blank.html in a
> new window'.
>
>
> > Which particular even should I be capturing in order to achieve this
> > feature?

>
> Don't try. Leave the status bar alone, most browsers can prevent you
> from setting its value anyway and do so by default (I'm pretty sure
> Firefox is one).
>
> --
> Rob


Rob,

Thanks for the response. After searching this usergroup in google for
"window.status", then I realize it's more-or-less now out of the
programmer control, because it's being overwrite by the browser.
Firefox and IE7 both have it default disable for the script to modify
the status bar.

I guess I will just put something meaningful like "redirect.html" in
the HREF, so when the user mouse-over the link, the status won't show
my long dynamic page request query string, but just
"http://blah/redirect.html" instead.

Much appreciate your help!

Kelvin

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Using a Link Button to redirect to another page by using data from =?Utf-8?B?R1REcml2ZXI=?= ASP .Net 1 02-16-2005 07:04 PM
Error page using the Application_Error void dosnt work when using DIV for a please wait message s_erez@hotmail.com ASP .Net 2 12-24-2004 12:11 PM
no code in webform using vs.net, but in webform using notepad timmso ASP .Net 1 12-12-2003 04:30 PM
Using GetOleDbSchemaTable to get SQL Server Field Description - using pete ASP .Net 1 08-29-2003 10:50 AM
Re: MVP? Index error on nested element using System.xml but NOT using msxml??? William F. Robertson, Jr. ASP .Net 1 06-25-2003 08:08 PM



Advertisments