JSFiddle - React, Tailwind, and code Playground

by Steven Senkus

HTML

<link rel="stylesheet" href="http://www.gpcontent.com/global-includes/css/bootstrap.css">
<div class="span4 classMap position">
    <div class="signIn">
        <form class="form-horizontal" id="signIn">
            <legend>Welcome!</legend>
            <div class="control-group">
                <label class="control-label" for="inputUser">Username</label>
                <div class="controls">
                    <input type="text" id="inputUser" placeholder="username">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="inputPW">Password</label>
                <div class="controls">
                    <input type="text" id="inputPW" placeholder="password">
                </div>
            </div>
            <div class="control-group">
                <div class="controls final">
                    <label class="checkbox">
                        <input type="checkbox">Remember me</label>	<a href="#" type="submit" class="mainBtn">Sign In / Sign Up</a>

                </div>
            </div>
        </form>
    </div>
    <!-- end signIn -->
    <!--<img src="images/class-map-bottom.png" class="mapBottom" />--></div>

CSS

body {
    font-family:Arial, Helvetica, sans-serif;
    color:#000;
    font-size:12px;
    margin:0;
    background:url("../images/body-bg.png") repeat top left scroll transparent;
    text-align:left;
}
h1 {
    font-size:2.5em;
    color:#666768;
}
h2 {
    font-size:2em;
    color:#484848;
    line-height:1.3em;
    margin:15px 0;
}
h3 {
    font-size:1.4em;
    color:#3a3a3a;
}
h4 {
    font-size:1.3em;
    color:#666768;
}
h5 {
    font-size:1.2em;
    color:#3a3a3a;
}
h6 {
    font-size:1em;
    color:#000;
}
a:link, a:visited, a:hover, a:active {
    color:#fd7920;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
.orange {
    color:#fd7920;
}
/*** MAIN CONTAINER ***/
 .wrap {
    margin:0px auto;
    width:980px;
}
/*** MAIN CONTENT ***/
 .header {
    padding-top:15px;
}
.nav {
    list-style:none;
    margin-top:25px;
}
.nav li {
    display:inline-block;
    font-size:1.3em;
    padding:0 16px;
    float:left;
}
.nav li:first-child {
    padding-left:0;
}
.nav li:last-child {
    padding-right:0;
}
.echoMark {
    width:7px;
    height:7px;
    background:#f47920;
    border-radius: 6px 0 0 0;
    display:inline-block;
    float:left;
    margin-top:7px;
}
/* sign in */
 .classMap {
    background:url('../images/class-map.png')no-repeat top left scroll transparent;
    height:66px;
    overflow:hidden;
    margin-top:10px;
}
.classMap .signIn {
    background:url('../images/class-map-bottom2.png')no-repeat bottom left scroll transparent;
    position:absolute;
    left:9px;
    top:20px;
    height:46px;
    width:291px;
    overflow:hidden;
    z-index:5000;
}
.signIn.show, .classMap.show {
    overflow:visible;
}
.classMap .signIn .form-horizontal {
    margin:0;
    position:absolute;
    top:-138px;
    width:100%;
}
.classMap legend {
    font-size:1.8em;
    line-height:18px;
    font-family:'Architects Daughter', comic-sans, cursive;
    padding-top:5px;
    text-align:center;
    border:none;
   ...

JavaScript

$(document).ready(function () {
    var open = false;
    $(".mainBtn").click(function (e) {
        e.stopPropagation();
        $("#signIn").animate({
            top: 0,
            height: 185
        }, "easeInSine", function() { }); //adjusts height and positioning of form
        $(".signIn").animate({
            height: 185
        }, "easeInSine").css('overflow', 'visible'); //adjusts container height w/bg img
        $(".classMap").show(1000, function() {
            console.log('classmap')
            $(this).css('overflow', 'visible');
            $('body').addClass('scrollBack');
            console.log(open); open = true; 
        }); //.css('overflow', 'visible'); //adds overflow visible to these elements
        //$("body").animate().delay(2400).attr('class', 'scrollBack');
    });
    $(document).click(function (e) {
        console.log('got here');
        console.log(e.target)
      //  if (e.target != $('.signIn')[0] && $('body').hasClass('scrollBack')) {
       // if (e.target != $('.signIn')) {
        if (open && $('body').hasClass('scrollBack')) {
            console.log('got here 2');
            $("#signIn").animate({
                top: -138,
                height: 185
            }, "easeInSine").delay(400); //brings forms back up and adjusts height
            $(".signIn").animate({
                top: 20,
                height: 46
            }, "easeInSine").css('overflow', 'hidden'); //brings bg img up and adjusts height
            $('.classMap').parent(".classMap").animate().css('overflow', 'hidden'); //removes overflow visible					
            $(".signIn").click(function (e) {
                e.stopPropagation();
            });
        };
    });
});