I'm trying to scroll through my horizontal Bootstrap tabs, however, the scroller goes all the way to the end of the tab list, making some tabs not even visible. So is there a way to incrementally scroll through the tabs until you get to a certain point? (then I'd be fine with it scrolling to the end).
I've googled this subject quite a bit, and all the examples seem to go right to the end of the tablist.
jsFiddle: https://jsfiddle.net/82c4ged0/
$('.scroller-right').click(function() {
$('.scroller-left').fadeIn('slow');
$('.scroller-right').fadeOut('slow');
$('.list').animate({left:"+="+widthOfHidden()+"px"},'slow',function(){
});
});
$('.scroller-left').click(function() {
$('.scroller-right').fadeIn('slow');
$('.scroller-left').fadeOut('slow');
$('.list').animate({left:"-="+getLeftPosi()+"px"},'slow',function(){
});
});
In the fiddle, with the much smaller window, it's much clearer to see how the scroller goes straight to the last tabs in the list
The way things are currently setup, you're getting the amount to scroll with this variable/function.
var widthOfHidden = function(){
return (($('.wrapper').outerWidth())-widthOfList()-getLeftPosi());
};
You'll need to calculate how many pixels to move over on each click. It's roughly -220px which you can put in manually to try it out. You can put that in manually, like below, and see if things behave close to how you want them to.
var widthOfHidden = function(){
return -224;
};
Related
In my angularjs application I have approximately 23 tabs. So 90% of the width I have given for tabs with overflow : hidden, and 10% width Prev and Next icons. Each Tab has 36px width. So by default on the page 5 tabs are getting visible. Now when I click Next, I just want to scroll 5 tabs to left, like this continue till the last tab visible. So in my Next icon click event I am trying to do this some thing like the following, in my controller, to get the max scroll left and then use it but in my code maxScrollLeft is returning NaN.
_self.getNextTabs = function () {
var maxScrollLeft = $element.scrollWidth - $element.clientWidth;
alert(maxScrollLeft);
angular.element(document.querySelector('.main_tabSet .nav-tabs')).scrollLeft(600);
}
Here I have hard coded .scrollLeft(600); for testing purpose, so when I click Next, the tabs are scrolling left. But I want to make this scrolling to work correctly based on the max scroll left and the number of tabs that are being occupied. can any one help me in fixing it.
Not sure if _self.getNextTabs is in a directive, a controller or some other location, but the name $element indicates (to me) that it may be inside a directive?
If so, then I think $element may be a jquery object. AND - if that's the case, then you would need to use the syntax $element[0].scrollWidth et al...
_self.getNextTabs = function () {
var maxScrollLeft = $element[0].scrollWidth - $element[0].clientWidth;
angular.element(document.querySelector('.main_tabSet .nav-tabs')).scrollLeft(600);
}
I'm using iScroll.js on a project and I'd like to trigger an animation when scrolling past a <div>. I'm a little bit lost as to how to do it, as using iScroll means Waypoints.js doesn't work.
overlayScroll = new IScroll('.overlay', { mouseWheel: true });
overlayScroll.on('scrollStart', scrollFn);
function scrollFn(){
//do something
};
This makes my actions happen when I scroll on top of the .overlay, but I need it to only start after reaching a certain point inside the .overlay. I also want to be able to detect direction so I can reverse the actions if the user scrolls up. Any help would be greatly appreciated.
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 .
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'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}
]
}