I am trying to make it so that when you hover over a div, it triggers an image to rotate in another div.
I have been trying to use this plugin, http://code.google.com/p/jqueryrotate/
Here is my code in a jsFiddle. The green square is rotating using CSS3, however I need to support IE9+ so I need to do it using the jQuery!
The blue square is the one I am trying to animate using jQuery, for the purpose of the example I have just googled a random image, as I read that you cannot rotate a div with jQuery, only images.
http://jsfiddle.net/D6HQR/
I really have no idea what I am doing wrong, could any jQuery wizards please save me!!!!
UPDATE
http://jsfiddle.net/HAqQT/
I now have the jQueryRotate plugin working, however it is not working in IE9. The website states that it should work for IE6+
At the moment the blue square is continuously rotating using jQuery, the green square rotates when you hover over the button using CSS3.
Can anyone see a reason why the jQuery wouldn't work in IE9+?
UPDATE 2
http://jsfiddle.net/tpHdg/
Code update, blue square now spins when you hover, stops when you hover off.
Still looking for help for IE9 incompatibility.
Final Update
Thanks to everyone who helped, in the end I slowly worked my way through it. The reason it wasn't working on IE9 was because of an 'ActiveX Filter' setting, whatever that is....
For now I have a jQuery version working, and the CSS3 version for when it is more supported. If you would like to check out both version here are the links... Feel free to reuse the code if it helps your project!
http://mathewhood.com/misc/css3/rotate/ - CSS3
http://mathewhood.com/misc/js/rotate/ - JS
Thanks again!
I have worked out some code based on the plugin examples:
http://jsfiddle.net/MJyFf/
Ps.: Your revised code is working in IE9.
Ps2.: Hover the blue square on my example
Related
I came across this interesting effect over at http://birvacreativestudio.com/theme/birva200/index.html The one I am talking about is the changing text (Probably the first thing you'll notice)
I got inspector out to see how it was done, but can't figure it out, Is the developer using purse css for this or some sort of mixture with javascript/jQuery?
Could anyone explain to me how to replicate it with jQuery? Are there any plugins/libraries that are good for these type of effects?
They're using Owl Carousel.
See the FadeUp transition here: http://owlgraphic.com/owlcarousel/demos/transitions.html
You can get great text animations easily with this JS animation platform:
http://www.greensock.com/gsap-js/
(just look at the animated header on that page, you'll see what can be done with this + its faster then jQuery animate)
I just want to change the colour of the scrollbar that appears when the text overflows the textarea to a darker colour, and I don't want to use jquery or any other libraries. How to do this in pure javascript/css for firefox and chrome?
You're not going to get very far.
That being said, this is a recent post with a lot of talk about this subject in Webkit with a working demo.
http://css-tricks.com/custom-scrollbars-in-webkit/
You won't get a universal solution, but maybe you can get a partial one.
I am using wow slider and there is some issue, which causes the bullets, which onhover show thumbs of images and point to that image in sequence onClick. Howeverver at no. 13 and afterwards images are not in sync (as shown on bullet hover/onMouseover), but click on bullet in slideshow points to correct image.
I tweaked some css but in vain..is it possible to do it by editing Script.js or style.css, Please somebody help to resolve this.
Please see the code in action here.
Thanks in Adv,
Anita
[PS: I am using IE7.0 as browser.]
Everything seems to be in working order with FF 4 for Mac.
The issue you are having could be a result of IE7's difficulty with :hover
The bullets are in <DIV class=ws_bullets> which has a :hover action associated with it in the stylesheet, and my guess is that's what is causing you problems in IE7.
Do all of the demos on WOWslider.com function properly on your machine in IE7?
I figured it out: it has some internal coding in the script which causes it, since it was demo version of wow slider. It wasn't displaying thumbs beyond 11/12 and used credits in b/w to make it work correctly.
I'm looking to use an animated cursor in JS. CSS custom cursors do not animate in most browsers.
I have heard of people (can't recall who) doing this. They hide the regular cursor (by setting a transparent custom cursor), then create an image that follows the cursor in JS.
Anyone have any better ideas to achieve animated cursors? Is there a jquery plugin that will do this for you? I recall reading a blog that talks about this. Anyone heard of people doing this before?
Thanks.
Have you tried using .ani cursors? Also see controlling cursors with css. I guess you could try to hack this together yourself, but I don't see how you're going to hide the original cursor. Do you really need anything other than the widely supported usualy functionality?
li { cursor: text; }
a {cursor: pointer;}
You can use a transparent cursor, but some in some browsers it will show a black square instead of being transparent. Also, I have seen a couple examples that use canvas to add effects to the cursor.
A possible example http://jsfiddle.net/5mN9p/ borrowed from this question Animated image mask following mouse in HTML
All I added was
body{cursor:none;}
or possibly
canvas{cursor:none;}
Which means you can draw anything you want on the canvas at the mouse's coordinates.
Not tried this, but you should be able to create a custom CSS rule (create a class, like .customcursor, set the cursor to url(/path/to/image.png) and then, on a setInterval() cycle between images. Then apply that to your document body.
I haven't a clue how often you can run this, but it should work.
Flip is a great JQuery plugin for flipping blocks, but it doesn't preserve the background while it animates the flip.
For example, I have this pretty background here, before I flip. While flipping, it gets ugly.
Is there a way I can flip this div nicely, keeping the pretty background I have, and maybe even achieve a smoother animation than I can get with Flip?
If I need to dive into this headfirst and code my own function for flipping a div, that's also doable, and I'd really appreciate some pointer there, if that's what I must do.
Thanks so much!
Try the jQuery QuickFlip pulgin, this one seems pretty neat with handling the background.
Try looking into momoflow, its a coverflow type of application that animates the background to different angles.
It's using the canvas tag however, which could be an issue for you if you want IE compatibility. However the technique the dev is using is to chop the the image into several vertical slices and animate their position. You could extend this functionality to introduce a full flip!
A really cool way to do this is use CSS 3 transformations. It's much better than using a script; you should always avoid using scripts where simpler methods can be employed.