JS/jQuery action fired when scrollTop - javascript

This question is purely for usability purpose.
I'm sorry if the title of the question is not very clear. It's not about how to fire an action when a page is scrolled to top (not very hard), but about how to fire an action when the user scroll to top and continuously try scrolling more (top).
The scenario is as follow: The page initially loads a list of items via AJAX and render them. If the user try to scroll up more and more and more to top (and don't stop scrolling on the top position), then a "loading newer items" action should be called.
How to make it happens?

You might think the loading more items div is above the top of the window. But what the websites are doing: they create a div on position y = 0px to let's say y = 30px. When they show the page they automaticly scroll to y=30px. So people will see the normal page, now when the user scrolls up (which is of course possible since he is on y=30px) he will see the "Loading more items" div, you can easily check if the "loading more items" div is visible in the current viewport since it is part of the page, and fire the event to load more items if so, in the callback of this function, you can scroll to y=30px again.

Related

Creating layout for user leave-intent

I want to understand how to capture user intent i.e. when a user decides to leave the page and moves his/her mouse (as of now), show them an alternate version (without refresh).
An example
When you open this page, it will show you a couple of listings. Now, if you move your mouse to the address bar again. It hides the content and shows a separate part of the layout, basically a modal window with some messaging.
Is it handled via javascript - detect the cursor position and change the layout.
Any help would be welcome.
Using document mouseleave and mouseenter you can achieve this.
$(document).on('mouseleave',function(){
$('#test').removeClass('disnone');
}).on('mouseenter',function(){
$('#test').addClass('disnone');
});
FIDDLE DEMO

How to figure out browser scrolling issue

I am developing a web part within Sharepoint that makes heavy use of 3rd party web services.
In my page, I have a view element (div#act1_show) that is collapsed. When I click on the expand button, the data is shown. No problem there.
The data of that element can be edited when that element is collapsed when I click the edit button. This actually hides the view element (div#act1_show) and shows a different edit element (div#act1_edit). No problem there.
However, when I first expand the view element (div#act1_show) and then click the edit button to open the edit element (div#act1_edit), the edit element is opened but now I can now longer scroll the page. That is, I can no longer use the scroll bar on the right of the browser window.
I've looked for any css position fixed but found none.
So, can anybody suggest how I go about figuring out how to find the cause of no longer being able to scroll with the browser's scroll bar?
Thanks

How to disable (window).scroll function after loading the page?

Hi i have a slider which will slide from side if i scroll down certain amount in browser and it will slide back if i scroll up. Also i have a close function it will close the slide once i click.
I used (window).scroll to measure the scroll amount based on this i have given a condition to make the slide happen.
Now the problem is if I am at the bottom of the window when i click "close" it closes the slide but after that when I scroll up the slide again coming this is because the scroll amount condition which i given to slide.
So i went to store a cookie when a click function triggered. By checking the cookie value i let the slide function to happen.
Cookies are created once i click the close then also the same problem happening but when i reload page the slide function is not happening.
Is this Because of (window).scroll function priority or Something?
Do anybody know on what problem am I struggling?
I'm not totally sure if I do understand you correctly.
Why don't you just set the overflow css property of the element to hidden when the trigger calls?
Isn't that your problem?

Stop page from scroll when changing page contents using Jquery

I am toggling a div using jquery. when this div appears on page my browser scroll bar goes to top, even i am on last of my page. can you help me to stop this scroll where it is even more and more divs appears on page using jquery
i shall be thank full
I assume the link which is being clicked that controls the div toggle is set as href="#". If this is the case, add preventDefault() to the jQuery click event handler to stop the link behaviour from making the page scroll to the top.
$("#myLink").click(function(e) {
e.preventDefault();
// toggle your div
});
you need to place all the divs that scroll inside another div that has a fixed height.

Scroll dialog body but not the page below it

I have a dialog(with scrollable content body) on top of a page that's also scrollable. Now I want that when I try to scroll, from inside the dialog using mouse wheel, only the dialog body should scroll and not the page below it.
How do I do that ?
You could try wrapping all your content into a block with overflow: auto and set the overflow property of the window to hidden.
See example here.
I don't think you can prevent the window from scrolling otherwise. See similar question: prevent Scroll "bubbling" from element to window.
Another answer suggests you can prevent the mouse-wheel event's default effect: Prevent scrolling of parent element?. But it's not ideal as scrolling also occurs upon pressing keys, selecting text and so on.

Categories