I'm trying to animate some absolutely positioned DIVs on the page using JS to update the top and left CSS properties. Not a problem in Chrome, FF and even IE8 but try it in Safari 5 they just sit there... Weirdly if I resize the Safari window they will update their position...
You can see a demo of it here:
http://www.bikelanebrakes.com/tests/flyingThing1.html
The code that updates the DIVs is really simple, just a bit of jQuery (also updates the rotation, that works just fine in Safari):
$(this.elem).css({
'-webkit-transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)',
'-moz-transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)',
'transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)',
'left': Math.round(this.xPos) + 'px',
'top': Math.round(this.yPos) + 'px'
});
I've added position:relative to the body... I added the 'px' and rounded down the numbers incase Safari didn't like the long floating point values... Nothing, they just sit there until the window is resized...
Any thoughts or help, much-o appreciated!
Thanks,
Chris.
Replace the top and left properties with the translate sub-property of the transform CSS property. For me, this solved the problem in Safari 5.
Also, do not use string arguments for setInterval.
Demo: http://jsbin.com/okovov/2/
Bird.prototype.draw = function() {
var transform = 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)' +
' translate('+ this.xPos + 'px,' + this.yPos + 'px)';
$(this.elem).css({
'-webkit-transform': transform,
'-moz-transform': transform,
'transform': transform
});
};
// ...
var timer1 = setInterval(function(){bird1.animate();}, 50);
var timer2 = setInterval(function(){bird2.animate();}, 50);
var timer3 = setInterval(function(){bird3.animate();}, 50);
50 milliseconds is a very small delay. Consider optimizing your functions, to make the animation perform smoother, for example, by replacing jQuery methods with vanilla JavaScript:
Bird.prototype.draw = function() {
this.elem.style.cssText = ['-webkit-', '-moz-', '', ''].join(
'transform:rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)' +
' translate(' + this.xPos + 'px,' + this.yPos + 'px);'
); // Result: -webkit-transform: ...;-moz-transform:...;transform:...;
};
I know this might not be exactly what you're looking for, but you could try using jQuery's .offset() to change their position, as opposed to manually changing their CSS attributes. Your code would look something like this:
$(this.elem).css({
'-webkit-transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)',
'-moz-transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)',
'transform': 'rotate(' + (( this.angle * (180 / Math.PI) ) * -1) +'deg)'
})
.offset({
top: Math.round(this.yPos),
left: Math.round(this.xPos)
});
I hope that helps!
PS: if you're looking to set the relative position, use jQuery's .position().
Related
I'm having an issue trying to rotate an element on mousemove. I believe the issue is related to the fact that my element is much larger than the screen (set in CSS with vh/vw units) but essentially the element sound rotate, from the centre on mousemove.
I have set up a jsFiddle here:
https://jsfiddle.net/cLx290p1/
function themeLanding() {
var graphic = $('.landing-2016');
if (graphic.length > 0) {
var offset = graphic.offset();
function mouse(evt) {
var centerX = (offset.left) + (graphic.width()/2),
centerY = (offset.top) + (graphic.height()/2),
mouseX = evt.pageX,
mouseY = evt.pageY,
radians = Math.atan2(mouseX - centerX, mouseY - centerY);
degree = (radians * (180 / Math.PI) * -1) + 90;
graphic.css('-moz-transform', 'rotate(' + degree + 'deg) translate(-50%,-50%)');
graphic.css('-webkit-transform', 'rotate(' + degree + 'deg) translate(-50%,-50%)');
graphic.css('-o-transform', 'rotate(' + degree + 'deg) translate(-50%,-50%)');
graphic.css('-ms-transform', 'rotate(' + degree + 'deg) translate(-50%,-50%)');
graphic.css('transform', 'rotate(' + degree + 'deg) translate(-50%,-50%)');
}
$(document).mousemove(mouse);
}
}
themeLanding();
I have also applied the same idea, without mousemove as a debugging check, to rotate the same element using CSS3.
https://jsfiddle.net/psywr840/1/
This seems to work fine so I am unsure where I am going wrong.
Any ideas? Thanks.
When using css transform functions, the functions are processed in order from left to right.
In your case, what you want is to first translate the element and THEN rotate it. For example this answer on SO explains something similar, only instead of rotate they use scale, but the principle is the same.
So what you want, is to change the order of transform functions:
graphic.css('-moz-transform', 'translate(-50%,-50%) rotate(' + degree + 'deg)');
graphic.css('-webkit-transform', 'translate(-50%,-50%) rotate(' + degree + 'deg)');
graphic.css('-o-transform', 'translate(-50%,-50%) rotate(' + degree + 'deg)');
graphic.css('-ms-transform', 'translate(-50%,-50%) rotate(' + degree + 'deg)');
graphic.css('transform', 'translate(-50%,-50%) rotate(' + degree + 'deg)');
I am building an iOS application with Ionic. The application is a timer where the user will specify a time limit and then countdown that time for a certain activity. I am trying to achieve an interaction where the user will drag a handle around the outside of a circle and each clockwise rotation will increment the time limit by one minute, and going the opposite direction will decrement by one.
I have the circle working, where you can drag the handle and it will adhere to the bounds of the container. Now I am trying to use Moment.js to create the countdown, but am having a tough time getting the timer values to update inside of the touch event.
The $scope.duration variable is what I am using to track the timer value. I have tried using the moment().duration() method to specify a duration object and am initializing it to '00:00:00'. When I try to update that value in the touch gesture event, I am unable to update the timer value. I am assuming I either don't understand how to correctly apply updated scope values in Angular/Ionic, I don't know how to correctly use Moment.js, or quite possibly - both.
Here is my template code:
<ion-view hide-nav-bar="true" view-title="Dashboard">
<ion-content>
<div class="timer">
<div class="timer-slider"></div>
<span class="timer-countdown">
{{duration}}
</span>
</div>
</ion-content>
</ion-view>
And my large controller:
.controller('DashCtrl', function($scope, $ionicGesture) {
var $timer = angular.element(document.getElementsByClassName('timer')[0]);
var $timerSlider = angular.element(document.getElementsByClassName('timer-slider')[0]);
var timerWidth = $timer[0].getBoundingClientRect().width;
var sliderWidth = $timerSlider[0].getBoundingClientRect().width;
var radius = timerWidth / 2;
var deg = 0;
var X = Math.round(radius * Math.sin(deg*Math.PI/180));
var Y = Math.round(radius * -Math.cos(deg*Math.PI/180));
var counter = 0;
$scope.duration = moment().hour(0).minute(0).second(0).format('HH : mm : ss');
// Set timer circle aspect ratio
$timer.css('height', timerWidth + 'px');
$timerSlider.css({
left: X + radius - sliderWidth / 2 + 'px',
top: Y + radius - sliderWidth / 2 + 'px'
});
$ionicGesture.on('drag', function(e) {
e.preventDefault();
var pos = {
x: e.gesture.touches[0].clientX,
y: e.gesture.touches[0].clientY
};
var atan = Math.atan2(pos.x - radius, pos.y - radius);
deg = -atan/(Math.PI/180) + 180; // final (0-360 positive) degrees from mouse position
// for attraction to multiple of 90 degrees
var distance = Math.abs( deg - ( Math.round(deg / 90) * 90 ) );
if ( distance <= 5 || distance >= 355 )
deg = Math.round(deg / 90) * 90;
if(Math.floor(deg) % 6 === 0) {
console.log(Math.floor(deg));
$scope.duration = moment().hour(0).minute(0).second(counter++).format('HH : mm : ss');
}
if (deg === 360)
deg = 0;
X = Math.round(radius * Math.sin(deg * Math.PI / 180));
Y = Math.round(radius * -Math.cos(deg * Math.PI / 180));
$timerSlider.css({
left: X + radius - sliderWidth / 2 + 'px',
top: Y + radius - sliderWidth / 2 + 'px'
});
}, $timerSlider);
})
I hacked up a CodePen demo. It doesn't track the drag event all that well without a mobile format, but you can get the idea of what I am going for.
http://codepen.io/stat30fbliss/pen/xZRrXY
Here's a screenshot of the app in-progress
After updating $scope.duration, run $scope.$apply() and it should start working :)
I have a "base" reference rect (red)
Inside a rotated div (#map), I need a clone rect (yellow), it has to be same size and position of "base" rect, independent of its parent (#map) rotation.
This is where I am so far, any help would be welcoming.
http://codepen.io/christianpugliese/pen/oXKOda
var controls = { degrees: 0, rectX:125, rectY:55 };
var wBounds = document.getElementById("wrapper").getBoundingClientRect(),
mapBounds = document.getElementById("map").getBoundingClientRect(),
rectBounds = document.getElementById("rect").getBoundingClientRect();
var _x = ((mapBounds.width - wBounds.width) / 2) + $('#rect').position().left,
_y = ((mapBounds.height - wBounds.height) / 2) + $('#rect').position().top;
$('#rect').css({top: controls.rectY+'px', left:controls.rectX+'px'});
$('#mapRect').width(rectBounds.width);
$('#mapRect').height(rectBounds.height);
$('#mapRect').css({top: _y+'px',
left:_x+'px',
'transform': 'rotate('+ Math.round(-controls.degrees) +'deg)'});
$('#map').css('transform', 'rotate('+ Math.round(controls.degrees) +'deg)');
Since you're rotating the #mapRect an equal amount in the opposite direction you're getting rotation/orientation right but not the origin. The transform-origin would be the center of the #mapBounds, but relative to the #rect;
Fork of your pen: http://codepen.io/MisterCurtis/pen/vNBYZJ?editors=101
Since there is some rounding/subpixel positioning happening the yellow rect doesn't align pixel perfect.
function updateUI(){
var _x = ((mapBounds.width - wBounds.width) / 2) + $('#rect').position().left,
_y = ((mapBounds.height - wBounds.height) / 2) + $('#rect').position().top,
_ox = mapBounds.width/2 - _x, // origin x
_oy = mapBounds.height/2 - _y; // origin y
...
$('#mapRect').css({
'transform-origin': _ox + 'px ' + _oy + 'px', // now it rotates by the bounds
top: _y + 'px',
left: _x + 'px',
'transform': 'rotate(' + Math.round(-controls.degrees) + 'deg)'
});
}
Edit: Updated the pen. You'll have to ditch using Rectangle and instead use Polygon. This way you can use a plugin like https://github.com/ahmadnassri/google-maps-polygon-rotate to perform the rotation along the map center.
I am using tween to rotate on both X and Y axis. But I cant seem to find the correct javascript to edit the css.
Target is a div, and with the following code, it only rotates the axis while ignoring the Y axis.
It uses Tween JS
function update() {
target.style.left = position.x + 'px';
target.style.top = position.y + 'px';
target.style.webkitTransform = 'rotateY(' + Math.floor(position.rotation) + 'deg)';
target.style.MozTransform = 'rotateY(' + Math.floor(position.rotation) + 'deg)';
target.style.webkitTransform = 'rotateX(' + Math.floor(position.rotation) + 'deg)';
target.style.MozTransform = 'rotateY(' + Math.floor(position.rotation) + 'deg)';
}
How do I tell javascript to rotate on both and not just one axis?
You separate arguments with spaces. For example:
target.style.webkitTransform = 'rotateX(' + Math.floor(rotationX) + 'deg) rotateY(' + Math.floor(rotationY) + 'deg)';
(If you change the same property twice, you'll only overwrite previous value.)
I'm trying to create a few interactive rotary knobs like those you could find in vintage TVs and radios. I'm using KnobKnob.js to allow the user to rotate. It sometimes behaves weirdly, but given the paucity of plugins available for this particular need and my lack of time, I decided to give it a go anyway.
What I'd like to do is change the source of a video depending on the angle of rotation of the rectangular part of the knob, or <div id="centralKnob"> in my code, to replicate the behavior of a Channels knob. The user should also be able to just click the surrounding links to do that.
So, I thought the best way to do that would be to change the source based on the current rotation angle of the knob. As I'm pretty new to JS/jQuery, I had no idea how to get the angle of an element, so I looked around and found this article. What they do:
var el = document.getElementById("centralKnob");
var st = window.getComputedStyle(el, null);
var tr = st.getPropertyValue("-webkit-transform") ||
st.getPropertyValue("-moz-transform") ||
st.getPropertyValue("-ms-transform") ||
st.getPropertyValue("-o-transform") ||
st.getPropertyValue("transform") ||
"Either no transform set, or browser doesn't do getComputedStyle";
var values = tr.split('(')[1];
values = values.split(')')[0];
values = values.split(',');
var values = tr.split('(')[1];
whatever = tr.split(')')[0];
whatever = tr.split(',');
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];
var angle = Math.round(Math.asin(b) * (180/Math.PI));
This should give the current angle of the knob.
But how do I make it so that the angle is recalculated every time the user changes it and the video source gets changed whenever the knob is positioned between X(deg) and Y(deg)?
Thanks in advance. I also welcome any suggestion or advice as to how to make the whole thing work better, especially how to allow the user to rotate the knob smoothly. Also, I know that rotary dials and knobs aren't such a good idea in webdesign and aren't the best thing to control with a mouse, but this is more of a technical challenge than an actual public website.
I made something like this in the past.
http://jsfiddle.net/gTDdp/16/
(With some tweaking it should be possible, to create a rotating knob.)
I added touch events to for mobile devices
var dragging = false
$(function() {
init();
var target = $('#target')
var offset_x = -256;
var offset_y = 356;
var angle = 0;
var startAngle;
var slices = 8;
var sliceAngle = 360 / slices;
target.mousedown(function(e) {
var mouse_x = e.pageX;
var mouse_y = e.pageY;
var radians = Math.atan2(mouse_x - offset_x, mouse_y - offset_y);
dragging = true
startAngle = ((radians * (180 / Math.PI) * -1) + 90) - angle;
})
$(document).mouseup(function() {
dragging = false;
var slice = (angle + (sliceAngle/2)) / sliceAngle;
if(slice < 0){
slice = 12 + slice;
}else if(slice > 12){
slice = 12 - slice;
}
// Move circle in perfect position
angle = (Math.floor(slice) * (360 / slices));
target.css('-moz-transform', 'rotate(' + angle + 'deg)');
target.css('-moz-transform-origin', '50% 50%');
target.css('-webkit-transform', 'rotate(' + angle + 'deg)');
target.css('-webkit-transform-origin', '50%, 50%');
target.css('-o-transform', 'rotate(' + angle + 'deg)');
target.css('-o-transform-origin', '50% 50%');
target.css('-ms-transform', 'rotate(' + angle + 'deg)');
target.css('-ms-transform-origin', '50% 50%');
alert(Math.floor(slice));
})
$(document).mousemove(function(e) {
if (dragging) {
var mouse_x = e.pageX;
var mouse_y = e.pageY;
var radians = Math.atan2(mouse_x - offset_x, mouse_y - offset_y);
var degree = (radians * (180 / Math.PI) * -1) + 90;
angle = degree - startAngle;
if(angle < 0){
angle = 360 + angle;
}else if(angle > 360){
angle = 360 - angle;
}
target.css('-moz-transform', 'rotate(' + angle + 'deg)');
target.css('-moz-transform-origin', '50% 50%');
target.css('-webkit-transform', 'rotate(' + angle + 'deg)');
target.css('-webkit-transform-origin', '50%, 50%');
target.css('-o-transform', 'rotate(' + angle + 'deg)');
target.css('-o-transform-origin', '50% 50%');
target.css('-ms-transform', 'rotate(' + angle + 'deg)');
target.css('-ms-transform-origin', '50% 50%');
}
})
})
function touchHandler(event)
{
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type="mousemove"; break;
case "touchend": type="mouseup"; break;
default: return;
}
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
function init()
{
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}