HRCenter Template

by nabeezy

HTML

<script src="http://code.jquery.com/jquery-1.4.1.js"></script>
<script src="https://jqueryjs.googlecode.com/svn-history/r6305/trunk/plugins/methods/date.js"></script>
<script src="http://2008.kelvinluck.com/assets/jquery/datePicker/v2/demo/scripts/jquery.datePicker.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
<form id="AppCenterForm" name="AppCenterForm" action="" method="post">
			<div id="errors" style="position:relative; left: 50px;"></div>
			<div id='formBackgroundImage'style="position:relative; background-image: url(https://hrcenter-admin.tempworks.io/Block/GetFormBackgroundImage?blobName=e640e83e-4cb4-43a3-8722-fe2575658c64-2013I9page2.jpg); background-repeat:no-repeat; width: 1005px; height: 1421px; overflow: auto; ">
				<!-- ADD YOUR HTML HERE-->
				<input name="FullName2" id="FullName2" class="TextField" type="text"    
                   style=" position:absolute; left: 492px; top: 244px; width: 392px; height: 20px;" />         
               <input id="DocTitle1" name="DocTitle1" class="TextField" type="text"     
                   style=" position:absolute; left: 58px; top: 328px; width: 277px;"/>  
               <input name="DocAuthority" id="DocAuthority" class="TextField" type="text"    
                   style=" position:absolute; left: 60px; top: 364px; width: 279px;"/>   
               <input name="DocNum" id="DocNum" class="TextField" type="text"    
                   style=" position:absolute; left: 60px; top: 400px; width: 274px;"/>   
               <input name="ExpDate" id="ExpDate" class="TextField" type="text"    
                   style=" position:absolute; left: 60px; top: 440px; width: 118px;"/> 
               <input id="DocTitleListA2" name="DocTitleListA2" class="TextField" type="text"  
                   style=" position:absolute; left: 59px; top: 479px; width: 276px;"/> 
               <input name="DocTitleListA2Auth" id="DocTitleListA2Auth"...

CSS

img.TextField {
	display: none;
}

img.CleanField {
	border-width:0px;
	display: block;
}

label.error {
	color: red;
	font-style: italic
}

input.error {
	border: 1px Solid red;
	background:lightyellow
}

/*Standard format when viewing*/
.TextField
{
	border: 1px dotted #000;
   	/*border-color:#000000;
    border-width:1px;
    border-style:dotted;*/
    /*background-color:White;*/
}

/*Used for when the form gets created to a PDF and saved to employees file. Removes border from PDF fields*/
.CleanField
{
	border: 0px dotted #000;
	background-color: transparent;
    /*border-color:#000000;
    border-width:0px;
    border-style:solid;
    background-color:White;
	display: block;*/
}

/*Used to handle multiple page documents*/
div.Page {
	position: relative; 
	background-repeat: no-repeat; 
	width: 1005px; 
	height: 1305px; 
	page-break-before: avoid;
}

div.Page.Break {
	page-break-before: always;
}


/*
div.error { display: none; }

input {	border: 1px Solid black; }


input:focus { border: 1px Solid black; }



a.dp-choose-date {
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 0px 3px 0;
	display: inline;
	text-indent: -2000px;
	overflow: hidden;
	background: url(calendar.png) no-repeat;
}
a.dp-choose-date.dp-disabled {
	background-position: 0 -20px;
	cursor: default;
}
/* makes the input field shorter once the date picker code
 * has run (to allow space for the calendar icon
 */
input.dp-applied {
	width: 140px;
}

/*.Error
{
    border: 1px solid red;
    background: lightyellow;
}*/
*/



table.jCalendar {
	border: 1px solid #000;
	background: #aaa;
    border-collapse: separate;
    border-spacing: 2px;
}
table.jCalendar th {
	background: #333;
	color: #fff;
	font-weight: bold;
	padding: 3px 5px;
}
table.jCalendar td {
	background: #ccc;
	color: #000;
	padding: 3px 5px;
	text-align: center;
}
table.jCalendar td.other-month {
	background: #ddd;
	color: #aaa;
}
table.jCalendar td.today {
	background: #666;
	color: #fff;
}
table.jCalendar td.selected...

JavaScript

/**********************************************************
This jQuery library was created by Tempworks Software, Inc.

Copyright (c) 2010 Tempworks Software, Inc.
Date: 2010-1-4
**********************************************************/


/***************
Setup Calendar
****************/
//Setup the calendar control on all the controls specified
function SetupCalendar(obj) {
    //if ($(obj).val() == "")
        $(obj).val(new Date().asString());
    //Assign an onclick event to the element in the group
    $(obj).click(function() { SetClick(this.id); });
    $(obj).mouseover(function() { SetMouseOver(this.id); });
};

function SetClick(id) {
    $("#" + id).datePicker({ clickInput: true });
    $("#" + id).dpSetOffset(20, 0);
    var aCalLink = document.getElementById("aCal");
    if (null != aCalLink)
        aCalLink.parentNode.removeChild(aCalLink);
};

function SetMouseOver(id) {
    $("#" + id).attr("title", "Please click to change the date");
};

(function($) {
    /***************************CUSTOM SELECTORS************************************/
    $.extend($.expr[':'], {
        div: function(a) {
            return "div" == a.nodeName.toLowerCase();
        },
        span: function(a) {
            return "span" == a.nodeName.toLowerCase();
        },
        label: function(a) {
            return "label" == a.nodeName.toLowerCase();
        },
        hasText: function(obj, index, meta, stack) {
            return !($(obj).val().toUpperCase() == meta[3].toUpperCase());
        },
        classContains: function(obj, index, meta, stack) {
            return $(obj).attr("class") && ($(obj).attr("class").toUpperCase().indexOf(meta[3].toUpperCase()) >= 0);
        },
        hasSomething: function (obj, index, meta, stack) {
            return $(obj).val().length > 0 ? true : false;
        }
    });

    /***************************CUSTOM FUNCTIONS***********************************/
    $.extend($.fn, {
        isCheckbox: function() {
           ...