Develop Reference

Translate object position when clicking

I'm searching for the method to move my 3D object (.gltf format) to an alternate position when the box is checked as well as moving back to the initial position when the box is unchecked. However, I'm not sure what is the proper way of doing this.
I created an object transition function but the object doesn't seem to move according to the checkbox.
here's my function code
function zoom() {
var move = document.getElementById('controllr');
if (move.checked) {
model2.position.set(0, 50, 0);
} else {
model2.position.set(0, 25, 0);
}
}
Thank you in advance for any solution.
I still can not figure out how to achieve my intention so I created a new post with full code here.
Moving object on checkbox event

When are you actually calling the zoom function? If you put this code inside an event listener, it should work.
var move = document.getElementById('controllr');
move.addEventListener('change', (e) => {
if (e.currentTarget.checked) {
model2.position.set(0, 50, 0);
} else {
model2.position.set(0, 25, 0);
}
}

Add and remove function onclick with js

So I want to add a function that when I click a div it moves, but when I click something else it moves back to its original position, I want to use gsap here too. I tried using an if else statement but I didn't know want to put in here(The part where there is two stars):
let btnSide1 = document.querySelector('.button-side-one'),
btnSide2 = document.querySelector('.button-side-two'),
btnTop = document.querySelector('.button-top'),
btnBig = document.querySelector('.button-big');
if (btnSide1 = **active**) {
gsap.to(btnSide1, .5, { x: 3 })
} else {
gsap.to(btnSide1, .5, { x: 0 })
}
here is the codepen link for this: https://codepen.io/sowg/pen/GRvQxpN

I figured this out I used toggle class list for this,
Here is how it works:
// Variables
btnSide1.onclick = function () {
btnSide1.classList.toggle("activex1");
};
.activex1 { left: 30vmin !important }
So when I click on the div it moves position

You have a typo.
if (btnSide1 === active)

How to know which handle was used when resizing an element in jQuery

For my project I need to know which border ('e' or 'w') the user take to resize a div. So is it possible to know or not?
I got that:
$(divProjet).resizable({
handles: "e,w",
grid: 71,
maxWidth: 1498,
minWidth: 69,
containment: $($(this).parent()[0]).parent()[0],
start: function () {
},
stop: function (event, ui) {
var numDayModif = (ui.size[0] - ui.originalSize[0]) / 71;
}
});

Since jQuery UI inserts elements into your resizable <div> for each handle, you can work out which one is being targeted each time a resize begins:
start: function (e) {
var className = e.originalEvent.target.className.split(" ").pop();
var side = className.replace("ui-resizable-","",className);
console.log(side); // e or w
}
e.originalEvent.target is the 'handle' (DOM element)
We get the full classname, split the classes, and get the last one using pop(). (The last class is something like ui-resizable-e
Remove the 'ui-resizable-' bit from your string using replace() and you receieve what's left (e or w)
Note: It'll of course work should you choose to use North and South handles too.
JSFiddle

in gamequery I am trying to move a selected object with mousetracker by clicking on the object, and dragging it

I know I can use mousedown selection for it, but I am wanting the clicked on sprite to follow my mouse, there is a mousetracker function of sorts mentioned in the api; but unfortunately there are no examples of this other than stating that it allows mouse detection.
//add mousedown events for yarnballs.
$(".gQ_sprite").mousedown(function() {
clickedDivId = $(this).attr('id');
if(clickedDivId.charAt(8) == "-")
{
currentClickedDivId = clickedDivId
$(document).mousemove(function(e){
spriteXPosition = e.pageX
spriteYPosition = e.pageY
});
}
});
I have the location of the mouse selected, just not sure how to get the selected sprite to follow it.
any help would be greatly appreciated.

What Mati said is correct: $.gQ.mouseTracker allows you to access the mouse's state outside of an event handler. The example he gives is correct but it can't be used to move a gQ object (sprite, tile-map or group) around because you'r not allowed to use the .css() function for those. Doing so will break collision detection.
If what you want is to move a gQ object you should do this instead :
$('#' + currentClickedDivId).xy($.gQ.mouseTracker.x, $.gQ.mouseTracker.y);
But since this should be done in a periodical callback, the smoothness of the dragging will depend on the refresh rate.
If you want to use event handlers instead you could modify you code to look like this (without using the mouseTracker):
var clickedDiv;
var clickedDivOffset = {x:0, y:0};
$(".gQ_sprite").mousedown(function(e) {
clickedDiv = $(this);
clickedDivOffset = {
x: e.pageX - clickedDiv.x() - $().playground().offset().left,
y: e.pageY - clickedDiv.y() - $().playground().offset().top
};
});
$(".gQ_sprite").mouseup(function() {
clickedDiv = false;
});
$().playground().mousemove(function(e) {
if(clickedDiv){
clickedDiv.xy(
e.pageX - clickedDivOffset.x,
e.pageY - clickedDivOffset.y,
);
}
});
This will implement a drag-n-drop effect. If you want the clicked element to stick to the mouse you will have to slightly adapt the code but the basics will remain the same.

According to the documentation:
If the mouse tracker is enabled you can check the state of the mouse at anytime by looking into the object $.gQ.mouseTracker where x and y contain the position of the mouse and 1, 2 and 3 a boolean value where true means that the first, second or thrid button is pressed.
Observe the output of:
$("#playground").playground({ refreshRate: 60, mouseTracker: true });
$.playground().startGame();
$.playground().registerCallback(function(){
console.log( $.gQ.mouseTracker );
}, 1000);
To make those divs actually follow the cursor, you have to use .css()
$('#' + currentClickedDivId).css({
top: $.gQ.mouseTracker.y + 'px',
left: $.gQ.mouseTracker.x + 'px'
});

Preventing hover on elements that cover a hovered element

I am working with SVG and Raphael JS. I have a situation where if you hover over an element a second element appears on top of the first element. When the second element appears the mouse is now over the second element and therefore the mouseout event fires on the first element and hides the second element. This continues in a loop. How can I prevent mouseout from occurring on the first element or prevent the hover on the second element?
In other examples I have tried I get a flickering effect. Here is a simplified version of what I'm doing in Raphael...
window.onload = function () {
var paper = Raphael("container", 1000, 900);
var rect_one = paper.rect(30, 30, 150, 150).attr({fill:"#fff"});
var rect_two = paper.rect(50, 50, 60, 60).attr({fill:"#fff"});
rect_two.hide();
rect_one.mouseover(function () {
rect_two.show();
});
rect_one.mouseout(function () {
rect_two.hide();
});
};

If you place your Raphael elements in a set then you can fix the problem:
window.onload = function () {
var paper = Raphael("container", 1000, 900);
var group = paper.set()
var rect_one = paper.rect(30, 30, 150, 150).attr({fill:"#fff"});
var rect_two = paper.rect(50, 50, 60, 60).attr({fill:"#fff"});
group.push(rect_one);
group.push(rect_two);
rect_two.hide();
group.mouseover(function () {
rect_two.show();
});
group.mouseout(function () {
rect_two.hide();
});
};​
http://jsfiddle.net/agdMG/

I rethought your solution, and came up with the following approach...
Rather than trying to trigger on a onmouseout event (which is triggered by the mouse going over the text box that contains the state name, thus the flickering that occurs as you move the mouse across the state/name area), I thought it might be more efficient to simply cache the currently-active state in a variable, and on mouse enter, test to see if the cached state matches the state that you're mousing over.
See the attached jsFiddle (a fork of your own), and the comments I've included in that script.
http://jsfiddle.net/XKt9U/8/