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);
}
}
Related
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)
I have an element with two markers over it. The first marker sets minimum value of something, and the second, maximum. That said, I want to prevent the "maximum" one be lower than "minimum" one. I'm using jQuery UI's draggable as a wrapper around HTML5 drag and drop, and here's my code:
component = {}; // actually, it's a real component but let's pretend it's simply a plain-object.
component.containerWidth = $('.marker').parent().width();
$('.marker').each(() => {
$(this).draggable({
containment: 'parent',
axis: 'y',
create: (event, ui) => {
if ($(this).hasClass('min')) {
component.minMarker = $(this).position().top;
} else if ($(this).hasClass('max')) {
component.minMarker = $(this).position().top;
}
},
drag: (event, ui) => {
const isDraggingMin = $(this).hasClass('min');
const isDraggingMax = $(this).hasClass('max');
const isMinLower = ui.position.top + $(this).height() <= component.maxMarker;
const isMaxHigher = ui.position.top - $(this).height() >= component.minMarker;
if (isDraggingMin && isMinLower) {
// set actual markers' positions
// do something
} else if (isDraggingMax && isMaxHigher) {
// set actual markers' positions
// do something
} else {
event.preventDefault();
}
}
});
});
The problem is that, when preventDefault gets invoked, the dragging doesn't work anymore until I stop dragging and start it over. It means, if I drag a "minimum" marker as close to "maximum" marker as event.preventDefault() gets fired, then no matter how and where I drag, the marker stays. If I release it and then start dragging again, it drags until it gets into the same conditions.
Simply setting css properties via $(...).css({left: ...}) does not work, and perhaps it shouldn't.
So how do I solve it then? How can I allow dragging without having user to release and grab a marker once in a while when they occasionally approach another marker?
The codepen: http://codepen.io/rishatmuhametshin/pen/WrvoKd
I have some other thing in mind for you,, see this code and I hope that can fit in your need,, or at least can help you to see this through another lens (I'm wearing glasses btw :)
http://codepen.io/mkdizajn/pen/bEdgLQ?editors=001
in place for that preventDefault call I used this peace of code:
$(event.target).css('top', $(event.target).data('startpos') )
in relation to:
$(event.target).data('startpos', ui.position.top);
My idea was to track start/stop evt and to do some stuff there,, you can see and read my comments on codepen,, hope that can be of some help,
cheers, k
You need to change your if statement to this, and get rid of the preventDefault:
if ( draggingMin ) {
if ( isMinLower ) {
component.minPosition = ui.position.top;
} else {
ui.position.top = component.minPosition;
}
} else if (draggingMax) {
if( isMaxHigher ){
component.maxPosition = ui.position.top;
} else {
ui.position.top = component.minPosition;
}
}
I noticed that JointJS links can be removed by hovering over them and clicking the big red X that appears. But I was wondering if it is possible remove an element once it has been created, without knowing the variable name.
onCreateButtonClick(function(){
var rect = new joint.shapes.basic.Rect({
position: { x: 100, y: 30 },
size: { width: 100, height: 30 }
});
graph.addCell([rect]);
});
onRemoveButtonClick(function(){
//removeRectangle here?
});
My question is: can I remove this rectangle in the second function?
Removing elements by ID can simply be done as: graph.getCell(cellID).remove(). In your onRemoveButonClick(), you have to somehow know which element you want to remove. This depends on you application UI but you can, for example, do something like:
var selected;
paper.on('cell:pointerdown', function(cellView) {
selected = cellView.model;
});
onRemoveButtonClick(function() {
if (selected) selected.remove();
});
I implemented the removal of an element by single clicking the element , using the cellView arguement directly.
paper.on('cell:pointerclick', function(cellView, evt, x, y) {
cellView.remove();
});
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/
Hay, I'm writing a simple web based image maker, and would like to know if anyone has any idea's how to implement a lasso tool. I'd like to be able to save all the points so that I can easily send them to a database and retrieve them at a later date.
As a basic plug-in, this would probably look something like this:
$.fn.extend({
lasso: function () {
return this
.mousedown(function (e) {
// left mouse down switches on "capturing mode"
if (e.which === 1 && !$(this).is(".lassoRunning")) {
$(this).addClass("lassoRunning");
$(this).data("lassoPoints", []);
}
})
.mouseup(function (e) {
// left mouse up ends "capturing mode" + triggers "Done" event
if (e.which === 1 && $(this).is(".lassoRunning")) {
$(this).removeClass("lassoRunning");
$(this).trigger("lassoDone", [$(this).data("lassoPoints")]);
}
})
.mousemove(function (e) {
// mouse move captures co-ordinates + triggers "Point" event
if ($(this).hasClass(".lassoRunning")) {
var point = [e.offsetX, e.offsetY];
$(this).data("lassoPoints").push(point);
$(this).trigger("lassoPoint", [point]);
}
});
}
});
later, apply lasso() to any element and handle the events accordingly:
$("#myImg")
.lasso()
.on("lassoDone", function(e, lassoPoints) {
// do something with lassoPoints
})
.bind("lassoPoint", function(e, lassoPoint) {
// do something with lassoPoint
});
lassoPoint will be an array of X,Y co-ordinates. lassoPoints will be an array of lassoPoint.
You should probably include an extra check for a "lasso enabled" flag of some sort into the mousedown handler, so that you can switch it on or off independently.
Heres a plugin that seems to do just that
http://odyniec.net/projects/imgareaselect/examples.html
I haven't used it.
I've never made one, but if you're looking to make your own, id imagine they work like
onmousedown record initial mouse coords(this is the coords of the corner of lasso box)
onmousemove subtract new coords from initial coords to get width and height of div being used for the visual lasso box.
onmouseup, stop listening to mousemove, do something with coords and dimension of any lasso box existing