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.

button slide on hover

I am forced to have my navbar in the middle, because the width of my dropdownbox is 300 px; I would like the button "login" to be in the right side, and when you hover over the "Login", the width slides from right to left, so the dropdownbox width fits the page. And when you remove the mousepointer, the button slide from left to right, to be in the "normal" position.
I have been playing around with this, but how can I solve that it does not slides back again automatically, instead of pushing a button?

you're post is a little confusing to understand. At the moment the code requires you to press the button to first display and then hide the element. What I got is that you'd like this to be automatic.
One way to do this is for a desktop only solution is to use hover instead of click. But this creates some issues of its own (can't click sign-in fast enough), I'm not sure you want to go down this road.
$(".myButton").hover(function () { /* Do this */ });

Stop cursor from changing on a cursor div when the user scrolling the document jquery

Today I found out that Google+ set the cursor to initial when the user is scrolling, and the cursor won't change when hovering on all the hyperlinks or images while the user is still scrolling
How can I stop cursor from changing when the user is scrolling through divs with css attribute set to pointer. I have noticed that if the cursor keep changing when the user is scrolling, the scroll is not as smooth as when the cursor is unchanged. I have tried
$(window).scroll(function(){
console.log('scrolling');
$('body').css("cursor", "initial");
});
but it seems it doesn't work, and other children's css attribute has overwritten the line, I didn't found any similar questions on Stack overflow, can someone point me to the right direction?

Thanks to link provided by CBroe, disable cursor event when scrolling I have found that what I need is to add pointer-events: none; to the body when the user is scrolling and remove it when the user stop scrolling.
first we need to add a class called disable-hover to our css file
.disable-hover {
pointer-events: none;
}
second we need to detect whether the user is scrolling and add or remove the class correspondingly
$(window).scroll(function(){
$('body').addClass('disable-hover');
});
$(window).scrollStopped(function(){
$('body').removeClass('disable-hover');
});
that's it!
scrollStoppped plugin is contributed by Jason to detect the scrolling has stopped
detect scroll stop

Fix position of div tag inside dialog op-up

I have dialog box which comes on clicking a button. In the dialog box i have a button and other content. I want to make that button position fixed inside dialog pop-up.
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 50) {
$('#footer_buttons').addClass('sticky');
}
else {
$('##footer_buttons').removeClass('sticky');
}
});
<style>
.sticky{
position : fixed;
}
</style>
I used above code to make the button position fix, it worked outside the dialog box but not working when the same code is used inside the dialog box. I can make a button fix by adding a min-height to dialog and make the dialog content scrollable. But I don't want to add any scroll to the content inside dialog box.
Can any one help me out. Thanks in advance

From MDN CSS position property:
fixed:
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page.
So it doesn't matter where your element is. If you apply the fixed position, the top, left, right, bottom values are relative to the screen's viewport (visible area in browser).
In your case you should use absolute positioning and set the position using two of the four positioning properties: top, right, bottom, left. Don't forget to add position: relative or absolute to the modal container.

Make the boxes stay still when scrolling down using the scroll bar

when I click a box, i can drag it around the screen. You can click the folder icon to open up information view, and a scroll bar will appear because there are a lot of text.
Problem: when i use my mouse to scroll the scrollbar, it also drags the boxes as well. How do I make it not move the box when I click the scroll bar to move the bar?
I am using jsPlumb.draggable() to enable dragging.
jsfiddle: http://jsfiddle.net/7PuN3/2/

I would stop/start dragging:
$(function(){
$('#1 .button_wrap').on('click', function(e){
e.stopPropagation();
$(".info").html(newHtml).show();
jsPlumb.setDraggable("1", false)
});});
$(function(){
$("#1").on("click", ".info .ui-icon-close", function(){
$(".info").hide();
jsPlumb.setDraggable("1", true)
});
});
then in your css add this class, not to let the div fade when dragging is disabled:
.ui-state-disabled{opacity: 1;}

Quick look suggests to me, use relative or absolute positioning not fixed on button wrap. On my mobile it seems to work fine though.