Develop Reference

Forbid horizontal scroll in a <div> (jquery.gantt)

how to dissable horizontal scroll in a container? E.g. via JS.
I'm using https://taitems.github.io/jQuery.Gantt/ in the max. zoom-level, so that i don't need to horizontal scroll. nevertheless, some bars are longer and when I hover with my mouse over the of the gantt, the horizontal scroll activates.
How to forbid that?
Many thanks in advance!

You need to block the scroll event with with js because the horizontal-scroll is activate on the whole container, not only the gantt one. So you should search into js files.
Did you try to comment those lines (264, 265, 267 in *jquery.fn.gantt.js) ?
//element.scrollNavigation.panelMargin = parseInt($dataPanel.css("left").replace("px", ""), 10);
//element.scrollNavigation.panelMaxPos = ($dataPanel.width() - $rightPanel.width());
//element.scrollNavigation.canScroll = ($dataPanel.width() > $rightPanel.width());
OR as #Wimanicesir commented try to set element.scrollNavigation.canScroll = false; right below the line I show you above.

How to change initial position of drag-down scroll in web Page?

Normally web page automatically scroll down or scroll up when mouse with link or drag element reach bottom/top of the view port.I need to change the position of start scrolling of the webpage, the web page or particular <div> scroll down/up when a drag-element reach some distance of the view port.How can achieve this. I am using angular-drag-and-drop-lists Plug.
Default Scrolling Start Position:
Customize Scroll start Position (I need this result):

Probably you need some js code based on drag event.
Quick html example:
Example link
<script>
//Put distance you want to scroll from
var youMaxDist = 50;
var scrollSpeed = 10;
function calcCoords(event) {
//Distance to buttom. It isn't works fine, but good enough
var currDist = window.innerHeight - event.clientY;
//Trigger scroll
if(currDist < youMaxDist)
window.scrollTo(0, document.documentElement.scrollTop + scrollSpeed);
}
</script>
Also, please, pay some attention for browser version supports and mobile screen issues

How to move svg chart on mouse scroll with D3.js

I have two charts; bar chart and word cloud.
I would like word cloud to move down as I scroll down. Any ideas/examples on how to achieve this with D3.js / JavaScript?
Here is my DEMO (You should launch the preview in separate window).
Thanks!

You can control the positioning of a DOM element through a window event listener like this:
window.addEventListener("scroll", myFunc.bind(this, document.getElementById("scroller")), false);
function myFunc(div) {
var scroll = document.body.scrollTop;
div.style.top = (scroll / 10)+"px";
};
So for every ten pixels the user scrolls, the scroller element will move one pixel.
http://jsfiddle.net/76vd9h3g/
Cross browser implementation of scrollTop here

One page scroll wrong offset with floating menu bar

I am having an issue. Im using a one page design for a friend with a fixed floating menu on the top. The problem I encounter is that when I click on a link it scrolls down but the offset is not right. Most the of time it scrolls down a little too much covering the content below the menu. What I am trying to achieve is that the scrolling stops at the div being exactly below my menu bar. The other issue is that somehow it wont scroll down when the space between two sections is too narrow. It tries but somehow only moves a few pixels then stops. I can imagine that both are related to the offset issue.
Im sorry, english is not my native language.
Here is what I got so far. A standard scrolling function with window.location.hash. The target are divs spread across the site.
$(document).ready(function () {
$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
var target = this.hash;
var t = $(this.hash).offset().top;
$('.wrapper').animate({
scrollTop: t,
}, 1000, function () {
window.location.hash = target;
});
});
});
You can see an example of the problem live: http://rolfvohs.com/
What I tried so far was using the add.class function to bind the div with an extra padding when a link is clicked. It does work in a way but creates an awkward space. I also tried placing the divs at different locations but that does not fix the job either, just messes it up further.
I would appreciate some insight.

window.location.hash = target;
moves the scroll by default to the div position and you are setting offset top before the hash change so first its changes the offset after that it move to div location.
first try after removing the line "window.location.hash = target;" from the code
or
move the "window.location.hash = target;" out side and above the "$('.wrapper').animate({})" it will work .

Jquery Sticky Nav Issue

I'm been trying to get my head around issue and seem to cant find some help.
http://fiddle.jshell.net/DQgkE/7/show/
The experience is a bit jumpy and buggy now- but what i will like is
1) When you scroll down the page. I want the Sticky Nav to be (disable,dropped off, stop) at a specific location(chapter-3) on the page and the user should have the ability to keep scrolling down.
2) When the user is scrolling back up, the code will stick the nav back and carry it up until the nav reaches the original position at the top.
Below is a starting point.
3) Currently is kinda of doing that but there's some huge jump going on when scrolling back up
http://imakewebthings.com/jquery-waypoints/#doc-disable
using disable, destroy, enable option will be nice.
This is a original experience cleaned: http://fiddle.jshell.net/DQgkE/1/show/
Thanks for the help in Advance.

I'm not sure how this plugin you used work, but I have a solution I wrote a while back that I wrote in jquery. It has few variables at the top, the item you wanted sticky, the item where you want it to stop, and the class to add when it becomes sticky and padding at the top and bottom. I only modified the javascript portion in this fork.
EDIT
I went ahead and fixed the original code. Solution without waypoint plugin is in comments.
Here is the result:
http://fiddle.jshell.net/Taks7/show/

I would recommend to use jQuery (that was a surprise, right?! :P)
$(document).ready(function() { //when document is ready
var topDist = $("nav").position(); //save the position of your navbar !Don't create that variable inside the scroll function!
$(document).scroll(function () { //every time users scrolls the page
var scroll = $(this).scrollTop(); //get the distance of the current scroll from the top of the window
if (scroll > topDist.top - *distance_nav_from_top*) { //user goes to the trigger position
$('nav').css({position:"fixed", width: "100%", top:"*distance_nav_from_top*"}); //set the effect
} else { //window is on top position, reaches trigger position from bottom-to-top scrolling
$('nav').css({position:"static", width:"initial", top:"initial"}); //set them with the values you used before scrolling
}
});
});
I really hope I helped!