Hey Guys, I need to know when the client enters fullscreen mode and can’t figure it out. I’ve tried to create an alert when self fullscreen equals yes but can’t get the alert to work.
SCRIPT
function dog(){
if(self.fullscreen=='yes'){//is this possible
alert('You are in Full Screen Mode')
}}
addEvent(window,'load',function(){dog();},false);
Thanks in advance(:
Full screen of what? The browser?
logic_earth Yes, the browser.
The browser doesn’t send that information. the closest one would get is by guessing the available height in relation to the height of the screen.
logic_earth Yes I have a page height function that I tried with no result
SCRIPT
function pageHeight(){
return window.innerHeight!=null?
window.innerHeight:document.documentElement && document.documentElement.clientHeight?
document.documentElement.clientHeight:document.body!=null?
document.body.clientHeight:null;
}
function dog(){
if(pageHeight()>200){
alert('You are in Full Screen Mode')
}}
addEvent(window,'load',function(){dog();},false);
The pageHeight acctually returns ‘581’ pixels but I’m not getting the alert anyway!?
logic_earth I’m wrong, I had set the page height to greater than ‘581’ px when I first ran the dog function when I chaged it to greater than ‘200’ it worked. The problem is that when the client presses fullscreen in their browser the pageHeight doesn’t seem to change so I’m guessing pageHeight acctually is the screen size?
Yeah greater than ‘560’ produces alert imediatley.
logic_earth There must be a way to refrence the features of self and take advantage of the change?:x
Something like alert self features?
OK. felgall or logic_earth I have an alert that tells me the difference between screen and page dimensions that seems to tell me the page dimensions are different from the BROWSER/SCREEN dimensions.
ALERT READS
Screen height: 768, Screen width: 1024,
Page height: 581, Page width: 1020
Though the screen height appears to be that much bigger than the page height presumably because it contains the browser tool bars etc. I can’t get function pageHeight to recognize when the page height changes due to the client choosing ‘fullscreen’ in the browser options when the page height has acctually changed because those tool bars are removed.
SCRIPT
function dog(){
//if(pageHeight()>581){ //when uncomented dosen't work?
logolistcontainer.style.paddingTop='1.5%';
//alert('You are in Full Screen Mode');
}//}
addEvent(window,'load',function(){
dog();
alert('Screen height: '+screen.height+', Screen width: '+screen.width+', Page height: '+pageHeight()+',
Page width: '+pageWidth());
I know some of these properties are read only but felgall wouldn’t have written these functions if they weren’t functionable, so I’m guessing I’m doing something wrong with my syntax even though no errors are thrown when I uncomment my dog function nothing happens when I hit ‘fullscreen’ in browser tools options.:mad:
Any Help greatly appreciated.
Even tried addEvent onchange by converting pageHeight function to variable like so
SCRIPT
var page=pageHeight();
alert(page);//alerts 581??
addEvent(page,'change',function(){dog();},false);
function dog(){
if(page>581){
logolistcontainer.style.paddingTop='1.5%';
alert('You are in Full Screen Mode');
}}
:x
Untested…
if ( ( screen.height - 100 ) <= document.body.clientHeight ) {
...might be in full screen mode...fuzzy logic
Wow, I proved there was a difference in the page height by setting a time out on the alert pageHeigt that returned this after I chose fullscreen mode in browser/ tools / fullscreen.
Alert: Page height: 745
function timeout_init() {
setTimeout('alert("Page height: "+pageHeight())', 10000);
}
alert('Page height: '+pageHeight()); //alerts '581'
addEvent(window,'load',function(){timeout_init();},false); //alerts '745' after fullscreen is selected??
So why doesn’t this work?
function dog(){
if(pageHeight()>581){
logolistcontainer.paddingTop='1.5%';
alert('Page height: '+pageHeight());
}}
addEvent(window,'load',function(){dog();},false);
logic_earth Will test now!
logic_earth No such luck, tried your if in my dog() Dog didn’t bark!
function dog(){
if(( screen.height-100)<=document.body.clientHeight){
logolistcontainer.style.paddingTop='1.5%';
alert('You are in Full Screen Mode');
}}
addEvent(window,'load',function(){dog();},false);
:(
This returns screen minus page
alert(screen.height-pageHeight());//alerts '187'
OK. I can get My dog() to bark when I set it on time out function which tells me that pageHeight function would have to run every second or so befor it could be usable if the fullscreen option of the browser dosen’t have an event object I can use or a value I can access or a onpageresize event. Maybe felgall knows the answer?
There isn’t any event specifically related to switching to full screen mode. It would normally be done via the F11 key but there are other ways as well so not easy to detect.
If you are trying to test if the viewpost size is the same as the screen you should test against screen.availWidth and screen.availHeight as that’s as big as your viewport can get as it can’t overlap any fixed toolbars on the screen (such as the windows startbar).
Of course there’s also nothing to stop someone making their browser viewport bigger than fullscreen.
felgall Thanks for the reply, I’m guessing that testing screen availHeight would be the way to go. I tested it in IE8 and it looks like it is recording correctly.
Script
alert('Screen height: '+screen.height+', Screen Available Height: '+screen.availHeight);
//alerts 'Screen height: 768, Screen Available Height: 738
So MY DOG FUNCTION should be something like this…
function dog(){
//var s=screen.availHeight; maybe have set as variable?
if(screen.availHeight>738){//IE8 throws object doesn't suport this action
logolistcontainer.style.paddingTop='1.5%';
alert('You are in Full Screen Mode');
}}
addEvent(window,'load',function(){
alert('Screen height: '+screen.height+', Screen Available Height: '+screen.availHeight);
dog();
},false);
felgall IE8 ‘object doesn’t suport this action’ do the other browsers suport recognition of the screen availHeight or pageHeight change event or is there some other method of ‘if screen or page information equals something, …do something else’? OnPageReSize implies adding more html to the page, which we aren’t doing realy, nor is it an on content change. Maybe it’s server side only?
Maybe checking pageHeight every other second would work but a continually running function through-out session would probably slow everything else down.
OK. even setInterval is returning ‘invalid Argument’ with clientHeight greater than operator in IE8.
Script
function dog(){
if(logo.clientHeight>134){
logolistcontainer.style.paddingTop='1.5%';
menu.style.paddingTop='1%';
alert('You are in Full Screen Mode logo Height is: '+logo.clientHeight);
}}
alert('Logo Height: '+logo.clientHeight);
setInterval(dog(), 5000);//Throws error 'invalid argument'
Obviously there has to be another way to manipulate the Index.html if the client switches to Fullscreen mode. Any help greatly appreciated.
OK. Every One OnResize seems to achieve the desired affect, though the alerts can cause some strange screen affects, I will take them out as I only wanted to know if you could access ‘Fullscreen==yes’ with javascript. The answer is No! unless you are creating a ‘Pop-Up’ window and applying it as a window feature. It is accessible by ‘C’ or as an Appelet Object etc. If I am wrong about this, Please let me know. I realized when searching the web for ‘Javascript if key f11 pressed’ that different browsers use different keys to do this but that the main point was that whatever browser is used the key pressed uses OnResize which is suported by most ‘Javascript’ enabled browsers today. Hence…
The SKRIPT that Makes my dog() Bark
function dog(){
if(pageHeight()>581){
logolistcontainer.style.paddingTop='1.5%';
menu.style.paddingTop='1%';
alert('You are in Full Screen Mode, Page Height is: '+pageHeight());
}
else if(pageHeight()<582){
logolistcontainer.style.paddingTop='0%';
menu.style.paddingTop='0%';
alert('You are in Back in Browser Mode, Page Height is: '+pageHeight());
}}
window.onresize=function(){dog()};
This works perffectly when the alerts are stripped and corrects the index.html’s erksome errors with ease.
Any comments greatly appreciated!
The screen.availWidth and screen.availHeight would only change if someone added or removed fixed toolbars on the screen or changed the screen resolution. They’d be unlikely to do either with a browser open. Those are the values you would need to compare the browser viewport size with if you were checking if the browser is open fullscreen.
It is the viewport size that is stored in different places in different browsers and which changes when the browser is resized.
viewport = {
'width': window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
'height': window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
};
onresize = function() {
if (screen.availWidth===viewport.width && screen.availHeight==viewport.height)
alert('fullscreen=yes');
}