Ccna final exam - java, php, javascript, ios, cshap all in one. This is a collaboratively edited question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
Friday, June 1, 2012
Rotating a Div Element in jQuery
Trying to rotate a div element...This might be DOM blasphemy, could it work possibly with a canvas element? I'm not sure - if anybody has any ideas of how this could work or why it doesn't, I'd love to know. Thanks.
To rotate a DIV Make use of WebkitTransform / -moz-transform: rotate(Xdeg).
This will not work in IE. The Raphael library does work with IE and it does rotation. I believe it uses canvases
If you want to animate the rotation, you can use a recursive setTimeout()
You could probably even do part of a spin with jQuery's .animate()
Make sure that you consider the width of your element. If rotate an that has a larger width than its visible content, you'll get funny results. However you can narrow the widths of elements, and then rotate them.
Here is a simply jQuery snippet that rotates the elements in a jQuery object. Rotatation can be started and stopped:
$(function() { var $elie = $(selectorForElementsToRotate); rotate(0); function rotate(degree) {
// For webkit browsers: e.g. Chrome $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); // For Mozilla browser: e.g. Firefox $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
// Animate rotation with a recursive call setTimeout(function() { rotate(++degree); },5); } });
yeah you're not going to have much luck i think. Typically across the 3 drawing methods the major browsers use (Canvas, SVG, VML), text support is poor, I believe. If you want to rotate an image, then it's all good, but if you've got mixed content with formatting and styles, probably not.
Check out RaphaelJS for a cross-browser drawing API.
Firefox 3.5, Safari, and Chrome all have a CSS transform property now that will let you rotate a div. You might find this helpful:
ReplyDeletehttp://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html
http://css3please.com has it in. No need for jQuery at all; it's brilliant!
ReplyDeleteTo rotate a DIV Make use of WebkitTransform / -moz-transform: rotate(Xdeg).
ReplyDeleteThis will not work in IE. The Raphael library does work with IE and it does rotation. I believe it uses canvases
If you want to animate the rotation, you can use a recursive setTimeout()
You could probably even do part of a spin with jQuery's .animate()
Make sure that you consider the width of your element. If rotate an that has a larger width than its visible content, you'll get funny results. However you can narrow the widths of elements, and then rotate them.
Here is a simply jQuery snippet that rotates the elements in a jQuery object. Rotatation can be started and stopped:
$(function() {
var $elie = $(selectorForElementsToRotate);
rotate(0);
function rotate(degree) {
// For webkit browsers: e.g. Chrome
$elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
// For Mozilla browser: e.g. Firefox
$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
// Animate rotation with a recursive call
setTimeout(function() { rotate(++degree); },5);
}
});
jsFiddle example
yeah you're not going to have much luck i think. Typically across the 3 drawing methods the major browsers use (Canvas, SVG, VML), text support is poor, I believe. If you want to rotate an image, then it's all good, but if you've got mixed content with formatting and styles, probably not.
ReplyDeleteCheck out RaphaelJS for a cross-browser drawing API.
I doubt you can rotate an element using DOM/CSS. Your best bet would be to render to a canvas and rotate that (not sure on the specifics).
ReplyDeleteHere's a jQuery plugin to help out.
ReplyDeletehttp://www.zachstronaut.com/posts/2009/02/22/jquery-patch-css-transform.html
http://www.zachstronaut.com/posts/2009/08/07/jquery-animate-css-rotate-scale.html