I hope someone can help me. Here is my project: http://jsfiddle.net/oz7bgL5v/8/
adjustNav: function(self, $parent) {
self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
$(".next").click();
$parent.addClass(self.config.currentClass);
}
This works when scrolling down but not when scrolling up.
I just need to go back in pagination navigation (click "previous" button) when scrolling up (You intuitively can understand what I mean when you see my project.)
To detect going to 'previous' when scrolling up you need to keep track of the previous scroll location when you handle scrolling. Please see how I did it in this fiddle: http://jsfiddle.net/x74w3tcs/
Then your adjustNav function can look like this:
adjustNav: function(self, $parent, direction) {
self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass);
$parent.addClass(self.config.currentClass);
if (direction === 'up') {
$(".prev").click();
}
else {
$(".next").click();
}
},
Related
I'm working with a Squarespace theme and ran into a little bit of an experience I was hoping y'all may be able to help me fix.
The page has a series of images that scroll horizontally. By default, scrolling does nothing. The below code was provided on the forums to make the scroll control the images by clicking the left or right arrows.
I was wondering what the best and most efficient way to add a simple "cooldown" effect to the function so that there is full delay before the next scroll.
Currently, the scroll just cycles through 3 or four and is very sensitive. I feel that would annoy users.
Thank you in adv for any help. Here's the page in question: http://nicpadula.com/brand-design
<script>
$(function() {
$("body").mousewheel(function(event, deltaY) {
if (deltaY > 0){
$(document).ready(function()
{
$("div.arrow-wrapper.left").click();
});
}
else if (deltaY < 0){
$(document).ready(function()
{
$("div.arrow-wrapper.right").click();
});
}
});
});
</script>
I have a normal scroll section at the top of the page which has some parallax effects and below it there are more standard animated fullPage.js sections.
It works really great but the problem I have is when I do a fast scrolling from top of the page. It skips second section and maybe the third, depending how fast mouse wheel is fired.
It's very bad user experience especially when using Apple's magic mouse, but issue occurs with any type of mouse.
I guess the problem is because of normal scroll section at the top, but I don't know how to solve it. Does anybody has the idea on how this could be solved?
Here is the link: http://2016.macleo.de
P.S. I have also added an onLeave callback with scrollTop animation triggering manually but still buggy. I can see third section a little when trying to scroll fast through site, like some users would probably do.
onLeave: function(index, nextIndex, direction) {
var leavingSection = $(this);
//after leaving section 1
if(index == 1 && nextIndex == 2 && direction =='down') {
$("html,body").stop().animate({scrollTop:$(window).height()});
}
}
Thanks a ton!
I'm using fullPage.js, especifically onLeave function to disable scrolling down in my website. This would be okay but I'm having issues using the menu because I just can scroll in one direction.
This is my code:
onLeave: function(index, nextIndex, direction){
if (direction == 'up') {
return false;
} else {
return true;
};
}
So, if I am on the number 3 section, and want go to section number 4, the page will be blocked. How could I handle an exception for my menu?
What about using $.fn.fullpage.setAllowScrolling(false, 'down');
?
From the docs:
Adds or remove the possibility of scrolling through sections by using the mouse wheel/trackpad or touch gestures (which is active by default). Note this won't disable the keyboard scrolling. You would need to use setKeyboardScrolling for it.
That won't disable your links.
$('#fullpage').fullpage({
afterRender: fuction(){
$.fn.fullpage.setAllowScrolling(false, 'down')
}
});
If you also want to disable the keyboard, then you need to use setKeyboardScrolling as well.
Just starting to use fullPage.js and loving it so far.
Anyhow, when implementing continuous and looping effect and you're on the first section, it allows the end-user to scroll up and land on the last section as well ... which is a problem when trying to tell a story to the user. Therefore I am just trying to disable the up scrolling, but have no idea how to do so.
I did some research and came across the moveSectionUp and tried disabling it but had not figure out how to. Can anyone familiar with fullPage.js help me out here?
Note: I am only hoping to disable it for the first section and the rest is free to scroll back and forth.
Thanks in advance.
Use the fullpage.js function setAllowScrolling with the parameter up like so:
//disabling scrolling up
$.fn.fullpage.setAllowScrolling(false, 'up');
You can use it on the afterRender callback and the afterLoad to play with it, like this:
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
continuousVertical: true,
afterRender: function () {
//disabling scrolling up on page load if we are in the 1st section
if($('.fp-section.active').index('.fp-section') === 0){
$.fn.fullpage.setAllowScrolling(false, 'up');
}
},
afterLoad: function (anchorLink, index) {
if (index !== 1) {
//activating the scrolling up for any other section
$.fn.fullpage.setAllowScrolling(true, 'up');
} else {
//disabling the scrolling up when reaching 1st section
$.fn.fullpage.setAllowScrolling(false, 'up');
}
}
});
Demo online
This way the visitors won't be able to scroll up on page load.
From the docs:
setAllowScrolling(boolean, [directions])
Adds or remove the possibility of scrolling through sections by using
the mouse wheel/trackpad or touch gestures (which is active by
default).
directions: (optional parameter) Admitted values: all, up, down, left,
right or a combination of them separated by commas like down, right.
It defines the direction for which the scrolling will be enabled or
disabled.
I am using bootstrap 3 and have a fullscreen hero unit at the top of my page, below that is my navigation. I have some js which allows my navbar to stick to be fixed at the top after you scroll past the full screen hero. Also some js for my smooth scrolling links.
The problem is the offset is different before you scroll past the full screen hero and after. But it works fine when you are past the jumbotron. I have tried a bunch of different things but I can seem to get this to work exactly.
Check out the fiddle here.
Here is my js for the smooth scrolling links:
$(document).ready(function() {
// navigation click actions
$('.scroll-link').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 1200);
});
// mobile nav toggle
$('#nav-toggle').on('click', function (event) {
event.preventDefault();
$('#main-nav').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 95;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
By changing var offSet = 95; I am able to adjust the offset but what would be the best way to use 180 before the navbar sticks to the top but 95 when it does?
Also here is the js I am using for my navbar:
$(function () {
/* $(".navbar-fixed-top").css({"top":$(".jumbotron").height()});
$(window).resize(function (e) {
$(".navbar-fixed-top").css({"top":$(".jumbotron").height()});
});*/
$(document).on( 'scroll', function(){
console.log('scroll top : ' + $(window).scrollTop());
if($(window).scrollTop()>=$(".jumbotron").height())
{
$(".navbar").addClass("navbar-fixed-top");
}
if($(window).scrollTop()<$(".jumbotron").height())
{
$(".navbar").removeClass("navbar-fixed-top");
}
});
});
Are you open to angular.js? I have a directive i use for this. As seen here.
I'll grab the plunker link for you. you might find the code helpful.
Essentially you need to create a ghost dom element to take the place of the menu when you pull it to an new layout position.
EDIT: Here it is
I won't suggest grabbing angular just for this. But you can use the basis of the events and logic to build your own solution.
This here is creating an element and placing in its place
$scope.spacer = $element.after(
'<div class="spacer" style="height:' + $element[0].clientHeight + 'px"> </div>').next();
then this element is removed when the menu is back to its static position.
Inspect the dom and watch how it changes, this will probably help you see the events and changes that need to take place.
EDIT 2 SOLUTION:
HERE is the concepts applied to your JSFiddle
It's not the best solution but by adding margin: 0 0 -100px 0; to your .navbaryou lose the spacing issue.
Also you're getting 22 console errors because of missing images. I'm not saying that this is causing any major problems but you would be better off losing them.
The problem is that when you have not scrolled past the hero, navigation is still part of the layout and pushes content bellow it a little lower. When you scroll past (either manually or via a script) the hero, navigation is removed and fix positioned. That makes everything which was bellow to "jump up" exactly of the navigation height.
That means if portfolio was 1000px from the top, on click you say: go 1000px from top; but then porfolio moves 100px up (as explained above) meaning it is now 900px from the top while the window scrolled 1000px as you asked.
When you have scrolled past the hero, nothing changes its position.