is it possible to capture a click event on a scrollbar? I have some code where i am observing the click and mousedown events on the document. However, it seems that when I click on the scrollbar, the event is not captured. This leads me to believe that the scrollbars aren't really part of the document. (Assumption :-)) Is this a correct assumption? What is the right way to do this so that the behaviour is consistent across all major browsers?
sample code
document.observe('click', function(evt){
//do something
//blah blah blah
});
Thanks
Correct. The closest you can get is the scroll event. It'll work on every element that has a scrollbar, and it will fire on both mouse scroll with scroll bar, scroll wheel, arrow keys, page up/down, etc. Here's a brief jQuery example.
jQuery(document).scroll(function () {
console.log("foo")
});
That's the best suggestion I can give you - I can't imagine any other uses for a scroll bar click event.
Related
I have some problems with handling events like scrolling using the mouse wheel or key press. I' ve tried something like this but it won't work:
this.cy.on('wheel', event => {
//somecodehere
});
I didn't find wanted events on Cytoscape.js documentation page: http://js.cytoscape.org/#events. But I thought a thing like this should work fine - unfortunately I was wrong. I try to figure out how to handle this event on my canvas.
What do I want to do with this? I want to make tooltip disappear when the user wants to scroll the page. I've already disabled zoom on scrolling - I want to enable zooming only while "CTRL" key is pressed and in this case, I also didn't find wanted event to handle this. Any solutions? Thanks.
Use DOM API.
document.getElementById("cy").addEventListener("wheel", function(){
console.log("Wheeeellll");
});
I have an element hidden by default and show when a user hovers over this element with the mouse. On touchscreens, this event is only fired when the element is tapped. What Im looking for is a way to make this show as soon as the user's finger touches that element, I can't seem to find an event like that.
I have tried the following code:
//OnTouch event for about text
$('#about thumbnail').on('touchstart', function(){
$(this).find('.mask').addClass('touch');
}).on('touchend', function(){
$(this).find('.mask').removeClass('touch');
});
with no success either, I have the default Wordpress jQuery included, do I need an additional library to make my code work? I can't find out how to do this.
thanks guys!
As long as you are not developing for the latest Apple iPhone which has 3D touch you cannot detect slight and hard touches. Every touch input is considered as click. but you can try reducing the response time delay though.
use this library http://hammerjs.github.io/ it has the ability to overcome the 500ms lock in phone browsers.
If you reduce the response time it can somewhat emulate the slight touch you are asking for.
UPDATE: Here is this another library which provides more events like
tap, Single-tap, Double-tap, Hold, 2x Fingers Tap, 2x Double-tap, Swipe Drag, Rotate, Pinch, Pinch Out, Fingers
http://quojs.tapquo.com
I forgot to get back here but found a solution to achieve a hover effect on touch devices.
What you can do:
1-> achieve hover effect by touching the object on a touchdevice, this hover effect stays active until you activate another hover effect. You can do this by binding 'touchstart' to any object like so:
$('body .archive-item').bind('touchstart', function() {});
I did not find a way to stop the hover as soon as your finger gets of the touchscreen with the above function.
2-> You can bind touchstart and touchend to the above selector and have them addClass on touchstart and removeClass on touchend
$('body .archive-item').bind('touchstart', function() {
$(this).addClass('hover');
});
$('body .archive-item').bind('touchend', function() {
$(this).removeClass('hover');
});
now you can style the .archive-item.hover with css to achieve a hover effect.
To avoid duplicating css to achieve the hover effect on :hover and the touchstart you can just do this:
.archive-item:hover,
.archive-item.hover {
text-decoration: underline;
color: red;
}
I couldn't find anything on the web so this is what I figured out by combining some code from various snippets, what do you guys think about this?
$(document).ready(function(){
$(document).mouseleave(function(){
$('#desktop-subscribe-modal').modal('show');
});
});
I am trying to trigger a function when the mouse leaves the document window. The above code works fine in Firefox but in Chrome it is triggered when hovering over the page scrollbar.
Is there a way to exclude the scrollbar from the mouseleave function?
Ok, I got around this issue by checking the mouse position when mouseleave is triggered. I only really need it to trigger when the mouse hovers above the viewport so I just check if the vertical position is < 0.
$(document).ready(function(){
$(document).mouseleave(function(e){
//Check mouse is above the viewport
if(e.clientY < 0){
$('#desktop-subscribe-modal').modal('show');
}
});
});
The scrollbar is technically outside the client window, so all browsers should do that. Some don't (so really, FireFox is wrong, not Chrome) :)
However the best solution is to use a replacement scrollbar (Perfect scrollbar is my favourite). These use elements inside the page so will do what you want on all browsers (and look pretty cool too).
I have searched a lot, but couldnt find any thing that could help me. I need a javascript event that fires when the scrollbar has reached near bottom. I remember with out jScrollPane i used to do it with binding scroll event of the div and inside the event it does some calculation with scrolltop and height etc to see if the scrolling has been done to/near bottom. I cant find any similar thing in Jscrollpane's scroll bar. I found a couple of similar questions, but they were in Java.
there is a page describing those events here
$('.scroll-pane').
bind('jsp-scroll-y', function(event, scrollPositionY, isAtTop, isAtBottom) {
// some basic math here
});
Good day. I got an HTML page which is small and has no scroll bar. However i need to determine when and what direction scroller was moved. So i need to determine scroll button on my mouse is moving.
How can i do it?
Check out the jQuery Mousewheel plugin. Then you can simply bind an event to any element to check if the wheel was used while the mouse was over it.
$('body').mousewheel(function(delta){
// Do stuff
});
Note that it's not too user friendly to not have a scrollbar and rely only on the mousewheel. There are other ways people expect to be able to scroll, like the arrow keys for example.