You are here: Home / Javascript / jQuery Full Screen Facebook Like

jQuery Full Screen Facebook Like

by Jaspreet Chahal on April 12, 2012 6 Comments

Hi Guys,

Ok to start with this solution will not work on Internet Explorer and will work perfectly on Chrome or webkit based browsers like Firefox. One more reason to ditch that browser :)

 

So recently Facebook made a change where you can view your photo in Full Screen. So how to switch your browser screen to full screen mode.

We will be looking at

  1. Just by clicking a Link how to switch to full screen mode
  2. How to make an Element full screen.

 

Just by clicking a Link how to switch to full screen mode

Ok so try this code below

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.  <title>jaspreetchahal.org</title>
  5.  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  6.  </head>
  7. <body >
  8.     <a href="javascript:void(0)" id="fullscreen">full screen</a>
  9.      <script>
  10.            $("#fullscreen").bind("click", function() {
  11.                 var elem = document.documentElement, 
  12.                 req =  elem.requestFullScreen  || elem.webkitRequestFullScreen || elem.mozRequestFullScreen ; 
  13.                 req.call(elem);
  14.           });
  15. // Above can be re-written as
  16. /*
  17. $("#fullscreen").bind("click", function() {
  18.   var elem = document.documentElement,
  19.   if (elem.requestFullScreen) {    
  20.       elem.requestFullScreen();  
  21.   } else if (elem.mozRequestFullScreen) {    
  22.       elem.mozRequestFullScreen();  
  23.   } else if (elem.webkitRequestFullScreen) {    
  24.       elem.webkitRequestFullScreen();  
  25.     }  
  26. });
  27. */
  28.       </script>
  29.  </body>
  30. </html>

Above code will work on full document and make it Full screen.

 

So in the above code we are grabbing an Element and applying requestFullScreen* method to that element.

Now lets see How to make an Image full screen.

There is not much change in the logic, http://jaspreetchahal.org/wp-content/uploads/2012/04/gold_wheat.jpg

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3.  <head>
  4.  <title>jaspreetchahal.org</title>
  5.  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  6.  </head>
  7. <body >
  8.     <a href="javascript:void(0)" id="fullscreen">full screen</a>
  9.      <script>
  10.            $("#fullscreen").bind("click", function() {
  11.                 var elem = document.getElementById("img"), 
  12.                 req =  elem.requestFullScreen  || elem.webkitRequestFullScreen || elem.mozRequestFullScreen ; 
  13.                 req.call(elem);
  14.           });
  15.       </script>
  16. <img src="/path/to/your/img" id="img" />
  17.  </body>
  18. </html>

As you see that we are trying to make an image Full screen here. our elem variable is a reference to “img” which is an ID for the Image we want to make full screen.

If you are using Chrome or FF try click the link below

Full Screen Image

Images like above can be downloaded from iStockPhoto. Join now

 

 

VN:F [1.9.22_1171]
Rating: 0.0/5 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)
Filed Under: Javascript

Comments

  1. Darius
    Twitter:
    says:
    July 30, 2012 at 8:22 AM

    function enterFullScreen(){
    var bro = navigator.appName;
    var elem = document.getElementById(“video”);
    // IE/Opera
    if(bro == “Microsoft Internet Explorer” || bro == “Opera”)
    {
    elem.style.width = ’100%’;
    elem.style.height = ’100%’;
    elem.style.position = ‘absolute’;
    elem.style.left = ’0px’;
    elem.style.top = ’0px’;
    }

    if (bro != “Microsoft Internet Explorer”)
    {
    if(elem.requestFullScreen) {
    elem.requestFullScreen();
    } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullScreen) {
    elem.webkitRequestFullScreen();
    }

    }
    }

    welcome

    Reply
  2. Darius
    Twitter:
    says:
    July 30, 2012 at 6:54 AM

    Solution for IE 9:

    function enterFullScreen(){

    var elem = document.getElementById(“video”);
    //for IE

    elem.style.width = ’100%’;
    elem.style.height = ’100%’;
    elem.style.position = ‘absolute’;
    elem.style.left = ’0px’;
    elem.style.top = ’0px’;
    //show full screen

    if (elem.requestFullScreen) {
    elem.requestFullScreen();
    } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullScreen) {
    elem.webkitRequestFullScreen();
    }

    Reply
  3. Darius
    Twitter:
    says:
    July 30, 2012 at 6:41 AM

    doesn’t work on IE

    Reply
  4. kuldeep says:
    April 20, 2012 at 10:40 PM

    great blog

    Reply

Speak Your Mind

*

CommentLuv badge