Website toggling full screen mode in Chrome, after ajax load - javascript

I still fighting with one Chrome issue on my webpage. There is pagination, that loads content via ajax call:
https://elody.cz/nase-nevesty
When I click 2nd, 3d, .. tab in pagination. The load is being performed and after that, it jumps into fullscreen mode.
You can also check on this video:
https://www.loom.com/share/768557e080f1471393aa0377d3fec024
I have this issue on Mac as well as on Windows – in Chrome.
Please, do anybody know how to fix that?
Thank you!
Filip

Inside ba_gallery.js there is following line:
var fullscreen = true;
set this value to false may solve your problem, i guess its worth a try

After ajax is done you could verify if its in fullscreen mode, if yes set its to false.
document.fullscreenEnabled : test id browser supports fullscreen
document.documentElement.requestFullscreen(); turn your page in to fullscreen
document.addEventListener("fullscreenchange", function (event) {
if (document.fullscreenElement) {
// fullscreen is activated
} else {
// fullscreen is cancelled
}
});
testing if its in full screen
document.exitFullscreen(); getting out

Related

How to save fullscreen state in Firefox?

Following Mozilla's API document on Fullscreen, I've placed the following code in my website, it simply takes the whole document (html element) and makes the page go fullscreen once the user clicks anywhere in the page, and once there's another click, page goes back to normal.
var videoElement = document.getElementsByTagName('html')[0];
function toggleFullScreen() {
if (!document.mozFullScreen) {
if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}
}
window.addEventListener("click", function(e) {
toggleFullScreen();
}, false);
My question is how can I save this fullscreen state so every time that Firefox loads up, that page is still on fullscreen.
Or any workaround? This is for Firefox for Android.
It's an extreme workaround, but you can make your website a progressive web app and put "display": "fullscreen" in its manifest. Then you can launch your site from the home screen and use it like a fullscreen native app.
Following my experiments and the specs, this isn't doable, from client browser javascript
This api need an user interaction. We can't activate the fullscreen by scripting.
From the fullscreen api specification:
Fullscreen is supported if there is no previously-established user
preference, security risk, or platform limitation.
An algorithm is allowed to request fullscreen if one of the following
is true:
The algorithm is triggered by user activation.
The algorithm is triggered by a user generated orientation change.
https://fullscreen.spec.whatwg.org/#model
About activation events:
An algorithm is triggered by user activation if any of the following
conditions is true:
The task in which the algorithm is running is currently processing an
activation behavior whose click event's isTrusted attribute is true.
The task in which the algorithm is running is currently running the
event listener for an event whose isTrusted attribute is true and
whose type is one of:
change
click
dblclick
mouseup
pointerup
reset
submit
touchend
https://html.spec.whatwg.org/multipage/interaction.html#triggered-by-user-activation
We can't trigger fullscreens from scripts, or if so, the script must be triggered by the user.
Including simulating a click won't works, this is regular behavior, made to protect user experience.
With some reflexion, we can't agree more on this, imagine any ads page can launch full screens, the web would be a hell to browse!
You told in comment: «I am the only user here»
What you can do if using unix: (( probably alternatives exists in other os )).
Using midori (a lightweight webkit browser), this will start a real fullscreen.
midori -e Fullscreen -a myurl.html
There is no ways to start firefox or chromium in a fullscreen state from the command line, to my knowledge.
But what is doable is to trigger a F11 click at system level, focusing on the good window, just after the page launch. ((sendkey in android adb shell?))
xdotool can do that.
Here is a pipe command line that will launch firefox with myurl.html, search for the most recent firefox window id, then trigger the F11 key on this window.. (Press F11 again to exit)
firefox myurl.html && xdotool search --name firefox | tail -1 | xdotool key F11
This should be easy to adapt for other browsers.
As last alternative, have a look at electron or nw.js.
take a look at this add on for Firefox, i have not tried it, as I'm posting this from mobile, it's description does say that it can force start in full screen. I'm just quoting their description .
Saves the last state or force start in full screen forever! Simple and
complete for this purpose.
Edit : And the link to it
https://addons.mozilla.org/en-US/firefox/addon/mfull/
What about using localStorage like this?
function goFullScreen() {
if (videoElement.mozRequestFullScreen) {
localStorage.setItem('fullscreenEnabled', true)
videoElement.mozRequestFullScreen();
}
}
window.onload = function () {
if (localStorage.getItem('fullscreenEnabled') === true) {
goFullScreen();
}
};
function toggleFullScreen() {
if (!document.mozFullScreen) {
goFullScreen();
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
localStorage.setItem('fullscreenEnabled', false)
}
}
}
window.addEventListener("click", function(e) {
toggleFullScreen();
}, false)

InvalidStateError in IE11 when trying to rewind and pause video

I am building a website where videos start to play when you move the mousepointer over them. When a user leaves the video area it pauses and jumps back to the first frame. This works perfectly in every browser besides IE. When I open the dev console it shows me an "InvalidStateError" right above the part of code that handles the stop function. Why is IE behaving like that? Thanks for any input on this.
Here is the part of code that triggers the error:
var figure = $('.servus_video').hover(playVideo, stopVideo);
function playVideo(e) {
$('video', this).get(0).play();
}
function stopVideo(e) {
$('video', this).get(0).currentTime = 0;
$('video', this).get(0).pause();
}
Screenshot from IE11 debugger
Ok, after hours of troubleshooting I realized that IE responded with "Invalid Source" which I couldn't see because I disabled controls for the video. After tripple checking my encoder settings and verifying that they were correct I stumbled upon a document in which MS states that the maximum supported height of a video file is 1088px. 1088!? My videos were 720x1280px (portrait). After changing the resolution to 612x1088px everything worked.
https://msdn.microsoft.com/en-us/library/windows/desktop/dd797815(v=vs.85).aspx

iOS not loading target click URL bc of hover?

I have a fun little button on a website I am developing here:
http://dev.lapiazzaonline.com/merrick.php
When you click on the takeout menu button on desktop and chrome inspector iPhone simulator it works great.... with a nice little delay.
Now on iOS, nothing happens. I think it might have to do with the hover state issue, but more think my JS is messed up.
this is the js in the behavior.js file
// cool buttons
(function() {
var removeSuccess;
removeSuccess = function() {
return $('.button').removeClass('success');
};
$(document).ready(function() {
return $('.button').click(function(e) {
e.preventDefault();
var goTo = this.getAttribute("href");
$(this).addClass('success');
setTimeout(removeSuccess, 1500);
setTimeout(function(){
window.open(goTo);
},1500);
});
});
}).call(this);
Any ideas?
Thanks,
-Muhu
Your issue here is the use of window.open. You can read more about this here and other similar issues if you search. Unfortunately, there are multiple reports that jQuery trigger will not work either. So, what I would do is just use something like Modernizr, or if you just want to figure out which browser it is, this is a nice tool, and then when you're on iOS or a browser with similar blocking functionality, run a different function that doesn't prevent the default, and opens the link normally.

Using onafterprint in Chrome & Safari

I am aware that until recently onafterprint was only native to IE. Recently HTML5 has added it to its list of events. I have only been successful in using it in Firefox but cannot get it to function in Chrome or Safari.
It appears to only function in Firefox when its used in the body:
<body onafterprint="printIt()">
The script for the function is this:
$(document).ready(function() {
$('.printMe').click(function() {
window.print();
return false;
});
});
function printIt()
{
$('#confirmPrint').show();
};
By clicking the .printMe button, it opens the print window. Clicking print or cancel will show a message in #confirmPrint. I'm not so worried about being able to tell whether they are clicking cancel or print. I am only concerned with it functioning in Chrome and Safari. Any help is much appreciated. I am using jQuery as well, if that is not already obvious.
After some experiments, I think I can safely say that onafterprint is not worth considering.
Firefox fires it even if the user clicked Cancel instead of OK in the print dialog
IE8 apparently fires it even before the print dialog appears
Chrome doesn't fire it at all
Instead, just do whatever you wanted to do directly after calling print(), i.e.
$(document).ready(function() {
$('.printMe').click(function() {
window.print();
printIt();
return false;
});
});
function printIt()
{
$('#confirmPrint').show();
};

Globally disable Ext JS Animations

I'm testing an intranet web app in an iPad but the animations to open "windows" and show message boxes are horribly slow.
I've tried setting the global Ext.enableFx to false, and confirmed that flag is still false after page load in Firebug. The animations are still occurring though so I must be doing something wrong.
Thanks...
When you show a window, the second (optional) argument to show() is the target to animate from. Omit that and you should not get the animation.
EDIT:
Not tested, but glancing at the Window code you should be able to do this (put it after your Ext includes and before your app code):
Ext.override(Ext.Window, {
animShow: function(){
this.afterShow();
},
animHide: function(){
this.el.hide();
this.afterHide();
}
});

Categories