applying scroll events on table body - javascript

So I have a table on which I want to capture its scroll event as we capture scroll event on window. I want to capture scroll event when its body scrolls as it as some fixed height and overflow:scroll will be preset:
Fiddle here
Below is what I've tried but with no success:
$('tbody').on('scroll',function(){
alert('hellow');
});
I am not sure the above code is correct or not. I mean not sure whether there is any event like this for table.
Are there any alternatives to capture scroll events of table body. The main reason being here is fixed table header which works fine in chrome and other browsers but not in IE8 as it jumps and takes time to get fixed again!

Try this, that have to work in IE8:
$('tbody').bind('mousewheel DOMMouseScroll', onWheel);
function onWheel (e){
console.log(e);
}
jsFiddle

There is another way to trigger this event.
The table from which you want to apply this event, from there itself you can call a JavaScript function.
For example:
<table onscroll="yourFunction()"></table>
and then you can write your code in the yourFunction() function in the script tags.

Related

Detect which scrollbar was moved with the wheel event

Let's say we have a simple HTML page with div container that has vertical scrollbar. The whole page also contains vertical scrollbar:
I would like to disable the main body scrollbar feature (but it should be visible as it is) and allow user to scroll only the container's content.
I know that the only option to disable scrolling is catching the wheel event and calling preventDefault on it. However it disables all scrollbars.
Is it possible to obtain, which scroll will be affected with the event (container's or global one) and conditionally call the preventDefault method?
The solution below is written in jQuery, but it can be done in plain Javascript equivalent code as well:
$(document).on('DOMMouseScroll mousewheel', context, function(ev) {
//Do some stuff
ev.stopPropagation(); //Prevents ancestors of context of handling the event
});

prevent iPAD scrolling while allowing list scrolling

I need to disable the default iPAD scrolling (via capturing touchmove on the body) but still allow a list on my page to scroll.
I tried:
$('body').on('touchmove', function(e) { e.preventDefault(); });
$('itemList').on('touchmove', function(e) { alert('hi'); e.stopPropagation(); });
But it seems that itemList's touchmove is not being called at all. on the iPAD nothing gets scrolled.
see http://jsfiddle.net/e8dcJ
Any ideas how to solve this ?
Thanks!
maybe don't apply the event to the body, which covers everything. Instead, apply the event to a the various elements you want to prevent scrolling. Alternately, wrap everything in a DIV except the list and then set the position to fixed and add the event.

In client side JavaScript, can any element besides window get a resize event?

I get multiple pages saying that the resize event can be on a body or div element:
http://www.w3schools.com/jsref/event_onresize.asp
http://v3.javascriptmvc.com/docs/jQuery.event.special.resize.html#&who=jQuery.event.special.resize
but then I tried it in jsfiddle or in a standalone page and never can get a resize event on an element:
http://jsfiddle.net/sgHck/1/
http://jsfiddle.net/sgHck/8/
Can body or div get a resize event at all? If not, what if we need to shrink a section down in the page, and part of the page relies on the scroll event to properly place another element, and the resize event for the document, not the window, will also be needed as well?
After digging around a bit it appears that they can have resize events just not quite in the way you want.
You can add a resize event like this
$('#content').resize( function(){
//stuff to do
}
or
$('#content').on('resize', function(){
//stuff to do
}
which you are already doing, but these just don't fire when the elements are resized by javascript code or anything like that. the only way to trigger it this way is with
$('#content').trigger('resize');
which you can really do with any string. This does propagate up through the dom tree. Say you had the #content inside of a body with a 'resize' event on both of them. If you trigger the #content it will also trigger the body. However, if you trigger the event with body it will not trigger the #content.
However it seems you can get the type of functionality you want with the jquery-ui resizable method http://jqueryui.com/resizable/. After you make something resizable with
$('#content').resizable({options});
it should trigger the resize event if they are changed.

Cross-browser method to capture scroll events (or an easier way to temporarily disable scrolling)

I'm trying to execute a Javascript function whenever a user scrolls a page.
I've tried:
<body onscroll="myScrollFunction()">
and this works fine in Firefox but not IE.
I also tried:
window.onscroll = "myScrollFunction()";
but this seems to only perform the function once, similar to an onload event, but further scrolls do not fire the event. My doctype is set to strict; not sure if this makes a difference or not.
How can I get this to work across all browsers?
What I'm trying to accomplish is a way to prevent users from scrolling once a modal is displayed. I'd rather not use
overflow:hidden
because the document shifts slightly when the modal is displayed (to compensate for the scrollbar), so I figured I could capture the scroll function and lock it to the top of the page whenever the modal is displayed. If there is an easier way to do this, please let me know.
Instead of
window.onscroll = myScrollFunction();
which assigns the result of the myScrollFunction() to the onscroll handler, you want
window.onscroll = myScrollFunction;
which assigns the function itself, and will therefore be called on each scroll.
I suggest that instead of doing that, you just give your modal dialog position: fixed; which will fix it to the viewport instead of the page.
Set the <body>'s overflow to hidden while your lightbox is open.
$('body').css('overflow','hidden');
...then return to normal when it closes:
$('body').css('overflow','auto');

.height() only making DIV scrollable after window resize

The intent of this script is to make a DIV that is 100% of the page height minus the top section.
Here's the page:
http://nerdi.net/playground/kev/indexNEW.html
Here it is stripped down on jsFiddle, where it appears to be working.
http://jsfiddle.net/JVKbR/94/
For me, (on Chrome and FF) the scrollable div (.mid-col-main) only becomes scrollable upon resizing the window (Maximize, drag from corner, etc)
Any idea what I'm doing wrong?
EDIT: Jasper and Davin's solution both work. Thank you.
You need to wait for the DOM to be ready, basically you were running the code too soon and div.mid-col-main is not available yet:
$(function () {
var midColTopHeight = $("div.mid-col-top").height(),
$window = $(window),
$midColMain = $('div.mid-col-main');
$window.resize(function(){
$midColMain.height(($window.height() - midColTopHeight));
}).trigger('resize');
});
Here I have placed your binding code inside a document.ready event handler and also triggered a resize event on the window element. I also optimized your code a bit to cache things that don't change (you don't need to select the same element every resize event).
Instead of running this code in a document.ready event handler, you could put this code at the end of the HTML document (just before the closing </body> tag), that way the element you want to target will be available.

Categories

Resources