CODEWITHSUNDEEP
javascriptjquerygoogle-chrome
CamelCamelCamel
CamelCamelCamel

Reputation: 5200

Automatically Opening Chrome in Full Screen on Mac OS X

Recently I stumbled upon a new brand of pop ups on Israeli websites. Once I click on the article and the popup opens - the browser moves to a full screen mode. How do they achieve this?

You can reproduce this with:

  1. Use Chrome on Mac OS X

  2. Go to this page: http://www.haaretz.co.il/news/politi/.premium-1.2145182

  3. Click on the article text once or twice until the popup opens.

Thanks,

Upvotes: 1

Views: 4219

Answers (2)

Sridhar R
Sridhar R

Reputation: 20428

This Links May Helpful For You..

http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

// mozilla proposal
element.requestFullScreen();
document.cancelFullScreen(); 

// Webkit (works in Safari and Chrome Canary)
element.webkitRequestFullScreen(); 
document.webkitCancelFullScreen(); 

// Firefox (works in nightly)
element.mozRequestFullScreen();
document.mozCancelFullScreen(); 

// W3C Proposal
element.requestFullscreen();
document.exitFullscreen();

try these also..

void webkitRequestFullScreen();
void webkitRequestFullScreenWithKeys();
void webkitCancelFullScreen();

Chrome implemented 'Kiosk Mode' in version 4.0.245.0. This is, essentially, a way to launch the browser in fullscreen mode with the Address Bar and Status Bar disabled. Some keyboard shortcuts (Fullscreen, for example) are also disabled.

On Windows: chrome.exe -kiosk http://yoursite.com/file.html

On everything else: chromium-browser --kiosk http://yoursite.com/file.html

Upvotes: 0

Sparda
Sparda

Reputation: 610

It is possible to set a browser window to fullscreen using the HTML5 Fullscreen API. I'm not sure if the website you mentioned is using this approach though.

This is not a standard yet and thus will need vendor prefixes. You can check the level of browser support at CANIUSE and HTML5 Rocks has a short tutorial Fullscreen API.

Edit: Updated answer with code.

As I suspected, the website uses the HTML5 Fullscreen API. Refer to the code below on the page which_popup.php

function popup_(url, isOnClick) {

var is_popup_activated_domain = getCookieA('haaretz');
if (is_popup_activated_domain == "" && the_cookie == "") {
    if (isOnClick) {
        setCookieA('haaretz', 'yes', 14400);
        the_cookie = 'yes';
    }

    var chrome_full = false;
    if (document.documentElement.webkitRequestFullscreen) {
        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        chrome_full = true;
    }

    //....
    if (chrome_full) {
        document.webkitCancelFullScreen();
    }
}
}

It basically listens to a click event on the text, sets the browser to fullscreen and then opens the popup, so the popup also enters fullscreen. The api methods that you need are webkitRequestFullscreen to enable fullscreen mode and webkitCancelFullScreen to exit the fullscreen mode.

Upvotes: 2

Related Questions