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>
Add Qik to my Social Agenda
Author: webguyatwork22 Jan
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).
iTunes fails to recognize iPhone (PC/Windows)
Author: webguyatwork12 Jan
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!!!
Twitter Visual Stats – Wordpress Plugin
Author: webguyatwork9 Jan
My first official Wordpress plugin is complete and ready for distribution. Named “Twitter Visual Stats”, this plugin is a “widget” that adds a visual Flash-based graph to your site to show visitors your increase in the number of Twitter followers over time. There are several basic configuration parameters that you can set once the plugin is activated, so you can customize it for your site.
I have just submitted the plugin to the Wordpress.org site for approval and upload to their CVS repository. Until then, I have made the plugin available on my blog through the following download link.
Download link: http://blog.4minds.com/downloads/twitter-visual-stats/
Installation instructions are included on the page link above as well as in the ZIP file as “readme.txt”.
Feedback
I need it, please. Tell me what you think of this plugin. Be brutal if necessary, but please give me feedback. If you have suggestions for improvement, I’ll take them into consideration. Leave your comments on this post below.
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.
About Brian (Webguyatwork)
Make Your Opinion Count
Loading ...
User Comments