Zaheer's Website Fiddle

by maremp

HTML

<p style="color:black;">Make sure that result window is big enough to display the popup window!</p>
<a href="#" style="color:blue;" id="Locations">Locations</a>

<article id="popupLocations" class="popupLocations"> <a id="popupLocationsClose"><img src="images/close.png" width="20" alt="" /></a>

     <h1>Locations: Where is this?</h1>

     <h6> The North Pole (2013)</h6>

    <p class="nomargin">
        <img src="images/location1.png" alt="" class="image" />This is kind of cheating because I didn't actually fly to the North Pole in hopes of adventure (I wouldn't mind for one some day though). I was, however, flying 40,000 feet above it. I was en route to Hyderabad, India from San Francisco, CA and my stopover flight was in Dubai. From SF to Dubai, this is what I eventually ended up seeing, and it kept me busy for a good hour or so. Absolutely beautiful.</p>
    <br />
     <h6> Berkeley, California (2013)</h6>

    <p class="nomargin">
        <img src="images/location2.png" alt="" class="image" />Right at the steps of the world renowned and prestigious Lawrence Berkeley National Laboratory is this spectacular capture of the Bay Area you see here. While working here in summer of 2013 as a Software Developer and Computational Engineer, I took the immediate chance to explore, taking in the beauty of the UC Berkeley campus in close distance and the SF area in the background.
        <br />
    </p>
    <br />
     <h6> San Diego, California (2012)</h6>

    <p class="nomargin">
        <img src="images/location3.png" alt="" class="image" />Beautiful beaches, serene sunsets, fresh breezes, and seafood. San Diego, California is a well-known celebrity for all of the above mentioned, and I was fortunate enough to experience all of them. In the summer of 2012, I was working as an Engineering Intern at Qualcomm. During my unforgettable time there, I tapped into my adventurous side again and explored, getting to capture speechless sunsets such as these. I was actually at...

CSS

/* Reset */
 html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:"";
    content: none;
}
.clearfix:before, .clearfix:after {
    content:"";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}
* {
    margin: 0;
    padding: 0;
}
body {
    font-size: 16px;
    color: #fff;
    background-color: #fff;
    overflow: hidden;
    font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
/* Typography */
 h1 {
    font-size: 50px;
}
h2 {
    font-size: 45px;
}
h3 {
    font-size: 40px;
}
h4 {
    font-size: 35px;
}
h5 {
    font-size: 30px;
}
h6 {
    font-size: 25px;
}
h1, h2, h3, h4, h5, h6 {
    margin: 20px;
}
p {
    margin-bottom: 300px;
}
a {
    color: #FFF;
}
a .cufon {
    border-bottom: dashed 1px #FFF;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
a:hover .cufon {
    background: rgba(0, 0, 0, 0.50);
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
nav a .cufon {
    border-bottom: none;
}
nav a:hover .cufon {
    background:...

JavaScript

//Locations Page Pop Up
var popupLocationsStatus = 0;

function loadPopupLocations() {
    if (popupLocationsStatus === 0) {
        $("#popupLocations").fadeIn("slow");
        popupLocationsStatus = 1;
    }
}

function disablePopupLocations() {
    if (popupLocationsStatus == 1) {
        $("#popupLocations").fadeOut("slow");
        popupLocationsStatus = 0;
    }
}

function centerPopupLocations() {
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupLocationsHeight = $("#popupLocations").height();
    var popupLocationsWidth = $("#popupLocations").width();
    $("#popupLocations").css({
        "position": "absolute",
            "top": windowHeight / 2 - popupLocationsHeight / 2,
            "left": windowWidth / 2 - popupLocationsWidth / 2
    });
}


$(document).ready(function () {
    $("#popupLocations").fadeOut();
    popupLocationsStatus = 0;
    $("#Locations").click(function () {
        $("#popupLocations").css({
            "visibility": "visible"
        });
        //disablePopupAbout();
        //disablePopupContact();
        centerPopupLocations();
        loadPopupLocations();
    });
    $("#popupLocationsClose").click(function () {
        disablePopupLocations();
    });
});