Is there any event for the textarea that will fire as your dragging your mouse making a selection across the text? For example, the event would fire when you first click inside of the textarea and would continue to fire as you drag your mouse making a selection. The event would stop firing after you have let go of the mouse click button, leaving some of the text selected.
you can catch mousemove and check for buttons properties, if buttons equals 1 then left mouse is clicked.
function fire(selectedtext){
console.log(selectedtext);
}
$( ".textarea" ).mousemove(function( event ) {
if(event.buttons==1)
{
var seltext = $(".textarea").val().substring(this.selectionStart,this.selectionEnd);
if(seltext.length > 0) fire(seltext );
}
});
Related
Is it possible to select the scroll button and assign it an attribute value when it is clicked. I am aware that pseudo elements cannot be selected in jQuery. Any workaround solution possible for this?
Did you mean mouse's middle button?
https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
$(window).on('click', function (e) {
if (e.button === 1 || e.which === 2) {
console.log('middle button');
}
});
You can listen to scroll event on the element being scrolled.
Clicking scroll button will any way trigger scroll event.
I am creating a basic text window in easeljs. The text window has up and down scroll arrows to enable the scrolling of the text. I do this simply by listening for a click on the up or down button and then moving the y coordinates of the text box on the click.
The problem I have is that it only moves once per click. If I have a lot of text to scroll, I have to click a lot of times. What I want is to be able to click and hold the button and have the listener repeat the action whilst the mouse is down?
Here's my simplified code attached to the down button:
btn_down.on("mousedown", function(evt) {
content.y -= 20;
game.stage.update();
});
I have tried mousedown and click, but it still only seems to fire once.
The mousedown event fires once (when you press your mouse button). If you want to loop an event while the mouse is down, either set an interval when the mouse is pressed (and clear it when it is released), or toggle a property that causes an update during a tick.
http://jsfiddle.net/lannymcnie/t7uz2v6m/
shape.on("mousedown", handlePress);
shape.on("pressup", handleRelease);
var pressed = false;
function handlePress(event) { pressed = true; }
function handleRelease(event) { pressed = false; }
function tick(event) {
if (pressed) { shape2.x += 1; }
stage.update(event);
}
Note that I use the "pressup" event instead of the mouseup equivalent (click), because if you roll out and release, the "pressup" event still fires.
Cheers.
I have a drag-drop-application which uses JQuery UI onDrag and onDrop. This application is a room reservation system that have tabs. I have made the drop-working perfectly, but there is one functionality I really want (if possible).
Is there a way to create a event-handler for the tabs, that fires only if you are dragging an element?
Example: You want to move a person from Tab1 to Tab2, without clicking the tab, you can only drag the person -> hover the tab -> then the tab gets clicked.
There is no specific event handler for dragging an element, but by manipulating other events, you can make it work.
The trick is to use the mousemove event, but make it only work when the mouse has been pressed down on the draggable element. Therefore, we make a certain Boolean true in the mousedown event and then make it false in the mouseup event. The mousemove event checks if the Boolean and runs its code if and only if the Boolean is true.
Here's an example:
$(document).ready(function() {
//Make draggable draggable
$("#draggable").draggable();
//mousedown and mouseup Boolean
var drragging = false;
$("#draggable").mousedown(function() { dragging = true; });
$("#draggable").mouseup(function() { dragging = false; });
//mousemove event -> mousedrag event
$("#draggable").mousemove(function() { if (dragging) {
//The event:
$("#draggable").css("color", "rgb("+Math.round(255*Math.random())+", "+Math.round(255*Math.random())+", "+Math.round(255*Math.random())+")");
}});
});
<span id="draggable">Drag me!</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
I am using scrollIntoView() on an event target to ensure it is visible in its parent which has overflow: scroll, this is mainly for accessibility reasons.
My problem is that I also have click events associated with this element and when a click event also fires the focus e.target.scrollIntoView() is preventing other events from firing.
This is my current example:
http://jsfiddle.net/omhuorpr/
require([
"dojo/query",
"dojo/on"
], function(query, on){
var el = query('#someElement');
el.on('click', function(e){
e.preventDefault();
console.log("clicked");
});
el.on('focus', function(e){
console.log("focus");
e.target.scrollIntoView();
});
});
If you click on the element and check the console it will only fire the focus, if you re-click it then fires the click. Ideally I want to fire both at the same time or just the click.
A simple fix that works is to move this process to the end of the execution stack via a timeout however ideally I want to find out why scrollIntoView() is preventing other events from firing.
It's because the focus event fires on mouse down, and the click event fires on mouse up. If the element has scrolled so that the mouse pointer is no longer over the element by the time you release the button, the click event won't fire. However, if the mouse pointer is still over the element after the scroll, the click will fire.
If you increase the font size in your fiddle and click near the top, you'll see the click fire. If you click near the bottom and the element scrolls out from under the pointer, the click event won't fire. E.g.
#someElement {
font-size:80px;
}
http://jsfiddle.net/omhuorpr/1/
I am quite new to jquery and looking for event that handles mouse down event. Over now I have found and use something like:
$("#canva").live('mousedown mousemove mouseup', function(e){ ....
but it fires function(e) even when mouse is over canvas element (both when the left button is clicked or not).
I am looking forward to event that will be fired in every change of coordinates above #canva element and when my mouses button is clicked. Releasing left mouse button should cause end of this event.
One way to do this would be to create a global variable and to modify its value when the user clicks over the element as such:
var mouseIsDown = false;
$('#mycanvas').on('mousedown', function () {mouseIsDown = true});
$('#mycanvas').on('mouseup', function () {mouseIsDown = false});
Now all you have to do is to bind 'mousemove' to the function you want to fire and simply appending a conditional to the body of the function that checks the state of the left click and escapes if necessary.
function fireThis(e) {
// if the user doesn't have the mouse down, then do nothing
if (mouseIsDown === false)
return;
// if the user does have the mouse down, do the following
// enter code here
// ....
// ....
}
// bind mousemove to function
$('#mycanvas').on('mousemove', fireThis);
Now, if the user were to click inside the element and then drag the mouse outside the element before releasing, you'll notice that 'mouseup' will never get triggered and the variable mouseIsDown will never be changed back to false. In order to get around that, you can either bind 'mouseout' to a function that resets mouseIsDown or bind 'mouseup' globally as such:
$('#mycanvas').on('mouseout', function () {mouseIsDown = false});
OR
$(document).on('mouseup', function () {mouseIsDown = false});
Here's an example: http://jsfiddle.net/pikappa/HVTWb/