Going fullscreen in JavaScript/jQuery
Sat, 03/06/2010 - 18:47 — infojunkie
I'm no fan of Flash. Even the name annoys me :-) But I feel that recreating its capabilities using the trio HTML/CSS/JavaScript (isn't there an acronym for these 3 interrelated technologies?) is often non-trivial.
A case in point: I recently added to Sheetnode the feature of editing the spreadsheet fullscreen. While every Flash component has a fullscreen option, I couldn't even find a jQuery component that implements this functionality. Here's a simplified version of how I ended up doing it:
- Design the CSS for the fullscreen DIV:
// @file mymodule.css
.fullscreen {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9999;
margin: 0;
padding: 0;
background: inherit;
}- Write the JavaScript/jQuery code to toggle fullscreen on/off:
// @file: mymodule.js
Drupal.mymodule = Drupal.mymodule || {};
Drupal.behaviors.mymodule = function(context) {
div = $('div#mydiv', context); // That's the DIV element we want to take fullscreen.
// Hook on the click event of some element as a trigger.
$('#myelement', context).click(function() {
if (!div.hasClass('fullscreen')) { // Going fullscreen:
// Save current values.
Drupal.mymodule.beforeFullscreen = {
parentElement: div.parent(),
index: div.parent().children().index(div),
x: $(window).scrollLeft(), y: $(window).scrollTop(),
};
// Set values needed to go fullscreen.
$('body').append(div).css('overflow', 'hidden');
div.addClass('fullscreen');
window.scroll(0,0);
}
else { // Going back to normal:
// Restore saved values.
div.removeClass('fullscreen');
if (Drupal.mymodule.beforeFullscreen.index >= Drupal.mymodule.beforeFullscreen.parentElement.children().length) {
Drupal.mymodule.beforeFullscreen.parentElement.append(div);
} else {
div.insertBefore(Drupal.mymodule.beforeFullscreen.parentElement.children().get(Drupal.mymodule.beforeFullscreen.index));
}
$('body').css('overflow', 'auto');
window.scroll(Drupal.mymodule.beforeFullscreen.x, Drupal.mymodule.beforeFullscreen.y);
}
});
}The tricky part in this code involved using the jQuery index() function to find the DIV's index within its siblings, such that it can be restored to the same location later. The DIV is restored by examining the original parent element's children and figuring out the correct way to re-insert the DIV in its original place using either insertBefore() or append().
Check out a demo of the fullscreen feature!
"There is a module for that" by Karim Ratib is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported License.
Drupal is a registered trademark of Dries Buytaert.
Comments
As a related side note, I've noticed that Drupal 7 dashboard and shortcuts overlap fullscreen WYSIWYG CKEditor as well. A consideration choosing modules/themes for use with sheetnode.
I would not call this FULL SCREEN. Pressing F11 in IE is considered full screen. What is going on here is just expanding a div to fill the view port of the browser.
Fullscreen as F11 is now support by common web browser. There is an api that work great for it from Johndyer http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin... And there is some trick that improve the api to work with Internet Explorer http://xme.im/display-fullscreen-website-using-javascript
Thanks, that's a feature request in my issue queue. Feel free to subscribe to it or submit a patch!
Here is the code that works even in IE7. I apologize, it not formulated for a Drupal Plugin, I had to debug in raw format to make it to work... albeit I am sure the original awesome developer of this code can do it for us!
Cheers!
The CSS
.fullscreen{display: block;
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:9999;
margin:0;
padding:0;
background:#333;
}
The JS
var div = $('div.portfolio_main_content');
var beforeFullscreen = "";
$('.portfolio_main_content a').click(function(){
if (!div.hasClass('fullscreen'))
{
beforeFullscreen = {
parentElement: div.parent(),
index: div.parent().children().index(div),
x: $(window).scrollLeft(), y: $(window).scrollTop()
};
$('html').css('overflow', 'hidden');
$('body').css('overflow', 'hidden');
$('body').append(div).css('overflow', 'hidden');
div.addClass('fullscreen');
window.scroll(0,0);
}
else
{
div.removeClass('fullscreen');
if (beforeFullscreen.index >= beforeFullscreen.parentElement.children().length) {
beforeFullscreen.parentElement.append(div);
} else {
div.insertBefore(beforeFullscreen.parentElement.children().get(beforeFullscreen.index));
}
$('body').css('overflow', 'visible');
$('html').css('overflow', 'visible');
window.scroll(beforeFullscreen.x, beforeFullscreen.y);
}
return false;
});
I doesn't work in IE7 mainly due to the Trailing Comma Issue - http://www.google.nl/search?q=trailing+comma+ie
From this thread I have no idea how to implement this on a Drupal site.
Is there a module for this on drupal.org? (For Drupal 7 no doubt.)
I'm more of a flash fan but flash has its place (video, games), so I don't know a lot about javascript/jquery. My project is a text editor but it would be stupid to use flash for such a project. :]. I've looked over your code but I'm wondering if there are any Drupal dependencies or if this can be easily used outside of Drupal? The only thing I noticed was the Drupal.mymodule but I assume that I can remove that for ascetics. Anyways, thank you for sharing and congrats on the awesome spreadsheet app.
This looks great any plans to turn this into a jquery plugin.
You said; "isn't there an acronym for these 3 interrelated technologies?"
I think that is what is commonly known as "DHTML". See http://en.wikipedia.org/wiki/DHTML
... or are you thinking of AJAX maybe? http://en.wikipedia.org/wiki/AJAX
DHTML is so 1999! But yes, I guess that's the one :-)
Than call it XDHTML ... everying thinks that makes it eXtra cool :p
Hi!! I'd love to implement this feature on our corprate intranet....but...i'm kind of a drupal newbie. could you provide a more step by step turorial on how to implement this?? Thanx in advance J
Here are my assumptions for this recipe:
0) Inspect the desired form or node page with Firebug to find a unique DIV tag that surrounds your element. You will need to modify the script in this post, changing the line
div = $('div#mydiv', context);to whatever suitable jQuery selector path you find.
1a) If this element is a form item, you need to implement hook_form_alter to catch the form where your element lives.
1b) If this element is a node item, you need to implement hook_nodeapi and catch the
$op == 'view'.2) In function 1a or 1b, call drupal_add_js to add the JavaScript file. The PHP code lives in your own module and the JavaScript file is typically placed in the same folder.
3) Add to the form or to the node content a new element that will trigger the fullscreen action. In the example, this element is found via
$('#myelement'). Modify accordingly.That should be most of it! The script should respond to the
clickevent of the trigger, toggling the element's class between fullscreen and normal rendering. Enjoy.I worked on an almost-identical feature for the Witness Hub Map in 2007 and 2008. For details, see;
Your solution is far more elegant and simple — I was learning jQuery and javascript and working in another era of maturity of Drupal, jQuery and web browsers. I tried to contribute my work to Gmap module, but it never quite happened for multiple reasons.
Note that I no longer maintain the map (e.g. full-screen mode on homepage and probably other edge cases are broken) or keep up with comments on CivicActions.com. Drupal.geek.nz is where I blog now.
Thanks for sharing this!
Cheers,
Bevan/
the fullscreen map doesn't work :( By the way, can you give a link to the download page? Some of us don't know nor have Drupal and don't know how to get the code.
Thanks.
Updated the code and the demo to work on IE8 - replaced
x: window.PageXOffset, y: window.PageYOffset,with
x: $(window).scrollLeft(), y: $(window).scrollTop(),It's really amazing what can be done with small piece of code. Thanks.
This is super interesting. Basically the same method we used to create fullsceen maps for OpenLayers, but implemented a little more smoothly. One thing we found - if you are going to do any dynamic content / ajax in fullscreen mode, it's best to explicitly set a background color for the div, as leaving it transparent can get some wonkey effects when content is loading.
Thanks for the tips. I'll check out OpenLayers to see what you're doing.
You need to kill the scrollbars in fullscreen mode. Otherwise, browser scrollbars are effectively duplicating your scrollbars.
Nice work!
Great idea. I implemented it by setting
$('body').css('overflow', 'hidden')and the result is much better - check the updated demo!That's really hot. You should put up a demo page for this, I'd love to see it in action.
Find the demo here. To take the sheet fullscreen, click on the bottom-right icon of the sheet.
While I think this is grate i love to see a full screen like Flash or Silverlight. A true full screen, with no browser controls, that display only the content of the page. Is that even posible??
Nope, not with javascript
True full screen is supported by moz and webkit, for example FF9 and later
https://developer.mozilla.org/en/DOM/Using_full-screen_mode