IE Object doesn't support this property or method

Question

This is probably the beginning of many questions to come. I have finished building my site and I was using Firefox to view and test the site. I am now IE fixing and am stuck at the first JavaScript error which only IE seems to be throwing a hissy about. I run the IE 8 JavaScript debugger and get this:

Object doesn't support this property or method  app.js, line 1 character 1

Source of app.js (first 5 lines):

var menu = {};
menu.current = "";
menu.first = true;
menu.titleBase = "";
menu.init = function(){...

I have tested the site in a Webkit browser and it works fine in that. What can I do to fix this? The site is pretty jQuery intensive so i have given up any hope for getting it to work in IE6 but I would appreciate it working in all the others.

UPDATE: I have upload the latest version of my site to http://www.frankychanyau.com

Answer 1

In IE8, your code is causing jQuery to fail on this line

$("title").text(title);

in the menu.updateTitle() function. Doing a bit of research (ie searching with Google), it seems that you might have to use document.title with IE.

Answer 2

Your issue is (probably) here:

menu.updateTitle = function(hash){
  var title = menu.titleBase + ": " + $(hash).data("title");
  $("title").text(title);  // IE fails on setting title property
};

I can't be bothered to track down why jQuery's text() method fails here, but it does. In any case, it's much simpler to not use it. There is a title property of the document object that is the content of the document's title element. It isn't marked readonly, so to set its value you can simply assign a new one:

document.title = title;

and IE is happy with that.

It is a good idea to directly access DOM properties wherever possible and not use jQuery's equivalent methods. Property access is less troublesome and (very much) faster, usually with less code.

Answer 3

Well, your line 1 certainly looks straight forward enough. Assuming the error line and number is not erroneous, it makes me think there is a hidden character in the first spot of your js file that is throwing IE for a fit. Try opening the file in another text editor that may support display of normally hidden characters. Sometimes copying/pasting the source into a super-basic text-editor, like Notepad, can sometimes strip out non-displayable characters and then save it back into place directly from Notepad.