Visibility API is not working after window.open in Chrome - javascript

I was trying to use Visibility API, but it is not working for a child. The minimal example to reproduce:
<script>
document.onvisibilitychange = () => {
console.log(document.visibilityState);
}
if (!window.opener) {
window.open(window.location.href, '_blank');
}
</script>
After that, the parent window still prints "visible"-"hidden", but child prints "hidden" once only on refresh.
It works fine in the latest Opera browser, but not in the Chrome
To be honest, when I came to this minimal reproduce, I'm stuck and have no idea where to dig. Any ideas what could be wrong?

I also stumbled over this issue. I think that this bug was introduced in Chrome 84. I testet it with version 83 and it worked as expected. The current Canary-Build (Version 86) is also working.

Related

window.scrollTo is not working in Internet Explorer 11

I want the scrollbar to be positioned on top by default as soon as I launch the page.But the below code works fine in chrome but not in IE11.
If I try to debug the script, the scrollbar is positioned on top.
$(document).ready(function () {
window.scrollTo(0,0);
}
I tried different solution online such as
$(window).scroll().scrollTop(0);
document.body.scrollTop(0);
But nothing worked in IE.Kindly help me
Though this is a very old question, but updating here for someone looking for a solution.
Try using:
element.scrollTop = 0;
This should work on all browsers.
Try using
$('body,html').scroll().scrollTop(0);
or
$('body,html').animate({scrollTop:0});

Click events and Google Chrome and Windows 8

I am trying to use the following JQuery code:
$("#thing").on("click", function() {
....})
And it doesn't work on Google Chrome in Windows 8, but it works in Firefox on Windows 8 and basically every other OS. Any ideas?
It works, check this: http://jsbin.com/ofuvuh/1 Probably there is some error in the code that ff ignore or maybe it's your browsers fault. Please check the chrome and ie console, probably it can helps
Try:
$("#thing").click(function ()
{
// your code here
});
Which is the same as .on('click', handler). See .click documentation.
Your code snippet looks completely fine. I assume you are using a fairly up to date version of jQuery, so most probably it is nothing to do with jQuery or the browser. I suspect there might be something wrong with the code surrounding your snippet.
As a possible solution:
In Chrome you can bring up the Console, which will tell you if there is any errors in your JavaScript (developers.google.com/chrome-developer-tools/docs/…). Open it up, refresh your page (you might see the error in the Console straight away). Or click that '#thing' and watch out for any possible errors coming up in the Console.

error in Chrome when displaying inline-block li elements

I'm pretty new to web-coding and in my attempt to create jQuery based menu bars complete with dropdowns I have stumbled upon some vast differences between broswers. Below you can see that while FF and Safari are the same, IE is actually behaving and Opera is ok-ish, Chrome gets it totally wrong. As far as I can tell I have all the latest versions.
I removed the code from here and pasted it in: (doesn't want to let me link properly) so: jsfiddle.net/2hCR2/
Just in case, support for older versions of IE (6-7) is not required.
Right now I'm mostly concerned with the positioning aspect. Any assistance is much appreciated!
****EDIT:** After continuing to play with the chrome developer tools I realized that when I manually set the 1st list (pants/t-shirt) to display:block it displays as expected (exactly like FF and Safari in the image) so it appears that this is more of a javascript/jQuery issue not updating the DOM correctly(?). I also noticed that when I put the code is JSFiddle and ran the script in Chrome it produced the same error, but when I ran JSFiddle in FF (exact same fiddle link) it renders correctly.
It does not happen in Chrome Canary (version 24) but it does in stable (version 22). Apparently it is a bug which has been fixed.
You can either wait a month or two so that all Chrome users get the fix, or just use .show() instead of .show(0).

Can't get MozTransform to work with Javascript

I'm trying to get the zoom function for Firefox to work using javascript but no luck, what am I doing wrong?
function zoomIn() {
document.getElementById('increaseWrapper').style['MozTransform'] = 'scale(1.5)';
}
Thanks in advance.
Your code seems to work perfectly find in this jsFiddle in Firefox 6.
Remember, 'MozTransform' only applies to Mozilla derived browsers. Safari and Opera and others have their own name for that attribute until it becomes an endorsed standard.
If you're trying your code in mozilla 4+ browser, then there must be something else wrong with your code because what you have disclosed in your question works fine in the right browser with the right HTML.
Have you checked your browser's error console or debugger console to see if you're experiencing an javascript errors that might be keeping your code from executing?

Using Javascript to resize browser window in IE8. Explanation mostly

I have seen many examples on using javascript to resize a browser window, but for me they all fail to perform that function in IE. I include my code to see if anything is wrong with it that I just don't see. The code works great in FF but that is not used at my location.
I am no javaScript expert, but I am no slouch either. If I were new to javaScript I would be hating it. I'm sure it has something to do with IE but I cannot explain it.
Any help would be great.
CODE:
//window.sizeToContent();
window.resizeTo(700, 700);
I read in the docs that sizeToContent will not work in IE but resize should. It is an incredibly simple statement.
This works for me in Internet explorer 8
<html>
<head>
</head>
<body>
<h1>Resized</h1>
<script>
window.resizeTo(400,400);
</script>
</body>
I did some testing in IE9 beta (that's the only version of IE that I have on this machine), and it seems that window.resizeTo does not work on the initial page load. It does work if you refresh the page. Also, it does work if you delay its execution:
setTimeout(function() {
window.resizeTo(200, 200);
}, 2000);
(at least in IE9 beta)
The "working" example with IE is working only because there are no more tabs on the window.
If the windows has other tabs loaded, then it DOES NOT work. It's a security measure of IE8 and higher.
If you need to resize your window, you will need to open a new window. And for that, you will need to make the user click a button with the window.open onclick event, otherwise any popup blocker will block it.
You won't be able to resize the window reliably with JavaScript. It's not possible in IE 7 with tabbed browsing enabled. It's also potentially annoying for the user.
This seems to be IE only.
If your window is a "dialog" like:
window.showModalDialog(url,...)
I found this hacky way to make it the right size:
<script type="text/javascript">
//window.resizeTo(1000, 790); //Will not work if its a dialog
window.dialogWidth = '1000px';
window.dialogHeight = '790px';
</script>

Categories