I don't know why this won't work on firefox, but it works on chrome. Here's my code:
var a = document.getElementById("link");
a.style.color = "#0000FF";
//a.style.text-decoration = "none";
The commented line is the error happens in firefox. I suspect it may have to do something with "-" and firefox is treating it like a subtract operator, that is what I thought. Is there any way that I can avoid firefox from treating the dash as a math operator?
The syntax you're looking for is textDecoration :)
http://jsfiddle.net/8PEZX/
a.style.textDecoration = "none";
Most (if not all, I'm just not sure, so I'm saying most :D) hyphenated properties get changed to camelCase in JavaScript.
Also, I just tested it with text-decoration and it didn't work in Chrome, so not sure how yours worked.
Related
I'm trying to replace all occurrences of a certain character (quotes) from an element. My code works fine in Chrome and FF but fails in IE with the debugger saying - 'target.html()' is null or not an object
here is what my code looks like -
text = "some random text";
target = $('#target');
target.append(text);
target.html(target.html().replace(/"/g, " "));
What's causing that error in IE and how do i fix it?
'target' is used an attribute and IE does not like it if you use it as a variable name. In fact it even refuses to recognize event.target and insists on event.srcElement (tell me about it ..) .
Anyways, it should work if you rename the object to $target.
One of the main reasons I get such errors is because the HTML is not correctly formed(and it sure gave me hell before I found out). Other browsers allow a missing '>' or other syntactical errors, but IE is very strict.
So just see minutely that the markup in target.html() is correct.
I have this line of code (where 'e' is a click event):
var type = $(e.currentTarget.parentNode)[0].classList[0];
which is producing this error in IE7 (using Companion.JS to report errors):
'0.classList.0' is null or not an object
I tried the following variations on my code, but get the same result:
var type = $(e.currentTarget).parent()[0].classList[0];
var type = $(e.currentTarget).parent()['0'].classList['0'];
This code works in the latest Chrome and Firefox browsers. Any idea what's going on here?
First check the .length of $(e.currentTarget.parentNode), you might have to add a condition for IE because the currentTarget is inconsistent with other browsers.
Also, classList is not supported in IE.
Code with classList does not work in IE?
parse the .attr('class') or [0].className
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.
I would like to change a line of my javascript code based on whether the browser is IE7 or not. Here is the code for any other browser:
function showHint(myId)
{
document.getElementById(myId).style.display = "inline-block";
}
For IE7, I want display = "inline".
I've made an attempt at conditional compilation (this showed me how to detect the browser), but it didn't work:
function showHint(myId)
{
document.getElementById(myId).style.display = "inline-block";
/*#cc_on
#if(navigator.appVersion.indexOf(“MSIE 7.”)!=-1)
{
document.getElementById(myId).style.display = "inline";
}
#*/
}
Any help is greatly appreciated!
EDIT: I'm not using JQuery.
Set a global determined by the behavior of IE's conditional comment parsing:
<!--[if IE 7]><script> var isIE7 = true; </script><![endif]-->
You need to check navigator.userAgent.
If you use jQuery, you can simply write
if ($.browser.msie && $.browser.version === 7)
I think you can use regular expression to determine MSIE 7:
if(/MSIE 7/.test(navigator.appVersion)) { /* msie7 related code */ }
There is a Jquery Plugin detecting the Browser Version. I do not know the exact Link ...
Conditional compilation should work. It seems that your error is that you are using fancy quotes to delimit a string (“MSIE 7.”) or that you are attempting to assign display to something unknown to IE and it is having a fit over it and throwing an error. Here is a more concise version of the function that doesn't repeat itself and solves this issue:
function showHint(myId)
{
document.getElementById(myId).style.display = "inline" //#cc_on;
+ "-block";
}
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