I have 5 images and I want to slide those images when we hit the arrow up or down with keyboard button or when we move the scroll bar up or down
For reference:www.webflow.com please just check it from the link. when you will scroll down to the Buil Custom section on the page. you will see the slider and its working with when you hit the arrrow button up and down from keyboard or when you move down or up with scroll bar.
You can use https://api.jquery.com/scrollleft/ to scroll horizontal on an element.
Example: $( "div.slider" ).scrollLeft( 300 );
You will have to first compute the width of each element of your slideshow and scroll exactly that much each time.
You can do this on arrow keys with an event handler: Detecting arrow key presses in JavaScript
The reference you linked shows changes in your page based on the scroll position, reading js: change style based in scroll position might give you hints on where to start there.
Related
Hi all I'm working on a slider, and I would that my slide detect when the horizontal scroll reaches for example 1000px from left, hence I could trigger some dynamic event - animation, CSS style, etc.
Some here know how to listen on a specific position from left?
I have tried the while loop but the stack had just overflowed,
so any hint would be great,
thanks
If you want to detect scroll position of the whole page, it should be sufficient to attach an event handler to scroll event of window element, and inside check for the value of window.pageXOffset. I have made a small demo in this codepen. The html markup and css is just for example purposes (to have enoght content so that the whole page overflows in horizontal direction), so the important code is in js:
var scrollhandler = function(){
if(window.pageXOffset > 1000){
alert("over 1000");
window.removeEventListener("scroll",scrollhandler)
}
}
window.addEventListener("scroll", scrollhandler);
I have a slideshow that’s using jQuery cycle2. I’ve included a jsfiddle with a mockup of how it needs to function in my project: https://jsfiddle.net/b1tfx58o/2/
It has navigational links on the side and it has a red small box on the edge that’s supposed to move to align with the nav link. For example if I click “slide 2” than the red box will slide down and stay there like it does for slide 1. If I click either slide 1 or slide 3 than it will move to be in the middle of the border line for that link. You should also be able to click on the red box to make it go to the next slide. I have that part working but not moving it when I click the links. Any help on this would be much appreciated!
The script so far(checking the JSfiddle will make more sense):
var icon = $('.icon');
var slideshow = $('.cycle-slideshow');
icon.on('click', function(e){
e.preventDefault();
slideshow.cycle('next', function(){
});
});
You need to add click listeners to each list link, to run a function that .getBoundingClientRect() of 'this', referring to the link clicked, then use the 'top' value from getBCR to change the top position of your icon element. You'll likely have to combine it with window.scrollY for your project.
See here https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect & good luck
I want horizontal scrolling by buttons instead of scroll bar in my website.
For Example: http://www.entrepreneur.com/video/index.html
Here are thumbnails for videos are scrolling when left/right button at top right corner are pressed.
If i'm understanding your question correctly, You'd like to scroll a block element horizontally when a button is clicked.
EDIT: I created a JSFiddle for you to take a look at
$("#fixedSize").animate({
scrollLeft: $("#scrollAmount").val()
})
That block is what creates the scrolling effect you're looking for.
Take a look at the jquery scrollLeft.
Let me know if this helps!
I am working on a page that has two states: edit mode and normal mode. The user switches between these states by clicking on a toggle button. Triggering edit mode adds more elements to the page (buttons, etc) and thus forces the body element to increase its height.
My issue arises when a user has scrolled down the page and then triggers edit mode - since the page's height has now increased, their current scroll position is lost. I have been trying to find a way through which I can calculate what the new scrollTop should be, but have not been successful.
I've got a jsFiddle as an example of my issue. It automatically scrolls to the third "entry", to simulate a user having scrolled down that far. Clicking the "trigger change" button in the top right hand corner will add more elements to the page, and the scroll position of having the third entry at the top of the page is lost.
I am aware that I could just redo $('body').scrollTop($('.entry:nth-child(3)').offset().top); after the new contents have been added, but I want the scroll position to be remembered for no matter where the user has scrolled to on the page.
http://jsfiddle.net/Jn8wq/2/
Any help is greatly appreciated!
Check this fiddle.
http://jsfiddle.net/Jn8wq/4/
I added this
var tempScrollTop = $(window).scrollTop();
//your append logic
$(window).scrollTop(tempScrollTop+9);
You would notice that I added '9' to the scroll position. It suits your requirement in the given fiddle. But when you implement this on your actual site, you would have to calculate the height of new appended divs dynamically and add that height instead of '9'.
To keep an element where it is in the window after something changes above it, try this:
var tmp = $('#element').offset().top - $(document).scrollTop();
// add stuff
$(document).scrollTop($('#element').offset().top - tmp);
I am using jQuery UI Accordion. One section has a scroll bar. I would like that scroll bar to default to the top every time that section is opened. Currently, it "remembers" its previous position. Is there a way to make it forget its position or always default to the top. I only want to set this for the particular section, not the entire page.
This post suggests using window.scrollTo(0, 0); to force the page to scroll to the top. But I'm unsure how to apply that to only a particular section.
You can set the scroll position of .ui-accordion-content to 0 at the accordion's change or changestart event.
set the scrollTop-property of the element to 0