SitePoint Sponsor |
|
User Tag List
Results 1 to 14 of 14
Thread: links
-
Oct 27, 2009, 07:29 #1
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
-
Oct 27, 2009, 07:34 #2
http://www.w3schools.com/HTML/html_links.asp
Read the part about the 'name' attribute.Guido - Community Team Leader
The Votes Are In: The Winners of the 2013 Community Awards are...
Blog - Free Flash Slideshow Widget
-
Oct 27, 2009, 08:07 #3
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- 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
-
Oct 27, 2009, 11:54 #4
YEEEEEEEEE HAAAAAAAAAAAhhhh! Thanks guys. I looked around w3schools and couldn't find what I was looking for. But now it all makes sense.
-
Oct 28, 2009, 06:18 #5
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 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>
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.
-
Oct 28, 2009, 06:35 #6
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- 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
-
Oct 28, 2009, 06:56 #7
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 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.
-
Oct 28, 2009, 11:51 #8
-
Oct 28, 2009, 14:03 #9
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Oct 28, 2009, 19:55 #10
- Join Date
- Mar 2009
- Location
- Melbourne, AU
- Posts
- 24,338
- Mentioned
- 465 Post(s)
- Tagged
- 8 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>
-
Oct 29, 2009, 02:58 #11
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 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.
-
Oct 29, 2009, 14:57 #12
- Join Date
- Mar 2009
- Location
- Melbourne, AU
- Posts
- 24,338
- Mentioned
- 465 Post(s)
- Tagged
- 8 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!
-
Oct 30, 2009, 03:22 #13
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 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.
-
Oct 30, 2009, 06:04 #14
- Join Date
- Mar 2009
- Location
- Melbourne, AU
- Posts
- 24,338
- Mentioned
- 465 Post(s)
- Tagged
- 8 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