New signup form

by surfine

HTML

<div class="pstWrap SignupWrap">
    <span class="f-Signup">
    <span class="yanone form-header">Sign<span class="lastpart"> up</span></span>
        <div class="eTag" style="height: 15px; left: 380px; display: none;"></div>
        <div style="top: 20px;">
        <input class="XDfsR input-gray focus-blue grayhvr" type="text" name="fname" placeholder="First Name" required="required" />
        <input class="XDfsR input-gray focus-blue grayhvr" type="text" name="lname" placeholder="Last Name" required="required" style="top: 3px;" />
        </div>
        <div style="top: 40px;">
        <input class="XDfsR input-gray focus-blue grayhvr" type="email" name="email" placeholder="Email" required="required" />
        <input class="XDfsR input-gray focus-blue grayhvr" type="email" name="email2" placeholder="Re-type Email" required="required" style="top: 3px;" />
        </div>
        <div style="top: 60px;">
        <input class="XDfsR input-gray focus-blue grayhvr" type="password" name="pwd" placeholder="New Password" required="required" />
        <input class="XDfsR input-gray focus-blue grayhvr" type="password" name="pwd2" placeholder="Re-type Password" required="required" style="top: 3px;" />
        </div><div class="ns" style="position: relative; top: 80px;">
        Birthday:
        <div id="ScD" class="XDfsC select-gray grayhvr cd" role="button" style="width: 30px; left: 47px;">
            <span>Day</span>
            <div id="ScDp" class="select-popup" style="top: -50px; left: -1px; width: 70px; position: absolute; display: none;"></div>
        </div>
        <div id="ScM" class="XDfsC select-gray grayhvr cd" role="button" style="width: 78px; left: 56px;">
            <span>Month</span>
            <div id="ScMp" class="select-popup" style="top: -50px; left: -1px; width: 118px; position: absolute; display: none;"></div>
        </div>
        <div id="ScY" class="XDfsC select-gray grayhvr cd" role="button" style="width: 30px; left: 66px;">
           ...

CSS

@font-face {
    font-family: 'Yanone Kaffeesatz';
    font-style: normal;
    font-weight: 400;
    src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url(http://themes.googleusercontent.com/static/fonts/yanonekaffeesatz/v4/YDAoLskQQ5MOAgvHUQCcLRTHiN2BPBirwIkMLKUspj4.woff) format('woff');
}
@font-face {
    font-family:'Droid Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Droid Sans'), local('DroidSans'), url(http://themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
body {
	background-color: #589CCC;
}
.lastpart {
    color: #0090d3;
}
.yanone {
    font-family: 'Yanone Kaffeesatz';
}
.pstWrap {
    min-height: 160px;
    width: 400px;
    padding: 20px;
    position: relative;
    background: #FFF;
    color: #000;
    display: none;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.3),0 4px 10px rgba(0, 0, 0, 0.3),
            inset 0 2px rgba(255, 255, 255, 1), inset 0 -4px 2px rgba(0, 0, 0, 0.25);
       -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.3),
            inset 0 2px rgba(255, 255, 255, 1), inset 0 -4px 2px rgba(0, 0, 0, 0.25);
            box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.3),
            inset 0 2px rgba(255, 255, 255, 1), inset 0 -4px 2px rgba(0, 0, 0, 0.25);
}
.SignupWrap {
    height: 700px; width: 700px;
}
.pstWrap div, .pstWrap input {
    position: relative;
}
.f-Signup {
    height: 100%; width: 400px;
    display: inline-block;
    font-family: 'Yanone Kaffeesatz';
    font-size: 22px;
    color: rgba(0,0,0,0.6);
}
.f-Signup > .form-header, .f-Login > .form-header {
    color: #000;
    font-size: 30px;
    width: 355px;
    padding: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-left: auto; margin-right: auto;
    display: inline-block;
}
.pstWrap-sBar >...

JavaScript

$(document).ready(function() {
    var date = new Date();
    var year = date.getFullYear();
    var y = year - 75;
    for (var d = 1; d < 31; d++) {
        $('#ScDp').append("<div class='popup-row' cp>" + d + "</div>");
    }
    var month = ["Month:", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
    for (var m = 1; m < 13; m++) {
        $("#ScMp").append("<div class='popup-row cp'>" + month[m] + "</div>");
    }
    for (y > year - 75; y < year - 4; y++) {
        $("#ScYp").append("<div class='popup-row cp'>" + y + "</div>");
    }
});
$('#ScD').click(function() {
    $('#ScDp').show();
    $('.select-popup').not('#ScDp').hide();
}).children('div').click(function(e) {
  return false;
});
$('#ScM').click(function() {
    $('#ScMp').show();
    $('.select-popup').not('#ScMp').hide();
}).children('div').click(function(e) {
  return false;
});
$('#ScY').click(function() {
    $('#ScYp').show();
    $('.select-popup').not('#ScYp').hide();
}).children('div').click(function(e) {
  return false;
});
$('.popup-row').click(function() {
    var i = $(this).text();
    $(this).parent().hide();
    $(this).parent().parent().children('span').text(i);
});
var mouseX = 0, mouseY = 0;
var m = 0;
var inside = false;
$(document).mouseup(function(){
    if (m !== 2) {
        m = 0;
    }
});
$('.slideDS').mousedown(function(){
    if (m !== 2) {
        m = 1;
    }
});
$('.slideWrap').mousemove(function(e) {
    var i = $(this).offset().left;
    mouseX = e.pageX;
    mouseX = mouseX - 35 - i;

    if (m === 0) {
        $('.slideDS').css({'left': '0'});
    } else if (m == 1) {
        if (mouseX > 40 && mouseX < 180) {
            m = 2;
            $('.f-Signup').find('.jellyblast').fadeIn();
        } else if (mouseX < 0) {
            $('.slideDS').css({'left': '0'});
        } else {
            e.originalEvent.preventDefault();
            $('.slideDS').css({'left': mouseX });
        }
   ...