javascript in anchor tags

Discussion in 'Javascript' started by yawnmoth, Sep 5, 2005.

  1. yawnmoth

    yawnmoth Guest

    If using an onclick event handler to execute javascript when an anchor
    element is clicked on, what should the href attribute be? #?
    javascript:void(0)? Something else?
    yawnmoth, Sep 5, 2005
    #1
    1. Advertising

  2. yawnmoth

    Evertjan. Guest

    yawnmoth wrote on 05 sep 2005 in comp.lang.javascript:

    > If using an onclick event handler to execute javascript when an anchor
    > element is clicked on, what should the href attribute be? #?
    > javascript:void(0)? Something else?
    >


    Provide a default page for visitors without active js
    and give a return false in js:

    <a href='/mySorries/sorryNoJS.html' onclick='doMyClick();return false;'>
    Please click me anyway</a>

    --
    Evertjan.
    The Netherlands.
    (Replace all crosses with dots in my emailaddress)
    Evertjan., Sep 5, 2005
    #2
    1. Advertising

  3. yawnmoth

    Ivo Guest

    "yawnmoth" wrote
    > If using an onclick event handler to execute javascript when an anchor
    > element is clicked on, what should the href attribute be? #?
    > javascript:void(0)? Something else?
    >

    A normal URL of a normal page, with alternative content for the visitors
    without Javascript. By returning false from the event handler, those with
    Javascript will never know or care about the href value. Also bots can
    follow that link, while they have some problem accessing Javascripted
    content.
    In case you haven't already, check the newsgroup FAQ as well, especially
    <URL: http://www.jibbering.com/faq/#FAQ4_24 >

    hth
    ivo
    Ivo, Sep 5, 2005
    #3
  4. *** Evertjan. wrote/escribió (05 Sep 2005 09:11:07 GMT):
    > Provide a default page for visitors without active js
    > and give a return false in js:
    >
    > <a href='/mySorries/sorryNoJS.html' onclick='doMyClick();return false;'>
    > Please click me anyway</a>



    Using '#' is particularly annoying. It forces your browser to scroll to top
    of page.


    --
    -- Álvaro G. Vicario - Burgos, Spain
    -- http://bits.demogracia.com - Mi sitio sobre programación web
    -- Don't e-mail me your questions, post them to the group
    --
    Alvaro G Vicario, Sep 5, 2005
    #4
  5. yawnmoth

    Randy Webb Guest

    Alvaro G Vicario said the following on 9/5/2005 5:45 AM:

    > *** Evertjan. wrote/escribió (05 Sep 2005 09:11:07 GMT):
    >
    >>Provide a default page for visitors without active js
    >>and give a return false in js:
    >>
    >><a href='/mySorries/sorryNoJS.html' onclick='doMyClick();return false;'>
    >>Please click me anyway</a>

    >
    >
    >
    > Using '#' is particularly annoying. It forces your browser to scroll to top
    > of page.
    >


    Only for authors who don't have the common sense to know how to stop it
    from scrolling.

    But if all a person wants is a dead link/button to click on to activate
    a script, then use a Button and the # problem is gone.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Randy Webb, Sep 5, 2005
    #5
  6. yawnmoth

    yawnmoth Guest

    Randy Webb wrote:
    > <snip>
    >
    > Only for authors who don't have the common sense to know how to stop it
    > from scrolling.
    >
    > But if all a person wants is a dead link/button to click on to activate
    > a script, then use a Button and the # problem is gone.


    That is indeed all I want. I'm using anchor tags to make it so that
    clicking on select bits of text will insert something into a textarea.
    Sending people to a new page when they're unable to insert something
    into a textarea is a bit overkill.

    As for alternatives... I want to make something happen when text - not
    a button or an image - is clicked.

    As for stopping the page from scrolling... I guess I don't have common
    sense... Care to enlighten me?
    yawnmoth, Sep 6, 2005
    #6
  7. yawnmoth

    Randy Webb Guest

    yawnmoth said the following on 9/5/2005 11:58 PM:
    > Randy Webb wrote:
    >
    >><snip>
    >>
    >>Only for authors who don't have the common sense to know how to stop it
    >>from scrolling.
    >>
    >>But if all a person wants is a dead link/button to click on to activate
    >>a script, then use a Button and the # problem is gone.

    >
    >
    > That is indeed all I want. I'm using anchor tags to make it so that
    > clicking on select bits of text will insert something into a textarea.
    > Sending people to a new page when they're unable to insert something
    > into a textarea is a bit overkill.
    >
    > As for alternatives... I want to make something happen when text - not
    > a button or an image - is clicked.
    >
    > As for stopping the page from scrolling... I guess I don't have common
    > sense... Care to enlighten me?
    >



    You return false in the onclick event handler:

    onclick="doSomething();return false";

    Or, you can do this:

    onclick="return doSomething()";

    Where doSomething will return true or false.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Randy Webb, Sep 6, 2005
    #7
  8. yawnmoth

    Donius Guest

    When you set the href of an anchor to '#', it means "go to the current
    page, at the top" and so the browser will scroll to the top. When you
    return false in javascript, it cancels the click action of the
    hyperlink, which means when normally it would follow the link ((this
    page, top)), it will not do any hyperlink action ((link-following)), so
    there's no scrolling. So for those users without javascript, it
    doesn't have a chance to return false ((since none of the script will
    run at all)), and will "fall through" and do the hyperlink action. In
    a lot of cases, an empty href will do what you're looking for ((that
    is, nothing, i think, when there is no javascript available)), or
    javascript:void(0), or some similar gimmick.

    Hope that was vaguely enlightening. :) It's early where i am though,
    so i'll check back later and see if that made any sense.
    Donius, Sep 6, 2005
    #8
  9. yawnmoth

    Randy Webb Guest

    Donius said the following on 9/6/2005 9:44 AM:

    > When you set the href of an anchor to '#', it means "go to the current
    > page, at the top" and so the browser will scroll to the top. When you
    > return false in javascript, it cancels the click action of the
    > hyperlink, which means when normally it would follow the link ((this
    > page, top)), it will not do any hyperlink action ((link-following)), so
    > there's no scrolling. So for those users without javascript, it
    > doesn't have a chance to return false ((since none of the script will
    > run at all)), and will "fall through" and do the hyperlink action. In
    > a lot of cases, an empty href will do what you're looking for ((that
    > is, nothing, i think, when there is no javascript available)), or
    > javascript:void(0), or some similar gimmick.


    Setting javascript:void(0) in a non-JS environment doesn't "do nothing".
    It navigates. Test it.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Randy Webb, Sep 6, 2005
    #9
  10. Donius <> wrote in message news:...
    >So for those users without javascript, it
    > doesn't have a chance to return false ((since none of the script will
    > run at all)), and will "fall through" and do the hyperlink action.


    In compliant browsers, that situation can be alleviated by setting the href to the name of an anchor placed at the top
    of the body element, like:

    <BODY>
    <A name='screenTop' style="position:fixed;top:0;visibility:hidden">.</A>
    ....

    Then for relevant links: <A href='#screenTop' ...

    The position of the anchor will always be the current scrolled position, so if the href has to be followed, the page
    does not scroll.

    --
    S.C.
    Stephen Chalmers, Sep 7, 2005
    #10
  11. yawnmoth

    Randy Webb Guest

    Stephen Chalmers said the following on 9/7/2005 5:26 PM:
    > Donius <> wrote in message news:...
    >
    >>So for those users without javascript, it
    >>doesn't have a chance to return false ((since none of the script will
    >>run at all)), and will "fall through" and do the hyperlink action.

    >
    >
    > In compliant browsers, that situation can be alleviated by setting the href to the name of an anchor placed at the top
    > of the body element, like:
    >
    > <BODY>
    > <A name='screenTop' style="position:fixed;top:0;visibility:hidden">.</A>
    > ....
    >
    > Then for relevant links: <A href='#screenTop' ...
    >
    > The position of the anchor will always be the current scrolled position, so if the href has to be followed, the page
    > does not scroll.


    You can create the same effect, and have it work in IE, by adding an
    Anchor before/after each link.

    <a name="thisLink">
    <a href="#thisLink">.....</a>

    But better is to have JS create links/buttons that are JS dependent.
    Then, the non-JS people never know it doesn't work because they never
    see it.

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Randy Webb, Sep 8, 2005
    #11
  12. Randy Webb <> wrote in message news:...
    > Stephen Chalmers said the following on 9/7/2005 5:26 PM:
    > > Donius <> wrote in message news:...
    > >
    > >>So for those users without javascript, it
    > >>doesn't have a chance to return false ((since none of the script will
    > >>run at all)), and will "fall through" and do the hyperlink action.

    > >
    > >
    > > In compliant browsers, that situation can be alleviated by setting the href to the name of an anchor placed at the

    top
    > > of the body element, like:
    > >
    > > <BODY>
    > > <A name='screenTop' style="position:fixed;top:0;visibility:hidden">.</A>
    > > ....
    > >
    > > Then for relevant links: <A href='#screenTop' ...
    > >
    > > The position of the anchor will always be the current scrolled position, so if the href has to be followed, the page
    > > does not scroll.

    >
    > You can create the same effect, and have it work in IE, by adding an
    > Anchor before/after each link.
    >
    > <a name="thisLink">
    > <a href="#thisLink">.....</a>
    >


    It's not quite the same effect, as the page scrolls to position the target anchor at the top of the screen.

    You don't need a separate anchor, the link can refer to itself:

    <a name='thisLink' href="#thisLink">.....</a>

    --
    S.C.
    Stephen Chalmers, Sep 8, 2005
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Spondishy

    Nesting Literal Control in anchor tags

    Spondishy, Mar 21, 2005, in forum: ASP .Net
    Replies:
    5
    Views:
    4,415
    Matt Berther
    Mar 21, 2005
  2. TS
    Replies:
    5
    Views:
    4,832
  3. Replies:
    0
    Views:
    1,874
  4. Replies:
    15
    Views:
    14,281
    hharda9791
    Apr 17, 2013
  5. Test Test
    Replies:
    5
    Views:
    218
Loading...

Share This Page