Handy Code Snippits
A few code snippits we have used that may help you with your code.
-
Debounce
FatKit.$win.on('resize', FatKit.Utils.debounce(function() { // Stacey put your stuff here }, 20));
-
Images Loaded
FatKit.Utils.imagesLoaded($(element)).done(function() { // All images have loaded, do your stuff }).fail(function() { // Optional fail callback if any images don't load })
-
Sliders and Videos
This starts a slider, and stops it on slides that have a video. When the video finishes it starts it up again. Note: Doesn't work for videos that have the "loop" attribute, because they never end so don't fire
ended
.let objBanner = $('#banner-id'); if(objBanner.length > 0) { objBanner.on('focusitem.f.slider', function(e, index, slide) { if(slide.has('video').length > 0) { FatKit.slider(objBanner).stop(); var video = slide.find('video')[0]; var $video = $(video); video.currentTime = 0; video.play(); $video.off('ended'); $video.on('ended', function() { setTimeout(function() { FatKit.slider(objBanner).next(); FatKit.slider(objBanner).start(); $video.off('ended'); }, 1000); }); } }); FatKit.slider(objBanner, {dotnav:true}); }
-
Get nearest marker
This snippet will find the closest map marker on a given map to the location set in
'POSTCODE'
.You need to include the places API
https://maps.google.com/maps/api/js?key=API_KEY&libraries=places,geometry"
in your map script reference.FatKit.$.get("https://maps.googleapis.com/maps/api/geocode/json?address=POSTCODE").then(function(data) { if (data.status === "OK") { var location = data.results[0].geometry.location; var postcodeLat = location.latitude; var postcodeLng = location.longitude; var gLatLng = new google.maps.LatLng(postcodeLat, postcodeLng); var closest; $.each($('.f-map').data().map.arrMarkers, function () { var distance = google.maps.geometry.spherical .computeDistanceBetween(this.getPosition(), gLatLng); if (!closest || closest.distance > distance) { closest = { marker: this, distance: distance } } }); if (closest) { //closest.marker is the closest marker //just triggering the info window showing in this example google.maps.event.trigger(closest.marker, 'click'); } } });
-
Debug Event Listeners
This snippet lists all attached/removed events in order, and what added it.
(function () { var ael = Node.prototype.addEventListener, rel = Node.prototype.removeEventListener; Node.prototype.addEventListener = function (a, b, c) { console.log('Listener', 'added', this, a, b, c); ael.apply(this, arguments); }; Node.prototype.removeEventListener = function (a, b, c) { console.log('Listener', 'removed', this, a, b, c); rel.apply(this, arguments); }; }());