Comments (5)
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!)
from background-check.
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);
});
});
from background-check.
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();
});
});
from background-check.
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
from background-check.
Awesome!!
At the moment, the plugin only supports images - using either <img>
or CSS background-image.
from background-check.
Related Issues (20)
- Unable to get image data from canvas because the canvas has been tainted by cross-origin data. HOT 2
- Target: Check not only image but any background?
- Using with FullPage.js HOT 1
- HTML-Element containing image with overflow:hidden; - invisibility of image is ignored
- is there a way to detect after? HOT 1
- Classes not added to element HOT 1
- cross origin not working.
- Finding image, but not sorting HOT 1
- Cross origin demo not working HOT 1
- Owl carousel not working with background-check
- Error: Area too small but image is there
- Uncaught [object HTMLDivElement] is not a target HOT 1
- Janky Colour Swapping HOT 2
- Edit color sensibility
- Doesn't seem to work HOT 2
- Not able to detect specific area of image
- The canvas has been tainted by cross-origin data. HOT 7
- Nested/Child elements with classname HOT 2
- For God's sake - update it!
- refresh() does not add CSS classes
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from background-check.