Make jquery.eraser work on hover rather than click - javascript

I am using jQuery.eraser which works well to erase an image. But it works on click rather than hover. I thought I would be able to trigger a click on hover so it clicked where the mouse is. But what I have tried is not working. I am presuming I need to feed it some coordinates to work?
This is what I have tried:
$( "#image1" ).on('mouseenter mouseleave', function(){
$(this).trigger( "click" );
})
Here is a fiddle of a working example.

In the "bind events" section of eraser code, replace the bindings to the following:
$canvas.bind('mouseenter.eraser', methods.mouseDown);
$canvas.bind('mouseenter.eraser', methods.touchStart);
$canvas.bind('touchmove.eraser', methods.touchMove);
$canvas.bind('mouseleave.eraser', methods.touchEnd);
This seems to work on a laptop, however you should be aware that this is a quick and ugly fix, I am not sure how it will behave on mobile devices, and you should think twice before using it.
Demo: https://jsfiddle.net/q49w1cuj/

Related

How to unbind() .hover() but not .click()?

I'm creating a site using Bootstrap 3, and also using a script that makes the dropdown-menu appear on hover using the .hover() function. I'm trying to prevent this on small devices by using enquire.js. I'm trying to unbind the .hover() event on the element using this code:
$('.dropdown').unbind('mouseenter mouseleave');
This unbinds the .hover of that script but apparently it also removes the .click() event(or whatever bootstrap uses), and now when I hover or click on the element, nothing happens.
So I just want to how I can remove the .hover() on that element, that is originating from that script, but not change anything else.
Would really appreciate any help.
Thanks!
Edit: Here is how I'm calling the handlers for the hover functions:
$('.dropdown').hover(handlerIn, handlerOut);
function handlerIn(){
// mouseenter code
}
function hideMenu() {
// mouseleave code
}
I'm trying to unbind them with this code.
$('.dropdown').unbind('mouseenter', showMenu);
$('.dropdown').unbind('mouseleave', hideMenu);
But its not working.
Please help!
**Edit2: ** Based on the answer of Tieson T.:
function dropdownOnHover(){
if (window.matchMedia("(min-width: 800px)").matches) {
/* the view port is at least 800 pixels wide */
$('.dropdown').hover(handlerIn, handlerOut);
function handlerIn(){
// mouseenter code
}
function hideMenu() {
// mouseleave code
}
}
}
$(window).load(function() {
dropdownOnHover();
});
$(window).resize(function() {
dropdownOnHover();
});
The code that Tieson T. provided worked the best; however, when I resize the window, until I reach the breakpoint from any direction, the effect doesn't change. That is, if the window is loaded above 800px, the hover effect will be there, but if I make the window smaller it still remains. I tried to invoke the functions with window.load and window.resize but it is still the same.
Edit 3: I'm actually trying to create Bootstrap dropdown on hover instead of click. Here is the updated jsFiddle: http://jsfiddle.net/CR2Lw/2/
Please note: In the jsFiddle example, I could use css :hover property and set the dropdow-menu to display:block. But because the way I need to style the dropdown, there needs to be some space between the link and the dropdown (it is a must), and so I have to find a javascript solution. or a very tricky css solution, in which the there is abot 50px space between the link and the dropdown, when when the user has hovered over the link and the dropdown has appeared, the dropdown shouldn't disappear when the user tries to reach it. Hope it makes sense and thanks.
Edit 4 - First possible solution: http://jsfiddle.net/g9JJk/6/
Might be easier to selectively apply the hover, rather than try to remove it later. You can use window.matchMedia and only apply your script if the browser has a screen size that implies a desktop browser (or a largish tablet):
if (window.matchMedia("(min-width: 800px)").matches) {
/* the view port is at least 800 pixels wide */
$('.dropdown').on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
});
}
else{
$('.dropdown').off('mouseenter, mouseleave');
}
Since it's not 100% supported, you'd want to add a polyfill for those browsers without native support: https://github.com/paulirish/matchMedia.js/
If you're using Moderizr, that polyfill is included in that library already, so you're good-to-go.
I still don't understand how you intend to "dismiss" the dropdown-menu once it is displayed upon mousing over the dropdown element partly because there's not enough code in your question, but that's sort of irrelevant to this answer.
I think a much easier way to approach the mousenter event handling portion is not by using off()/on() to unbind/bind events at a specific breakpoints, but rather to do just do a simple check when the event is triggered. In other words, something like this:
$('.dropdown').on('mouseenter', function() {
if($('.navbar-toggle').css('display') == 'none') {
$(this).children('.dropdown-menu').show();
};
});
$('.dropdown-menu').on('click', function() {
$(this).hide();
});
Here's a working fiddle: http://jsfiddle.net/jme11/g9JJk/
Basically, in the mouseenter event I'm checking if the menu toggle is displayed, but you can check window.width() at that point instead if you prefer. In my mind, the toggle element's display value is easier to follow and it also ensures that if you change your media query breakpoints for the "collapsed" menu, the code will remain in sync without having to update the hardcoded values (e.g. 768px).
The on click to dismiss the menu doesn't need a check, as it has no detrimental effects that I can see when triggered on the "collapsed" menu dropdown.
I still don't like this from a UX perspective. I would much rather have to click to open a menu than click to close a menu that's being opened on a hover event, but maybe you have some magic plan for some other way of triggering the hide method. Maybe you are planning to register a mousemove event that checks if the mouse is anywhere within the bounds of the .dropdown + 50px + .dropdown-menu or something like that... I would really like to know how you intend to do this (curiosity is sort of killing me). Maybe you can update your code to show the final result.
EDIT: Thanks for posting your solution!

does a click also trigger a mouseout in chrome

I'm testing a ratings module I'm working on, had an idea for a fairly simple construction that'd allow for smooth ajax based voting, but found something odd..
The contruction is two divs, one nested in the other to show the stars, mousing over sets the width, which would be translated into a percent as a vote later on.
In testing this, I found that everything worked, but when I clicked, it sometimes made the width of the inner DIV reset, which is what it would do if I moused out, I'm not sure I understand why just yet. I'm including a working example of this.
http://www.nogumallowed.com/test.php
Here is the fixed code:
$(".ratingsBlock").mousemove(function(e){
$(".ratingsScale").width(e.offsetX);
});
$(".ratingsBlock").click(function(e){
$(this).attr("score",e.offsetX);
});
$(".ratingsBlock").mouseleave(function(e){
$(".ratingsScale").width($(this).attr('score'));
//$(".ratingsScale").animate({width:$(this).attr('score')+'px'}, 500);
});
I changed the mouseOut function to mouseLeave, and made the rating's score update when .ratingsBlock is clicked.
mouseOut is weird sometimes...

jquery .slidetoggle() and .toggle() together, first click does nothing then works after that

I'm trying to create an accordion-like interface but multiple sections can be open at once. Also, in addition to expanding a section of content for viewing, I'm swapping the image for the "header" that was clicked. Everything is working but the first click on each "header" does nothing. Each subsequent click works as expected.
Here's a link to a fiddle that I set up:
http://jsfiddle.net/kJ8t6/5/
Any help would be very much appreciated. I'm been trying to figure this out since yesterday and have to move onto other things.
Thanks in advance.
You don't need to bind extra click event, since toggle is already a mouse click event. However, you should consider that toggle event is nowadays deprecated, so try to use it with caution.
$("#imgDeliver").toggle(function() {
$(this).attr("src", "...");
$('#conDeliver').slideToggle();
}, function() {
$(this).attr("src", "...");
$('#conDeliver').slideToggle();
});
DEMO: http://jsfiddle.net/kJ8t6/6/

Strange behavior of performing mouseover over a textarea in Chrome

I have a strange problem I can't wrap my head against. It is present only in Chrome. The library I'm using is Prototype 1.6.
Basically, I have two elements wrapped into a container element. First of the two children elements is visible, the second one is hidden. Inside the hidden element I have a textarea element. When I mousover the container element, the first child should hide, second one should show itself. When I mouseout, the behavior should be opposite. You can see it here, along with the bug :)
http://jsfiddle.net/gmM9m/2
For some reason, in Chrome when I mouseover the textarea, the elements start blinking because they constantly turn themselves on and off. Does anyone have any idea what causes this behavior and how can I circumvent it?
Thank you!
Luka
The closest I've gotten is adding the event to the callback function for the mouseout and making sure that it's coming from the element you want. It seems kind of hackish, but perhaps it's a bug in Chrome. I'm seeing it as well, but wong2 does not seem to be seeing it.
See my revision, still a slight stutter on initial mouseover.
http://jsfiddle.net/gmM9m/10/
I just run into similar problem and solved it with using jquery "mouseenter" and "mouseleave" event
see http://api.jquery.com/mouseenter/
This works for me.(I'm not familar with JQuery's observe method, so I use JavaScript's addEventListener instead)
$('container').addEventListener("mouseover", function(event){
$('front').hide();
$('back').show();
event.stopPropagation();
}, false);
$('container').addEventListener("mouseout", function(event){
$('front').show();
$('back').hide();
event.stopPropagation();
}, false);
The point is stopPropagation. Run it here: http://jsfiddle.net/RDXzR/

jQuery - click-event is called twice on iPad

I have a problem with my web application which is designed for iPad.
I use jQuery and jQuery UI for dragging elements on the screen. Because on iPad, the element can not be dragged by default, I added this library:
http://code.google.com/p/jquery-ui-for-ipad-and-iphone/
Including it, I can drag and drop elements on iPad, but also a problem occurs. I have on the draggable element also a div are with an image, which should be clickable.
So I integrate these lines:
$(document).ready(function() {
$(".note").draggable();
$('.closebutton').click(function() {
alert("test");
});
});
​
The problem is, including the drag-library, the alert message test pops up twice or the screen is frozen.
I created a full working demo here:
http://jsbin.com/oliwo/2/
On normal desktop browsers, like Firefox 4 Beta and Safari, it works, only one test message appears by clicking with the mouse on the x - delete image. On iPad, I get the message twice or the screen froze.
Does anyone can help me? Thank you a lot in advance & Best Regards.
This is not really a response, as i don't known why you have it twice. But you can try a workaround if you're sure your click event is the only click event behavior that should be attached to this button; Make an unbind() just before you're bind, this will remove any previous click binding (so if this is run several times, you'll get only one event):
$('.closebutton').unbind().click(function() { ...
or better:
$('.closebutton').unbind('click').click(function() { ...
I've found that events get fired twice when showing an alert box on a click. I've managed to overcome this problem by using a setTimeout to show the alert box...
$("#myButton").unbind("click").click(function () {
// Have to use a setTimeout else on iPhone the alert may appear twice in certain scenarios
setTimeout(function () { alert('The message'); }, 300);
return false; // Return false to prevent href being followed
});
I do not know why, but if I do not use alert messages, it will work. I create new elements and then it is only called once, on iPad and Desktop Safari.
I'm seeing this issue only on iPad, perhaps some version of webkit related. The unbind worked for me, and I also read this only exists if jquery code is in the body html tag, if its in head it is not an issue.
just simply avoid the propagation of the click
$("tr").live('click',function() {
...
$( event.toElement ).one('click', function(e){ e.stopImmediatePropagation(); } );
});

Categories

Resources