I have implemented my own scrolling, in a ticker with Jquery because the normal scrolling doesn't work too well when there's already css animation involved.
What I want to have happen is when you click and drag on the controller, which is a div that contains the ticker, the ticker moves. When you release the mouse button, it stops. No problem there. The problem comes in, when I don't release the mouse button, but I do take the mouse off of the controller. When this happens track_mouse_pos doesn't stop. So clicked or not when I put my mouse back on the controller I am scrolling.
$("#controller").mousedown(function (event) {
var start_x = event.clientX;
var start_y = event.clientY;
$("#controller").on('mousemove', {start_x: start_x}, track_mouse_pos);
});
$("#controller").mouseup(function () {
$("#controller").off('mousemove', track_mouse_pos);
});
How can I turn off ('mousemove', track_mouse_pos);? Is it ok to just have a .mouseup and .mouseoff line doing the same thing?
You need to check if the mouse button pressed in the "track_mouse_pos" function.
function track_mouse_pos(e){
if(e.which!=1) {$("#controller").trigger('mouseup');return}
...
}
Related
Go to kitchensink, using middle button of mouse, try to click and hold the mouse on empty area of canvas and move the mouse.
The selection rectangle is displayed. How to disable this? I ask because, I have middle mouse button click and drag bound to canvas pan in previous version of fabric. Upgrading to new version, the canvas is behaving in unexpected manner.
I've tried to disable selection on the canvas on mouse down if the event.button == 1 by doing canvas.selectable = false; in mousedown and set it to true back in mouseup event handler.
That didn't work.
Any ideas how to disable the selection using middle mouse button click and drag?
The problem is that fabric recently enabled click for other button rather than left.
The point is that left is handled, right is handled, middle is not...
I guess the middle button follow the flow of the left button just because it is not the right one.
here a snippet from the mousedown handler function of fabric as at version 1.7.3 ( current as feb 2017 ).
__onMouseDown: function (e) {
var target = this.findTarget(e);
// if right click just fire events
var isRightClick = 'which' in e ? e.which === 3 : e.button === 2;
if (isRightClick) {
if (this.fireRightClick) {
this._handleEvent(e, 'down', target ? target : null);
}
return;
}
... continue normal flow ...
so this require a proper fix.
Posting a custom event as suggested is a patch, but normally this should not happen at all.
(since i m a mantainer for the project i m going to fix this)
Prasanth, your problem is simple. You have typo. Try to use like this:
canvas.selection = false;
Here is a code which you can try:
canvas.on('mouse:down',function(e){
canvas.selection = true;
});
canvas.on('mouse:down',function(e){
if( e.e.button == 1 ) {
canvas.selection = false;
};
});
I am implementing drag'n'drop functionality on the page. The idea is that user can start dragging image from special place and drop it (release left mouse button) inside textarea, where special tag insertion will occur.
I have no issues with the dragging itself, the problem I got is that I can't determine position of the mouse inside textarea. I know x and y positions from mouseup event and I definetely know the mouse pointer is inside textarea, but can't determine at which position do I need to insert the required tag. Since the focus is not inside the textarea, selectionStart and selectionEnd properties are 0. Also, it is worth noticing that I prevent default behavior by returning false in mousemove handler - otherwise default behavior will put the image itself inside the textarea (which is extremely bad for base64 images).
Below is the code I currently have.
window.onPreviewItemMouseDown = function (e) {
var curTarget = $(e.currentTarget);
var container = curTarget.parent();
window.draggingImage = funcToGetId();
$(document).on("mousemove", window.onPreviewItemDragged);
$(document).on("mouseup", window.onPreviewItemDropped);
};
window.onPreviewItemDragged = function (e) {
return false;
};
window.onPreviewItemDropped = function (e) {
var target = $(e.target);
$(document).off("mousemove");
$(document).off("mouseup");
if (target[0].id === ID_TEXTAREA_TEXT) {
// here I need to get mouse pointer position inside the text somehow
}
return false;
};
Any help is appreciated.
In your case it would be easier to use native ondragstart event instead of a complex mousedown-move-up implementation, and manipulate the data to drop. Something like this:
document.getElementById('img').addEventListener('dragstart', function (e) {
e.dataTransfer.setData("text", '[img]' + this.id + '[/img]');
});
A live demo at jsFiddle. Or a delegated version. Notice that you can also delegate to the "special place" element, which might make the page running a little bit faster.
I'm getting this really weird behavior..
Here is a simplified version of my code:
DOWN = 40;
UP = 38;
$(document).on("keydown", "#text_input", function(e) {
if (e.keyCode == DOWN) {
$("#list").focus();
}
});
$(document).on("keydown", "#list", function(e) {
if (e.keyCode == UP) {
$("#text_input").focus();
}
});
So basically, if the user hits DOWN key while "#text_input" has focus, the focus shifts to the "#list".
In turn, when the user has focus on "#list" and then hits UP key, "#text_input" regains its focus.
This works fine, EXCEPT the cursor in the "#text_input" automatically moves to the front of the text value when it regains focus. I want to prevent this so that the user can continue typing from where he left off before switching focus to the "#list."
I searched on Stackoverflow to find a way to move the cursor to the end of the text input, and found this solution:
$(document).on("focus", "#text_input", function() {
value = $("#text_input").val();
$("#text_input").val("");
$("#text_input").val(value);
});
This actually did move the cursor to the end ONLY WHEN I switched focus using the Mouse event. For example, when I CLICKed on the blank part of the page and then RECLICKed the "#text_input," the cursor did move to the end of the input.
However, strangely enough, this does not work when I regain focus by using my function, namely Pressing the DOWN key and then the UP key. The cursor still moves to the front of the textfield.
Sorry for making the question confusing,, but this is the best I can do :((
Does anyone know why this is occurring and any possible solution??
Thanks!!!
PS
Just added it to JSFiddle
http://jsfiddle.net/jakeaustin5574/AU9CA/3/
you are almost here.. change your code to be:
$(document).on("focus", "#text_input", function() {
value = $("#text_input").val();
$("#text_input").val("");
setTimeout(function(){
$("#text_input").val(value);
}, 0);
});
If that doesnt fix it, id like to see it on jsfiddle
I'm making a mobile web app and am trying to make a star rating system that resambles the one in itunes where you can swipe over the stars and lift you finger on the star you want to choose. I'm using jQuery mobile. Using the swipe event doesn't seem to do the trick, while it stops the web page to stick to your finger (you can swipe around the area you attach the event to without the page itself moves) it is intended for either "swipe left" or "swipe right". Not "swipe away as you want".
Is there a suitable event i can use that also enables me to get the coordinates of the finger position?
Example code:
$("#mapPage").live("pageinit", function () {
$('div.stars').swipe(function() {
console.log("swiped");
});
});
Example 2:
$('div.stars').scrollstart(function(event) {
event.preventDefault();
// stuf in here only triggers in scroll start
// but i want i to trigger as the finger position gets updated
});
I figured it out. This is the code i used:
$('div.stars').bind('vmousemove', function(event) {
event.preventDefault();
console.log('scroll position: ' + event.pageX);
});
Anyone have any idea how to detect a mouseup event on a scrollbar? It works in FF, but not in Chrome or IE9.
I set up a quick demo: http://jsfiddle.net/2EE3P/
The overall idea is that I want to detect a scrollEnd event. There is obviously no such thing so I was going with a combination of mouseUp and timers, but mouseUp isn't firing in most browsers! The div contains a grid of items so when the user stops scrolling I want to adjust the scroll position to the nearest point that makes sense, e.g. the edge of the nearest cell. I don't, however, want to automatically adjust the position if they're in the middle of scrolling.
I'll also happily accept any answer that gives me the equivalent of scrollEnd
found a solution that works without timers but only if you are scrolling the complete window.
switch(event.type){
case 'mousedown':
_btnDown = true;
//THIS IS ONLY CAUSE MOUSEUP ON SCROLLBAR IS BUGGY
$(document).bind('mousemove',function(event){
if(event.pageX < ($(window).width() - 30)){
//mouse is off scrollbar
$(this).unbind(event);
$(this).trigger('mouseup');
}
});
break:
case 'mouseup':
//do whatever
_btnDown = false;
break;
}
pretty dirty .. but works.
Using jquery there is a .scroll event you can use. Maybe use a global variable to keep track of when .scrollTop() (it returns the number of pixels there are above the screen) has stopped changing? Still creates a race condition, but it should work.
Answering my own question so I can close it -- there is no good solution to this, so timers it is...
I was handling the same problem. For me IE9 don't emit mouseup event for scrollbars. So, I checked and on IE9 when you "mouseup" it emits a mousemove event. So what I did was monitor scrolling, and monitor mousemove. When user is scrolling, and a mousemove event happens, then I understand it as a mouseup event. Only do this check for IE9, cheching the proto property availability. The code will also run for Opera, but Opera has the mouseup and then no problem for me when both events happens. Here is the code, I write AngularJS + ZEPTO code, so get the idea and write your own code, don't expect to copy&paste this code directly:
// Global for scrolling timeout
var q;
// Action to do when stop scrolling
var updatePosition = function() {
// Put the code for stop scrolling action here
}
$(document).on('mousemove', function(e) {
console.log('MOUSE MOVE ' + e.pageX + ',' + e.pageY);
if(!('__proto__' in {})) {
// for IE only, because it dont have mouseup
if($scope.scrolling && $scope.mouse_down) {
console.log('FAKE MOUSE UP FOR IE');
// Only simulate the mouseup if mouse is down and scrolling
$scope.scrolling = false;
$scope.mouse_down = false;
// Update Position is the action i do when mouseup, stop scrolling
updatePostition();
}
}
});
$(window).on('scroll', function(){
console.log('SCROLLING');
// Set the scrolling flag to true
if(!$scope.scrolling) {
$scope.scrolling = true;
}
// Stop if for some reason you disabled the scrolling monitor
if(!$scope.monitor_scrolling) return;
// Monitor scroll with a timeout
// Update Position is the action i do when stop scrolling
var speed = 200;
$timeout.cancel(q);
q = $timeout(updatePostition, speed);
});
$(window).on('mousedown', function() {
console.log('MOUSE DOWN');
// Stop monitor scrolling
$scope.monitor_scroll = false;
// Set that user is mouse down
$scope.mouse_down = true;
});
$(window).on('mouseup', function() {
console.log('MOUSE UP');
// Enable scrolling monitor
$scope.monitor_scroll = true;
// Change mouse state
$scope.mouse_down = false;
// Action when stop scrolling
updatePostition();
});
Was fighting with this problem. My system also runs for mobile and I have a large horizontal scrolling, that always when user stop scrolling, it need to find the actual item the used is viewing and centralize this item on screen (updatePosition). Hope this can help you. This is to support IE9+, FF, Chorme and Opera, I'm not worrying with old browsers.
Best Regards
Is very late but.... there are solution with any scroll in any part of your page.... I do it with the next code...
onScroll = function(){
$(window).unbind("mouseup").one('mouseup',function(e) {
alert("scroll up")
});
};
$(window).bind("scroll", onScroll);
body{
height:5000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>