Refresh only after window resize / iDangerous Swiper

[ough-]

Hello, I got this working as far as I could on this test page: http://julia.samambaia.co.uk/3

But the text colour only changes after a bit of window resize. If you do that on the full screen slide you'll notice.

(disclaimer: I'm a graphic designer learning to code so please excuse my ignorance)

Thank you.

[kennethcachia]

Hi!

I can't access the link anymore but I've noticed that you're using BackgroundCheck on http://julia.samambaia.co.uk/. The logo and nav links change color from slide to slide. Are you still experiencing this issue?

(No problem!)

[ough-]

Hi, I managed to fix it but I suspect it's not very clean. I basically called the functions again after each click/swipe/scroll:

$(document).ready(function() { window.addEventListener('DOMContentLoaded', function () { // Prepare BackgroundCheck BackgroundCheck.init({ targets: '.target', images: '.change' }); });

$(document).on('click', function(e){ setTimeout(function(){ BackgroundCheck.refresh(); },300); });

$(document).on('mousewheel', function(e){ setTimeout(function(){ BackgroundCheck.refresh(); },300); });

$(document).on('keydown', function(e){ setTimeout(function(){ BackgroundCheck.refresh(); },300); });

$(document).on('touchmove', function(e){ setTimeout(function(){ BackgroundCheck.refresh(); },300); });

});

[kennethcachia]

Makes sense.

init() is used to initialize the plugin and process the targets and images once. In addition, you need to call refresh() every time the position of the targets and/or images change.

You have two options when using sliders:

• call refresh() after a timeout which must be >= to the duration of the slide transition
• certain sliders fire an event or execute callback functions when a slide transition is ready which you can use to call refresh()

Swiper has an onSlideChangeEnd callback function - http://www.idangero.us/sliders/swiper/api.php.

Try the following:

Exclude javascripts/text-colour-fs.js from your site and rewrite your existing block:

var mySwiper = new Swiper('.swiper-container')
$('.arrow-right').on('click', function(e){
  e.preventDefault()
  mySwiper.swipeNext()
})

to:

$(document).ready(function() {
  // Initialize Swiper
  var mySwiper = new Swiper('.swiper-container', {
    onSlideChangeEnd: function() {
      BackgroundCheck.refresh();
    }
  });

  // Prepare BackgroundCheck
  BackgroundCheck.init({
    targets: '.target',
    images: '.change'
  });

  $('.arrow-right').on('click', function(e) {
    e.preventDefault();
    mySwiper.swipeNext();
  });
});

[ough-]

That worked a treat, thanks!

On a slightly different note, is it possible to have the script working on both background-image and background-color?

Thanks again

[kennethcachia]

Awesome!!

At the moment, the plugin only supports images - using either <img> or CSS background-image.