14 February 2007

Fix anchors in Safari

So i was looking on the textpattern forums and there was a a post about anchor links in safari. I always assumed mine worked, but i was sadly mistaken…

It really doesn’t seem to follow any reasoning. It also seems to be a known issue that is on QuirksMode … but not really sure…

So on the forum there was a fix to put your css file at the document root… wtf … why?

So here is a link in my site … works in Firefox fine, but not in Safari … not really sure why… anyone anyone anyone…

nuff » named anchor

Now this may be a hack but you can use JavaScript to solve the problem.

.
//call when page loads
window.onload = jumptoanchor;
//
//jumps to anchor
function jumptoanchor()
{
  //test for anchor existence
  if(window.location && 
     window.location.href.match(/#(\w.+)/))
  {
    //jump to anchor
    window.location.hash=
    window.location.href.match(/#(\w.+)/)[1]; 
  }
}

file: fix_anchors_safari.js

Basically when the page loads, it checks the url for an anchor, if one exist, use JavaScript to go there. I am not using on my site because I consider this a broken behavior in Safari, but in the work world i just might.

bonus bookmarklet: when you have gone to page with an anchor and you have moved around ... converting the above code to a bookmarklet... makes it easy to find original anchor:

db: reposition
 

comment

what they saidwho said it

This fix works – but it has the annoying side-effect of making the window tab’s “loading…” icon keep spinning forever after everything has in fact loaded. I’ve seen this side-effect before, I think on a script that made smooth scrolling.

 2007-05-08
nev

Hmm … i have seen this before too, but can’t consistently reproduce. I figure it does no harm.

 2007-05-08
DannyB

It does no harm… But, most of the time I have multiple tabs open when using Safari, and it’s so distracting that I can’t use it! No matter that I know the page has loaded, the spinning cog icon makes me think something is waiting to loa, as it’s supposed to. I’d use this fix if I could get rid of that side-effect.

 2007-05-09
nev

You don’t need to call match again – you can just say this instead:

window.location.hash=RegExp.$1;

That’ll pull the (\w.+) group you just matched out of RegExp memory.

Matches are pretty expensive to run sometimes.

 2007-08-13
usernameguy

Cool … yeah that makes sense !

 2007-08-13
DannyB

hi
i have one problem , i have 1 anchor hyperlink on my form like top and first time load its working fine but after refreshing the page it appends #top#top along wid the url of location. How can i overcome this.
Pls help

 2008-03-06
shallu

Shallu I can’t contact you because you didn’t leave an email and I need more info. Basically I can’t reproduce the behavior that you are seeing.

 2008-03-10
DannyB


note: you can only submit after you hit preview


nuff-respec is a weblog written by daniel bulli a senior web programmer in boston, ma.
more >

contact | resume | profile | twitter

recently :::

diversions :::

45+ Amazing Insect Shots in Photography
Insects are one of the most fascinating creatures on earth. There are more than 800, 000 species of insects in the world.
Grayscale color | Stroep Blog
This is how I create a grayscale color in actionscript 3.
Google Flash API
This is great ... google has made this easy ... stay tuned to see what i am working on ...
25 Free Mac Apps That Will Boost Your Productivity
There are many applications that can help you work faster and efficiently. Though, not many applications come cheap.
you still want more »