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?
Related
When I scroll completlely to the bottom of my page and click anywhere inside my modal, the page will scroll up a little. When I click on a link, it will sometime scroll up inseat of going to the link's address.
How can I prevent this? Thank you
You can use Window.scroll() to get and set your scroll position. If you post the code, I can help you better.
https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll
I'm using Bootstrap 3 and I have a gallery on the home page and a modal. I have disabled the auto slide on the gallery by using:
function galleryCarousel() {
$ub('.carousel').carousel({
pause: true,
interval: false
})
};
My only issue is when someone clicks on the button to bring up the modal, the gallery suddenly starts to auto slide again and will continue until you close the modal. The strange thing this only happens after you click to go to the second image in the gallery will it start auto slide again.
I've tried several ways to fix this to no avail.
You can see the prototype working here: http://copy-writer-otter-74032.netlify.com/
Simply advance the gallery to the next slide, then click on "profile" button at the bottom of the page to bring up the modal - wait a few seconds and watch the gallery start auto sliding again.
The problem is that you are already initializing your slider with the data attributes. This means the default slider is applied. The reason it seems to be not on auto, is because the slider won't move when you hover over it by default. As soon as you open the modal, the slider does not receive a hover, and it will start to move. Just place your mouse on the header, or open one of the dropdowns, and you'll see it starts moving.
The easy solution would be to add data-interval="false" to your slider element. This also means you can remove that javascript.
Have a look at the demo I created.
Whithout the data attribute: http://codepen.io/anon/pen/rVRaeR
With the data attribute: http://codepen.io/anon/pen/JdzoKj
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.
I have a smooth scroll effect:
jQuery('html,body').animate({scrollTop:scrollTarget}, 1000, "swing");
It works fine, but when multiple items are pressed, sometimes it flashes the content of the page for one second...You can try on this link: http://teothemes.com/wp/vptest/, click on Services and after that click 10x times on Contact...while you're locked on the contact section, try clicking on Services and you'll see how the Services area shows up for one second, that's not good and I wnat to get rid of that.
Ideally, I'd like the effects to somehow delay in execution..I now have a condition
if(parseInt(scrollTarget) !== parseInt(jQuery(window).scrollTop())) {
to prevent scrolling to the same area, but if you'll click 5 times on Contact when you're in the Services, ideally it should go to Contact first time and the 2nd time it should fetch the correct scrolltop and scrolltarget after the first execution and not the one when it was clicked.
Any idea is highly appreciated.
The jQuery preventDefault() method does the trick!
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.