Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Full Screen API (detect exitfullscreen)

    Hi guys, I've got this current script:

    Code:
    	//
    	// Full Screen Button Functionality
    	//
    	$('.js-fullscreen').on('click' , function() {
    		var thisImg = $(this).find('img'),
    			docElm = document.documentElement;
    
    		// To Enter
    		if (docElm.requestFullscreen) {
    		    docElm.requestFullscreen();
    		}
    		else if (docElm.mozRequestFullScreen) {
    		    docElm.mozRequestFullScreen();
    		}
    		else if (docElm.webkitRequestFullScreen) {
    		    docElm.webkitRequestFullScreen();
    		}
    
    		for (, ) {
    
    		}
    
    		// To Exit
    		if (document.exitFullscreen) {
    		    document.exitFullscreen();
    		}
    		else if (document.mozCancelFullScreen) {
    		    document.mozCancelFullScreen();
    		}
    		else if (document.webkitCancelFullScreen) {
    		    document.webkitCancelFullScreen();
    		}
    
    		// Change Img Source
    		if (thisImg.attr('src') === 'assets/img/ico/ico-enlarge.png') {
    			thisImg.attr('src' , 'assets/img/ico/ico-reduce.png');
    		} else {
    			thisImg.attr('src' , 'assets/img/ico/ico-enlarge.png');
    		}
    		// Prevent default anchor
    		return false;
    	});
    Which in short, goes into full screen when .js-fullscreen anchor is clicked. With the anchor img changing source.

    Now this works great when keeping in with the functionality. However users can escape full screen mode by also pressing escape and clicking a default browser button that appears on enter.


    Currently the conditional is in the onClick event, how can I do a constant check in order to change the image src attribute. Would this be with an infinite loop of checking if exitFullscreen, mozCancelFullScreen or webkitCancelFullScreen has been called?

    Thanks.

    P.s. know this is JQuery but figured it's a vanilla issue. Feel free to move.

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,366
    Thanks
    11
    Thanked 590 Times in 571 Posts
    The :fullscreen CSS pseudo-class applies to any element that's currently being displayed in full-screen mode. FF+WK


    you need an event that fires your code whenever fullscreen is exited, not when a button or key is used...
    if i had to guess, onresize() would be fired since the viewing window changes dimension to accommodate the browser's toolbars.

    see http://stackoverflow.com/questions/9...ents-are-fired
    Last edited by rnd me; 03-01-2013 at 09:56 PM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.6, IE11:9.1, IE9:3.1, IE10:3.0, FF:17.2, CH:46, SF:11.4, NON-MOUSE:38%

  • #3
    New to the CF scene
    Join Date
    Feb 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have a listener that is trigger when the user enters fullscreen but does not detect when the user exits fullscreen.
    When entering fullscreen the alert ('fullscreen change detected'); is opened. But does not open on exiting fullscreen.
    <script type="text/javascript">
    var player;
    function playerReady(obj) {
    player = gid(obj.id);
    addListeners();
    };
    function gid(name) {
    return document.getElementById(name);
    };
    function addListeners() {
    playlist = player.getPlaylist();
    if ((playlist !== null) && (playlist.length > 0)) {
    player.addViewListener('FULLSCREEN','fullscreenHandler');
    } else {
    setTimeout("addListeners()", 100);
    }
    };
    function fullscreenHandler(obj) {
    alert('fullscreen change detected');
    if (obj.state = false) {
    alert('exited full screen');
    }
    };
    </script>


  •  

    Tags for this Thread

    Posting Permissions

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