I'm trying to make a click and drag the background in Javascript, so I made this fiddle. But it has a problem.
When you click and drag to the left, the background moves to the right, so I track the position of the mouse, compare it to the mousedown, and with the difference I scroll the body. But, when it reaches to 0, the difference is negative so if you move past that difference and then move to the right again, you have to move the amount of pixels that you are past, which makes it weird.
So to fix this, I put this code:
if(difX < 0){
md.x = mm.x;
}
which makes that, if the difference is less than 0 (i.e: reached the edge), the mousedown position is the same as the mousemove, so that when you move to the other side, the difference is no longer negative and can start increasing again.
The problem is that it jumps when you reach the edge.
I did this only with the X position, but I'll do the same for the Y once I solve it. Thanks in advance!
Nevermind, solved it out, the problem was the the sl variable didn't change when it reached a negative difference, so it used the one stored on mouseup and it jumped because of the difference between those numbers, here's the solved fiddle
Related
I'm using the draggable='true' attribute to make a draggable element in my website, but I've run into a cosmetic issue.
The dragging is basically done to reorder elements, so I want to pick them up, drag them into their new position, and then simply release them into the new position, but as soon as I let go, the element will slide back to it's original position before moving to the new position.
See this image:
How can I keep this from happening? I want to skip the "goes back" part.
$("div").on('dragend', function(e){
e.preventDefault();
e.stopPropagation();
$("div.slide.placeholder").replaceWith($(this));
updateSlides();
})
Edit:
This issue has been confirmed as localized to Mac. It is very similar to the whole window-bounce effect.
I tried coding what you want using jquery.
-->http://jsfiddle.net/oLc2f3kp
the element that has class .drag_item can be draged. if you release it anywhere that isn't on the area of element that has class .release_area, it will go back to the position before.
I hope it's what you want. if you have any question about this code,ask me then :D
UPDATED I tried over many times now I have the solution
$('div[class=dragable]').on('dragend',function(e){
$(this).css('top',e.originalEvent.pageY-($(this).height()/2));
$(this).css('left',e.originalEvent.pageX-($(this).width()/2));
});
I can't get the position while I'm draging it (the position I got is the original position of the element before start dragging") so the only way( so far I have tested now) is to get the position of your mouse when you drop it and set left and top are same as the position of your mouse.
I have only tested in Chrome. anyways I don't suggest you to do this.
I'm trying to position an absolute positioned div using jQuery offset() function.
The idea is to position it at a fixed offset from another element of the DOM. This happens in a quite complex environment with multiple nested divs.
The strange thing that happens is that calling it twice gives two different results. To me it seems there is no reason for this, although I am quite new at jQuery so I could be oversighting something obvious.
I do think that
var pos = $(document.getElementById(someElementInTheDOM)).offset();
$(document.getElementById(MyDiv)).offset( pos );
should position MyDiv always in the same place, even if I call this code some 10 times. That's what correctly happens in this fiddle. Click on the magnifying glass several times, everything is ok.
But as soon as I start adding display:none and display:block properties the thing gets disrupted. I tried to bring it down to basic and I created a fiddle here. To see what I mean press on the magnifying glass, click on the magnifying glass again, click on the magnifying glass once more, close the div by the white "X", click on the magnifying glass once more.
Any clue what's going on?
You just have to change the order:
document.getElementById("iuocboun_filter_window").style.display="block";
$(document.getElementById("iuocboun_filter_window")).offset( pos );
instead of
$(document.getElementById("iuocboun_filter_window")).offset( pos );
document.getElementById("iuocboun_filter_window").style.display="block";
EDIT:
Explanation: The offset does not work on hidden elements, thats why you have to make it first visible and than set the offset. ;)
I am trying to animate a line on scroll but I am at a loss at the moment. The final result should be similar to how the lines animate on this site, http://www.teslamotors.com/goelectric#range (you have to scroll a little bit to get to the lines).
There is a static gray line, and then a red line that gets height when the user scrolls down. If the user scrolls up while part, or all of the red line is visible, height will be subtracted from the red line. BUT nothing should happen to the red line until the user has scrolled 200px down the page.
I have created a fiddle for this problem and I am pretty sure I know where my problem lies, but I do not have an answer for how to fix it. I think it is because my variables currentScrollPosition and lastScrollPosition in function countUp135 are always equal to each other.
Any help would be greatly appreciated. Here is my fiddle:
http://jsfiddle.net/tripstar22/2HDVA/5/
Thanks in advance!
Although there is many ways to do this in JS, I'll offer an alternative css method. Instead of animating a line on scroll you can just give the illusion that the line is animating. Check out this fiddle here. As you can see The fixed red element will follow the window on scroll and fill in the transparent area between the divs, making it seem like a red line is being drawn.
You can overlay an image with a transparent line running through it instead of grey divs to minimize the code even more, or you can add js to make the animation more fancy.
There are a lot of functions in your fiddle, where I do not understand why you should need them nor what they do. An updated version of your fiddle, seems to do what you want. There was no need for all thoses methods.
This seems to be enough:
var scrollTop = getScrollTop();
if (scrollTop > 200) {
addHeightPath1(scrollTop - 150);
} else {
addHeightPath1(0);
}
I'm also wondering about the function stoppedScrolling, where an asynchronous time function is beeing started, but you try to get an result from the stoppedSrolling() function, that is never passed as a return.
I made a test game where a guy shoots another guy, that's pretty much it.
The problem is I can't properly target the enemy. I'll show you what I mean:
As you see, the bullets hit the enemy fine, but they still hit it even when I go down, the bullets hit when their style.left is equal to the enemy's style.left. I tried to add another exception like this: If(bullet.style.left == document.getElementById("foe").style.left && bullet.style.top >= document.getElementById("foe").style.top) and it doesn't work..
I'm sure that I'm making a pretty stupid mistake here.
Here's the code: http://jsfiddle.net/dg89c/2/
well..The target seems to me to be top=0 and the bullet will always be top>0 as it is below the target.
0,0 of the screen is top left. As u go down, top increases. U read this vale (top:x) as x distance from top of page.
You have a hit if the bullet's top is between (in pseudocode) enemy.top and enemy.top + enemy.height. Otherwise, it's not a hit.
Can anyone help me that how can I grab that event when mouse enter from left side or right side not from anywhere to specific area in Javascript.I got code for coordinates but that's not solve my issue.For x,y coordnates i use this chunk of code
tempX = e.pageX
tempY = e.pageY
Thanks in advance
You are on the right track
using
document.observe("mousemove",function(e){
console.log("X: "+e.pointerX()+", Y: "+e.pointerY());
});
it gets the X and Y coordinates of the mouse on the document
I would check if any of the X is less than 10 - to give a little error room and then run code based on coming in from the left side and make sure you set a flag that you are handling it - otherwise you will have multiple calls to the same handler.
the right side is a little more tricky as you need to know how wide the screen is and then add a little error on the right side as well.
You can try this(might not be an optimized approach) :
Have a hidden/invisible div on left as well right side of page. Like a long strip which covers the whole page. And once mouse over event is triggered on these div, you can make corresponding flag true in respective cases.
so if leftFlag is true --> do the necessary
do similar exercise of righFlag.
Note :
Making opacity very low (opacity: .01) makes div invisible. And event also gets triggered.