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
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 (i.e. searching with Google), it seems that you might have to use document.title with IE.
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.
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.
Related
I have just noticed an issue that appears to be affecting all versions of IE (tested 7-10) but not Chrome or FF (Windows 7). The issue occurs when I cache a jquery object and then remove its original target.
The code below is essentially rearranging some images in divs in such a way that the selected image comes first, but I am not using a holder div so it is all being done in situ. I would rather not complicate matters by resorting to converting the html to a string, I suspect this may be a well known issue that I just don't know the search terms for so if that is the case please enlighten me!
$lightbox_gallery = $('.gallery-lightbox .lightbox-gallery');
$image = $lightbox_gallery.find('img[data-id=' + image.id + ']').parent();
$image_after = $image.nextAll();
$image_before = $lightbox_gallery.find('> div:first').nextUntil($image);
console.log($image.html()); //returns a string
$lightbox_gallery.html('');
console.log($image.html()); //returns ''
// this works fine in almost anything but IE. Maybe also safari on mac?
$lightbox_gallery.append($image).append($image_after).append($image_before);
Edit: Solved it using the clone function http://jsfiddle.net/27DKZ/4/
What does your HTML look like? I've never seen a problem like this.. Keep in mind that IE cannot handle the console.log() function..
I'm trying to use the jQuery SVG plugin to animate some stuff — scaling and whatnot. I'm totally new to SVG.
var params = {};
params['svgTransform'] = ['scale(1)', 'scale(1.5)'];
$('#TX', svg.root()).animate(params);
This is copied almost verbatim from the developer of the plugin.
Yet when it runs, I'm getting this:
4TypeError: 'undefined' is not a function (evaluating 'f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration)')
Any ideas?
I think you should check for existence of an element with ID="TX" in your SVG document.
Anyway, I must say that sometimes I found very difficult to remember where to code specific behaviour: there are so many choices, among XML (plain SVG), plain JavaScript+DOM (but what DOM?), jQuery specific, jQuery+SVG.... And all of these with their details... It's daunting! I hope it will be rewarding in the end.
BTW I found that Chrome give a good IDE to workout problems (I'm on Linux now...). Hit Ctrl+Shift+I to enter the debugger and see whatever error...
maybe it doesn't support array inside animate arg object. can you try :
var params = {};
params['svgTransform'] = 'scale(1.5)';
$('#TX', svg.root()).animate(params);
I have the following code:
$('#smallcart .plusone').live('click',function(){
var id = $(this).attr('id');
articlenr = id.split('_')[1];
});
this works fine in FF, safari, Chrome, however in IE (7 and 8) it throws an error on the split-function (this property or method is not supported by this object).
if I alert the 'id'-variable I get something like plus_5751. (so I want to get the '5751' part)
if I do alert(typeof(id)) I get String as an answer...
Maybe somebody can point me to the right answer?
Thx
The split works pretty well in IE. The problem is the part left of the equal-sign. It's an object with all input-fields having the name articlenr and therefor IE quits with 'this property or method is not supported by this object' when you're trying to assign a string to it.
Your code works just fine for me in Internet Explorer - as it should be expected to. The problem must lie elsewhere, perhaps something is overriding String.prototype.split?. You can see a working example of your code at http://jsfiddle.net/AndyE/6K77Y/. The first thing to check for is any Internet Explorer specific code in your scripts.
I would make one small improvement for efficiency. $(this).attr('id'); is pretty much the long winded way of writing this.id. It's slower, because a new jQuery object has to be created and then the attr function has to run. Without it, your code can be compressed more, whilst still remaining very readable, if you like:
$('#smallcart .plusone').live('click',function(){
articlenr = this.id.split('_')[1];
});
Try renaming your variable 'id' to something else. IE doesn't like it when you name things in your scripts the same as items in the DOM.
Never mind, that seems to have not been the issue in this case. I have, however, had issues in the past with IE specific bugs caused by variable names.
I have a project using Javascript parse json string and put data into div content.
In this case, all of itemname variables is the same div's id.
If variable i about 900, I run this code in Firefox 3 for <10ms, but it run on IE 7 for >9s, IE process this code slower 100 times than Firefox
I don't know what happen with IE ?
If I remove the line document.getElementById(itemname), speed of them seems the same.
The main problem arcording to me is document.getElementById() function?
Could you show me how to solve this prolem to increase this code on IE ?
Thank in advance.
var i = obj.items.length-2;
hnxmessageid = obj.items[i+1].v;
do{
itemname = obj.items[i].n;
itemvalue = obj.items[i].v;
document.getElementByid(itemname);
i--;
}while(i>=0);
Are you really noticing any latency?
gEBI is natively very very fast, I don't think you can avoid it anyway for what you're doing. Could you provide a low-down of what you're doing precisely? It looks like you're using a loop, but can you post exactly what you're doing inside of the loop, what your common goal of the script is?
document.getElementByid(itemname) is the fastest way to get a single element from the DOM in any real application you will sould not see any problems with using it, if you do see a problem you need to rethink you code a little it possible to acomplish any task with just a handfull of calls for this method. You can present you full problem if you like so I could show you an example
At least cache the reference to document:
var doc = document;
for(;;) {
doc.getElementById(..);
}
I have just received and bypassed a problem with LightWindow and IE7 where, on page load, it throws a JavaScript error on line 444 of lightwindow.js, claiming that the object does not support this property or method. Despite finding various postings on various forums, no Google result I could find had a solution, so I am posting this here in the hopes that it will help someone / myself later.
Many suggested a specific order of the script files but I was already using this order (prototype, scriptaculous, lightwindow).
These are the steps I took that seemed to finally work, I write them here only as a record as I do not know nor have time to test which ones specifically "fixed" the issue:
Moved the call to lightwindow.js to the bottom of the page.
Changed line 444 to: if (this._getGalleryInfo(link.rel)) {
Changed line 1157 to: if (this._getGalleryInfo(this.element.rel)) {
Finally, I enclosed (and this is dirty, my apologies) lines 1417 to 1474 with a try/catch block, swallowing the exception.
EDIT:
I realised that this broke Firefox. Adding the following as line 445 now makes it work - try { gallery = this._getGalleryInfo(link.rel); } catch (e) { }
It's not a very nice fix, but my page (which contains a lightwindow link with no "rel" tag, several lightwindow links which do have "rel" tags, and one "inline" link) works just fine in IE7 now. Please comment if you have anything to add about this issue or problems with / improvements to my given solution.
Instead of the try..catch maybe you could try using
if( this && this._getGalleryInfo )
{
//use the function
}
you could also check in the same way this.element.rel ( if(this && this.element && this.element.rel) ... ) before using it.
It looks like there's a case that the _getGalleryInfo or this.element.rel has not yet been initialized so it wouldn't exist yet. Check if it exists then if I does use it.
of course i could be completely wrong, the only way to know is by testing it out.
I fixed this by changing line 444 to:
var gallery = this._getGalleryInfo(link.rel)
Then changing the subsequent comparison statement to:
if(gallery.length > 0)
{
// Rest of code here...
...which seems to have sorted it in IE6+ and kept it working in Firefox etc.
I didn't change line 1157 at all, but I haven't read the code to see what I actually does so I can't comment on its relevance?
I suspect the ? used in the example rel attribute (Evoution?[man]) may be causing the problem with IE but without spending some time testing a few things, I can't be sure?
HTH.
I had the same problem with Lightwindow 2.0, IE6, IE7, IE8 (beta); I resolved in the following way for IE6, IE7, IE8 (beta).
Instead of:
if(gallery = this._getGalleryInfo(link.rel))
I put on lines 443 and 1157:
gallery = this._getGalleryInfo(link.rel)
if(gallery)
Hope this will help!