I have to make some basic feature in one project. We have four elements, and when someone hovers on one of them, it should get yellow border (overlay). Overlay element should rotate in a circle and be always visible.
It should look like this:
I've write a script in JS that rotate overlay element via css rotate, but I dont know how to loop it.. I mean when somebody hovers elements its working correctly, but when somebody hover last element (on the left) and next hover first element (on the top), then overlay element return back (move in different direction) - I know it's correct behavior, but I dont know how to loop this move that everytime overlay element will move in this same direction.
You can see basic markup I've made in codepen. It's not styled correctly, but I think most important here is JS right now.
LINK
JS:
// HOMEPAGE CIRCLE
var circle = $('#circle'),
elems = $('.home-single-item'),
overlay = $('#home-overlay'),
arrow = $('.home-arrow'),
texts = $('.home-single-item-text');
texts.eq(0).addClass('active');
elems.on( 'mouseover', function( event ) {
var index = $(this).index();
if ( index === 2 ) {
index = 3;
} else if ( index === 3 ) {
index = 2;
}
var rotate = index * 90;
var arrowz = ( index + 2 ) * 90;
console.log( index );
console.log( rotate );
overlay.css({
'transform': 'rotate(' + rotate + 'deg)'
});
arrow.css({
'transform': 'rotate(' + arrowz + 'deg)'
});
texts.removeClass('active');
texts.eq(index).addClass('active');
});
Thanks in advance.
You essentially need to have a rotation value that is always higher than the previous one.
This is just fairly messy psuedo code, but you could try something along the lines of:
var prevRotate;
elems.on( 'mouseover', function( event ) {
// snip
var rotate = index * 90;
if(prevRotate && rotate < prevRotate){
rotate = rotate + Math.ceil(prevRotate/360) * 360;
}
prevRotate = rotate;
// snip
});
It might not work immediately, but ensuring that the new rotation is more than the previous rotation is what you want.
Related
I'm using the jQuery transit plugin to rotate a block element with 4 navigation controls; each time a nav item is clicked, the rotated block should rotate to the custom data attribute of that nav item (either 0, 90, 180 or 270 degrees).
I can successfully do this (see my jsfiddle: http://jsfiddle.net/xkdgdhbk/, only tested in chrome), but I would like to restrict the rotation to ALWAYS go clockwise. As you can see, if you click 180deg it will go clockwise, but then if you click 90deg, it will go anti-clockwise. I would like the element to rotate clockwise at all times, if possible.
Is there a way to achieve this?
Here's my script from the jsfiddle:
$("span").click(function(){
$(".rotate").transition({ rotate: $(this).attr("data-rotate") + "deg"});
});
You can store the previous rotate value in the $(.rotate) element and use it for each rotation something like this
$().ready(function()
{
$("span").click(function()
{
var lastRotate = $(".rotate").attr("data-rotate");
if(lastRotate ==undefined)
{
lastRotate = 0;
}
lastRotate = parseInt(lastRotate);
var newRotate = lastRotate + parseInt($(this).attr("data-rotate"));
$(".rotate").transition({ rotate:newRotate + "deg"}).attr("data-rotate",newRotate);
});
});
I have a table with z-index = 10 . Also I have an image(.gif) with z-index = 100. The image is moving from left to right by using :
$('#misil').animate({'margin-left':'1250px'},1700});
Now I want every cell the image steps by, make some animation, maybe somethis like
$('#cell').animate({'opacity':'1250px'},400});
The only way I can think to do this is to continuously compare the position of the image to the position of every single cell. This would be extremely taxing to the browser, but I think it's really your only option. Something like this:
setInterval(function(){
var imgpos = $('#misil').offset().left;
var imgwidth = $('#misil').width();
$('table .cell').each(function(){
var cellpos = $(this).offset().left;
var cellwidth = $(this).width();
if( cellpos <= imgpos && (cellpos + cellwidth) <= (imgpos) )
{
$(this).animate({opacity: 1},400)
}
})
},10)
The above code would make each cell animate to full opacity during the time that the image is over it.
Your code is a little weird (you can't animate opacity using a pixel value, etc), but I think I understood your question.
I have a jQuery UI draggable element. It's extremely simple. It's just a div (container) with another div inside (draggable piece) set to a grid. The problem is after I move the element one time I can't go back to the first point. If i change the grid size it works, but I need it to work on this grid as it's matching some element below it
Relevant JS:
$('<div class="slider_wrap"><div class="slider"></div></div>').appendTo('#chart');
$('#chart .slider')
.draggable({
containment:'parent',
grid:[distanceBetweenPoints,0],
opacity: 0.25
})
.bind('mousedown', function(e, ui){
// bring target to front
$(e.target.parentElement).append( e.target );
})
.bind('drag', function(e, ui){
// update coordinates manually, since top/left style props don't work on SVG
e.target.setAttribute('x', ui.position.left);
})
.bind('dragstop',function(e, ui){
//a = true offset of slider piece
var a = ui.position.left + distanceBetweenPoints;
var b = containerWidth;
var c = thePoints.length;
var d = b / c;
var x = a / d;
//Since the points are in an array which starts at 0, not 1, we -1 from the currentPoint
console.log(x)
var currentPoint = Math.round(x)-1;
thisPointIndex = currentPoint;
chart.series[0].data[currentPoint].select(true);
});
Any ideas?
Example:
http://jsbin.com/ucebar
You're using a fractional grid size, for example 39.7 px. So, with each drag, the div gets offset a pixel to the left. This means that position zero quickly becomes unavailable:
That is: at point 1, ui.position.left will be 38 pixels or less.
Since moving the minimum jump (39.7px) -- towards point 0 -- will take the div outside the bounding rectangle, that move is not allowed.
And, using the nearest integer for grid size will quickly result in misalignment between the grid and the data points.
One way around all this is to:
Delete the grid:[distanceBetweenPoints,0], parameter.
Instead, snap the div upon drag stop, like so:
/*--- Snap to nearest grid.
*/
var gridPos = Math.round (
Math.round (ui.position.left / distanceBetweenPoints)
* distanceBetweenPoints
);
var delta = gridPos - ui.position.left;
var newOffset = $(this).offset ().left + delta;
$(this).offset ( {left: newOffset} );
See it in action at jsBin.
I didnt have time to work out a real solution, but I found that if you drag and drop the slider moves slightly more to the left each time. The reason it can't go back into first place is that after the first drop, there is not enough room anymore. Good luck!
I was able to solve it with the following:
.draggable({
...
drag : function(event, ui) {
ui.position.left = Math.round(ui.position.left / distance_between_points) * distance_between_points;
}
});
I have a table & when I click a cell, it displays a DIV(to the right of the mouse) with absolute positioning.
I want the DIV to display using minus co-ords(positioning), so it never display outside the table('#holiday-planner-table') .
Here's the concept I'm thinking of:
if($('#DayInfo'). is outside of $('#holiday-planner-table')) {
display $('#DayInfo') with minus co-ordinates
} else
{
$(".WeekDay").click( function(event) {
$("#DayInfo").css( {position:"absolute", top:event.pageY, left: event.pageX} );
});
}
It's not a complete solution but you can use $("selector").offset().left or top and $("selector").width() or height to construct two rectangles, check if one is not inside the other and act accordingly.
the logic here is to check if the new div coordinates put the div position + size outside the table position + size. if it will, you set the div coordinates back the size of the div. you can do left and top independently.
this should get you pretty close:
$(".WeekDay").click(function (e) {
var x = e.pageX;
var y = e.pageY;
var $div = $('#DayInfo');
var $table = $('#holiday-planner-table');
if (x + $div.width() > $table.offset().left + $table.width()) {
x -= $div.width();
}
if (y + $div.height() > $table.offset().top + $table.height()) {
y -= $div.height();
}
$div.css({ position: "absolute", top: y, left: x });
});
I'm thinking of something among the lines of:
if (mousex > (tablew-divw)) divx = mousex-divw
else divx=mousex
same thing goes for Y.
Of course, that could mess stuff up if the table actually becomes smaller than the div.
I could be wrong, but are you wanting to create some sort of tooltip functionality? If so, have a look at http://flowplayer.org/tools/tooltip/index.html
I have a #wrapper div and a #grid div nested inside. currently I can scroll around with this function below.
getCursorPos : function(){
// set the empty cursor object
var cursor = {};
//get the offset from the left of the grid container
var grid
//offset loop
$(function getCursorPos(){
grid = $('#grid').offset();
setTimeout(getCursorPos, game.loopSpeed);
});
//continuosly get the position
var that = this;
$(document).mousemove(function(e){
//if game mode is menu exit
if(game.mode === 'menu'){
return;
}
// NOTE: this looks a litle over done but don't remove anything
// its like this because javascript uses floating points
// and so in order to line up to the nearest hunderedth I
// had to make the cursor and div position intergers by
// muliplying by ten. one the two are added I reduced them
// and rounded them.
that.x = Math.round(((e.pageX * 10) - (grid.left * 10)) / 10);
that.y = Math.round(((e.pageY * 10) - (grid.top * 10)) / 10);
});
},
the problem is that the mouse coordinates only update when the mouse moves. is there any way to get the coordinates with out moving the mouse?
You always have the latest up-to-date coordinates of the mouse from the last mouse move, clarify why those are not useful to you.