Category Archives: safari

Safari’s hidden debug menu

Posted on by

Trouble debugging your Javascript in Safari? Me too! That’s why I found this little tip useful (notice I say ‘useful’ and not ‘very useful’).

Safari is usually a very large pain when building Javascript apps. There are many small issues that seem to pop up all the time. But now with the release of Safari 2.0, you have a bit of help. Safari now has a Javascript console! It’s nothing fancy, and the errors it shows are sometimes less than optimal, but it’s far better than just guessing randomly at the problem.

To enable the Javascript console, first you must enable Safari’s debug menu. Do this by opening your Terminal and inputting this line:

defaults write com.apple.Safari IncludeDebugMenu 1

Now the next time you start Safari, you’ll have an extra menu up top called “Debug” and inside are all kinds of goodies. Here’s what the menu looks like:

Safari debug menu

Back to the original point of this post, one of the items is “Show JavaScript Console” and selecting that item opens up this little window:

Safari Javascript Console

It’s not nearly as sleek and useful as the Firefox/Mozilla Javascript console, but it’s a step in the right direction, and definitely better than nothing.

Safari and links to elements in overflow:auto content

Posted on by

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