jQuery - Resize <body> to page width. (zoom works, how can I make it shrink too?)
Question
I have been using this site as a resource while I learn a bit of jQuery. My skill level is mostly integrating and modifying other peoples code. So far so good. I have a problem, and signed up so I could post a question.
Basically, I have a site that is designed for a 1280px width. I am using jQuerytools' "tabs" and "scrollable" plugins to have a 4000px+ horizontal image scroll with content. Of course on a 1080p screen, the "scrollable" pane was not reaching both sides of the screen. My solution was a script I found to zoom the page if the width was larger than 1280px.
Here is the code.
$().ready(function() {
var currentWidth = $(document.body).width();
var targetWidth = 1280; // experiment for your self
var scrollWidth = 10; // need to make it dynamic
// if the screen is not bigger than the target, then don't mess with zooming
if (currentWidth > targetWidth) {
if (typeof document.body.style.zoom != "undefined")
document.body.style.zoom = currentWidth / targetWidth;
else if (typeof document.body.style.MozTransform != "undefined") {
document.body.style.MozTransformOrigin = "left top";
document.body.style.MozTransform = 'scale(' + currentWidth / targetWidth + ')';
}
else if (typeof document.body.style.WebkitTransform != "undefined")
document.body.style.WebkitTransform = 'scale(' + currentWidth / targetWidth + ')';
$(document.body).width(targetWidth - scrollWidth);}})
This works great, but I cannot figure out how to make it shrink if the body is less than 1280px. Any help will be greatly appreciated.
1 answers
solution1
0 2013-10-28 20:49:35
A couple of things, jquery has two ways I know of of firing on the document ready object, one is
$(document).ready(function(){
the other shorthand I am familiar with is
$(function(){
It is not recommended to use the $().ready syntax. Please check the jquery documentation http://api.jquery.com/ready/
Also, you have no closing semicolon at the end of your code. You would do well with a quick briefing on jquery syntax at codeacademy. I have found that if one bit of jquery code has bad syntax, the DOM will not load completely.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.