jQuery Waypoints not firing at correct location - javascript

I'm trying to set up three waypoints with offset positions, the first waypoint is working absolutely fine and firing in the correct offset position (75%), but the second and third waypoints, located just after a Flexslider Carousel are not firing at the correct offset position. Due to the Carousel changing the height dimension of the page the second and third waypoints are firing once scrolled a lot further down the page then required, hence increasing the actual offset location.
I have tried to call $.waypoints('refresh') but I am not having any lucky. My code is as follows.
// first-flexslider
$(window).load(function() {
$('#firstSlider').flexslider({
animation: "slide",
directionNav: false,
controlNav: true,
});
});
// second-flexslider
$(window).load(function() {
$('#secondSlider').flexslider({
animation: "slide",
directionNav: false,
controlNav: false,
});
});
$('.prev, .next').on('click', function() {
var href = $(this).attr('href');
$('#secondSlider').flexslider(href)
return false;
})
$(document).ready(function(){
$.waypoints('refresh');
});
// waypoints
$(document).ready(function() {
$('.wp1').waypoint(function() {
$('.wp1').addClass('animated fadeInUp');
}, {
offset: '75%'
});
$('.wp2').waypoint(function() {
$('.wp2').addClass('animated fadeInUp');
}, {
offset: '75%'
});
$('.wp3').waypoint(function() {
$('.wp3').addClass('animated fadeInUpD');
}, {
offset: '75%'
});
});
I'm hoping to find out how to overcome this problem and have the 2nd and 3rd waypoints fire at the correct offset position (75%). Please let me know if you require any more information. Thanks.

Flexslider has a callback API where you can execute functions after various actions: https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties
I would check out the after callback and possibly the start callback and call refresh from there. For example:
$('#secondSlider').flexslider({
animation: "slide",
directionNav: false,
controlNav: false,
after: function() {
$.waypoints('refresh');
}
});

Related

Flexslider manipulation

I'm working with Flexslider and I'm running into a bit of trouble with some of the controls. I have a pretty simple configuration although I want to change the position of one of the direction arrows when the .flex-disabled class isn't present on it's adjacent control. First call is to flexslider, pretty typical. Then the second call is something I wrote but does not seem to fully function. Any help would be appreciated.
<script>
$(window).load(function() {
var $flexslider = $('.flexslider');
$flexslider.flexslider({
animation: "fade",
animationLoop: false,
animationSpeed: 500,
//controlsContainer: ".content",
directionNav: true,
manualControls: ".flex-control-nav li",
nextText: "View Next Property",
prevText: "View Previous Property",
slideshow: false
});
});
</script>
<script>
$(window).load(function(){
var previousControl = $('.flex-nav-prev a');
var nextControl = $('.flex-nav-next a');
if(previousControl.hasClass('.flex-disabled')){
nextControl.parent().css('left','.5em')
} else {
nextControl.parent().css('left','5em')
}
});
</script>
Try removing the period in the if:
if(previousControl.hasClass('flex-disabled')){
nextControl.parent().css('left','.5em')
} else {
nextControl.parent().css('left','5em')
}

How to run the iScroll plugin

I've decided to give the JavaScript library iScroll a try. I've run into some problems though. I just don't seem to get things to work as they are intended to. The basic setup is not written with jQuery in mind but this is how I believe it should be called.
$(document).ready(function () {
var myScroll = new IScroll('#wrapper', {
scrollX: true,
scrollY: false,
scrollbars: true,
mouseWheel: true,
interactiveScrollbars: true,
shrinkScrollbars: 'scale',
fadeScrollbars: true
});
myScroll();
});
document.addEventListener('touchmove', function (e) {
e.preventDefault();
}, false);
The documentation tells me this is the way add options to the code but somehow I can't get the scroll bars to render at all. I would also like to add a fade-out of a div based on the momentarily position of the scroll, ie. not the position when the scroll stops. This is how the scrollEnd position is called, but how do I get the position on the fly, ie. How do I trigger the fade-out when scrolling passes left -10, regardless if the scroll has stopped or not?
myScroll.on('scrollEnd', function () {
if ( this.x < -10 ) {
$('#logo').stop(true,true).fadeOut('fast');
} else {
$('#logo').stop(true,true).fadeIn('fast');
}
});

Cycle once and stop on the first slide

I am trying to make the bxslider cycle through three slides and then return to the first slide and stop the slideshow in that position. I've tried different bits of code but I can't find anything that specifically addresses this kind of action. Any help is appreciated.
$(document).ready(function(){
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
slideMargin: 0
});
});
The simplest way I can think of would be to insert a second copy of the first slide at the end so you have three slides and then another copy of the first and you tell it not to auto-repeat.
$(document).ready(function() {
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
infiniteLoop: false, // don't auto-repeat
slideMargin: 0
});
});
Beyond that, you could specify a callback and after the third slide finishes displaying, you could stop the auto-advance and then tell it to goto the first slide.
$(document).ready(function() {
var slider = $('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
infiniteLoop: false,
slideMargin: 0,
onSlideNext: function($slideElement, oldIndex, newIndex) {
if (newIndex >= 3) {
slider.stopAuto();
slider.goToSlide(0);
}
}
});
});
If you only have three slides (a fact you haven't included that would have helped us), then perhaps you won't get an onSlideNext event when infiniteLoop is off. In that case, you could use the onSlideAfter method and trigger after showing the third slide.
$(document).ready(function() {
var slider = $('.bxslider').bxSlider({
auto: true,
autoControls: true,
pause: 5000,
infiniteLoop: false,
slideMargin: 0,
onSlideAfter: function($slideElement, oldIndex, newIndex) {
if (newIndex >= 2) {
slider.stopAuto();
setTimeout(function() {
slider.goToSlide(0);
}, 5000); // put whatever time here you want the 3rd slide to show
}
}
});
});
Did you try this using callback?
var slider = $('.bxslider').bxSlider(options); //your default options here.
$('.bxslider').bxSlider({
onSlideAfter: function($slideElement, oldIndex, newIndex){
//if slide number is 3
if(newIndex === 2){
slider.goToSlide(0);
slider.stopAuto();
}
});
What this code will do is, it will callback onSlideAfter function as soon as the slide is changed.. If the slide index is 3 then the code will stop autoplay after going to first slide..
Used callbacks and methods :
onSlideAfter (callback)
goToSlide (method)
Reference here : http://bxslider.com/options

Show next Slide for current .flexslider only

I was hoping someone could help me modify the following piece of jQuery script to only go to the next slide for the object clicked and not all instances of .flexslider on my page
$(window).load(function() {
$('[id^=flexslider_]').flexslider({
animation: 'fade',
slideshow: false,
controlNav: false,
directionNav : false,
controlsContainer: '.flex-container',
start: function(slider) {
$('.slides li').click(function(event){
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
}
});
});
At the moment if i click any li element within .flexslider all my sliders change. I only want to select the slider i am clicking
EDIT
I have put in a
console.log(slider);
to see if it is finding each slider, the output is
div#flexslider_5.flexslider
div#flexslider_6.flexslider
So it has found both
Thanks
Small tweak to my existing setup has it working, thought i would post this incase it helps someone else
$(window).load(function() {
$('[id^=flexslider_]').flexslider({
animation: 'fade',
slideshow: false,
controlNav: false,
directionNav : false,
controlsContainer: '.flex-container',
start: function(slider) {
slider.find('.slides').click(function(event){ // Added slider.find('.slides')
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
}
});
});

How to show the next slide when you click on the image in flexslider

I'm using the flexslider plugin and i wanted to know if there is an easy way (apart from changing the core of the plugin which is what i am going to do if i don't find an easy answer)
to show the next slide when you click on the current slide. I set up the flexslider like this
$('.flexslider').flexslider({
directionNav : false,
slideshow: false,
animation: "slide",
controlsContainer: ".flex-container"
});
I disabled the Prev/Next command because i didn't like them. What should i do?
Maybe a little bit too late, but here's the solution for Flexslider 2:
$('.flexslider').flexslider({
directionNav : false,
slideshow: false,
animation: "slide",
controlsContainer: ".flex-container",
start: function(slider) {
$('.slides li img').click(function(event){
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
}
});
I had a Safari problem with the code above. This is my easy solution.
jQuery( document ).ready( function( $ ) {
$('.flexslider').on('click', function(){
$(this).find('.flex-next').click();
});
}
$(window).load(function() {
// Slider
$('.flexslider').flexslider({
directionNav : false,
slideshow: false,
animation: "slide",
controlsContainer: ".flex-container"
});
});
Here's a small update to the accepted answer above that targets the specific slider clicked, rather than all the sliders on the page:
$('.flexslider').flexslider({
start: function(slider) {
$('.slides li img', slider).click(function(event){
event.preventDefault();
slider.flexAnimate(slider.getTarget("next"));
});
}
});
After each slider animation completes, find the active slide and change the image src
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
slideshow: false,
touch: true,
itemWidth: 235,
itemMargin: 10,
after: function (slider) {
$(slider).find('.flex-active-slide').find("img").each(function () {
var src = $(this).attr("data-src");
$(this).attr("src", src).removeAttr("data-src");
});
});

Categories

Resources