Is it possible to add auto-scrolling events before the section scroll to the next portion? Let's say after scrolling to section 2, the user must scroll twice, which will activate two separate animations, before then scrolling to section 3. Should I disable the auto scroll? I have tried to use this
onLeave: function(index, nextIndex, direction){
if(index == 2 && direction =='down'){
function act2s(){
$('.sc1').removeClass('opno').delay(1000).promise().done(function(){
$('.sc2').removeClass('opno').delay(500).promise().done(function(){
$('.vg_act2-inner').addClass('vertical_grid_active');
$('.hg_act2-anti_inner').addClass('horizontal_grid_active');
$('.hg_act2-anti_out-inner').addClass('hg_act2-anti_out-inner_active');
$('.hg_act2-inner').addClass('hg_act2-inner_active').delay(500).promise().done(function(){
$('.red2').addClass('red_active');
});
});
});
}
setTimeout(act2s, 2000);
return false;
}
},
However, some strange reason the animation is stopped just after the first sc1 has the class removed. Is there a way to catch the two scroll events to activate the animation and then returning true again so the section can resume sliding?
Check out the documentation
Cancelling the scroll before it takes place
You can cancel the scroll by returning false on the onLeave callback:
$('#fullpage').fullpage({
onLeave: function(index, nextIndex, direction){
//it won't scroll if the destination is the 3rd section
if(nextIndex == 3){
return false;
}
}
});
Related
On my bootstrap carousel, I trigger today an event based on slide.bs.carousel, but I would like to restrict it to only sliding to the right direction.
Current code (working)
$('#carousel').on('slide.bs.carousel', function(e) {
alert('slided a slide');
});
My attempt at only triggering it when user slide to the right (not working):
$('#carousel').on('slide.bs.carousel', {direction: 'right'}, function(e) {
alert('slide a slide in the right direction');
});
How to achieve this?
The event has an direction property (but in my case the direction are inversed 'right when I click on left'), can't you just make a condition on it like this ?
$('#carousel').on('slide.bs.carousel', function(e) {
if ('right' == e.direction) {
alert('slided a slide');
}
});
Can use preventDefault to restrict it
$('#carousel').on('slide.bs.carousel', function (event) {
if(event.direction === 'left'){
event.preventDefault()
}
})
I am using a fullpage.js plugin and would like to transition the menu from the footer to the header once the user scrolls past the first slide.
On this Page:
However the full screen functionality is not allowing me to check when there is a scroll event.
I have written this:
$(window).scroll(function(){
if ($(window).scrollTop() > $('.topDiv').position().top) {
console.log('div hits top!');
}
});
To check if the top grey div is at the top of the window, but it does not work.
Even:
$(window).scroll(function(){ console.log('scrolling'); });
is not working.
I think the best way to implement the desired feature is to use the callbackd provided by fullPage.js instead of relying to $(window).scroll()
You can have a custom function called on each of this callback:
onLeave: function(index, nextIndex, direction){}
afterLoad: function(anchorLink, index){}
Then you can check the index, and nextIndex value to perform the desired logic.
Hope that helps.
May be this will help
$('elem').bind('DOMMouseScroll', function(e){
if(e.originalEvent.detail > 0) {
console.log('Down');
} else {
console.log('Up');
}
//prevent page fom scrolling
return false;
});
//IE, Opera, Safari
$('elem').bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta < 0) {
//scroll down
console.log('Down');
} else {
console.log('Up');
}
//prevent page fom scrolling
return false;
});
Animation on scroll function is working fine on desktop view but it mess up the scrolling and scroll to random sections when I switch to mobile view and uses touch to scroll the screen. This is my animate on scroll function :
$(window).scroll(function() {
$('.skillbar').each(function(i){
if($(window).scrollTop() + $(window).height() > $(this).offset().top ){
jQuery(this).find('.skillbar-bar').animate({
width:jQuery(this).attr('data-percent')
},6000);
}
});
});
If I use the windows on scroll function, it mess up the mobile view. Please help to solve this issue so that animate on scroll can work on both mobile view with touch scroll and desktop view without messing the scroll.
For more Information these are the other scroll events:
(function($) {
"use strict"; // Start of use strict
// jQuery for page scrolling feature - requires jQuery Easing plugin
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: ($($anchor.attr('href')).offset().top - 54)
}, 1250, 'easeInOutExpo');
event.preventDefault();
});
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '#mainNav',
offset: 80
});
// Closes the Responsive Menu on Menu Item Click
$('#navbarResponsive>ul>li>a').click(function() {
$('#navbarResponsive').collapse('hide');
});
// jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($("#mainNav").offset().top > 100) {
$("#mainNav").addClass("navbar-shrink");
} else {
$("#mainNav").removeClass("navbar-shrink");
}
});
})(jQuery); // End of use strict
EDIT
Since this is the same function for both events...
Maybe calling it on the same handler and use an or to trigger only once will do the trick.
$(window).on("touchmove scroll", function(e) {
// Do the function on ONLY ONE of the two event.
if(e.type=="touchmove" || e.type=="scroll"){
$('.skillbar').each(function(i){
if($(window).scrollTop() + $(window).height() > $(this).offset().top ){
jQuery(this).find('.skillbar-bar').not(".triggered").addClass("triggered").animate({
width:jQuery(this).attr('data-percent')
},6000);
}
});
}
});
EDIT
I've added a subtility using a triggered class.
.not(".triggered").addClass("triggered")
One the first iteration of the .each() function, none of the skillbar-bar has the trigered class.
So let's add it! Then trigger the animation.
On the second and all next iterations, the triggered class removes all skillbar-bar which already have the triggered class out of the collection.
This prevent the animate() function to be fired more than once on each skillbar-bar.
I think this was the issue.
Let me know if it works !
1. As in title,highlighting text in is resetting (hiding) submenu(since it's based on javascript i have used few event prevents written below #3 but none helped to stop turning whole submenu off)
2. Does CSS3 transit goes over jQuery or jQuery over CSS3? And how to make CSS3 transit "click" event and then make it return false after second click on the item? (if it's possible, the idea is to keep "opacity/fade" animation as long as the submenu is open).
3. How to prevent my navbar to stop going top after clicking on "special item" (via javascript). I have tried 3 variations in each function: e.preventDefault / event.stopPropagation() / return false() at the end, before last "});".
PS. Only chrome support at the moment
-> https://jsfiddle.net/34ho1fd9/7/
$(document).ready(function()
{
$(".account").click(function(e)
{
var X=$(this).attr('id');
if(X==1)
{
$(".submenu").hide();
$(this).attr('id', '0');
}
else
{
$(".submenu").show();
$(this).attr('id', '1');
}
return false;
});
//Mouse click on sub menu
$(".submenu").mouseup(function(e)
{
return false
});
//Mouse click on my account link
$(".account").mouseup(function(e)
{
return false
});
//Document Click
$(document).mouseup(function(e)
{
$(".submenu").hide();
$(".account").attr('id', '');
});
return false;
/*$(".transition").click(function())
{
$(this).fadeTo(200, 0.8, function()
{
});
});
return false; */
});
The Bootstrap carousel is a strange beast. I've tried tweaking $next to prevent infinite looping but end up either breaking it or preventing the slides from going backwards when reaching the end.
I would like the carousel to only slide within the list and not infinitely loop.
Any help would be appreciated.
$next = $next.length ? $next : this.$element.find('.item')[fallback]()
if ($next.hasClass('active')) return
if ($.support.transition && this.$element.hasClass('slide')) {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$next.addClass(type)
$next[0].offsetWidth // force reflow
$active.addClass(direction)
$next.addClass(direction)
this.$element.one($.support.transition.end, function() {
$next.removeClass([type, direction].join(' ')).addClass('active')
$active.removeClass(['active', direction].join(' '))
that.sliding = false
setTimeout(function() {
that.$element.trigger('slid')
}, 0)
})
} else {
this.$element.trigger(e)
if (e.isDefaultPrevented()) return
$active.removeClass('active')
$next.addClass('active')
this.sliding = false
this.$element.trigger('slid')
}
Update: This is unrelated to "autoplay" I'm specifically referring to manually pressing the left and right buttons.
For the carousel to not infinitely loop (using Bootstrap 3.0.0), and stop at the last slide unless the "next" arrow is clicked, the following is the best way to do it:
$('.carousel').carousel({
interval: 5000,
wrap: false
});
Setting the wrap option to false tells the carousel to stop cycling through the slides automatically. I hope this answers your question correctly.
You could just add some code to the page to hide the appropriate carousel controls after a slid event:
$('#myCarousel').on('slid', '', function() {
var $this = $(this);
$this.children('.carousel-control').show();
if($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
} else if($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
}
});
This example assumes the markup used on the Twitter Bootstrap example carousel.
Make sure to hide the left one when you open the page.
Add attribute data-wrap="false" in Div
The easiest way to do this is as follows:
//intro slider
$('#carousel_fade_intro').carousel({
interval: 2500,
pause: "false"
})
//Stop intro slider on last item
var cnt = $('#carousel_fade_intro .item').length;
$('#carousel_fade_intro').on('slid', '', function() {
cnt--;
if (cnt == 1) {
$('#carousel_fade_intro').carousel('pause');
}
});
Not sure if this is only relevent to the newest version of Bootstrap but setting data-wrap="false" on the outermost carousel container will prevent it from proceeding past the final slide.
source: http://getbootstrap.com/javascript/#carousel-options
For people looking for a solution for Bootstrap 3 working for multiple carousels on same page try this:
$(function() {
// init carousel
$('.carousel').carousel({
pause: true, // init without autoplay (optional)
interval: false, // do not autoplay after sliding (optional)
wrap:false // do not loop
});
// init carousels with hidden left control:
$('.carousel').children('.left.carousel-control').hide();
});
// execute function after sliding:
$('.carousel').on('slid.bs.carousel', function () {
// This variable contains all kinds of data and methods related to the carousel
var carouselData = $(this).data('bs.carousel');
// get current index of active element
var currentIndex = carouselData.getItemIndex(carouselData.$element.find('.item.active'));
// hide carousel controls at begin and end of slides
$(this).children('.carousel-control').show();
if(currentIndex == 0){
$(this).children('.left.carousel-control').fadeOut();
}else if(currentIndex+1 == carouselData.$items.length){
$(this).children('.right.carousel-control').fadeOut();
}
});
Please let me now if this is not working in your case.
if you are using bootstrap 3 use this
$('.carousel').carousel({
wrap: false
});
The codes posted here have two problems: doesn't work if you have more than one carousel on the same page and doesn't work if you click on the indicator dots. Also, in Bootstrap 3 the event has changed name.
The below code is an updated version of this code. And here you can find a more detailed explanation
checkitem = function() {
var $this;
$this = $("#slideshow");
if ($("#slideshow .carousel-inner .item:first").hasClass("active")) {
$this.children(".left").hide();
$this.children(".right").show();
} else if ($("#slideshow .carousel-inner .item:last").hasClass("active")) {
$this.children(".right").hide();
$this.children(".left").show();
} else {
$this.children(".carousel-control").show();
}
};
checkitem();
$("#slideshow").on("slid.bs.carousel", "", checkitem);