Have a form with this code
and this form javascript
and this Form CSS
The script and CSS seem not to be working, when moved to a new server.
<div id="contactform" align="center">
<div id="name">
<label for="name-field" class="overlabel">Name</label>
<input name="name" type="text" id="name-field" tabindex="1" title="name" value="" />
</div>
<div id="website">
<label for="website-field" class="overlabel">Website</label>
<input name="website" type="text" id="website-field" tabindex="2" title="website" value="" />
</div>
<div id="telephone">
<label for="telephone-field" class="overlabel">Tel</label>
<input name="telephone" type="text" id="telephone-field" tabindex="3" title="telephone" value="" />
</div>
<div id="email">
<label for="email-field" class="overlabel">Email</label>
<input name="email" type="text" id="email-field" tabindex="4" title="email" value="" />
</div>
<div id="submit">
<br />
<input class="button" type="submit" name="send" value="send" tabindex="5" />
</div>
</div>
and this form javascript
function initOverLabels () {
if (!document.getElementById) return;
var labels, id, field;
// Set focus and blur handlers to hide and show
// labels with 'overlabel' class names.
labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
if (labels[i].className == 'overlabel') {
// Skip labels that do not have a named association
// with another field.
id = labels[i].htmlFor || labels[i].getAttribute ('for');
if (!id || !(field = document.getElementById(id))) {
continue;
}
// Change the applied class to hover the label
// over the form field.
labels[i].className = 'overlabel-apply';
// Hide any fields having an initial value.
if (field.value !== '') {
hideLabel(field.getAttribute('id'), true);
}
// Set handlers to show and hide labels.
field.onfocus = function () {
hideLabel(this.getAttribute('id'), true);
}
field.onblur = function () {
if (this.value === '') {
hideLabel(this.getAttribute('id'), false);
}
}
// Handle clicks to label elements (for Safari).
labels[i].onclick = function () {
var id, field;
id = this.getAttribute('for');
if (id && (field = document.getElementById(id))) {
field.focus();
}
}
}
}
}
function hideLabel (field_id, hide) {
var field_for;
var labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
field_for = labels[i].htmlFor || labels[i]. getAttribute('for');
if (field_for == field_id) {
labels[i].style.textIndent = (hide) ? '-1000px' : '0px';
return true;
}
}
}
window.onload = function () {
setTimeout(initOverLabels, 50);
}
and this Form CSS
div#contactform {
position:relative;
width:100%;
margin:0px;
}
div#contactform div#name, div#contactform div#website , div#contactform div#telephone, div#contactform div#email {
position:relative;
clear:both;
float:left;
margin-right:3px;
}
div#contactform input#name-field, div#contactform input#website-field, div#contactform input#telephone-field, div#contactform input#email-field {
width:10em;
}
div#contactform label.overlabel {
color:#999;
}
div#contactform label.overlabel-apply {
position:absolute;
top:3px;
left:25px;
z-index:1;
color:#666;
}
div#contactform div#submit{
clear:both;
margin-left: 30px;
}The script and CSS seem not to be working, when moved to a new server.