I'm doing a little jQuery plugin, and i'm confront a problem.
I read all internet without find a pertinent answer...
I have to say i don't want to prevent scroll at all, it's a little more complicated :
I have a system who scroll on the window with the jQuery function scrollTop(int y), but it's the same thing with the native javascript scrollTo(int y) (or scrollBy, indeed)
When those function are called, they trigger a 'scroll' event. And i don't want those functions to trigger this event, so i want to block it.
jQuery event.preventDefault(); doesn't work, obviously cause it block event action in event handlers function, so i just want this scroll event don't even be trigger.
I will be very thankful for help, cause i haven't any ideas how to do that.
Related
I want to trigger a Javascript function after CuteUpload's upload event start, but I don't understand how to call the event.
Any help would be nice.
Here is the user manual, with some confusing explanation about Javascript events can be found at bottom of the page.
I'm using an module-project from Github on my Angular project, that lets me resize my DOM elements, which are drawn on top of a div, that works as a draw-board.
To shape my first elements, who are simple rectangles, by the way, i am using a mouseDown - mouseMove - mouseUp combination Event Listener, and then when i decide to resize one i hover over the edges and resize it.
Problem is that on the resizing event, which is a combination of resizestart - resizing - resizeend, although i know that the module is using and mouseDown-Move-Up Event listener and emits the events mentioned before, i cannot get the MouseEvent created, and instead i get the ResizeEvent, which doesn't have a stopPropagation() method, so calling it as it is gives an error(that it's not a function).
I need to stop Propagation, because when i resize my Elements on my draw-board the click event gets bubbled to the immediate parent element, and as a consequence i resize an existing element and create a new rectangle at the same time.
On top of that, the ResizeEvent doesn't even include an "event.target"-like property which makes matters worse...
So, i was wondering how can i work around this one??
I was thinking using #HostListeners, but wouldn't the code executed in that directive get mixed up with the Resizable directive(the module is declared as a directive)??
And messing around with the Resizable-module files doesn't sound like a good idea, since if anyone wants to use my module will have to download my tampered files of the resizable project...
Answer to your question is :
event.preventDefault() will stop the default functionality.
I think this may solve your issue.
The event.preventDefault() method stops the default action of an element from happening.
For example:
Prevent a submit button from submitting a form
Prevent a link from following the URL
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
});
});
I stumbled into this one whilst trying to scroll an element without invoking the normal event handlers
Using both Firefox and IE10 I'm seeing some really strange behaviour in how the scrollTop method is operating. For example, if I set the scrollTop on a div, and aferwards, bind a scroll event handler to the same element, the handler fires immediately. From my testing, this doesn't happen with Chrome, which leads me to think that FF and IE are applying the most miniscule of animations to their scrolls, or this is some kind of bug.
See JSFiddle example. Interestingly, if I set a timeout of 1ms before the assignment, the problem goes away. I'd love to know what's going on here, and what the best approach is to fix it.
Update: From the comments below it seems as though this might be recognised to be normal browser behaviour, so I'll update my question to ask what is going on here - please cite some interesting articles which explain this process in more detail.
What goes on in IE and FF is the following:
The scrollTop property is adjusted
The scroll event handler is added
Execution of the function finishes. Now, the browser has time for other things and will render the page. The rendering causes both the scroll handler and the scrollTop property to be committed simultaneously. The scrollTop change thus triggers a scroll event which is captured by your handler.
This is unlike this code:
var dv = document.getElementsByTagName("div")[0];
dv.scrollTop = dv.scrollHeight;
setTimeout(function(){
dv.onscroll = function() {
console.log("scrolled!");
}, 0);
Where the following happpens:
The scrollTop property is adjusted
The setTimeout function appends the function that adds the onscroll event handler to the event queue. Essentially deferring the execution of the code until timeout processing occurs (see also the newer window.setImmediate).
Execution of your function finishes. Now, the browser has time for other things and will render the page. The rendering will trigger a scroll event, but because your function was deferred, it has not yet been added and thus nothing captures the scroll event.
Rendering the page finishes. Now, the browser has time for other things and will execute the function set by setTimeout. This will add the onscroll event handler, but since the scroll event has already been triggered, the event handler will not be called.
More information on the subject can be found here and here.
I'm trying to stop the scroll effect from propagating past a certain element and I know how to do it but it seems it's not the mousewheel event that propagates but some other event. Any idea which one it is?
You can try in jQuery:
$(window).scroll(function(event){
window.scrollTo(0,0);
});
Also, there is plugin: https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js
Here is an example of use: http://jsbin.com/ixura3/3
However, I suggest you avoid these methods, because scrolling is default function and user can be angry if your website suddenly breaks this behavior.
I want to listen the event whenever the document(body) size changed
which would caused by anything inside
(but you are assumed do not know what element caused the resize)
as the code below:
http://jsfiddle.net/marstone/7zaRT/8/
you can click the green area to change the div size, then the document.body resized.
however, the onresize event won't be fired.
I found that it only works when the window resizes, such as drag/maximum the browser window
any workaround? any help appreciated.
Resize events are available only on windows objects, as you said. You can use the jquery-resize plugin to add resize events on DOM elements, but be advice that they implement polling mechanisms to keep track of element's sizes. Due to that, you must always bind the event to the element you want to watch (delegate does not work as no real event is bubbled on the DOM).
So far I've used that plugin a couple of times, without any glitch. I'm not aware if other plugins implement this very same mechanism, but I'm somewhat sure that they all rely on a polling mechanism as this one.
This should do the trick:
$(document).bind('DOMSubtreeModified', function(e) {
alert("Bazinga!");
console.log(e);
});
Note however, that it tends to fire excessively, but I'll leave it to you to figure the how this could fit into your app.
http://jsfiddle.net/pratik136/7zaRT/12/