I wrote some code that modifies the images on a webpage. Works with firefox and safari. But tryingto get it to work with Internet explorer has got me stumped. What is the equivalent of "parentNode" in explorer? Or how does one trick it into working?
images = document.getElementsByTagName('img')
parms = {};
for (a=0;a < images.length;a++){
parent = images[a].parentNode; // <-- What to substitute for explorer?
parms[a] = {};
parms[a].bigsrc=parent.getAttribute("href");
parms[a].w_o = images[a].width;
parms[a].h_o = images[a].height;
parms[a].IsBig = false;
parms[a].loaded = false;
images[a].border=0;
parent.setAttribute("href","javascript:MakeBig('"+a+"')");
}
The problem is with the assignment of the parentNode to a var called "parent." This seems to be a reserved word in IE that breaks the code. Change the var name and it should work.
parentNode works fine in IE (except in certain cases, very likely irrelevant here). The error is almost certainly elsewhere in your code.
Are you expecting the parentNode to be an anchor? It looks like you're trying to just wrap the image in a link. If that's correct, what might work as an alternative is adding an onclick to the image itself, and setting a hand cursor. That could create the appearance of the image being a link without you having to care what the parentNode is.
Related
Why does this not work in IE8?
var accordion = $(this),
header = accordion.find(':header')[0],
titleHTML = header.outerHTML,
innerHTML = accordion.html().replace(titleHTML, '');
The header variable is populated, but .replace() does not find the string of HTML. It works in Chrome, FF etc but IE8 does not want to play.
I tried removing the element before building the innerHTML variable but that introduced more problems further down the execution path.
Can anyone shed any light on this?
EDIT
The rewrite worked with a bit of massage.
var accordion = $(this),
header = accordion.find(':header').first(),
titleHTML = header.prop('tagName'),
titleLabel = header.text();
header.remove();
var innerHTML = accordion.html();
Essentially the two main changes were to getting the first element with [0] was a bit flaky and indeed removing the element first was the way to go.
Try this
$(this).find(':header').first().remove();
It seems that's basically what you're doing, find any header elements, get the native DOM node of the first one, then getting the outerHTML, and replacing it in this, trying to remove it, and it seems like a strange way to do it.
For some reason, I am getting the following Javascript error in Internet Explorer 8 on line 3156 of jquery.js (version 1.4.3, non-compressed version): Object doesn't support this property or method. No error occurs in Firefox and Google Chrome.
This is the line the error occurs on:
if ( (match = Expr.leftMatch[ type ].exec( expr )) != null && match[2] ) {
Investigation (console.log(Expr.leftMatch[type])) produces the following interesting result: In Google Chrome, it outputs
/(^(?:.|\r|\n)*?):((?:[\w\u00c0-\uFFFF\-]|\\.)+)(?:\((['"]?)((?:\([^\)]+\)|[^\(\)]*)+)\3\))?(?![^\[]*\])(?![^\(]*\))/
However in Internet Explorer this is the output:
function() {
var p = this;
do p = p.previousSibling;
while (p && p.nodeType != 1);
return p;
}
On which exec cannot be called (it is undefined). The quoted function is not present within jquery.js. Does anyone have any clue why this happens, or what I can do to solve it?
I have, unfortunately, not yet been able to create a simple script to reproduce the problem, although I did find this post of someone having the same problem, but it does not offer a solution (the last post suggests the page should be run in Standards Mode, but mine already is).
As it turns out, I managed to figure it out by myself after several painful hours. It appears the Sizzle selector engine breaks in this unexpected way (and only in Internet Explorer), if you have defined Object.prototype.previousObject elsewhere.
Removing that declaration, or renaming previousObject to something else fixes the problem.
The funny thing is, I even put that code there myself (the Object.prototype.previousObject = [the function in my question]), but I did not recognize the code.
Well, that's another day full of development potential wasted.
I have discovered the same behaviour occurs if you attempt to add a method called "inherited" to the Object.prototype, ie Object.prototype.inherited = <some func>
It affects IE6, 7 & 8 but seems to be fixed in IE9 (beta)
May be to late to respond but I had the same problem and solved with selecting elements with plain java script rather then jquery!
var div = document.getElementById("myDiv");
var rect = div.getBoundingClientRect();
This works some how!
HI,
I am trying to dynamically add a form to a tab in Ext-js. (the tab has already been rendered). fyi, i am using I am using Ext 2.2.
the error occurs when during the tab.add function:
ie:
function tabactivate(tab) {
var newItem= new Ext.FormPanel(.....);
**tab.add(newItem)**; //ERRORS HERE
tab.doLayout();
}
I get this error on line 247 of ext-all-debug.js
which is
range = el.ownerDocument.createRange();
the error is (Object doesn't support this property or method.)
This works fine in Firefox but breaks in IE8.
Does anyone know a workaround for this ?
Thanks
This sounds very similar to an issue I had with ExtJS 2.2 and IE.
It seems like a lot of places in the Ext code that you see code like this:
var td = document.createElement("td");
this.tr.insertBefore(td, this.tr.childNodes[index]);
When in fact that doesn't work on IE because "this.tr.childNodes([0])" does not yet exist.
My workaround was to override the prototype (in my case insertButton() in Ext.Toolbar) to check for the existence of this.tr.childNodes([0]), using a different function or creating it if it didn't exist.
I hope that I'm correct that this is the problem you are running into.
So i found an old string that had the solution for me.
http://www.extjs.com/forum/showthread.php?t=7912&highlight=createRange
Essentially, when i was instantiating empty tabs, i had my html property set to this:
html: ' ',
once i either took the property out completely or i changed to
html: '<span></span>'
it stopped breaking.
Thanks
IE (even 8) doesn't support the document.createRange() method.
You can try var supportsDOMRanges = document.implementation.hasFeature("Range", "2.0"); to see whether a browser supports DOM ranges per the standard.
I have a gridview in its 3rd cell, there is textbox control, I am calling javascript function on onchange.
Can some body tell me why this is not working in Firefox and Chrome but working in IE
grd.rows[rowindex].cells[3].childNodes[0].value
It return correct value in IE but not in Chrome and firefox (In FF and Chrome it return undefined)?
Please also suggest me solution to handle this problem.
Edit
alert(grd.rows[ri].cells[3].childNodes[0].value);//IE value=correct value, FF and chrome value=undfined
alert(grd.rows[ri].cells[3].childNodes[1].value);//IE value=undfined, FF and Chrome value= correct value
Thanks
I believe that this is because IE ignores text nodes that only contain newlines and tabs. Personally I prefer they be ignored but I would rather have consistency across the browsers.
<p><!-- This comment represents a text node.
--><em>text</em>
</p>
Try out this. I have same problem and this problem is resolved by just replace "childNodes" with "children"
alert(grd.rows[ri].cells[3].children[0].value);
try
grd.rows[rowindex].cells[3].childNodes[1].value
or the best, look at table in integrated Developer tool
#ChaosPandion:
Hey friend don't use this type of check for childNodes.
The counting of childNodes varies. Some browsers include empty textNodes, some do not. In this sort of operation as I believe you are describing, it is better to use the parent's getElementsByTagName() method. That way the number of chidren and index of each child you are looking for will be consistent.
OR
just check your browser's name.
if it is IE then as it neglects empty textnode, the childNode in it is less by one number than other browsers.
for eg.
var isIE = navigator.appName;
if (isIE == "Microsoft Internet Explorer") {
var removeProductID = document.getElementById(obj.childNodes[0].id).getAttribute("abc");
}
else {
var removeProductID = document.getElementById(obj.childNodes[1].id).getAttribute("abc");
}
Hope this helps. Enjoy coding.
If you are looking for the text, use grd.rows[rowindex].cells[3].childNodes[0].data for non-IE browsers.
Getting text value of an Element Node
var oCell = grd.rows[rowindex].cells[3];
alert(oCell.textContent || oCell.innerText)
Getting text value of a Text Node (less safe compared to previous)
var oText = grd.rows[rowindex].cells[3].childNodes[0];
alert(oCell.data || oCell.value)
As ChaosPandion says, IE ignores white-space text-nodes. The following should work cross-browser:
var cell = grd.rows[rowindex].cells[3];
for (var textbox=cell.firstChild; textbox.nodeType!==1; textbox=textbox.nextSibling);
alert(textbox.value);
However, you say you are calling the function on onchange.
Presumably that means the onchange event for the textbox in question.
In that case the event argument in your event handler should have a pointer to the textbox.
Look at the target or srcElement property. e.g.
function onChange(e) {
e = e || window.event;
var textbox = e.target || e.srcElement;
alert(textbox.value);
}
try getElementsByTagName() instead of ChildNodes. it will be working for FF , chrome and for IE as well.
Usually, if you need to set a style attribute in JavaScript, you say something like:
element.style.attribute = "value";
There are slight variations but usually the attribute name is a similar, albeit camelcased, version of the HTML attribute name.
The problem for me is that the float attribute doesn't work. Float is a keyword in JavaScript and so style.float makes all the JavaScript for the page break. I looked in MSDN, and it said to use styleFloat like so:
element.style.styleFloat = "value";
That only works in IE. Firefox, Safari, Chrome, Opera - none of them seem to have an answer. Where am I going wrong? There has to be a simple answer to this.
Use cssFloat as in...
element.style.cssFloat = "value";
That works in everything except IE 8 and older, but you can always detect the browser and switch, or just set them both. Unfortuantely, there is no way to set just one style value to work in all browsers.
So to summarize, everyone you need to set the float, just say:
element.style.styleFloat = "value";
element.style.cssFloat = "value";
That should work everywhere.
better:
element.style.styleFloat = element.style.cssFloat = "value";
This is a function sniff approach:
if (typeof elmt.style.cssFloat != "undefined")
elmt.style.cssFloat = "none";
else
elmt.style.styleFloat = "none";
But usually we don't need to bother with this detection. I have tested user2719099's approach with Chrome as below:
elmt.style.cssFloat = elmt.style.styleFloat = "none";
console.log(elmt.style.cssFloat, elmt.style.styleFloat);
And the result is quite good in the console:
none none