Adjust li width fit with ul width of the outer div/body

• Snippets

HTML:-

<nav role='navigation'> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav>

1 2 3 4 5 6 7 8 9 10

<nav role='navigation'>   <ul>     <li><a href="#">Home</a></li>     <li><a href="#">About</a></li>     <li><a href="#">Home</a></li>     <li><a href="#">About</a></li>     <li><a href="#">Clients</a></li>     <li><a href="#">Contact Us</a></li>   </ul> </nav>

CSS:-

* { box-sizing:border-box; } ul { width:700px; margin:10px auto; text-align:center; } li { list-style:none; float:left; border:1px solid red; padding:10px 0; } a { background:lightgrey; display:block; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

* {   box-sizing:border-box; } ul {   width:700px;   margin:10px auto;   text-align:center; } li {   list-style:none;   float:left;   border:1px solid red;   padding:10px 0; } a {   background:lightgrey;   display:block; }

JavaScript:-

(function( $ ){ $.fn.autowidth = function() { return this.each(function() { $('li', this).css({'width' : (100 / $('li', this).length) + '%'}) }); }; })( jQuery ); $(document).ready(function(){ $('nav > ul').autowidth(); });

1 2 3 4 5 6 7 8 9 10 11

(function( $ ){   $.fn.autowidth = function() {     return this.each(function() {                 $('li', this).css({'width' : (100 / $('li', this).length) + '%'})     });   }; })( jQuery );   $(document).ready(function(){     $('nav > ul').autowidth();     });

 

---

Customize Input Box using jQuery

• Snippets

Prevent users typing special characters in text box, textarea, etc.

$(document).on('keypress',':text,textarea', function () { if (this.value.match(/[^a-z0-9@,.'\-_) (]/gi)) { // now accept @ , - " this.value = this.value.replace(/[^a-z0-9@,.'\-_) (]/gi,''); } });

1 2 3 4 5

$(document).on('keypress',':text,textarea', function () {         if (this.value.match(/[^a-z0-9@,.'\-_) (]/gi)) { // now accept @ , - "             this.value = this.value.replace(/[^a-z0-9@,.'\-_) (]/gi,'');         }     });

^[a-zA-Z]+$	Alphabets
^[a-zA-Z\s]+$	Alphabets + Space

Example:-

---

JavaScript simple form validation with example

• Snippets

Any interactive web site has form input – a place where the users input different kind of information. This data is passed to PHP Script, or some other technology and if the data contains an error, there will be a delay before the information travels over the Internet to the

---

Serialize Form to JSON

• Snippets

(function ($) { $.fn.serializeFormJSON = function () { var o = {}; var a = this.serializeArray(); $.each(a, function () { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [o[this.name]]; } o[this.name].push(this.value || ''); } else { o[this.name] = this.value || ''; } }); return o; }; })(jQuery); $('form').submit(function (e) { e.preventDefault(); var data = $(this).serializeFormJSON(); console.log(data); /* Object email: "value" name: "value" password: "value" */ });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

(function ($) {     $.fn.serializeFormJSON = function () {           var o = {};         var a = this.serializeArray();         $.each(a, function () {             if (o[this.name]) {                 if (!o[this.name].push) {                     o[this.name] = [o[this.name]];                 }                 o[this.name].push(this.value || '');             } else {                 o[this.name] = this.value || '';             }         });         return o;     }; })(jQuery);   $('form').submit(function (e) {     e.preventDefault();     var data = $(this).serializeFormJSON();     console.log(data);       /* Object         email: "value"         name: "value"         password: "value"      */ });

or another approach

function jQFormSerializeArrToJson(formid) { var serializedArr = $("form#" + formid).serializeArray(); var jsonObj = {}; jQuery.map(formSerializeArr, function(n, i) { jsonObj[n.name] = n.value; }); return jsonObj; } $('#formidlogin').submit(function(e) { e.preventDefault(); var data = jQFormSerializeArrToJson('formidlogin'); data = JSON.stringify(data), console.log(data); /* Object email: "value" name: "value" password: "value" */ });

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

function jQFormSerializeArrToJson(formid) { var serializedArr = $("form#" + formid).serializeArray(); var jsonObj = {}; jQuery.map(formSerializeArr, function(n, i) {   jsonObj[n.name] = n.value; });   return jsonObj; }   $('#formidlogin').submit(function(e) { e.preventDefault(); var data = jQFormSerializeArrToJson('formidlogin'); data = JSON.stringify(data),   console.log(data);   /* Object      email: "value"      name: "value"      password: "value"   */ });

 

---