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.
Related
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
My problem is that I use a html to pdf generator (acts_as_flying_saucer) that support CSS2 and javascript but not css3 so I can't use the transform: rotate(-90deg) (of course with different engines like webkit and stuff).
I tried PDFKit and Wicked_pdf but they didn't have full CSS2 support whereas I needed the position: fixed to set my footers on all pages to the bottom of the page.
SO my question is if there is a way to get vertical text with either CSS2 and / or Javascript /JQuery? CSS3 is out of the question unfortunately. :(
In IE the writing-mode is available.
<span style="writing-mode: tb-rl;">CSS2?</span>
See more info: http://msdn.microsoft.com/en-us/library/ms535153%28v=vs.85%29.aspx
No it's not possible without rotate. I don't know just crazy idea using canvas.
http://jsfiddle.net/LBsuQ/
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.
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