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