cahoots.events

Project Details

Requirements

Supplementing a brand refresh activity, Cahoots required a new website and mechanism to capture customer demand without the overhead and investment involved with maintaining a full blown eCommerce solution. The solution should have a responsive, modern user interface whilst having a simple and standardised backend for the management of products and customer demand capture.

Solution

The front end has been hand crafted using CSS and jQuery. A Grunt powered build process ensures, cross platform CSS and optimised/minimised asset delivery. A low cost, off the shelf plugin for Expression Engine provides a simple way for Cahoots to maintain a product portfolio and allows the end user to create a wish list which is delivered to the Cahoots team.

Technologies Used

Interesting Problems

Full Screen Masthead Carousel

One of the first front end requirements was to have a masthead on a rotating carousel, whilst displaying an asterism positioned at the bottom of the screen and ensure that the asterism kept its position (and therefore masthead hight) dynamically as the page was resized.

This was an interesting challenge as it had a few different components. Like with everything in code, there are a hundred different ways to solve a problem. Heres what I decided to do: -

Carousel with Dynamic height

Straight off the bat, I decided to use slick.js to manage the carousel. It is literally the last carousel you'll ever need! However, I needed a way to make the carousel container change its height to fill the viewport. As soon as the page is ready and when the screen is resized, I call a function to measure the screen height, subtract a little bit at the bottom to show the asterism and apply a dynamic height attribute to the masthead container.

Here you can see the function that I call...

//Calculate the height of the window and change masthead elements
function calcHeight(){
    $varHeight $(window).height() 100;
    $('.masthead-carousel').css('height'$varHeight);
    $('.main-logo').css('top', ($varHeight/2) - ($('.main-logo').height()/2));
}

I call this function when the page loads: -

$(document).ready(function() {
 calcHeight();
});

and again when the window is resized: -

$(window).resize(function(){
    calcHeight();
});

Prevent Performance Issues

Without going into too much detail, we can see that the resize event is going to fire a lot and handler function that we attach is going to be called way too many times. Probably with this being the only calculation happening and with it being a relatively small calculation, I'll not notice any performance issues. But doing this without any control is a bit irresponsible and can quickly become a problem.

After some research on implementation of throttling vs debouncing, I decide to implement a generic debounce function which I can attach to the resize event.

//Debounce Function
function debounce(funcwait, immediate) {
    var timeout;
    return function() {
        var context = thisargs = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) {
                func.apply(context, args);
            }
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(laterwait);
        if (callNow) {
            func.apply(context, args);
        }
    };
}

So using this on the resize event, I can ensure that the calcHeights function is only executed if 100ms have passed without it having been executed already: -

//Debounce the window resize event
$(window).resize(debounce(function(){
        calcHeight();
    }, 100));
});

Making it Fully Responsive

The screen height needs to be slightly different at different resolutions meaning I need to apply a different magic number to the calcHeight function depending upon the resolution. I don't really want to go heavy handed on the javascript as I'm using media queries in the stylesheet to manage the screen sizes but how do I get my calcHeight function to understand the current screen width?

Again, there are a million different ways to achieve this but this is how I decided to do it. Mainly because it was simple, avoided loading a ton of extra js libraries and utilised the media queries that I already had in the style sheets. The only comment I would make is that I use a tiny amount of markup in a non-semantic way but I think its totally worth it in this case.

First thing, I need to create something that my calcHeight function can derive the current screen width from. I create a simple div with an ID that I can attach a value to from a media query.

function calcHeight() {
    var resolution = return window.getComputedStyle(document.querySelector('#device-type')).getPropertyValue('content').replace(/["']/g, '');     switch(resolution)     {         case 'small':             $varHeight = $(window).height() - 50;             break;         case 'medium':             $varHeight $(window).height() 100;             break;         default:             $varHeight = $(window).height() - 100;             break;     }     $('.masthead-carousel').css('height', $varHeight);     $('.main-logo').css('top', ($varHeight/2- ($('.main-logo').height()/2)); }

VoilĂ , a fully responsive, full screen masthead carousel!

Send me an email at

hello@jongosling.com