Forum Moderators: open

Message Too Old, No Replies

HTML Bookmarks - Old subject, new trick!

         

JAB Creations

11:50 pm on Oct 17, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Bookmarks in HTML let you link to another element on the page like a link would to another file. However you do not have to use a hyperlink to achieve it such as the following...

Old/bad/frontpage way...

<a href="badapples">clicky clicky!</a>
<a name="badapples">

name if I am correct is a depreciated attribute in newer versions of (x)html. So lets get rid of the name= part and replace it with ID, after all ids are intended to be unique!

My issue that led me to becoming aware of this issue was when I was trying to use my badaddples example on some heads (but I tried to put the hyperlink inside the header).

Remember, hyperlinks aren't the only elements you can assign ids to! You can give your headers unique ids as well!

Here is the working example...

<a href="goodapples">
<h2 id="goodapples">Good Apples</h2>

The only problem I see in modern browsers is Opera (8.5) overshoots by failing to display the header and some of the content just below it. I'll be filing a bug report with Opera shortly after posting this. I've not yet setup Linux to test Konquerer out though.

If anyone comes across any issues with using bookmarks and other elements besides headers please post to help others become aware of any issues.

ronin

2:35 am on Oct 18, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



<h2 id="goodapples">Good Apples</h2>

will suffice.

You don't need to precede the heading with an unclosed anchor.

john_k

3:09 am on Oct 18, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I think JAB meant to show both the link and the hash/target, but just left part of it out. JAB - If that is literal code from your Opera issue, then what ronin says might explain it.

Here is some code with an example. You will need to make your browser window small enough so that "Good Apples" doesn't show, or just add some more bad apples.


<html>
<head>
<title>test</title>
</head>
<body>

<a href="#goodapples">Jump To Good Apples</a><br/>
<h1 id="badapples">Bad Apples</h1>
<p>bad apple 1</p>
<p>bad apple 2</p>
<p>bad apple 3</p>
<p>bad apple 4</p>
<p>bad apple 5</p>
<p>bad apple 6</p>
<p>bad apple 7</p>
<p>bad apple 8</p>
<p>bad apple 9</p>

<h1 id="goodapples">Good Apples</h1>
<p>bad apple 1</p>
<p>bad apple 2</p>
<p>bad apple 3</p>

</body>
</html>

JAB Creations

6:31 am on Oct 18, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Actually I accidentally left the amperstamp out in just the example, go figure. Thanks for pointing that out for others though. ;)

Hester

8:18 am on Oct 18, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I have found no problem with Opera and anchors. The only issue is when the anchor is near the bottom of the page - clearly the browser cannot show it at the top of the screen, so it shows it half-way down instead. The solution is to add a large blank space at the bottom of the page to allow for this.

kaled

9:37 am on Oct 18, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



WOW, I had no idea you could use <tag id="target"> instead <a name="target">..... that's much tidier.

Are there any browsers out there that don't support this?

Kaled.

JAB Creations

5:23 pm on Oct 18, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Opera 4.02 and 6.06 support this, 7.54 supports it but I think I've found another bug that may/may not bne related. It seems to be a bug in only the 8.X series of Opera.

IE 5.01-6.0 seem to support this fine.