Archive for March, 2010
Here’s a great was to preload multiple images using CSS 2.1 alone! Thanks to to CSS Ninja.
body:after /*Preload plus minus image*/
{
content: url(../images/iconMinus.gif) url(../images/iconPlus.gif);
display: none;
}
I’ve place all the functions in a separate file called jquery.visualValidation.js which can then be called with:
/* Fixes select element borders in IE7 and below */
$("select").each(function() { addBordersToSelectElement($(this)) });
/* Events to control red borders around required fields that don't have a value */
$(".requiredField").each(function() { addValidationStylesAndEvents($(this), "requiredField", "requiredFieldSatisfied") });
*This has been updated here*
IE7 and below don’t support styling of the select element. Here’s a great way round this using JQuery based on this experiment .
function addBordersToSelectElement(selectElement) {
if ($.browser.msie && $.browser.version < 8 ) {
/* Create a container that is two pixel smaller. This will have a 1px border added though CSS. */
var containerElement = "<span class='left selectElementBorderRemover requiredField'\
style='position: relative;display:block;overflow:hidden;width:0;height:0'></span>"
$(selectElement).wrap(containerElement);
setContainerWidth(selectElement);
/* move the select element up and left to hide its border */
$(selectElement).css("position", "absolute");
$(selectElement).css("top", "-2px");
$(selectElement).css("left", "-2px");
//Attach event to capture any resize through text size change
$(selectElement).resize(function() { setContainerWidth($(this)) });
}
}
function setContainerWidth(selectElement) {
var containerWidth = $(selectElement).width();
containerWidth = containerWidth - 2;
var containerHeight = $(selectElement).height();
containerHeight = containerHeight - 2;
$(selectElement).parent().width(containerWidth);
$(selectElement).parent().height(containerHeight);
}
You can then apply a border to the container. In this case I used it along side validation with the following.
function checkValueAndUpdateRedBorder(validatedItem) {
var validatedItemId = $(validatedItem).attr("id");
if (validatedItem.attr("value") != "") {
removeRequiredField(validatedItem);
} else {
addRequiredField(validatedItem);
}
//If validatedItem is a select
if ($(validatedItem).parent().hasClass("selectElementBorderRemover")) {
var selectParent = $(validatedItem).parent();
if ($(validatedItem).hasClass("requiredField")) {
addRequiredField(selectParent);
} else {
removeRequiredField(selectParent);
}
}
function removeRequiredField(element) {
$(element).removeClass("requiredField");
$(element).addClass("requiredFieldSatisfied");
}
function addRequiredField(element) {
$(element).addClass("requiredField");
$(element).removeClass("requiredFieldSatisfied");
}
}
Thank you Mr Moore for this one. Here’s a class that means you don’t have to introduce extra divs to clear floats. Just apply it to the parent.
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
Here is a great simple way to validate form elements have a value and change styles appropriately. This removes a style (which was a red border) when the input has a value on load, change and blur.
/* Events to control red borders around required fields that don't have a value */
$('.requiredField').each(function() { checkValueAndUpdateRedBorder($(this)) });
$('.requiredField').change(function() { checkValueAndUpdateRedBorder($(this)) });
$('.requiredField').blur(function() { checkValueAndUpdateRedBorder($(this)) });
function checkValueAndUpdateRedBorder(validatedItem) {
if (validatedItem.attr("value") != "") {
validatedItem.removeClass('requiredField');
} else {
validatedItem.addClass('requiredField');
}
}
