Snippets Archives

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>

<ul>

<li><a href="#">About</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;
}

* {

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

(function( $ ){

$.fn.autowidth = function() {

return this.each(function() {

$('li', this).css({'width' : (100 / $('li', this).length) + '%'})

});

};

})( jQuery );

$(document).ready(function(){

$('nav > ul').autowidth();

});

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

Snippets

var form = $('#main-contact-form');

	form.submit(function(event){

		event.preventDefault();

		var form_status = $('<div class="form_status"></div>');

		$.ajax({

			url: $(this).attr('action'),
			method : 'POST',
			data : $(this).serialize(),
			beforeSend: function(){

				form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );

			}

		}).done(function(data){

			form_status.html('<p class="text-success">Thank you for contact us. As early as possible  we will contact you</p>').delay(3000).fadeOut();
			$(this).reset();
		});

	});

var form = $('#main-contact-form');

form.submit(function(event){

event.preventDefault();

var form_status = $('<div class="form_status"></div>');

$.ajax({

url: $(this).attr('action'),

method : 'POST',

data : $(this).serialize(),

beforeSend: function(){

form.prepend( form_status.html('<p><i class="fa fa-spinner fa-spin"></i> Email is sending...</p>').fadeIn() );

}

}).done(function(data){

form_status.html('<p class="text-success">Thank you for contact us. As early as possible we will contact you</p>').delay(3000).fadeOut();

$(this).reset();

});

Snippets

<div style="margin:3em;">
<button type="button" class="btn btn-primary btn-lg " id="load" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing Order">Submit Order</button>
<br>
  <br>
<button type="button" class="btn btn-primary btn-lg" id="load" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing Order">Submit Order</button>
</div>

<button type="button" class="btn btn-primary btn-lg " id="load" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Processing Order">Submit Order</button>

<br>

<button type="button" class="btn btn-primary btn-lg" id="load" data-loading-text="<i class='fa fa-spinner fa-spin '></i> Processing Order">Submit Order</button>

</div>

$('.btn').on('click', function() {
    var $this = $(this);
  $this.button('loading');
    setTimeout(function() {
       $this.button('reset');
   }, 8000);
});

$('.btn').on('click', function() {

var $this = $(this);

$this.button('loading');

setTimeout(function() {

$this.button('reset');

}, 8000);

});

Snippets

To disable the selected option from select input element, following piece of code can be used,

$("#selectid option:selected").attr('disabled','disabled');

1	$("#selectid option:selected").attr('disabled','disabled');

and to enable an option that is disabled already,

$("#selectid option[value="somevalue"]").removeAttr('disabled');

1	$("#selectid option[value="somevalue"]").removeAttr('disabled');

In this example, let us have one div for each option of select element with the option text and a remove link which

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

$(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:-

Snippets

function reloadScripts(toRefreshList/* list of js to be refresh */, key /* change this key every time you want force a refresh */) {
    var scripts = document.getElementsByTagName('script');
    for(var i = 0; i < scripts.length; i++) {
        var aScript = scripts[i];
        for(var j = 0; j < toRefreshList.length; j++) {
            var toRefresh = toRefreshList[j];
            if(aScript.src && (aScript.src.indexOf(toRefresh) > -1)) {
                new_src = aScript.src.replace(toRefresh, toRefresh + '?k=' + key);
                // console.log('Force refresh on cached script files. From: ' + aScript.src + ' to ' + new_src)
                aScript.src = new_src;
            }
        }
    }
}

function reloadScripts(toRefreshList/* list of js to be refresh */, key /* change this key every time you want force a refresh */) {

var scripts = document.getElementsByTagName('script');

for(var i = 0; i < scripts.length; i++) {

var aScript = scripts[i];

for(var j = 0; j < toRefreshList.length; j++) {

var toRefresh = toRefreshList[j];

if(aScript.src && (aScript.src.indexOf(toRefresh) > -1)) {

new_src = aScript.src.replace(toRefresh, toRefresh + '?k=' + key);

// console.log('Force refresh on cached script files. From: ' + aScript.src + ' to ' + new_src)

aScript.src = new_src;

}

Snippets

Snippets

// Get all options within <select id='foo'>...</select>
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
  // lowercase comparison for case-insensitivity
  (op[i].value.toLowerCase() == "stackoverflow") 
    ? op[i].disabled = true 
    : op[i].disabled = false ;
}

// Get all options within <select id='foo'>...</select>

var op = document.getElementById("foo").getElementsByTagName("option");

for (var i = 0; i < op.length; i++) {

// lowercase comparison for case-insensitivity

(op[i].value.toLowerCase() == "stackoverflow")

? op[i].disabled = true

: op[i].disabled = false ;

}

Without enabling non-targeted elements:

// Get all options within <select id='foo'>...</select>
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
  // lowercase comparison for case-insensitivity
  if (op[i].value.toLowerCase() == "stackoverflow") {
    op[i].disabled = true;
  }
}

// Get all options within <select id='foo'>...</select>

var op = document.getElementById("foo").getElementsByTagName("option");

for (var i = 0; i < op.length; i++) {

// lowercase comparison for case-insensitivity

if (op[i].value.toLowerCase() == "stackoverflow") {

op[i].disabled = true;

}

jQuery

With jQuery you can do this with a single line:

$("option[value='optionvalue']")
  .attr("disabled", "disabled")
  .siblings().removeAttr("disabled");

$("option[value='optionvalue']")

.attr("disabled", "disabled")

.siblings().removeAttr("disabled");

Without enabling non-targeted elements:

$("option[value='optionvalue']").attr("disabled", "disabled");

1	$("option[value='optionvalue']").attr("disabled", "disabled");

Note that this is not case insensitive. “optionvalue” will not equal “optionvalue”. To get a case-insensitive match, you’d have to cycle through each, converting the value to a lower case, and

Snippets

function slugify(text)
{
  return text.toString().toLowerCase()
    .replace(/\s+/g, '-')           // Replace spaces with -
    .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
    .replace(/\-\-+/g, '-')         // Replace multiple - with single -
    .replace(/^-+/, '')             // Trim - from start of text
    .replace(/-+$/, '');            // Trim - from end of text
}

function slugify(text)

{

return text.toString().toLowerCase()

.replace(/\s+/g, '-') // Replace spaces with -

.replace(/[^\w\-]+/g, '') // Remove all non-word chars

.replace(/\-\-+/g, '-') // Replace multiple - with single -

.replace(/^-+/, '') // Trim - from start of text

.replace(/-+$/, ''); // Trim - from end of text

}

Posts in Category: snippets

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

JavaScript simple form validation with example

Simple Ajax Call

Bootstrap Button Loading

jQuery : Disable and Enable Selected Options in DropDownList

Customize Input Box using jQuery

Clear the browser cache of CSS or JavaScript Using Javascript

Search Box Slide Open

How can I disable an option in a select box based on its value in JavaScript?

jQuery

Javascript Slugify