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.
Learn More<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>
Add Qik to my Social Agenda
Last Updated on Thursday, 22 January 2009 09:31 Written by webguyatwork Thursday, 22 January 2009 09:28
Giving in to the hype from other iPhone users, I downloaded the Qik application through Cydia on my jailbroken iPhone, and recorded a couple of very pointless videos to test it out. I may play around with this a little more, but don’t expect anything too fancy. My life just isn’t fascinating enough for you to watch everything I do.
My initial thoughts on Qik:
- This seems very cool for those who are on the go and want to share what’s going on with friends or followers, assuming you have something of importance to share, which so far I have not.
- I find it interesting that the Qik iPhone app is technically capable of streaming live video to the web, even over the AT&T Edge network, yet it can’t view the videos that it has uploaded. Perhaps this was a design flaw, or maybe they’re holding out for an official App Store release. Who knows?
- It appears to be simple enough to add your Qik videos (both the live stream and recorded sessions) to a web page or blog using the code that is provided with every video.
- It’s a place to hold my iPhone videos so they don’t have to be stored on the phone itself. I tried the Cycorder apps, but frankly didn’t have time to figure out how to add it to a stream on my website. Qik does this automatically, so what more could I ask for?
See my video samples at http://www.qik.com/webguyatwork if you’re up for a good laugh (or not).
Learn MoreiTunes fails to recognize iPhone (PC/Windows)
Last Updated on Monday, 12 January 2009 10:01 Written by webguyatwork Monday, 12 January 2009 09:18
For the past few weeks, I’ve noticed that iTunes running on my PC wasn’t recognizing my iPhone at all. My wife’s iPod Nano came up just fine though, so I started wondering what was up. Realizing at some point I would need to connect for a backup and future upgrades, I started looking into fixing the issue.
The following steps are intended to help you out of a similar situation without going through what I did to my iPhone, which ended up requiring a full restore from scratch. I’ll let you know how I went wrong.
To get your PC to recognize your iPhone, you’ll have to essentially uninstall every piece of Apple software that you have running (assuming you’re just a standard iTunes user):
DO NOT FOLLOW THE PROCEDURE TO PUT YOUR DEVICE IN RESTORE MODE
(I did before I ran all of the steps below, and it cost me a lot of additional time and headaches.)
- Navigate to your Add/Remove Programs (Programs and Features on Vista) area within the Control Panel.
- Start removing these apps (in this order, do not reboot until they’re all removed):
- Quicktime
- Apple Mobile Device Support
- Apple Software Update
- Bonjour
- iTunes
- Reboot your PC
- Using Internet Explorer (I know, I know, shoot me later though), browse to apple.com/itunes and click the download link for the latest version of iTunes. From here, run the install program directly from the link, do not save it to your computer. (I do not know the reason for this, I just followed the instructions per a video I saw on Youtube).
You should not need to reboot after the re-installation of iTunes is complete. My copy even found my library automatically, which I assume is due to some saved settings in the registry. Connect your iPhone in and, voila!
Disclaimer: The procedure listed here worked perfectly for me AFTER I already put my phone in restore mode. I am 99% sure that it will work WITHOUT putting your iPhone in restore mode first. I just happened to find the steps after I had already bricked my phone. LEARN FROM MY MISTAKES!!!
User Comments