I have been trying to find a way to get the web browsers current web page zoom depending on the screen resolution that is currently in use. What would be the best method to get the page zoom as a number and then adjust the page accordingly using the following code,
Code Example,
zoom: 1.5;
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
I will be adjusting using JS Script. Any examples of the best method to do this would be helpfull.
Thank you!
If you're using jQuery, jQuery Zoomooz.js ( http://janne.aukia.com/zoomooz/ ) handles this for you.
Related
I am looking for JS script to control browser's zoom.
I have tried the "document.body.style.zoom", but this doesn't work with Firefox.
Thanks you.
The browser's zoom level cannot be controlled via JavaScript, fortunately. It's a user-controlled setting.[1]
The zoom CSS property indeed does a similar thing - not only it scales the element but it also scales it's rendered size, affecting the page's layout. However, unlike changing the browser's zoom level, the zoom property does not affect media queries (tested on Chrome) so even if applied to the <html> or <body> element the result may be different than changing the browser's zoom. The other problem is that the zoom property is not standard and not supported cross-browsers.
An alternative is to apply a transformation like transform: scale(2); or transform: scale(0.5); . However transformations only change the element visually and not the rendered size, so you will need to handle that too. The following code seems to mimic a zoom level of 50% reasonably:
:root {
width: 200%;
transform: scale(0.5);
transform-origin: 0 0;
}
[1] It can be controlled by browser extensions privileged JS, but that's out of question. There is also a <meta> tag setting that controls zoom level but it's only for smartphones and can also be overriden by browser settings.
My Phonegap App I am using High resolution images and zooming functionality using iScroll. But it looks blur so i got one solution add css translate. It solves my image blur issue but in iPad2 my App crashes due to this css transform.
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
#Krishna,
Those specific CSS strings transform: translate3d(0,0,0); are used to turn on hardware acceleration. At least, that is what I read again and again. If you know that they are making you App crash, take them out. I don't see the issue.
The answer to your blurring, try something else - like increasing your pixel density.
Building a CMS of sorts where the user can move around boxes to build a page layout (basic idea anyway).
I'd like to pull the actual contents in from the database and build out the "page", but have it display at 50% scale.
I realize I could have 2 sets of CSS - one for the actual front-facing page, and one for the admin tool and just shrink everything accordingly, but that seems like a pain to maintain.
I was hoping there might be some kind of jquery or CSS or something that would allow me to populate a div and give it the properties (?) of 50% scale.
You can simply use the zoom property:
#myContainer{
zoom: 0.5;
-moz-transform: scale(0.5);
}
Where myContainer contains all the elements you're editing. This is supported in all major browsers.
This cross-browser lib seems safer - just zoom and moz-transform won't cover as many browsers as jquery.transform2d's scale().
http://louisremi.github.io/jquery.transform.js/
For example
$('#div').css({ transform: 'scale(.5)' });
Update
OK - I see people are voting this down without an explanation. The other answer here won't work in old Safari (people running Tiger), and it won't work consistently in some older browsers - that is, it does scale things but it does so in a way that's either very pixellated or shifts the position of the element in a way that doesn't match other browsers.
http://www.browsersupport.net/CSS/zoom
Or just look at this question, which this one is likely just a dupe of:
complete styles for cross browser CSS zoom
I want to give user the option to rotate the content of my webpage, including images, text and divs. Is this possible?
PS:
I want to rotate the entire webpage. Not just a container div.
You could use CSS3
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
http://jsfiddle.net/KdNNy/1/
Doesn't work on all browsers though. This example is only for firefox and chrome/safari. Opera should have it as well. Maybe even IE
EDIT
And just in case anyone thinks "oh he's just rotating a DIV!", check this
http://jsbin.com/utupu5/ (full page)
the only way I have heard of to make this achieved is embeding your HTML in a SVG foreign content element.
If you're using jQuery you can use the jRumble plugin to achieve this
The relevant website can be found here
I am wondering if there is any way to dynamically rotate an image or invert an image using a client side solution? I don't care if it is plain old javascript, jquery plugin, css. I just wondered if there was some way to do this dynamically on the client side rather than having to write server side code to do for each image which I can do.
I tried searching on Google for different keywords but couldn't find anything.
EDIT: I am looking for a solution that does not require anything from HTML 5.
Firefox, Safari and Opera support this:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
you can also do this in IE8, maybe even 7(?):
position: absolute;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
rotate an element using JS:
var deg = 90
$('element').style.MozTransform = 'rotate(' + deg + 'deg)';
$('element').style.WebkitTransform = 'rotate(' + deg + 'deg)';
edit:
wow, according to http://msdn.microsoft.com/en-us/library/ms532972%28VS.85%29.aspx the rotation works for IE 5.5!
Very interesting javascript solution:
http://www.stableflow.com/downloads/jquery-plugins/360-degrees-product-view/
Imagine that you are running some shop or blog and you present user with your products. The solution allows you to save space and present products view in very realistic form by means of the script. It allows to forget about flash (which is still not supported by all mobile devices).
What you need to utilize it is:
Download free plugin (use link above)
Setup the plugin using instructions
Create and add a series of images for each product (the more images the better rotation effect you will get)
Follow raised interest to your products from users
It really worked for me. Tested on Android mobile(lg p500), iPad and iPod touch as well.
You can do it using the canvas element, as shown here. I'm not 100% sure all browsers support it already. It is part of HTML5 (read more about it on Wikipedia), so FF, Safari and Chrome support it. Not sure about IE8.