JQuery: Resize DIV to Full Screen
Last Updated on Thursday, 29 January 2009 11:14 Written by webguyatwork Thursday, 29 January 2009 11:14
This post shows you how I resolved an “issue” where I wanted to take a component from my page and blow it up to full screen using JQuery. Note: Full screen indicated the full browser window and not the actual screen.
The concept is simple, and I’ve represented the actual layout using the image below:
Building the Page Components
My project included an iFrame which contained contents from another website, so I’ll replicate that here by using an iFrame to load my twitter.com timeline (a simulation). In my example below, I have wrapped the iFrame itself in a DIV with an ID of “container”, and added a button just inside of the DIV container to allow for the user to toggle between full screen and regular size. The resulting code now looks like this:
<div id=”container” class=”container”>
<input type=”button” id=”trigger” value=”Toggle Full Screen” align=”right”/>
<iframe src=”http://www.twitter.com/webguyatwork” style=”width: 100%; height: 100%”></iframe>
</div>
The visual representation of what I’ve just done looks like this:
Next, Style the Container
The following styles will be applied to my container DIV. The first class, named simply “container”, will be used to represent the DIV in its regular state while the second class, “container-fullscreen” will be used to represent the DIV when it is in full screen mode. Again, full screen actually means the full size of the browser window and not the screen itself.
.container {
position: relative;
height: 500px;
width: 100%;
}.container-fullscreen {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
Finally, Add the jQuery Code
The jQuery code now can be added, allowing the toggle button to do its job. The code can be externalized into its own script file, which I strongly recommend in almost any situation, but for the purposes of this demo, I’ll add it inline. The resulting jQuery code looks like this:
<script type=”text/javascript”>
$(function() {
$(‘#trigger’).click( function() {
$(‘#container’).toggleClass(‘container-fullscreen’);
});
});</script>
Try it for yourself
Here is a complete view of a working html file that you can download and try for yourself. I’ve swapped out the button image in favor of a standard input button in this example, but you can see how easy it is to use either and still have the same effect.
<html>
<body><script type=”text/javascript” src=”jquery-1.2.6.min.js”></script>
<style type=”text/css”>
.container {
position: relative;
left: 30px;
right: 30px;
height: 500px;
width: 80%;
}.container-fullscreen {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
</style><script type=”text/javascript”>
$(function() {
$(‘#trigger’).click( function() {
$(‘#container’).toggleClass(‘container-fullscreen’);
});
});
</script><div id=”container” class=”container”>
<input type=”button” id=”trigger” value=”Toggle Full Screen” style: “align: right”/>
<iframe src=”http://www.twitter.com/webguyatwork” style=”width: 100%; height: 100%”></iframe>
</div></body>
</html>
You can still run into issues here if the element you’re wanting to blow out to full-screen is contained within relatively positioned elements itself.
So… it’s safest – in my experience – to not just change the CSS/class of the element in question but ALSO to move it to just before the closing BODY tag, where – it is assumed – there is no weird CSS going on in one or more containing elements.
Trust me on that!
And in jQuery it’s as easy as changing one line (from above) to:
$(‘#container’).appendTo($('body')).toggleClass(‘container-fullscreen’);Hope that helps someone!
Now, if you want to toggle BACK to where you came from, you’ll need to deal with that too. It should be as simple as putting an ID on the containing element and referencing that as I’ve done with the body tag.
Have fun!
Alister
Did you ever find a way to make the website fullscreen? … I mean not just the browser area, but the whole screen
Thanks for sharing this! It works!
Although I had to remove a lot of messed up control characters,and convert curly quotes to straight quotes. The blog software must convert to a non-js-friendly character set or something.