I need to animate a circle with Jquery:
The circle will be a round picture (let's say a ball) that will turn around itself 360 degrees.
How can I do it without flash?
It should stay in the same place, but will only rotate (wander around)
Not sure what you actually want, but assuming you want it to rotate on it's own axis, have a look at this code I just whipped up:
http://jsfiddle.net/RpjuD/2/
This only works in browsers with animation support, but nowadays that's really only IE. IE10 has support.
To get a rotation animation in older browsers, you are kind of stuck - there aren't many options short of using an animated gif. IE does support a rotation property, but it's very limited.
You could use something like https://github.com/clearideaz/jQuery.rotate/blob/master/jrotate.plugin.js to get it working everywhere, but to be honest, usually the CPU cost for users stuck on old browsers with old hardware isn't worth it.
You will only be able to rotate an element if the browser is CSS3 compatible (minus other hacks such as this http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html), in which case you should set a timing function to adjust the following CSS:
-moz-transform:rotate(120deg);
-webkit-transform:rotate(120deg);
-o-transform:rotate(120deg);
see this:
http://davidwalsh.name/css-transform-rotate
Use CSS3 as pointed out by the others, or use SVG (e.g. http://raphaeljs.com/) or Canvas.
For CSS3 transitions and transforms, you can better use this nice jQuery plugin: http://ricostacruz.com/jquery.transit/
Lea Verou posted a solution using css3
http://lea.verou.me/2012/02/moving-an-element-along-a-circle/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+leaverou+%28Lea+Verou%29&utm_content=Netvibes
Related
I would like to scale an image up with scale = 2.0. I would like do to that without any smoothing, so the desired effect is to turn each pixel of the original image into 2x2 pixels of the same colour.
I wonder if this is possible to do in Javascript/CSS in a cross-browser (>= IE7) manner without resorting to <canvas /> tag.
Sorry, I don't believe the effect you want is possible cross-browser without a canvas.
In Firefox in Canvas you can do ctx.mozImageSmoothingEnabled = false; but that's as close as you're going to get.
image-rendering: -moz-crisp-edges; might help you in firefox for CSS scaling, and -ms-interpolation-mode* might help you in IE, but I doubt you'll get a solution that looks the same across all browsers.
* I think this has been deprecated/obsoleted.
Any details of rendering methods e.g. anti-aliasing/smoothing are out of CSS 2.1 scope. So the answer is 'no' for CSS 2.1. Image object in JS does not have scaling features either. So 'no' again.
I know flash is a dying technology, however this is some pretty excellent image manipulation scrips should you wish to check that out. This seems a little complex for standard web based image processing although Sounds like a wicked idea!
I'd like to rotate an image on a webpage through four orientations at 90 degrees apart. I'd prefer this to happen on the client machines. Can this be done using css? Or will I need to use JavaScript, I need to rotate a background image, a pattern which is repeated on the page.
#tada; you can use css3 rotate property as petah said
div{
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
}
& for IE you can use IE filter:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
for more check these links:
http://snook.ca/archives/html_and_css/css-text-rotation
http://css-tricks.com/snippets/css/text-rotation/
CSS3 works, but my concern would be legacy compatibility. According to this matrix, it's not going to work on IE pre version 9.
ImageMagick is an obvious solution, but that's server side so it really doesn't solve your challenge.
I think I'd lean toward Jquery Rotate, which is a very well-done plugin that certainly maintains a simplicity advantage on the presentation layer over a pure CSS solution. On the basis of compatibility, it's quite a way ahead of pure CSS3 right now. <sarcasm>Thanks, Microsoft.</sarcasm>
You can using CSS3
Check out http://davidwalsh.name/css-transform-rotate
-moz-transform:rotate(120deg);
-webkit-transform:rotate(120deg);
-o-transform:rotate(120deg);
-ms-transform:rotate(120deg);
transform:rotate(120deg);
I'm just starting to use HTML5 and CSS3 in my documents.
I understand the need for JavaScript to bring Internet Explorer up to speed with these new tags and styles, but I don't know which to use and when!
My plan was to use html5shiv and IE9.js to look after the HTML5 tags as well as the transparent pngs (and whatever other pesky errors they fix) but then Modernizr and CSS3 Pie were brought to my attention.
My question is, if I use Modernizr, does it look after my need for html5shiv as well as IE9.js? Or should I include these as well? What is the overlap, if any?
And what does CSS3 Pie do that Modernizr or the others doesn't? Or vice versa?
I appreciate your guys help. Let me know what you do!?
I've got extensive experience with all of these, having used them for a few years each.
Modernizr
Includes HTML5shiv functionality
Also does a lot more – if you don't use the other features, then don't use it, it does slow down page loads, but is worth it if you need it!
HTML5shiv
Very small, just fixes html5 elements in IE, nothing else.
CSS3PIE
Lets you use border-radius, gradients and box shadow in older versions of IE. Also can allow PNGs in IE 6. Adds a noticeable delay to page load.
ie7.js (and ie9.js)
Gives you many CSS3 selectors, min and max width, multiple classes and fixed positioning. Also can have a png fix if you like. Doesn't seem to slow things down much.
Conclusion
My advice would fall into two categories:
If you are just using the new (is 2 years new on the internet?!) elements, and CSS3 selectors, then use ie9.js + the html5shiv. This is lightweight, and just lets you get on with things without having to remember that IE6 doesn't support anything.
If you are using a lot of CSS3 stuff, then CSS3PIE will sort out border-radius and box-shadow. The gradient support seems a little flaky, so I've always used a fallback image instead. Modernizr lets you easily deliver different properties to browsers with different support. I've mainly used this for determining whether a browser has CSS transitions and transforms, as they are useful for any image sliders or content carousels. It's worth using the customisation tool to only include the functionality that you want – the webforms stuff shows a textbox with 50 in it for a couple of milliseconds, so it's worth disabling if you don't want it.
Hope that's helpful!
I would recommend you use only what you need. Build your app in a browser that supports the features you are using, and periodically test in other browsers that you support. If something isn't working correctly, find the appropriate fix, whether it be html5shiv, IE9.js, Modernizr, or CSS3 Pie. You are not going to use all of the new features in HTML5 and CSS3 all in one page, so you don't need to include every polyfill library in existence. Wait until you find problems with the features you're trying to use, then try and find the library necessary to do that.
I've used mainly CSS3Pie...it works great. But this afternoon i tested it on my laptop with I.E8 and there was an problem with it...it was disabling some css lines...when i removed the css3pie code my site gained twice the speed...then i came accross the posts with people arguing about the css3 slowdown...So at the moment i'm busy to find another way for IE7 & IE8 to have border-radius and shades.
If you want to use it...please test alot as it is NON-official fixes
I am wondering if there is any work-arounds using javascript or whatever to get IE to show border-radius or gradient background?
I came across this by looking for fixes to using 'gradients and border-radius' in IE9. And yes while its true you can now use both in IE9, you sadly cannot use them together.
The issue is documented in a a few places:
http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/
http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx
IE9 border-radius and background gradient bleeding
The issue seems to be related to border-radius not playing nice with IE's old filter gradients. Sadly the release of IE9 did not bring proper CSS gradients.
jquery for at least the radius / corners item.
For gradient backgrounds see this.
You don't need to use jQuery for rounded corners, there are solutions that will make browsers behave well even in the event of javascript being disabled.
Check out http://css3pie.com/, provides a pretty simple solution (htc file) for making this work. As monn indicated IE9 gradient and radius don't work together. Css3Pie is intended to let you dev with css3 markup but provides backups for IE back to IE6.
There's also css3please and compass (for ruby).
This issue has recently been discussed in the HTML5 Boilderplate issue queue (HTML5 Boilerplate is a well-vetted collaboration to bring together the best techniques in modern web markup as a starting point for any platform).
https://github.com/paulirish/html5-boilerplate/issues#issue/354
Here's a demo of the problem & solution:
http://frugalcoder.us/post/2010/09/15/ie9-corner-plus-gradient-fail.aspx
This is quite new: https://github.com/bfintal/jQuery.IE9Gradius.js
Just include the script last in your head tag and it should handle the rest. See readme notes
I would like to create a spinning menu akin to the one done in flash here. Are there any relevant links you know about to help with this endeavor?
Thank you kindly.
You can do it with a series of images and just swap them. Without getting into complexities of cross-browser canvas/svg that's probably the easiest way to do it.
You could use the <canvas> tag.
You could make a circular image map with the mouseovers, and then use css rotates with animation on the angle in something like jQuery so that the currently selected item is at the top. However, this would be limited in the amount of browsers that support it (mozilla and webkit). I think there is a similar thing in IE, but requires an ActiveX overlay