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.
Related
How can I configure dhtmlxGantt to scroll while moving task out of visible area (left, right).
For example, I try to move task "Marketing" after 20 Apr on this sample
http://dhtmlx.com/docs/products/dhtmlxGantt/01_basic.html
it's not working, so there isn't horizontal automatic scrollbar.
Second example with scroll
http://dhtmlx.com/docs/products/dhtmlxGantt/05_critical_path.html
I'm trying drag "Documentation creation" task to the right side, but horizontal scroll not working.
The sample pages you provided answer you question. A function get triggered to enable the horizontal scrolling:
Event:
<body onresize="modHeight()">
Function:
function modHeight(){
var headHeight = 35;
var sch = document.getElementById("gantt_here");
sch.style.height = (parseInt(document.body.offsetHeight)-headHeight)+"px";
gantt.setSizes();
}
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!
I would like to scroll horizontally the given element. The only way I find is using ScrollIntoView DOM method, which allows either align the element's bottom with the view bottom or the top - with the view top.
But what if the element is OK with respect to the Y axis, and I only want to scroll it horizontally? How can I align its left with the view left or its right with the view right?
EDIT
Here is more context. I have a YUI table with a horizontal scrollbar. I wish to scroll it programmatically to a certain TD node. I do not think window.scrollTo is of any help to me, since the scrollbar is on a div element, not on the whole page.
EDIT2
Turns out there is a duplicate SO question with the right answer - How can I scroll programmatically a div with its own scrollbars?
Voting to close mine.
I've recently had a problem with a table header that had inputs as filters for each column. Tabbing through the filters would move the focus, but if one of the inputs wasn't visible or if it was partly visible, it would only JUST bring the input into view, and I was asked to bring the full input and column into view. And then I was asked to do the same if tabbing backwards to the left.
This link helped to get me started: http://www.webdeveloper.com/forum/showthread.php?197612-scrollIntoView-horizontal
The short answer is that you want to use:
document.getElementById('myElement').scrollLeft = 50;
or:
$('#myElement')[0].scrollLeft = 50;
Here's my solution (which may be overkill for this question, but maybe it'll help someone):
// I used $.on() because the table was re-created every time the data was refreshed
// #tableWrapper is the div that limits the size of the viewable table
// don't ask me why I had to move the head head AND the body, they were in 2 different tables & divs, I didn't make the page
$('#someParentDiv').on('focus', '#tableWrapper input', function () {
var tableWidth = $('#tableWrapper')[0].offsetWidth;
var cellOffset = $(this).parent()[0].offsetLeft;
var cellWidth = $(this).parent()[0].offsetWidth;
var cellTotalOffset = cellOffset + cellWidth;
// if cell is cut off on the right
if (cellTotalOffset > tableWidth) {
var difference = cellTotalOffset - tableWidth;
$('#tableWrapper').find('.dataTables_scrollHead')[0].scrollLeft = difference;
$('#tableWrapper').find('.dataTables_scrollBody')[0].scrollLeft = difference;
}
// if cell is cut off on the left
else if ($('#tableWrapper').find('.dataTables_scrollHead')[0].scrollLeft > cellOffset) {
$('#tableWrapper').find('.dataTables_scrollHead')[0].scrollLeft = cellOffset;
$('#tableWrapper').find('.dataTables_scrollBody')[0].scrollLeft = cellOffset;
}
});
This is something I used a while back. There might be better and more efficient way of doing it but this gets the work done:
$(".item").click(function(event){
event.preventDefault();
// I broke it down into variable to make it easier to read
var tgt_full = this.href,
parts = tgt_full.split("#"),
tgt_clean = parts[1],
tgt_offset = $("#"+tgt_clean).offset(),
tgt_left = tgt_offset.left;
$('html, body').animate({scrollLeft:tgt_left}, 1000, "easeInOutExpo");
})
You just need to make sure that the item is an a tag with an href that corresponds to the target id element:
HTML:
go to section 1
...
<section id="one"> Section 1</section>
Hope this helps!
I'm trying to do something like this.
http://www.mini.jp/event_campaign/big-point/
What I can't figure out is how to make the animation happen based on the scroll when the scroll hits a specific position. I have similar blocks of content that I only want to animate parts of it based on the scroll and when the block is within the browsers view area when scrolling.
I understand using the scroll event to get the scrollTop position I'm more concerned with how everything else would work.
$(window).bind('scroll',function(e){
var scrolledY = $(window).scrollTop();
});
Anyone can help explain some of this.
Thanks
Just like what MiniGod said in the comment, look in to the source code (animate.js), and you can see that they have recorded all the "scenes" and all other things like alpha and pos for everything.
// scene 1
{
scene:"#scene1",
name:".car",
runStatus:[
{p:10,pos:true,x:275,y:240,alpha:true,opacity:1,scale:true,orgSize:[475,270],scaleSize:1},
{p:180,pos:true,x:275,y:200,alpha:true,opacity:1,scale:true,orgSize:[475,270],scaleSize:1},
{p:270,pos:true,x:275,y:140,alpha:true,opacity:1,scale:true,orgSize:[475,270],scaleSize:1},
{p:500,pos:true,x:275,y:-300,alpha:true,opacity:0,scale:true,orgSize:[475,270],scaleSize:1}
]
}
What I am trying to achieve is this, imagine you have a tall page with several divs in it.
The tall page itself is scrollable, the divs as well.
What I want to achieve is to prevent scrolling the whole page when scrolling the divs to the limit.
What now happens is that when you reach the end of the div by scrolling ferociously you start scrolling the entire page. I want to prevent scrolling the entire page, as this is for a private project and the items in the bottom rarely get used.
The divs are not generated dynamically so I can hardcode everything.
If it is possible I would really like to avoid using jQuery, cause that seems a bit overkill in this case.
//edit:
A small example can be found at http://gnur.nl/demo.html
The intended behavior of this demo is that the entire page never scrolls when you are scrolling inside the bacon div.
I'm afraid it's a lost battle, the scroll event doesn't look to be cancelable:
http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll
Or may be with a desperate hack to scroll back the amount of pixel that were scrolled:
var lastPos = isNaN(window.pageYOffset) ?
document.documentElement.scrollTop :
window.pageYOffset;
window.onscroll = function(ev){
var diff = (isNaN(window.pageYOffset) ?
document.documentElement.scrollTop :
window.pageYOffset) - lastPos;
window.scrollBy(0, -diff);
};
And using onmouseover and onmouseout over the DIVs to prevent it or not.