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.

    var 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.

    $.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);
        };
    }());