3D transformations do not work in android browsers under version 3.0. Is there any way I can flip an image in this environment?
The flip effect should be similar to this: http://desandro.github.com/3dtransforms/examples/card-02-slide-flip.html.
Also, I can't use jQuery, just pure JS to achieve this.
Thanks in advance.
Why not use that? There's no jquery in there, just pure css3. http://desandro.github.com/3dtransforms/docs/card-flip.html
If you'll be using images, you just need to set images as a background with a fixed width and height.
Related
Just wondering if theirs a more efficient means of doing this?
$(window).resize(function()
{
$('.title').css('font-size',Math.floor($(window).width()*0.2)+'px');
$('.title').css('background-size',Math.floor($(window).width()*0.5)+'px');
$('.title').css('padding',($(window).width()*0.1)+'px 0px '+($(window).width()*0.1)+'px');
}); `
I'm doing this to get my web applicatiion (cordova/phonegap) to resize properly for all devices. I've tried using viewport and had mixed results especially when it came to getting text to scale relative to dpi and screen dimensions.
There are a few ways of doing this.
There are some pre-made libraries such as BootStrap for mobile view.
You can use percentage instead modifying the css through jquery.
For some help a nice tutorial site for css is w3Schools css tutorial page.
Each result has different results.
Now on your example code you are using window.width* 0.5 or window.width / 2 which is half. If you are in the root element with no width settings you could use 50% instead of pixels to easily achieve the effect you are looking for.
However it is most likely not like that. You may have to specify widths of parent elements to achieve this.
have you considered using css #media .
it is more neat , and doesnt require javascript event to be triggered.
more info can be found here
http://www.w3schools.com/css/css_mediatypes.asp
You can use #media queries to serve the purpose.
i am trying to copy the looks of this site:
http://www.vindrejse.net/
If you try to re-size the window downwards, you can see that the image size re-sizes aswell, what exactly is done to achive this?
I've written a jQuery plugin for exact this problem: https://github.com/yckart/jquery.fitpic.js
Here's an example for you: http://yckart.github.com/jquery.fitpic.js
If you just worry about modern browsers, you can do that with CSS3's
background-size: cover;
declaration.
The closest thing to an industry standard for this is the BackStretch plugin:
http://srobbin.com/jquery-plugins/backstretch/
It works on both full page backgrounds and DIV elements. Very simple configuration. Supports transitions.
I am looking for a javascript zoom library, similar this
However, most ones out there require that you have thumbnails images for the unzoomed image which is a bit of an annoyance for me since I am only viewing 2-3 images per page and everything is preloaded.
Does anyone know of a similar library which would allow me to do this with a css scaled down version of my image rather than generating the thumnbails in the backend?
Thanks!
Yay for CSS3 transforms:
img.thumb {
-webkit-transform:scale(0.5,0.5);
-ms-transform:scale(0.5,0.5);
-moz-transform:scale(0.5,0.5);
-o-transform:scale(0.5,0.5);
transform:scale(0.5,0.5);
}
I'm making a mobile website and I'm using javascript to animate things around? Is this recommended or should I use CSS3 transitions?
If so how can I implement a simple CSS3 transition that will move divA down 20px when divA is clicked?
Thanks.
You need to use a combination of javascript and CSS. CSS for the animations and javascript to trigger them.
Take a look at this jQuery plugin: http://ricostacruz.com/jquery.transit/
I've been using it recently and it is very useful, especially for callbacks.
Hope that helps :)
Please do not use jQuery + a plugin just to move down a div on a mobile device.
CSS3 transitions and animations are very well supported on mobile devices, on some of them even hardware accelerated.
Here is a simple script that does what you need:
http://jsfiddle.net/3Sd4U/
I'm trying to get a background image to behave like GE's background on their website:
http://www.ge.com/stories/powering-gas-engines.html
I was wondering what CSS or javascript techniques they were using to get that kind of effect.
There is a jQuery plugin that can help you accomplish this, and he's laid out the code in his description to give a good idea of how it all works. What I like about this one is it also maintains aspect ratio.
http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/
it is an image, rather than a background image, and they use a javascript function called from the onresize event to set the width and/or height of it to the full width of its containing div.
It is possible to create a similar effect by using the css3 background-size property, but this is only supported in the css3 compliant browsers.
css width: 100% for both container and background image and use media queries to control minimum windows size to use elastic width or fix width