4Minds Technology Blog
Anything and everything to do with technology
JQuery: Resize DIV to Full Screen
Author: webguyatwork29 Jan
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>
jQuery for Absolute Beginners
Author: webguyatwork7 Jan
As part of my new year’s resolution for improvement of my web knowledge, I’m planning to teach myself how to use jQuery to improve the handling of Javascript functions in my websites. I’m really excited to learn how and when to use jQuery as I’ve heard lots of really neat things about how others are using it. To be honest, I don’t have a particular use in mind just yet, but once I go through some training I’m sure I’ll think of something.
There are many tutorial sites out there, but I’ve decided that I will first go through the video training sessions on Themeforest. I’ve already reviewed the first one in the series and I can tell that it’s going to be just my speed to get me going. At least I was able to build the sample from the first video without having to go back and review it a second time.
Learn along with me and report in on your progress! Let me know what you think of the videos in this series, and if you have other helpful links handy, feel free to share them with me.
Loading ...
User Comments