Response title
This is preview!
Move this topic
Rotation in jQuery?
in Using jQuery
•
9 years ago
Is there a way to create a rotation of a box that works in most browsers?(ie especially)
Thanks for reading
Thanks for reading
1
Replies(7)
Re: Rotation in jQuery?
9 years ago
Rotation is a CSS3 feature that is not available in IE<10. You can use images that are pre-rotated.
There are filters in old IE.internet explorer - CSS rotate property in IE - Stack Overflow, but I never used them.
JΛ̊KE
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Rotation in jQuery?
9 years ago
Here is a plugin by one of our frequent helpers in the forum, @kbwood http://keith-wood.name/imageCube.html Is that what you're looking for?
Leave a comment on jay.blanchard's reply
Re: Rotation in jQuery?
9 years ago
To a degree, thankyou :) But I'm staying away from plugins at the moment. I'd like to re-create it with standard code. But I will add it into my bookmarks thanks :)
I found a decent examle in css. I should be able to make this work for what I want. http://jsfiddle.net/sELBM/
For the sake of not creating a new thread. I was curious if someone could take a peek at this. I'm trying to toggle between two functions, but the toggle is autoloading and not working properly. Or atleast I'm coding it wrong. It makes the button shrink to the top left. If I remove the position absolute on the box, it completely ignores it alltogether. Bit confusing
I found a decent examle in css. I should be able to make this work for what I want. http://jsfiddle.net/sELBM/
For the sake of not creating a new thread. I was curious if someone could take a peek at this. I'm trying to toggle between two functions, but the toggle is autoloading and not working properly. Or atleast I'm coding it wrong. It makes the button shrink to the top left. If I remove the position absolute on the box, it completely ignores it alltogether. Bit confusing
- <!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#click").toggle( function () {
$("#test").animate({left:"100px"})}, function () {
$("#test").animate({left:"-100px"})} );
});
</script>
<style>
#test {
width:100px;
height:100px;
border:1px solid black;
position:absolute;
}
</style>
</head>
<body>
<button id="click">Start Animation</button>
<div id="test">
</div>
</body>
</html>
Re: Re: Rotation in jQuery?
9 years ago
Did you mean rotate as in skewing and flipping, or rotate as in swapping through a list of divs?
JΛ̊KE
JΛ̊KE
Leave a comment on 7blake's reply
Re: Rotation in jQuery?
9 years ago
toggle was removed from jQuery a while back. You can use a plugin [Solved] function .toggle() deprecated : what to use instead ? - jQuery Forum
JΛ̊KE
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Rotation in jQuery?
9 years ago
That's great thankyou for the information on why and how to work around it. *edit* Oh just rotating in skewing/flipping.*edit*
I've got to understand this though. Im still very new to javascript. I was wondering if you have the time if you could explain a few things to me... or like a run down of this code?
I've got to understand this though. Im still very new to javascript. I was wondering if you have the time if you could explain a few things to me... or like a run down of this code?
- var iteration=$(this).data('iteration')||1
switch ( iteration) {
case 1:
alert("odd");
break;
case 2:
alert("even");
break;
}
iteration++;
if (iteration>2) iteration=1
$(this).data('iteration',iteration)
So you create a variable called iteration. This(#mydiv) stores the data in variable iteration? Im not sure what this mean "||1"
then the switch settings...
Incrementing iteration (what does that set it to? iteration1?:S)
Then ,,, yeah. I'm sorta lost understanding this code. It works like a charm but it's like having a blindspot in my coding. Plus it's creative and I'd like to understand the compatibility of the terms used there.
Lots to look into.
Thanks for the link in anycase!
Leave a comment on 7blake's reply
Re: Rotation in jQuery?
9 years ago
Use the answer that got best answer, as it is, well, the best.
JΛ̊KE
Every element in jQuery has an unlimited number of data values associated with it. I used
data('iteration'). Because it probably has no value to begin with I refer to it using
$(this).data('iteration')||0
Which gives me zero to start off or whatever iteration we are up to,
- functions[iteration].apply(this,arguments)
calls one of the functions passed as arguments depending on the iteration count, first it's functions[0], then [1]…
- iteration= (iteration+1) %functions.length
Add 1 with the modulo operator( % ) to wrap around back to zero when I hit the end.
- $(this).data('iteration',iteration)
Store iteration back for the next time around (the next time it is clicked)
It all comes naturally to me, but it is packed with a few complex tricks.
- $.fn.toggleClick=function(){
- var functions=arguments
- return this.click(function(){
- var iteration=$(this).data('iteration')||0
- functions[iteration].apply(this,arguments)
- iteration= (iteration+1) %functions.length
- $(this).data('iteration',iteration)
- })
- }
- $(function(){
- $('#mydiv').toggleClick(function(){ alert("odd")},function(){alert("even")})
- })
JΛ̊KE
Leave a comment on jakecigar's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to 7blake's question
Statistics
- 7 Replies
- 2042 Views
- 1 Followers