Safari and links to elements in overflow:auto content

I’m working on a project right now that has some content in div tags with their overflow property set to auto. Then, on another part of the page, there are links that point to elements (using their IDs) inside the overflowed div tags (See example). This all works just fine in IE6 and Firefox/Mozilla, but Safari wasn’t behaving. You can click the links all day long, but Safari won’t scroll the selected anchor into view.

Well, after a few hours of tyring different ways to hack Safari into submission, I decided that the only way I could get it working was to use some Javascript, so I thought I should share the code since there were a few pages on Google also looking for solutions.

Here is what the Javascript looks like:

var targBox = "box";
function init() {
	if (document.getElementById) {
		var atags = document.getElementsByTagName("A");
		for (var i=0;i<atags.length;i++) {
			var ca = atags[i];
			if (ca.href.indexOf("#") > -1) {
				ca.onclick = function() {
					scrollDivToAnchor(this.href.split("#")[1]);
				}
			}
		}
	}
}
function scrollDivToAnchor(a) {
	var b = document.getElementById(targBox);
	b.scrollTop = document.getElementById(a).offsetTop - b.offsetTop;
}

Sample page with the working code:

View Example

About this page

blog.deconcept.com is a blog about nerdy internet stuff edited by Geoff Stearns since late 2004.

This entry was published on March 25th, 2005 and is tagged as css, javascript, safari, xhtml.
You can follow any responses to this entry through the RSS 2.0 feed.

Nathan 03/28/2005

I don’t know nuthin’ about that, but… Your indents are wildly out of control. They should be 4 spaces. Not more. Not tabs.

Also, I’d like to see you use a little more spacing in your for loop definition…

for (var i=0 ; i < atags.length ; i++) {

Remember, clean code is happy code.

Geoff 03/28/2005

My tabs are set to 4 spaces :(

Nathan 03/29/2005

Far out. Sorry to doubt you then. Thanks for fixing my bronkened comment too.

Alan 03/29/2005

Spiffy. I was just looking for a way to scroll a DIV to its top in Safari, and your refernce to element.scrollTop was just the ticket. Superthanks!

Katrina 04/01/2005

This is great! I was pulling my hair out with Safari.
Many Many thanks!

Zak 04/08/2005

Thanks for this great example – it doesn’t seem to work linking to a different page with ID/name tags on it. (expecting the user to click twice – once to get to the page and once to jump) Have you had to solve this problem before?

thanks,
Zak

Geoff 04/08/2005

You would need a bit of extra modification for that to work – it’s possible, though. You would need to check the url for an anchor, and if it exists call the function that scrolls the page when the page loads.

sridhar 04/29/2005

This is great! I was having hard time with Safari.
Many Many thanks!

kudu 05/09/2005

i think you may have just saved me days of scratching my head – cheers

helen wu 05/19/2005

anyone has experience with IFrame? i need to dynamically write a passage to iframe. it works for all browsers except safari. Help!

intherain 05/23/2005

Geoff, Ive been looking for a solution for a long time to get an iFrame to autoscroll when the iFrames height and width is 100%. I can get it to work fine in most browsers, except Safari.

The problem is the 100% which prevents the content displaying in Safari. However, I think your javascript may apply to my problem.

You mention some extra modification to your javascript to check a url for an anchor. I’m new to javascript so have no idea how to write this. Do you have an example of how this works??

Also, could this script be applied to an iFrame instead of a div?

Thanks in advance

eben 05/26/2005

This example doesn’t work in my version of safari (1.2.4 (v125.12)) has anyone else experienced this? I would really love to be able to get this going, but the javascript is stumbling at almost every step… I’ve got it as far as the init function, but if I do alert(atags.length) after the document.getElementsByTagName(“A”) I keep gettig 0…

Andrew 07/25/2005

Echo-ing Katrina’a comments from above – I have no-hair and had no sleep. This had been driving me crazy. It’s certainly a solution, not the solution. It’s just narrowed the ppl who won’t be able to use the anchor links to Mac IE & Safari users behind a hard-core corporat firewall with Javascript default disabled. Surely not that many? ;-P

THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Andrew 07/26/2005

is this meant to work on Mac IE? Does the DOCTYPE have to be xmls?

Matt 08/03/2005

This is a good fix however when I add a graphic rollover button to the page it breaks, any idea why?

Geoff 08/03/2005

I’m not sure… It could be a number of things. Does the page throw any javascript errors when it loads or when you hover the images?

Kurt Dommermuth 09/16/2005

Geoff, thank you very very much for this fix.

Keita 10/03/2005

Following up on the comments from Zak back in Apr, I’m trying to get this script work for my .shtml pages.

My anchors reside in a .ssi file which is included in shtml file.

When you mentioned “need to check the url for an anchor, and if it exists call the function that scrolls the page when the page loads,” exactly what kind of modifications are you referring to?

Thanks, Geoff.

Geoff 10/03/2005

Your links being inside an ssi shouldn’t make any difference. The server would assemble the page on the back end and you’ll get a ‘normal’ looking HTML document in the browser, so it should behave exactly the same as any other page.

Thank you for the reply, Geoff.
Please look at this page: http://www.jazzbythebay.ca/index.php
From the Left Nav, “Band Bios” have anchors set to jump to the shtml file.
When I look at the source output, it all seems ‘normal’…

Elyse 10/04/2005

I’m trying to do the same thing except that instead of having the links on the same page as the div, I need them on a different page.

Any ideas as to how to get this to work?

I tried putting the java on the page with the div, but it didn’t work, and since we’ve only JUST learned if/else statements in my java class at University, I couldn’t figure out how to mod the code myself :)

[by-the-by, spiffy problem-solving!]

Geoff 10/04/2005

It should still be possible, but you’ll have to modify the code to either call the function on the new page when it loads (you could read the location.has on page load) or if you are using it in an iframe, put half of the code in the iframe and half the code on the page with the links, and modify the links page to call the function in the iframe instead of on the same page.

tristen 10/05/2005

What if your html references and external style sheet and it is a div tag within a div tag. Not too sure how to reference that in the javascript file. Thanks for the work around

Chris 10/13/2005

Hey! this is great, been trying various versions of this for ages with no luck. Only thing is that it doesn’t work with mac ie 5.2.3. It moves the page down to where the hidden overflow is rather than scrolling the div. if this can be fixed i’m sorted! any ideas? Cheers!

Geoff 10/13/2005

This was built specifically for Safari, so it should only execute when viewed with Safari – what you are seeing might just be IE’s default behavior and might need a different fix.

Chris 10/15/2005

argh! it doesn’t seem to work if you use image maps… sorry i know this aint a support forum but have you any ideas? is the problem that maps are old and naff and i shouldn’t be using them? here’s an adapted version of the original html, js file is the same.
http://www.chrisslowe.uklinux.net/test/test.html
you’ll need to hover over the right hand side of the (none)image to access the image map links. all works in firefox, just not safari…. ta, chris

kaydie 11/04/2005

Nice solution!
I have added some extra code to the script so you can link to an element from another page and it does not give an error if the id does not exist in the page:
function init() { if (document.getElementById) { var atags = document.getElementsByTagName("A"); for (var i=0;i var ca = atags[i]; if (ca.href.indexOf("#") > -1) { ca.onclick = function() { scrollDivToAnchor(this.href.split("#")[1]); } } } if(this.location.href.split("#")[1]){ scrollDivToAnchor(this.location.href.split("#")[1]); } } }

function scrollDivToAnchor(a) { if(document.getElementById(a)){ var b = document.getElementById(targBox); b.scrollTop = document.getElementById(a).offsetTop - b.offsetTop; } }

At the moment 01/12/2006

Some interesting Javascript for Safari…
deconcept › Safari and links to elements in overflow:auto content – he probably has lots of other good tidbits too…

deconcept

Safari and links to elements in overflow:auto content

About this page

Comments are closed