Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

"Named Anchor" Hack/Workaround for Safari??

D

DesignIt

macrumors member
Original poster
Aug 2, 2005
75
0
Does anybody know of a work around for "named anchors" in Safari? Safari is the only browser where this (named anchors) does not work.
 
As far as I know there is no problem...I just made a quick page with the following code and it worked perfectly.

Code: 
<html>
<head>
<title>
Test Page
</title>
</head>
<body>
<a href="#whatever">Test Link</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<a name="whatever">It worked!
</body>
</html>
 
OutThere said:
As far as I know there is no problem...I just made a quick page with the following code and it worked perfectly.

Code: 
<html>
<head>
<title>
Test Page
</title>
</head>
<body>
<a href="#whatever">Test Link</a>
<br><br><br><br>
<a name="whatever">It worked!
</body>
</html>
Click to expand...

That doesn't really show anything because the link isn't "moving" the page anywhere.
 
I'm sorry, you'll have to qualify your question better.

"Safari is the only browser where this (named anchors) does not work." This general assertation is not true.

I've just visited one of my own sites with named anchors (Dreamweaver coded) in Safari (OS 10.3.9) and it works perfectly.

If you have a problem with a specific version of Safari, or specific HTML code, please elaborate.
 
CanadaRAM said:
I'm sorry, you'll have to qualify your question better.

"Safari is the only browser where this (named anchors) does not work." This general assertation is not true.

I've just visited one of my own sites with named anchors (Dreamweaver coded) in Safari (OS 10.3.9) and it works perfectly.

If you have a problem with a specific version of Safari, or specific HTML code, please elaborate.
Click to expand...

Very true. Pretty vague question. Here is a link to the page that doesn't work:

link removed temporarily
 
DesignIt said:
THanks for your reply and effort, but with all due respect, nothing has been fixed. =)
Click to expand...

Well technically I fixed my example so that it demonstrated that named anchors do in fact work in Safari...now I did not fix your page, I'll admit that. Maybe it has something to do with the fact that it's linking to a different scrolling section? :confused:
 
I'm not sure if this is causing the issue, but you have multiple ID's with the same name. ID's have to be unique to a page (meaning only 1 instance of an ID on a page). You can anchor directly to any tag with an ID. Here is the best way to do it:

Code: 
<ul class="skiplist">
	<li><a href="#cont">Skip Navigation.</a></li>
	<li><a href="#side">Jump to Side Bar.</a></li>
</ul>
.
.
.
.
.
.
.
.
.
.
<div id="cont">
All your Main content is in here.
</div>
<div id="side">
All your sidebar elements here.
</div>

The links will jump to the ID's respectively. You are just using way too many unnecessary tags, classes, and IDs.
 
CanadaRAM said:
OK, sorry to have taken up your time with things you already tried :(
Click to expand...

I appreciate your help, I hope you didn't take that in the wrong way.
Thanks again! =)
 
radiantm3 said:
I'm not sure if this is causing the issue, but you have multiple ID's with the same name. ID's have to be unique to a page (meaning only 1 instance of an ID on a page). You can anchor directly to any tag with an ID. Here is the best way to do it:

Code: 
<ul class="skiplist">
	<li><a href="#cont">Skip Navigation.</a></li>
	<li><a href="#side">Jump to Side Bar.</a></li>
</ul>
.
.
.
.
.
.
.
.
.
.
<div id="cont">
All your Main content is in here.
</div>
<div id="side">
All your sidebar elements here.
</div>

The links will jump to the ID's respectively. You are just using way too many unnecessary tags, classes, and IDs.
Click to expand...

Thanks. I realize I am no expert with CSS and still learning. Although, as far as I know, I am not using any duplicate ID's. Where are you finding multiple ID's with the same name?
 
I just saw it once, at the top so I assumed there's a chance there might be more:

Code: 
<ul class="skiplist">
	<li class="skip"><a href="#cont" id="menu">Skip Navigation.</a></li>
	<li class="skip"><a href="#side" id="menu">Jump to Side Bar.</a></li>
</ul>

You are using the menu ID twice here. You could really optimize that block of code too. You would have the same amount of styling capability with something like this:

Code: 
<ul id="skiplist">
	<li><a href="#cont">Skip Navigation.</a></li>
	<li><a href="#side">Jump to Side Bar.</a></li>
</ul>

Since you only have 1 instance of your #skiplist on a page, make it an ID. Then you can style each element within skiplist like this:

#skiplist li{}
#skiplist li a{}

No need to add classes and IDs to the li and a tags.
 
radiantm3 said:
I just saw it once, at the top so I assumed there's a chance there might be more:

Code: 
<ul class="skiplist">
	<li class="skip"><a href="#cont" id="menu">Skip Navigation.</a></li>
	<li class="skip"><a href="#side" id="menu">Jump to Side Bar.</a></li>
</ul>

You are using the menu ID twice here. You could really optimize that block of code too. You would have the same amount of styling capability with something like this:

Code: 
<ul id="skiplist">
	<li><a href="#cont">Skip Navigation.</a></li>
	<li><a href="#side">Jump to Side Bar.</a></li>
</ul>

Since you only have 1 instance of your #skiplist on a page, make it an ID. Then you can style each element within skiplist like this:

#skiplist li{}
#skiplist li a{}


No need to add classes and IDs to the li and a tags.
Click to expand...


Oh...you are referring to the span class I have to change the color of the bullets. This is the first time I have used a li, in case it wasn't obvious.
:D I'm not too terribly concerned about those, as they aren't what's causing the "anchors" to not work.

Thanks for your tips!
 
DesignIt said:
Oh...you are referring to the span class I have to change the color of the bullets. This is the first time I have used a li, in case it wasn't obvious.
:D I'm not too terribly concerned about those, as they aren't what's causing the "anchors" to not work.

Thanks for your tips!
Click to expand...

Well you can never tell what is causing a bug until you can fix all the errors to eliminate the possibilities. I always start by making sure my pages validate:
http://validator.w3.org/check?uri=http://www.jimthatcher.com/skipnav.htm
 
I'm still having a little trouble. I want to link from page 1 to an anchor on page 2. But when I click on the link in safari it doesn't work, it only brings me to the page itself, not to the anchor, while it does work with IE (mac). Anybody any thoughts on this?

The anchor does work in safari when I place the link on the same page btw.

Thanks, Tim
 
rd10332 said:
I'm still having a little trouble. I want to link from page 1 to an anchor on page 2. But when I click on the link in safari it doesn't work, it only brings me to the page itself, not to the anchor, while it does work with IE (mac). Anybody any thoughts on this?

The anchor does work in safari when I place the link on the same page btw.

Thanks, Tim
Click to expand...

I think that this is an actual limitation on Safari's part. I don't think I've ever seen this work properly. :(
-Chase
 
rendezvouscp said:
I think that this is an actual limitation on Safari's part. I don't think I've ever seen this work properly. :(
-Chase
Click to expand...

It works fine for me on my website. Are you guys using the latest version of safari?
 
radiantm3 said:
Well you can never tell what is causing a bug until you can fix all the errors to eliminate the possibilities. I always start by making sure my pages validate:
http://validator.w3.org/check?uri=http://www.jimthatcher.com/skipnav.htm
Click to expand...

I did validate this page and the only thing that didn't pass was the fact that I have an image sitting inside of the, ul and li, coding. I'm not sure why this isn't allowed. If I don't put the image there, I don't like how it sits up really high away from the list.

Also, even with the image in the correct location (ie-page validated), the name anchor still doesn't work in Safari.
 
DesignIt said:
I did validate this page and the only thing that didn't pass was the fact that I have an image sitting inside of the, ul and li, coding. I'm not sure why this isn't allowed. If I don't put the image there, I don't like how it sits up really high away from the list.

Also, even with the image in the correct location (ie-page validated), the name anchor still doesn't work in Safari.
Click to expand...

If you are using the latest version of safari then you must still have a problem with your code because name anchoring works on all of my websites just fine in safari.

Also, I still get validation errors on that page on your site. You still have 2 of the same IDs which I mentioned towards the beginning of this thread. :eek:
 
radiantm3 said:
If you are using the latest version of safari then you must still have a problem with your code because name anchoring works on all of my websites just fine in safari.

Also, I still get validation errors on that page on your site. You still have 2 of the same IDs which I mentioned towards the beginning of this thread. :eek:
Click to expand...

I guess I am at a loss then because I am not aware of the 2 ID's you are referring to.

:confused:

edit: I am using this version of Safari: 1.3.1 (v312.3.3)
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back