SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    href best call method?

    is it better to use this:
    Code:
    <a href="javascript:playSong('The Tech Guy')">The Tech Guy - 3/20/2007</a>
    or this
    Code:
    <a href="#" onclick="playSong('The Tech Guy')">The Tech Guy - 3/20/2007</a>
    or something else?

  2. #2
    SitePoint Zealot
    Join Date
    Aug 2006
    Location
    Newcastle, England
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd say the first one because the second one is using a # in the href (which creates problems when the user uses the back button).

    But, you could use the second one if you were to create a javascript function that did nothing and replaced the '#' with this new function (in other words - the browser wouldn't try to link anywhere and the back button would not be broken).

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'd go with the second one. I really hate seeing javascript:.... in my status bar when hovering over a link. thejackel, you're wrong about the second one. Having "#" as the href doesn't mean the browser is going to go anywhere.

    Unobtrusive way:
    Code:
    window.onload = function() {
      document.getElementById('techguy').onclick = playSong('The Tech Guy');
    }
    HTML Code:
    <a href="#" id="techguy">The Tech Guy</a>

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2006
    Location
    Newcastle, England
    Posts
    142
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Raffles,

    I know the browser won't go anywhere - I'm merely stating that using the # character to keep your browser on the same page is bad usability (users would have to click back one more time than should be necessary to get to the previous page).

  5. #5
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just return false or use void() to avoid having the browser adding the # to the URL.

    Note that both of these examples are not so friendly for users that have JavaScript disabled. Nothing will happen. Is it really a link? Does it lead to another page? Or open a popup?

    If not, then you could easily use any other HTML element to act as a button.

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ah, sorry thejackel, I see what you mean.

    If you use something other than an anchor, you can't tab to it using the keyboard. I suppose the best thing is to create the anchor and add it with javascript. So people without JS just don't see it at all.

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like Raffles', but with a small edit as pointed out by Pepejeria...
    Code:
    window.onload = function() {
      document.getElementById('techguy').onclick = function() {
        playSong('The Tech Guy');
        return false; // cancel default action
      }
    };
    or...
    Code:
    window.onload = function() {
      document.getElementById('techguy').onclick = playerOnClick;
    };
    function playerOnClick() {
      playSong('The Tech Guy');
      return false; // cancel default action
    }
    But now you have to think about how to associate a specific song title with a specific <a> element. But first ask why use an <a> element at all? If Javascript is disabled will the link serve any purpose? Perhaps the link could open a small window with the player in it. If Javascript is enabled then the player could open in an absolute element on the page.

    This answers the question of how to associate a specific song title with a specific <a> element because the title will now be in the href.

    But what if we want more than one player link? We can have unique IDs for them all - or just give them all the same class name and use something like xGetElementsByClassName.
    Code:
    window.onload = function()
    {
      var i, btns = document.getElementsByClassName('playerBtn'); // this native method may be in FF3
      for (i = 0; i < btns.length; ++i) {
        btns[i].onclick = playerOnClick;
      }
    };
    function playerOnClick()
    {
      var title = this.href; // use a regexp or some other way of extracting the title
      playSong(title);
      return false; // cancel default action
    }
    HTML Code:
    <a href="player.php?t='The Tech Guy'" target='playerWindow' class="playerBtn">The Tech Guy</a>
    Now we have not only made our Javascript unobtrusive but we have also progessively enhanced the page


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •