Revision: 8488
Updated Code
at September 25, 2008 09:21 by stavelin
Updated Code
============
= The CSS =
============
#stikkord{
width: 300px;
margin-bottom: 10px;
}
.placeholder {
color:#999999;
}
.tag{
background-color: yellow;
font-size: 200%;
margin:2px;
line-height:1.2;
}
===================
= The jQuery code =
===================
$(document).ready(function() {
var searchLabel = $('#tagsform form label').remove().text();
$('#stikkord').addClass('placeholder').val(searchLabel).focus(function() {
if (this.value == searchLabel) {
$(this).removeClass('placeholder').val('');
};
}).blur(function() {
if (this.value == '') {
$(this).addClass('placeholder').val(searchLabel);
};
});
$('#tagsform form').submit(function() {
if ($('#stikkord').val() == searchLabel) {
$('#stikkord').val('');
}
});
});
=================
= The HTML form =
=================
<div id="tagsform">
<form>
<label for="stikkord">Skriv inn beskrivende stikkord</label>
<input type="text" name="stikkord" id="stikkord" />
<input type="submit" value="Ok" name="inputTagsButton" id="inputTagsButton" />
</form>
</div><!-- end tagsform -->
Revision: 8487
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at September 25, 2008 09:19 by stavelin
Initial Code
============
= The CSS =
============
#stikkord{
width: 300px;
margin-bottom: 10px;
}
.placeholder {
color:#999999;
}
.tag{
background-color: yellow;
font-size: 200%;
margin:2px;
line-height:1.2;
}
===================
= The jQuery code =
===================
$(document).ready(function() {
var searchLabel = $('#tagsform form label').remove().text();
$('#stikkord').addClass('placeholder').val(searchLabel).focus(function() {
if (this.value == searchLabel) {
$(this).removeClass('placeholder').val('');
};
}).blur(function() {
if (this.value == '') {
$(this).addClass('placeholder').val(searchLabel);
};
});
$('#tagsform form').submit(function() {
if ($('#stikkord').val() == searchLabel) {
$('#stikkord').val('');
}
});
});
=================
= The HTML form =
=================
<div id="tagsform">
<form>
<label for="stikkord">Skriv inn beskrivende stikkord</label>
<input type="text" name="stikkord" id="stikkord" />
<input type="submit" value="Ok" name="inputTagsButton" id="inputTagsButton" />
</form>
</div><!-- end tagsform -->
Initial URL
Initial Description
This is basically the code given in the book "learning jQuery " by Chaffer J & Swednerg K.
Initial Title
Placeholder text on fields (html, css, jquery)
Initial Tags
css, html, jquery
Initial Language
Other