The jquery.validationEngine plugin for form validation is a good example of un-obtrusive validation. Its clean, neat, simple, beautiful UI, yet powerful validation plugin. This plugin is having most of the form fields validations that are commonly required in any project.
I have extended it for one of my projects by adding three functions to it.
See working example – http://www.navayan.com/register.php
I have added following three functions to core jquery.validationEngine plugin to extend the power of jquery form validation on the fly:
1. _maxListOptions() - this will check whether the limit of selecting the options from <select> dropdown list is not more than specified. 2. _minListOptions() - Similarly this function will prompt to select at least one option from <select> dropdown list. 3. _checkDuplicate() - This function will check the uniqueness of the two specified form fields
Above functions in details:
_maxListOptions: function(field, rules, i, options) {
var listItems = rules[i + 1];
var groupname = field.attr("name");
var groupSize = $("select[name='" + groupname + "'] option:selected").size();
if (groupSize > listItems) {
var rule = options.allrules.maxListOptions;
return rule.alertText + listItems + rule.alertText2;
}
},
_minListOptions: function(field, rules, i, options) {
var listItems = rules[i + 1];
var groupname = field.attr("name");
var groupSize = $("select[name='" + groupname + "'] option:selected").size();
if (groupSize < listItems) {
var rule = options.allrules.minListOptions;
return rule.alertText + listItems + rule.alertText2;
}
},
_checkDuplicate: function(field, rules, i, options) {
var equalsField = rules[i + 1];
if (field.attr('value') == $("#" + equalsField).attr('value'))
return options.allrules.checkDuplicate.alertText;
},
Adding method in _validateField() function:
case "maxListOptions":
errorMsg = methods._maxListOptions(field, rules, i, options);
field = $($("select[name='" + fieldName + "']"));
break;
case "minListOptions":
errorMsg = methods._minListOptions(field, rules, i, options);
field = $($("select[name='" + fieldName + "']"));
break;
case "checkDuplicate":
errorMsg = methods._checkDuplicate(field, rules, i, options);
break;
Setting rules for new methods with validation messages:
"maxListOptions": {
"regex": "none",
"alertText": "* Select max ",
"alertText2": " options only"
},
"minListOptions": {
"regex": "none",
"alertText": "* Select minimum ",
"alertText2": " option"
},
"checkDuplicate": {
"regex": "none",
"alertText": "* Duplicate entry"
},
Things that need to be present in the class attribute of form elements:
validate[required,minListOptions[1],maxListOptions[3]] validate[checkDuplicate[primary_email],custom[email]]
Actual screenshot of working copy
Following things that are required to work around:
BASIC HTML FORM:
<form id="form_contact" action="#" method="post"> <ul> <li>Occupation *</li> <li> <select class="validate[required,minListOptions[1],maxListOptions[3]]" multiple="multiple" id="occupation" name="occupation"> <option value="1">Accountant</option> <option value="2">Admin Officer</option> <option value="3">Air Hostess</option> <option value="4">Archaeologist</option> <option value="5">Architect</option> <option value="6">CEO</option> <option value="7">Charted Accountant</option> </select> <small>Select minimum one and maximum three occupations</small> </li> </ul> <ul> <li>Primary email</li> <li>someone@gmail.com <input type="hidden" value="someone@gmail.com" id="primary_email" name="primary_email"/></li> </ul> <ul> <li>Secondary email</li> <li><input type="text" class="validate[checkDuplicate[primary_email],custom[email]]" value="someone@yahoo.com" id="secondary_email" name="secondary_email"/></li> </ul> <ul> <li> </li> <li><input type="submit" value="Update" name="submit"></li> </ul> </form>
CSS
<link type="text/css" rel="stylesheet" media="all" href="http://cross-browser-reset-css-framework.googlecode.com/files/cbresetcss-1.4.css" /> <link type="text/css" rel="stylesheet" href="http://jquery-validatation-engine-extended.googlecode.com/files/validationEngine.jquery.css" />
JAVASCRIPTS
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-validatation-engine-extended.googlecode.com/files/jquery.validationEngine.js"></script>
<script type="text/javascript" src="http://jquery-validatation-engine-extended.googlecode.com/files/jquery.validationEngine-en.js"></script>
<script type="text/javascript">
$(function(){
$('#form_contact').each(function(){
$(this).validationEngine();
});
});
</script>
Navayan.com jQuery validationEngine works in IE9 also
Working example – http://www.navayan.com/register.php
Autoplay embeded video on any event with jQuery
I was searching something that autoplays the youtube video by clicking on the image. But found nothing instead of saying do ‘autoplay=1′.
By playing with jQuery I found the solution myself which worked for me in all the browsers. Here it is:
Demo
HTML:
<div class="homevideo">
<span id="vidimg"> </span>
<div class="videoplayer">
<object width="640" height="390">
<param name="movie" value="http://www.youtube-nocookie.com/v/6pW7mGr8oAU?fs=1&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube-nocookie.com/v/6pW7mGr8oAU?fs=1&hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="390"></embed>
</object>
</div>
</div>
CSS:
.homevideo #vidimg{
background: url(images/video-player-image.png) no-repeat top left;
z-index:32767;
border:1px solid #eee;
display:inline-block;
width: 480px;
height:280px;
cursor:pointer;
float:left;
}
jQuery:
$(function(){
// VIDEO AUTO PLAY ON CLICK EVENT
$(".videoplayer").hide(); // first hide the video
$('#vidimg').click(function(){
$(".videoplayer").show(); // show the video
$('#vidimg').fadeOut(0); // disappear the image
var embedsrc = $(".videoplayer embed").attr('src'); // get the embeded src or url
var embedbasic = 'width="480" height="280" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash"'; // get other properties of embeded video
$(".videoplayer embed").remove(); // remove the default tag with its content
var appendVid = '<embed '+ embedbasic +' src="'+ embedsrc +'&autoplay=1"></embed>'; // append the tag with 'autoplay=1' in src
var objSafari = '<object height="390" width="640"><param name="movie" value="'+ embedsrc +'&autoplay=1"></param>'+
'<param name="allowFullScreen" value="true"></param>'+
'<param name="allowscriptaccess" value="always"></param></object>'; // <object> snippet for Safari browser as it does not supports embed tag
if($.browser.msie && $.browser.version <= '7.0'){ // check if it is IE7 or less as those versions does support only embed tag
$(".videoplayer").append(appendVid);
}else if(navigator.userAgent.toLowerCase().indexOf( "safari") != -1){
$(".videoplayer object").remove();
$(".videoplayer").append(objSafari);
}else{
$(".videoplayer object").append(appendVid);
}
});
});
Output:
Image before the video:
Image before playing the video
Autoplaying video after image click:
Autoplaying video after image click
As we can’t get control over <iframe> inner content using <object> tag is the best option. This can be done with PHP, MySQL, WordPress as well for dynamic content.
Demo
Simple and easy Cookie based jQuery tabs
Cookie based easy and simple jquery tabs
This post has been moved to http://blog.navayan.com/
Demo http://www.navayan.com/archive/technology/jquery-cookie-tabs-plugin.php
Cross Browser Reset CSS Framework
The days of writing huge CSS are gone out! There are ways to style your CSS for the entire project.
YUI’s Reset CSS is the base of today’s CSS Reset rules. Meyer and HTML5Doctor made it simple. But there are chances to make it more optimize and global.
Here is my cross-browser Reset CSS Framework:
/* Title: Cross-browser Reset CSS Framework Author: Amol Nirmala Waman URL: http://blog.navayan.com/ Drafted: Since August 2010 Release: Sunday, 09 January 2011 Updated: Version 1.5.3, Sunday, 13 August 2011 */ html, body, div, span, applet, embed, object, iframe, frameset, p, q, blockquote, sub, sup, a, abbr, acronym, font, img, small, center, h1, h2, h3, h4, h5, h6, b, strong, big, u, ins, i, cite, em, var, dfn, address, s, strike, del, dl, dt, dd, ol, ul, li, pre, code, kbd, samp, tt, fieldset, legend, form, label, input, textarea, select, button, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-size: 100%; /* causes sub, sup */ vertical-align: baseline; /* causes sub, sup */ line-height: inherit; /* needed for vertical-align */ background: transparent; border-collapse: collapse; border-spacing: 0; list-style: none } textarea { overflow:auto} /* IE7 fix */ button, input{ /* IE7 extra spacing fix */ width: auto; overflow: visible } button{border: 1px outset #ccc} /* optional - IE7 fix */ blockquote, blockquote:before, blockquote:after, q, q:before, q:after { quotes: none } th, b, strong {font-weight: 700;} i, cite, em, var, dfn, address {font-style: italic} u, ins {text-decoration: underline} s, strike, del {text-decoration: line-through} sub, sup {font-size: smaller; font-weight: 400} sup {vertical-align: text-top} sub {vertical-align: text-bottom} abbr, dfn {cursor: help} :focus, a:focus{outline: 0}/* removes gray dotted outline */
Elements segregation in above framework:
HEADING – h1, h2, h3, h4, h5, h6
BOLD – b, strong, big
UNDERLINE – u, ins
ITALIC – i, cite, em, var, dfn, address
STRIKE – s, strike, del
LIST – dl, dt, dd, ol, ul, li
TYPE – pre, code, kbd, samp, tt
FORM – fieldset, legend, form, label, input, textarea, select, button
TABLE – table, caption, tbody, tfoot, thead, tr, th, td
HTML5 – article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video
The font-size: 100% and vertical-align: baseline causes default behavior of <sup> and <sub>. So vertical-align: text-bottom for sub and vertical-align: text-top for sup is required.
You don’t need to specify cellspacing=”0″, cellpadding=”0″ properties inside <table>. Also the table properties (border-collapse: collapse; border-spacing: 0) and ul, ol properties (list-type: none) does not need to define separately in global reset. The line-height must be inherit in global reset. If you assign any value to the line-height, remember that will apply/affect to all defined elements.
For textarea, overflow: auto; will remove the default vertical scrollbar of textarea, in IE7, if the content are less than that of height.
I have now removed content: ” property form global reset css as it causes not to display blockquote content in Opera browser.
button, input { width: auto; overflow: visible } this style will remove the extra padding/width of the submit input and button elements in IE7.
button { border: 1px outset #ccc } is optional but if you use it your button element will look almost similar in all browsers. See compared example below:
Button and input Submit style before and after
Other elements and their properties are self explanatory.
Usage of table:
<table border="1">
<tr><th>Heading</th></tr>
<tr><td>some content</td></tr>
</table>
and CSS will be:
table, table th, table td { border: 1px solid #ccc}
table th, table td {padding: 3px 5px}
Output of above style:
Table after Reset CSS
————————————————-
Here is more (optional) CSS resets:
/*
OPTIONAL CSS RESETS
table, table th, table td { border: 1px solid #ccc}
table th, table td {padding: 3px 5px}
ol li{list-style: decimal outside}
ul li{list-style: disc outside}
p{margin-bottom: 15px}
.font-sans{ font-family: Calibri, Cursive, Tahoma, Geneva, sans-serif, Helvetica, Arial, Verdana }
.font-type{ font-family: "Courier New", Courier, Monospace, "Lucida Console" }
.font-serif{ font-family: "Book Antiqua", Georgia, "Times New Roman", Times }
.clear{clear:both}
.fl{float: left}
.fr{float: right}
.tl{text-align: left}
.tc{text-align: center}
.tr{text-align: right}
.tj{text-align: justify}
.db{display: block}
.dib{display: inline-block}
input, textarea, select{border: 1px solid #ccc}
input[type='checkbox'], input[type='radio']{border:0; padding:0} /* This will remove default border */
Custom Font:
@font-face {
font-family: 'rupi foradian';
src: url('/font/rupi_foradian.eot'); /* IE6,7,8 */
src: local('rupi foradian'),
url('/font/rupi_foradian.ttf') format('truetype'),
url('/font/rupi_foradian.otf') format('opentype'), /* non-IE */
url('/font/rupi_foradian.woff') format('woff'); /* IE9 */
}
/* Usage of @font-face:
.rupi{font-family: 'rupi foradian';}
<span class='rupi'>F (Rupee symbol for Indian currency)</span>
*/
CSS Rounded Corners:
.rnd{ /* All */
-moz-border-radius: 5px; /* FF1+ */
-webkit-border-radius: 5px; /* Safari3+, Chrome */
border-radius: 5px; /* Opera 10.5, IE 9 */
}
.rndt{ /* Top-Left, Top-Right Rounded */
-moz-border-radius: 5px 5px 0 0;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
border-radius: 5px 5px 0 0;
}
.rndb{ /* Bottom-Left, Bottom-Right Rounded */
-moz-border-radius: 0 0 5px 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-radius: 0 0 5px 5px;
}
.nornd{ /* Remove Rounded Corners */
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0
}
Light gray vertical gradient:
.ggray{
background:#efefef;
background-image: -o-linear-gradient(top,#fff,#efefef); /* Opera */
background: -moz-linear-gradient(center top , #fff, #efefef) repeat scroll 0 0 transparent;/* Gecko. Short form: -moz-linear-gradient(-90deg,#1aa6de,#022147); */
background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#efefef)); /* Webkit */
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffffff',EndColorStr='#efefef'); /* IE6,7,8,9 */
}
*/
Final words:
I have used and using this framework since its been written. Since then I did not get any cross browser UI issue. And I am confident that this will solve your most of the cross browser UI issues.
The above CSS reset rules are based on today’s browsers behaviors. Means rules can change when and where new features introduced in CSS and in HTML. Also it is not mandatory to keep all the above selectors. You can remove selectors that are not used in your project. Please check Dust-Me Selectors Firefox Addon for this.
Buddhist Matrimony (Buddhist Parinay)
Navayan.com
People’s Education Society
