setInterval Breaks Page To Be Shown - javascript

I have that line of code:
var checkExist5 = setInterval(function() {
if (lock == 5 && $("#id1").length && $("#id2").length) {
console.log("debug");
clearInterval(checkExist5);
lock = -1;
}
}, 100);
it works at Firefox but it breaks the page at Internet Explorer. It does not give any error at console but the page is not shown (ie 9). What may be the reason?

I found the reason. It was because of
console.log("debug");
It was not working at Internet Explorer 9. There is an explanation here: Does IE9 support console.log, and is it a real function?

Related

JS Bookmarklets: Increase/decrease site's font size

I was using the code from here to enlargen sites:
var p=document.getElementsByTagName('*');
for(i=0;i<p.length;i++) {
if(p[i].style.fontSize){
var s=parseInt(p[i].style.fontSize.replace("px",""));
}
else {
var s=12;
}
s+=2;
p[i].style.fontSize=s+"px"
But this has recently stopped working on my Chrome (Version 81.0.4044.138 (Official Build) (64-bit)). I am curious as to why, and any working alternatives.
ٍٍExplaining "stopped working": After using it, the page goes blank, and sometimes shows "14px":
This article from 2ality says
Finish with undefined: If you don’t return (or finish with!) undefined, the result replaces the current web page. [Note: Webkit browsers such as Chrome and Safari never replace a page, only non-Webkit browsers such as Firefox do.]
but Chrome has changed this behavior.
Chrome now runs a code like
if (typeof bookmark_reslt === "string") {
document.body.innerHTML = bookmark_reslt
}
A minimal reproducible example of the bookmarklet is javascript: "14px"
The easiest solution is to add undefined in the end of the script.
Firefox executes a code like document.body.innerHTML = String(bookmark_reslt)
// examples to see how `toString` affects Bookmarklets in Firefox
javascript: a = {}; a; // <body>[object Object]</body>
javascript: a = {}; a.toString = ()=> 2; a; // <body>2</body>

Safari never jumps into this if condition, Chrome no problem. No Errors logged in both

The following code is a part of a larger code. In chrome it does all work well. In Safari however it never jumps into the if conditions shown below. Neither console.log(test1) nor console.log(test2) does show up in Safari.
The Safari Version is 11 and js is of course enabled.
The version should support classList.contains and innerText ?!!
What is it that Im missing ?
Thanks for your help.
for(var m =0; m<divs.length;m++){
if( divs[m].classList.contains("activexyz") && (bereich.contains(divs[m].innerText))){
divs[m].classList.remove("activexyz");
console.log("test1");
}
else if((!divs[m].classList.contains("activexyz")) && (bereich.contains(divs[m].innerText)) ){
divs[m].classList.add("activexyz");
console.log("test2");
}
}

Javascript countdown does not show in Opera mini

So i have this countdown script, which is works just fine almost every browser but not in opera mini. It shows a blank space.
Here is my code:
timer={
times:[],
init:false,
callback:function() { window.location.reload(); },
new:function(time)
{
timer.times[timer.times.length]=time;
document.write("<span id='timer_"+(timer.times.length-1)+"'>"+timer.format(time)+"</span>");
timer.start();
},
format:function(time)
{
days=Math.floor(time/(60*60*24));
hours=Math.floor(time%(60*60*24)/(60*60));
mins=Math.floor(time%(60*60)/60);
secs=Math.floor(time%60);
return (mins<10?"0":"")+mins+":"+(secs<10?"0":"")+secs+"";
},
ticker:function()
{
for(var i=0; i<timer.times.length; i++)
{
if(timer.times[i] == 0) { timer.callback(); break; }
document.getElementById("timer_"+i).innerHTML=timer.format(timer.times[i]);
timer.times[i]--;
}
},
start:function()
{
if(!timer.init)
{
timer.init=true;
setInterval(timer.ticker, 1000);
}
}
}
Is there a problem with the code?
Thank you for your help.
Just check your code for errors in opera mini console. Open your page in opera mini and write in address bar this:
server:console?post=http://path_to_your_page
Also, Opera Mini has javascript timers limits - it stops any timers after 2-5 seconds (depend from Opera Mini version). On my Android timer stops after 5 seconds(fiddle).
Timers work differently in operamini, Read https://dev.opera.com/articles/opera-mini-content-authoring-guidelines/
Copied from the above link,
Code registered with setTimeout() and setInterval() may be run before the page is sent, but it is unlikely that it will be called more than once because of script pausing

Opera and IE7 don't seem to be assigning value to variable

Yesterday I asked a question about running a script once a YouTube video is playing and after a lot of wrestling I figured this out.
Now the solution works in Firefox, Chrome, Safari, IE9 and IE8 but for some reason it's not working in Opera and IE7. I have very little Javascript experience so any help would be really appreciated.
I link the JS like this
<script type='text/javascript' src='http://www.example.ca/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>
<script type='text/javascript' src='http://www.example.ca/wp-content/plugins/slidedeck-lite-for-wordpress/lib/youtubeapi.js?ver=2011-04-28'></script>
<script type='text/javascript' src='http://www.example.ca/wp-content/plugins/slidedeck-lite-for-wordpress/lib/slidedeck.jquery.lite.js?ver=1.4.5'></script>
And within youtubeapi.js I run this
window.YTplayerState;
function onPlayerStateChange(evt) {
YTplayerState = evt.data;
}
window.YTplayerState; is an attempt to help fix the Opera/IE7 issue. Then within a pre-existing file for the SlideDeck plugin I run this
var YTplayerState;
var autoPlay = function() {
gotoNext = function() {
if (self.pauseAutoPlay === false) {
if (self.options.cycle === false && self.current == self.slides.length || YTplayerState == 1) {
self.pauseAutoPlay = true;
} else {
self.next();
}
if (YTplayerState == 1) {
self.pauseAutoPlay = true;
}
}
};
setInterval(gotoNext, self.options.autoPlayInterval);
};
Which most browser seem to be okay with, although that may just be luck, but it works. I know the issue in Opera is that YTplayerState never gets the value because if I manually change the value to one with a keypress function then it all behaves as expected.
If it's not anything with the code directly provided, are there any common quirks with Opera that I should look out for?
To my knowledge, this is a bug in Youtube video player. Sorry.
If you google for "onPlayerStateChange opera", you'll find more similar error reports.

JavaScript: The best way to detect IE

Reading this article I've found a following piece of code:
if ('v'=='\v') { // Note: IE listens on document
document.attachEvent('onstorage', onStorage, false);
}
Is this method 'v'=='\v' a great idea? Is this the shortest way to detect IE ever?
You can check for Trident, IE's engine, by the following:
var trident = !!window.ActiveXObject;
As stated on MSDN it is only supported in IE.
Edit:
Note: above code returns false in IE-11, If you want to detect also IE-11 use this:
var isIE = "ActiveXObject" in window; //window.ActiveXObject !== undefined;
If you can avoid it, don't test for browsers. Do feature detection. This will mean that your code is (more likely to be) future-proof. In this case, for instance, if you discovered that the browser was IE and decided to use attachEvent because of it, you would miss out on the fact that addEventListener (superior) is available in IE9.
In this case, test to see if document.addEventListener exists. If it does, you have the answer.
if (document.addEventListener) {
document.addEventListener(...);
} else {
document.attachEvent(...);
}
Edit: duri's comment above shows that this test fails in IE9 (as per standards), which actually means it is a perfect test for addEventListener, since that is available from IE9. However it is still far, far better to program for specific functionality, rather than specific browsers.
To check if the browser is Internet Explorer, use feature detection to check for documentMode:
http://msdn.microsoft.com/en-us/library/ie/cc196988%28v=vs.85%29.aspx
This code checks to see if the browser is Internet Explorer 8, 9, 10, or 11:
var docMode = document.documentMode,
hasDocumentMode = (docMode !== undefined),
isIE8 = (docMode === 8),
isIE9 = (docMode === 9),
isIE10 = (docMode === 10),
isIE11 = (docMode === 11),
isMsEdge = window.navigator.userAgent.indexOf("Edge/") > -1;
// browser is IE
if(hasDocumentMode) {
if(isIE11){
// browser is IE11
} else if(isIE10){
// browser is IE10
} else if(isIE9){
// browser is IE9
} else if(isIE8){
// browser is IE8
}
} else {
// document.documentMode is deprecated in MS Edge
if(isMsEdge){
// browser is MS Edge
}
}
Checking document.documentMode will only work in IE8 through IE11, since documentMode was added in IE8 and has been deprecated / removed in MS Edge.
http://msdn.microsoft.com/en-us/library/ff406036%28v=vs.85%29.aspx
I hope this helps!
UPDATE
If you really need to detect IE7, check for document.attachEvent:
var isIE7 = (document.attachEvent !== undefined);
if(isIE7) {
// browser is IE7
}
IE7 returns a object, but if the browser is IE11 (for example), then this would come back as undefined, since IE11 does not have attachEvent.
UPDATE:
Added check for MS Edge. document.documentMode was deprecated in MS Edge. Due to the nature of MS Edge, you can check for Edge/ in the User Agent. Microsoft is making it difficult to use feature detection in MS Edge.
The JavaScript includes() method is not supported in IE11 and earlier. So you can use code to check whether if the includes() method is supported. This can work for all versions of IE. But the includes method isn't for early versions of Chrome, Firefox, Safari, and Opera. This may not be the most efficient way to detect IE.
var aString = "something";
if(!aString.includes){
alert("You are using IE");
} else {
alert("You are not using IE");
}

Categories