How stop draggable JcanvaScript library?
For example a picture, in cases when drag-and-drop goes beyond the canvas element and I don't want to allow pictures to go beyond it.
jc('#img1').draggable({
drag: function(){
point=jc('#img1').position();
if(point.x<0){
//here stop draggable image
//these options don't work
//this.draggable('pause');
//return;
//jc.pause();
}
}
});
Wow! This was actually a really horrible problem. What makes it really horrible is that JCanvasScript doesn't fire onRelaseOutside events.
I've posted a solution here: http://jsfiddle.net/qpuGw/
You will not be able to drag the circle closer that 100px from the left-hand side.
The gist is:
If your object moves outside of a bounding box: (a) set clone it and (b) set it to invisible.
If your object moves back inside your bounding box: (a) delete the clone and (b) set your object to visible again
If the user releases the object: do the same as (2) above.
Good luck!
Related
Pretty simple question but nothing I try works. Basically I'm using drag events (dragstart and dragend) and once I've started dragging, the cursor is always the stop sign thing (the circle with a horizontal line through it).
I've tried: Adding a class to the body and changing the cursor with css. Setting event.dataTransfer.dropEffect = 'move', e.dataTransfer.effectAllowed = 'move'.
I've basically scoured all the google results and nothing has worked. Surely this is something that you can change. I don't want users thinking they can't drop domething somewhere because of this.
I've this project where when I click on the plant the scale changes and show some texts.
http://www.gaianet.com.br/Nissin-teste/
I've this project where I should click on a planet and scale's it and show another div by opacity.
Right now i've been trying to do by js using toggle class but I need some help to make it work right.
If I click on first planet it works fine, but when this planet is 'selected'and I click on another all the classes start to toogle and the scale and opacity goes crazy.I don't know how to make a 'reset' to the original css if I click on another planet when one has already changed the class.
$(".layer.planeta1").click(function(){
$(".institucional").toggleClass("escala-planeta repo1-1");
$(".planet-info1").toggleClass("opacidade-planeta ");
$(".educacao").toggleClass("escala-menor-planeta repo1-2");
$(".pdv").toggleClass("escala-menor-planeta repo1-3");
});
$(".layer.planeta2").click(function(){
$(".educacao").toggleClass("escala-planeta repo-2-1");
$(".planet-info2").toggleClass("opacidade-planeta ");
$(".institucional").toggleClass("escala-menor-planeta repo-2-2");
$(".pdv").toggleClass("escala-menor-planeta repo-2-3");
});
$(".layer.planeta3").click(function(){
$(".pdv").toggleClass("escala-planeta");
$(".planet-info3").toggleClass("opacidade-planeta ");
$(".educacao").toggleClass("escala-menor-planeta");
$(".institucional").toggleClass("escala-menor-planeta");
});
I'm sure there should a way better way to do that but I have no idea how.
Thanks a lot
I think I am clear on the acceptance criteria, but just to be sure, here is what I am going with:
When I click on a planet, I want it to scale.
If I click on a planet that is already scaled, I want it to reset to original scale.
When I click on a planet, I want to 'reset' any other planets to their original scale, and scale the planet I clicked on if it is not already scaled.
Given that, you might try being more explicit about what needs to happen when you click on a 'planet':
$('.planet').on('click', function(event){
$('.planet').removeClass('scale'); // Explicitly remove the scale class from other planets
$(this).toggleClass('scale'); // Scale the one I am clicking on, or if it's already scaled, revert it
});
A simplified example demonstrating this: http://codepen.io/anon/pen/xbMJRd
If it is creating so much of hassle using then I would use jQuery addClass and removeClass instead of toggleClass.
Another suggestion, I would save jQuery dom elements in a variable so that I dont search on entire dom again and again.
when cursor hovers the slider, background also moves with cursor hover.(link below)
here is link to site using this effect.
telemaruk
what is this effect called? and how to achieve this effect? any useful link plz
it is some kind of jquery plugin or simple css3 effect. I'cant figure it out please help.
I just created a Fiddle to show you what I meant with my comment on your question. You should be able to go further from there.
document.addEventListener('mousemove', function (event) {
if (window.event) { // IE fix
event = window.event;
}
// Grab the mouse's X-position.
var mousex = event.clientX;
var header = document.getElementById('header');
header.style.backgroundPosition = mousex/3 + 'px 0';
}, false);
As to explain what's happening here:
It binds a function on the mousemove event on document.
It grabs the current mouse position using event.clientX.
It changes the background-position of element #header with 1/3rd of the speed (mousex/3).
Check it live: FIDDLE
If you want the exact same thing as that website you linked, you should have a few divs over each other, and move their background positions at another speed. In this example it moves 1/3 from the speed of your mouse.
have a look at these plugins, Its parallax effect your going for.
http://stephband.info/jparallax/
http://bmc.erin.utoronto.ca/~walid/newmediasite/parallax/files/parallax.html
What you need is to have three images one over the other.
You need to set their opacity based on you requirement.
Set the z-index of the images so that they overlap and make the position absolute.
On mouseover, move the images, the top image more than the other two, the second one more than the last.
This will give the desired effect.
I've been working on making a change to the jQuery add-on tooltipsy so that it locks on-to the mouse.
Getting it to do this is a simple task, all you have to do is change the showEvent to 'mousemove' however, because that is the show event, every time you move the mouse it has to redo the entire tooltipsy function for every pixel you moved, so the box doesn't keep up properly with the mouse.
Also, because of a problem with the lagging box and mouseleave, the box doesn't usually hide properly on mouseleave (because the function as to be run for every pixel your mouse moves so it's still computing after you mouseout)
This problem would ordinarily be easy to solve. All you would have to do is split the show hide and move into three different events. (mouseenter, mouseleave, and mousemove respectively) however, getting this to work in the context of tooltipsy is a much more complicated matter.
Here is the example:
http://jsfiddle.net/MarkKramer/HwpEs/2/
Notice how on the third div I got it to follow the cursor, but it is using mousemove as the showEvent, when really mousemove should only be used to get the coordinates of the tooltips.
If someone can solve this I will be very grateful.
Update: I tried putting if alignTo = cursor in a mousemove, which would work except that the function messes with the variable's scope.
That plugin seems to be way too complicated if you want basic tooltip behavior.
The code for a tooltip like that is quite simple:
$('#tooltip-container').mousemove(function(e) {
$('#tooltip').css('left', e.pageX + 20);
$('#tooltip').css('top', e.pageY + 20);
});
$('#tooltip-container').mouseleave(function() {
$('#tooltip').hide();
});
$('#tooltip-container').mouseenter(function() {
$('#tooltip').show();
});
If you want a live demo, here ya go: http://jsfiddle.net/DR4Wv/6/
I am using a drag script to move an object along the x axis.
Along that same axis there is another object.
I want to use onmouseover so when the cursor is over that object and I'm dragging my object, something happens.
Now, this won't work because while dragging, the dragged object is always over other objects.
How can I make JavaScript ignore the dragged object?
Edit : I use http://www.webtoolkit.info/javascript-drag-and-drop.html for dragging.
I recently encountered this issue and ended up using this jQuery plugin:
http://www.48design.de/news/2009/11/20/kollisionsabfrage-per-jquery-plugin-update-v11-8/
This is great for detecting object collision. However, to determine when the mouse cursor is over the object, the trick I used was to create a 1x1 absolute inline-block div and always have that be positioned where the mouse cursor is.
So, when the user is dragging, to check and see if objects are colliding, use:
if ($('.cursorBlock').collidesWith('.staticBlock')) {
// objects are colliding
} else {
// objects are not colliding
}
So if you keep the 1x1 .cursorBlock with the mouse cursor as you drag, when the cursor is over the .staticBlock element, the .cursorBlock element will be too, and the collision will be detected, even though the real object you're "dragging" will be between the two.
I know you didn't tag your question with jQuery, but I thought I'd answer anyhow in case this helps you.
Have a look at the ondragenter event:
https://developer.mozilla.org/en/DragDrop/Drag_and_Drop
http://msdn.microsoft.com/en-us/library/ms536925%28v=vs.85%29.aspx