Archive for March, 2010

Preloading Images With CSS 2.1

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;
}
Advertisements

Improved Select Element Borders

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") });

Border Around Select Elements

*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");
    }
}

Better way to clear floats

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 */

JQuery Visual Validation

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');
}
}