I have this bit of javascript code I am trying to get to work in IE10. Been trying to use jquery to reference the styleSheet and the rule and initialize them. Hasn't helped. Here's the code:
function SetBold(Item, bold)
{
var aitemstyle = document.all.item(Item).style;
if (aitemstyle)
{
if (bold)
{
aitemstyle.fontWeight = "bold";
aitemstyle.color = "black";
aitemstyle.textDecoration = "none";
}
//this else block of code causes function-expected error IE10 windows 8, oRule var initialization
else
{
var oRule=document.styleSheets("panoramaCSS").rules("12pxHoverColorChange");
//IE10 expected function from previous line. So, for loop below for finding 12pxHovercolorChange rule
//inside panoramaCSS styleSheet
//TODO make the selections off Panel Performance go unbold. Not working yet.
}
}
}
I'm not sure why it might be working in other browsers, but accessing a style-sheet and a rule requires square brackets:
var oRule=document.styleSheets("panoramaCSS").rules("12pxHoverColorChange");
shoud be
var oRule=document.styleSheets["panoramaCSS"].rules["12pxHoverColorChange"];
The reason for the error is that IE is interpreting the parentheses as a call to a function that doesn't exist.
This quirksmode page should be useful.
Related
I'm maintaining a really old Web Forms application that is glued together with IE6 compatible javascript. This means that elements can be accessed in JS without needing to be initialised first.
What I mean is that using this is 'valid':
txtIngredient.value = 'potato';
In order to get this to work in newer browsers, like Chrome, Firefox, etc, this code becomes:
document.getElementById('txtIngredient').value = 'potato';
Obviously, Chrome, Firefox, etc, throw out an undefined error when encountering the former statement, and the JS stops executing due to the exception raised.
At the moment I'm running through the code and porting it over to make it look more like the latter, but I was wondering, could I write an error handler to handle undefined errors, which would catch when these situations occur, and then somehow return that element if it found it in the DOM and re-attempt the statement? If so this would save a lot of work.
EDIT: For example:
This code won't work:
function ShrinkDetails() {
document.Form1.btnExpand.value = "+ Dispense Details";
trDateDispensed.style.display = "none";
trDuration.style.display = "none";
trStartDate.style.display = "none";
trRepeats.style.display = "none";
trQuantity.style.display = "none";
}
Chrome etc throws an undefined error on document.Form1.
This code would work though:
function ShrinkDetails() {
document.getElementById('btnExpand').value = "+ Dispense Details";
document.getElementById('trDateDispensed').style.display = "none";
document.getElementById('trDuration').style.display = "none";
document.getElementById('trStartDate').style.display = "none";
document.getElementById('trRepeats').style.display = "none";
document.getElementById('trQuantity').style.display = "none";
}
Sounds like you need to do a try/catch for the reference error that you would get?
try {
var myVar = txtIngredient;
} catch (e) {
if (e instanceof ReferenceError) {
// code here
}
I am learning chrome extension programming from the tutorial here .
You can find the full code for the chrome extension here.
The code snippet where I tried to remove few links:
var clean_twitter = function(){
var ugly = [];
ugly.push('.Trends module trends');
ugly.push('.flex-module');
ugly.push('.MomentMakerHomeModule-header');
ugly.push('.Footer module roaming-module');
ugly.push('.flex-module-header');
$('.promoted-tweet').hide(); // oops! :P
for(var i=0;i<ugly.length;i++) {
var u = $(ugly[i]).find('a'); // also 'b'
u.text('');
}
}
The code tries to remove some buttons and div from the twitter website.
Now, when I put it on my pc nothing happens. I tried to remove the change link inside the trends box and it isn't removed.
Please help if I am doing something wrong here. Thanks.
At the beginning of the process_new_tweets function there's a comment explaining how the presence or absence of .mini-profile in the DOM is used as a flag.
In summary, the absence of the .mini-profile element in the DOM means that the function returns and won't proceed any further. Since the tutorial was written it would appear that Twitter no longer has a .mini-profile element anywhere in its DOM, so the function is always returning and script execution is not proceeding any further.
Remove the following lines from the beginning of the process_new_tweets function:
var mp = document.getElementsByClassName('mini-profile');
if(mp.length === 0) { return; }
And the elements that you've selected in your clean_twitter function will be removed from the DOM as expected.
Well I’m having a hard time figuring this out, the deal it’s that I’m using this code in some tabs that I have, it works perfect in all browser except for Internet Explorer 10, 9, the tabs are showing but when you click on them the information doesn’t change. So after looking what the error it’s I have found that in IE one if it’s not running, here’s the code:
<script type="text/javascript">
Varien.Tabs = Class.create();
Varien.Tabs.prototype = {
initialize: function(selector) {
var self = this;
$$(selector+' a').each(this.initTab.bind(this));
},
initTab: function(el) {
el.href = 'javascript:void(0)';
if ($(el.parentNode).hasClassName('active')) {
this.showContent(el);
}
el.observe('click', this.showContent.bind(this, el));
},
showContent: function(a) {
var li = $(a.parentNode), ul = $(li.parentNode);
ul.select('li', 'ol').each(function(el){
var contents = $(el.id+'_contents');
//the problem lies here, in IE the if doesn't run
if (el == li) {
el.addClassName('active');
contents.show();
} else {
el.removeClassName('active');
contents.hide();
}
});
}
}
new Varien.Tabs('.product-tabs');
</script>
So the deal it’s that the condition of the IF statement it’s not running and I have no clue of why.
I'm using IE 10 and 9 since IE 8 it's working fine, also I'm not getting any errors in the console of IE .
Open the F12 tools and use the debugger. Set a break point on the line. See what li and el are and see if they are actually equal. I would probably try to compare the id or some other value that is unique to the li you are trying to match. you have to remember you are comparing two instances of jQuery the way your are doing it right now. To actually compare the node (element) you would do it this way: li[0] === el[0];
Try the debugger and use the watch window to see what the values actually are and try to compare the actual node, not jQuery instances.
If Your code is working fine with IE8 then try following code:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">
This will make your code IE 8 compatible no matter which version of IE you are using.
The only thing you should take care is, your code should work fine in IE 8.
Well I have figured out what happen
ul.select('li', 'ol').each(function(el){
so in this line i had 'li' and 'ol', since the page didn't have any 'ol' the page in IE wasn0t working so since I remove
I'm trying to send data to a processing script. But for some reason the variable pjs below binds to the canvas "competence1" and enters the first if statement, but then the bindJavascript(this)-call returns error, but only in firefox. (works perfectly in chrome):
[pjs.bindJavascript is not a function]
var bound = false;
function initProcessing(){
var pjs = Processing.getInstanceById('competence1');
if (pjs != null) {
// Calling the processing code method
pjs.bindJavascript(this);
bound = true;
//Do some work
}
if(!bound) setTimeout(initProcessing, 250);
}
Environment: Mac OS X - Lion;
OBS! The bindJavascript(this)- method exists in the pde script loaded in the canvas-tag
By wrapping up all my script in a varable-map and by using the second way for setTimeout to be called i can follow each state and control the result.
So wrap it up-->
var ex = {
init : function(canId){
var canId = canId;
// check the if bound
// bind in this closure
// set new timer
}
}
setTimeout-->
setTimeout('ex.init("'+canId+'")', 2000);
and ofcourse add the parameter in so it can hold that value during it's own execution. So processing works just fine and i should use closure more often, that's the solution.
I had the same problem. I was using almost identical JS to you (which I got from the Pomax tutorial), and it was working fine. However, when I added the following preload directive (to load a backdrop), then suddenly my initProcessing function stopped working.
/* #pjs preload="metal_background.jpg"; */
The error message was the same: pjs.bindJavascript is not a function
On debugging, I could see that the pjs object did indeed not have a bindJavaScript function exposed, even though there is one declared in my PDE file.
It turns out this was purely down to timing... the preload had slowed down the initialisation of the processing object, so the second time round the 250ms loop, the pjs object existed, but didn't yet have its bindJavaScript function.
I am not 100% sure how Processing.js does this object construction, but in this case, a simple solution was just to check whether bindJavaScript actually was defined! I changed my code to the following:
var bound = false;
function initProcessing() {
var pjs = Processing.getInstanceById('mySketchId');
if(pjs != null) {
if(typeof(pjs.bindJavaScript) == "function") {
pjs.bindJavaScript(this);
bound = true;
}
}
if(!bound) setTimeout(initProcessing, 250);
}
After this it worked fine!
I'm upgrading a script to make it crosss browser. The current code I have is as follows.
function testFocus(){
var testSelection = document.getElementById('chattext').contentWindow.
window.document.selection.createRange().parentElement();
while (testSelection)
{
if (testSelection.id == "chatContent") {
return true;
}
testSelection = testSelection.parentElement;
}
return false;
}
However the following code no longer works in modern browsers. Presently the code above has to have text selected. Where it just needs to check that the textbox has focus. The function is used as a check before text is added by a button / javascript.
Strikes me that you could use an event listener to set a variable. The only problem being that IE uses attachEvent(event, callback) instead of addEventListner so you've actually got to add the code
<script type="text/javascript">
var ChatHasFocus = false;
var ts = document.getElementById('chattext');
function setFocus() {ChatHasFocus = true;}
function setNoFocus(){ChatHasFocus = false;}
if (ts.addEventListener != undefined) {
ts.addEventListener('focus', setFocus, false);
ts.addEventListener('blur', setNoFocus, false);
} else if (ts.attachEvent != undefined) {
ts.attachEvent('onfocus', setFocus);
ts.attachEvent('onblur', setNoFocus);
} else {
ts.onmouseover = setFocus;
ts.onmouseout = setNoFocus;
}
</script>
edit - I've added script tags to show you how it adds to your document. I've tested in firefox and chrome and it seems to work, but getting an IE sandbox together might be a little more difficult for me. I'm sure there's something little that I'm missing there - i'll take a look.
edit2 i made a mistake with the IE code. tuns out you don't put quotes around 'undefined' I've fixed the code above to reflect an answer that is tested and wotkign in firefox, chrome and IE6. I don't have any other IEs to test in.