SitePoint Sponsor

User Tag List

Results 1 to 22 of 22

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Alert when client enters full screen mode

    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
    Code:
    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

  2. #2
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Full screen of what? The browser?
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  3. #3
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    logic_earth Yes, the browser.

  4. #4
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    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 without the fatal effects.
    All code snippets are licensed under WTFPL.


  5. #5
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Alert when client enters full screen mode

    logic_earth Yes I have a page height function that I tried with no result

    SCRIPT
    Code:
    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!?

  6. #6
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Alert when client enters full screen mode

    logic_earth There must be a way to refrence the features of self and take advantage of the change?

    Something like alert self features?

  8. #8
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Alert when client enters full screen mode

    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
    Code:
    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.
    Any Help greatly appreciated.

  9. #9
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Alert when client enters full screen mode

    Even tried addEvent onchange by converting pageHeight function to variable like so

    SCRIPT
    Code:
    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');
    }}

  10. #10
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Untested...
    Code:
    if ( ( screen.height - 100 ) <= document.body.clientHeight ) {
      ...might be in full screen mode...fuzzy logic
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  11. #11
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    logic_earth Will test now!

  12. #12
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Alert when client enters full screen mode

    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

    Code:
    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?
    Code:
    function dog(){
    if(pageHeight()>581){
    logolistcontainer.paddingTop='1.5%';
    alert('Page height: '+pageHeight());
    }}
    
    addEvent(window,'load',function(){dog();},false);

  13. #13
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Alert when client enters full screen mode

    logic_earth No such luck, tried your if in my dog() Dog didn't bark!
    Code:
    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
    Code:
    alert(screen.height-pageHeight());//alerts '187'

  14. #14
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Alert when client enters full screen mode

    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?

  15. #15
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,834
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  16. #16
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    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...
    Code:
    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);

  17. #17
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  18. #18
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,834
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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.

    Code:
    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');
    }
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  19. #19
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    felgall Thanks again Swami Bagwhan. The pageHeight function I used in dog() works fine for my situation but I will keep the viewport script if you don't mind, commented out in my external.js untill I can experiment with it. You have officially beaten out Fang from webdeveloper com as the most mentioned javascript officinado in those pages. Thanks again for all your patience and the articles on Unobtrusive Javascript. It's a little late for me, but the younger people will surley prosper from your input.

  20. #20
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs down Alert when client enters full screen mode

    OK. even setInterval is returning 'invalid Argument' with clientHeight greater than operator in IE8.

    Script
    Code:
    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.

  21. #21
    SitePoint Addict
    Join Date
    Dec 2009
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up ?RESOLVED?? Alert when client enters full screen mode

    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
    Code:
    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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •