Develop Reference

image slides vertical scroll with jquery or javascript

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.

Vertical ticket feed with Ajax and jquery

I am trying to implement a vertical ticker feed of 20 news say. Here I want to have this with below points :
1.) The ticker should display first 5 news at a time. When a user scroll down in the ticket box, he/she can view the others news down to 20th one.
2.) when a user hovers on any news div section, it should display a box in the left side of the news text. Just like as in the case of Facebook ticker. Here what's important is, The box should be displayed well relative to the position of the news div section. If the current position of the news div section is at the bottom of the page then the hover box should be appear at the bottom only. Similarly if the news div position is at the middle of the page, then it should display the hover box at the middle. In a nutshell the hover box should be dynamically adjust its position based on the position of the new div section.
I am facing challenges while developing this so decided to take help from you guys. The main challenge is, while trying to make the ticker box scrollable of fixed height to contain only 5 elements, it is hiding the hover box as well.

The easiest way to achieve the moving context div would be to render it for every item and show it when the user hovers over the ticker item.
Each item would look like <div class="a">NEWS 1 <div class="a1">TO THE LEFT (news)</div></div>
Then you simply set .a1 to display:none on load and add
.a:hover .a1 {
display:block;
}
in your css.
To solve your overflow problem when setting overflow-y to scroll, you can set a margin-left to your list which will expand the overflow-x bounds (and allow your hover over content to display)
Example here
to get what you're really wanting, you're gonna have to use javascript. You'll need to listen to the onmouseover event for all your ticker items and set the Y position of the content div to match. example here: codepen you'll need to sort updating the content of the div and correct left/right position based on where you want it to show

How can I prevent bottom scroll bar from appearing?

On this dev URL I use skrollr to make desk items slide away. the action takes place between scroll position 0 and 300. Anywhere in between there, the bottom scroll bar appears bc items are moving off the right side of the page. At 300, all items that moved off to the right of the page get "display: none" assigned, so they disappear and the scroll bar goes away.
Is there anyway to prevent the scroll bar from EVER appearing?

Since it is on the x-axis, you can use overflow:hidden:
body{
overflow-x:hidden !important;
}
This will ensure no scrolling on the body's x-axis.

kurt you are correct but this will only hide the overflow at the bottom of your page the you have content here:
<section class="t3-copyright">
<div class="container">
This div spans more than the width of the page set the container div max-width:100%; and the scroll bar will go away.

Hide scroll bar even when the cursor hovers the div

I have a div with a text scrolled up and down with 2 simple buttons & JS.
I wish to totally disable the scroll bars so they will never appear on the screen, even if the crosser is above them.
How do i approach this problem?
Thank Shani

Add overflow: hidden to the css rule for that div.

Change CSS width using javascript (JQuery Tools Scrollable) center

I am using JQuery Tools Scrollable to build a full-page-width scrollable form, such that each page of the form scrolls all the way across the page, replaced by the next page sliding in from the right.
The problem I'm having is how to center each page such that it stays centered amidst browser resizing and in-browser zooming (Ctrl +/-). My code is based upon: http://flowplayer.org/tools/demos/scrollable/site-navigation.html
I've tried encasing my code in a div like this:
<div style="margin-left:-440px; padding-left:50%; width:50%; min-width:880px;">
But, because this div is itself positioned in the middle of the page, the scrolling pages don't slide all the way to the left edge - they cut out at the div's edge about 30% away from left, which looks bad.
The only conclusion I can think of is to dynamically alter the margin-left I've defined on div class="items" to make sure it's always equal to 50% - 440px but no less than 0.
How can I do this using javascript?

is the container div absolute or relative positioned? If it has a specific width, let's say "800px", then centering it horizontally is easy with auto margins on left and right, e.g. margin: 0 auto. Otherwise it gets tricker.
If you want to respond to resize in Javascript, in jquery I do something like $(window).resize(function() {}) (docs here) and inside of the handler function update some value in CSS. If you just want to increase the width but still have auto-margins, you could select your div and update the width property, e.g. $('.mydiv').css('width', '900px');. This would fire any time the window is resized.