SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Thread: links

  1. #1
    SitePoint Enthusiast Marty Chambers's Avatar
    Join Date
    Oct 2009
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    links

    I want to link to another part of a page... what does the markup look like for this? You can tell, I'm still a newbie

  2. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,401
    Mentioned
    147 Post(s)
    Tagged
    4 Thread(s)
    http://www.w3schools.com/HTML/html_links.asp

    Read the part about the 'name' attribute.

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <a href="#foo">Link</a>
    .
    .
    .
    <h3 id="foo">Foo</h3>
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Enthusiast Marty Chambers's Avatar
    Join Date
    Oct 2009
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YEEEEEEEEE HAAAAAAAAAAAhhhh! Thanks guys. I looked around w3schools and couldn't find what I was looking for. But now it all makes sense.

  5. #5
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Tommy, I'd love to use your method (and sometimes I still do) but how do you get around many browser's problems with moving the focus?? I can reliably get all browsers to move the visual focus correctly but for example in safari, the next Tab doesn't start from the new place (because the element with the id isn't focussable).

    I've tried using this:
    Code:
    <a href="#foo">Skip to foo</a>
    ...
    <h3><a id="foo" href="foo"></a>Foo</h3>
    So that the true focus also goes to the new chunk of page, and keyboarding further starts at the new place like it should...
    and being empty it shouldn't get accidentally clicked, and even if somehow it did get clicked, it doesn't go anywhere and doesn't bring the user back to the top of the page (like # would)
    but
    it looks goofy, might not be semantic really, AND
    Opera won't do it if the anchor is empty. All the other browsers seem to do the desired behaviour though including Lynx.

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    People who like/need keyboard navigation should use Opera. With Opera's spatial navigation this isn't an issue. If someone decides to use an inferior browser it's their problem.

    I suppose you could try setting tabindex for the target element, but that opens another can o' worms. If you really need to cater to inferior browsers, you'll need something like this,

    Code HTML4Strict:
    <h3><a name="foo">Foo</a></h3>
    Birnam wood is come to Dunsinane

  7. #7
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I used to do that (but without "name" 'cause I don't use it) but of course that means a lot of styling for the anchor text so it doesn't look like anchor text. Tabindex I won't touch : )

    If someone decides to use an inferior browser it's their problem.
    I wish, but actually, it's my problem. : )

  8. #8
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    If someone decides to use an inferior browser it's their problem.
    Can we apply this to IE users and just build sites for all the other browsers?

  9. #9
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BPartch View Post
    Can we apply this to IE users and just build sites for all the other browsers?
    Probably not. But as Patrick Lauke (redux) says, some of the onus of accessibility is on the user.
    Birnam wood is come to Dunsinane

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Ian Lloyd has this solution on http://reference.sitepoint.com/html/core-attributes/id:

    Code:
    <a href="#section3">Jump to section 3</a>
    ⋮
    <h2><a href="#section3" name="section3"
        id="section3"></a>Section 3</h2>
    Personally, though, I just use the id method now (post #3).

  11. #11
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Ralph, that's what I posted, except without name...

    and the only real problem was that Opera would not jump if the anchor was empty... is it that Opera will comply if there's a name attribute?? I assumed the reason it's not listed in the SP pages as an attribute either way was because XHTML was going to ditch it and use id for everyone. I forget what they were going to use name for instead.

    Ideally one would only ever need a single token for an anchor, but if two are necessary to make things work I guess I'd do it.

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Yes, I'm not really sure, to be honest. I found that using just the #id seemed to work pretty well generally, so I ditched the workarounds. Perhaps I didn't check extensively enough!

  13. #13
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Oh, #id works... visually.

    But open up Safari and tab to your skip link... hit enter... then try hitting tab again to get to the next anchor you see. Instead, you'll be brought back up to where you had initially found the skip link.
    This because while you were able to move the visual focus with #id, you didn't move the keyboard focus.

    FF and I think it was IE did this fine, so it's the only way I did it for a long time, then Safari-for-Windows came out, and bleh, didn't do what I thought it would.

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    I'd like to understand this better, but to be honest, I don't really have much of a grasp of tabbing. It never seems to work for me. Maybe it's a Mac thing. I keep meaning to read up on it. Nothing much ever happens when I tab through a 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
  •