Living Outdoors PoC

Proof of Concept for Living Doors homepage.

HTML

<div id="wrapper">
    <!-- div4 is first so z-index isn't necessary. This might not make sense, but when div4 comes after div2, div2 mouseenter event stops 40px too early, since that's in fact div4's mouseenter. -->
    <div id="div4" class="divBox">
        <!-- text is managed with JavaScript -->
    </div>
    <!-- div5 is first so z-index isn't necessary -->
    <div id="div5">
    
    </div>
    <div id="div1" class="divBox">
    
    </div>
    <div id="div2" class="divBox">
    
    </div>
    <div id="div3" class="divBox">
    
    </div>
</div>

CSS

body {
    padding: 0;
    margin: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

/* width and height = 200px, spaces will be 20px. */
.divBox {
    width: 200px;
    height: 200px;
}

/* position the div boxes using absolute values */
#wrapper {
    position: relative;
}

#div1 {
    position: absolute;
    left: 20px;
    top: 20px;
}

#div2 {
    position: absolute;
    left: 240px; /* div_width * 1 + space * 2 */
    top: 160px; /* div_height * 1 + space * 2 - 80 */
}

#div3 {
    position: absolute;
    left: 460px; /* div_width * 2 + space * 3 */
    top: 20px;
}

#div4 {
    position: absolute;
    left: 240px; /* div_width * 1 + space * 2 */
    top: 20px;
}

#div5 {
    position: absolute;
    left: 640px; /* div_width * 3 + space * 2 */
    top: 5px;
    width: 200px;
    height: 425px;
}

/* Determine colors for default. */
#wrapper #div1 {
    background-color: #FF0000; /* red */    
}

#wrapper #div2 {
    background-color: #00FF00; /* green */ 
}

#wrapper #div3 {
    background-color: #0000FF; /* blue */
}

#wrapper #div5 {
    background-color: #888; /* grey, equivalent of #888888 */
}

/* Determine colors for NOAH */
#wrapper.noah #div1, #wrapper.noah #div5 {
    background-color: #B40404; /* dark red */
}

/* Determine colors for opvang */
#wrapper.opvang #div2, #wrapper.opvang #div5 {
    background-color: #00B900; /* dark green */ 
}

/* Determine colors for autist */
#wrapper.autist #div3 {
    background-color: #08088A; /* dark blue */
}

#wrapper.autist #div5 {
    background-color: blue;
}
}

JavaScript

$(function() { // short version of $(document).ready(function(){ 
    // HTML DOM (Document Object Model) has been loaded.
    
    // Find the object with id "wrapper" in the DOM.
    var wrapper = $("#wrapper");
    var div4 = $("#div4");
    
    // create text object
    var text = {
        default: "Welcome to Cissy's website! Here you can find everything you need, just not in dutch.",
        noah: "NOAH Psycho- en gedragstherapie. Personal choaching.",
        opvang: "Very \"hands-dirty\", in-the-field, tree-huggin' home to live in!",
        autist: "Specially tailored for autistic boys and gal's."
    };
    
    // set the text for the first time.
    // this might be too optimized, since now with JS disabled, no text would appear
    div4.text(text.default);
    
    /* "Refactored" function for handling hover events */
    function onEnter(event) {
        wrapper.addClass(event.data.class);
        div4.text(text[event.data.class]);
    }
        
    /* "Refactored" function for handling when the mouse leaves */
    function onLeave(event) {
        wrapper.removeClass(event.data.class);
        div4.text(text.default);
    }
    
    /* "subscribing" to the events, specifing the event, event.data and function */
    $("#div1").on("mouseenter", { class: "noah" }, onEnter);
    $("#div1").on("mouseleave",  { class: "noah" }, onLeave);
    
    $("#div2").on("mouseenter", { class: "opvang" }, onEnter);
    $("#div2").on("mouseleave",  { class: "opvang" }, onLeave);
    
    $("#div3").on("mouseenter", { class: "autist" }, onEnter);
    $("#div3").on("mouseleave",  { class: "autist" }, onLeave);
})