Modernizr plugin: Progress button

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user's browser. (Browser doesn't support: IE8 and below.)



Refer site: http://tympanus.net/Development/ProgressButtonStyles/

jQuery Plugin: Better scroll on desktop and mobile device

Refer site: http://areaaperta.com/nicescroll/

Web Tools: Uncompressed JavaScript file Generator

Refer site: http://jsbeautifier.org/

JavaScript: Array vs. Objects

Regular Array	Object/Associate Array
// regular array (add an optional integer argument to control array's size) var myCars=new Array(); myCars[0]="Saab"; myCars[1]="Volvo"; myCars[2]="BMW";	//Create a direct instance of an object personObj=new Object(); personObj.firstname="John"; personObj.lastname="Doe"; personObj.age=50; personObj.eyecolor="blue";
// create literal array var myCars=["Saab","Volvo","BMW"];	//create alternative syntax (using object literals):  personObj = {firstname:"John", lastname:"Doe", age:50, eyecolor:"blue"};
// find total length of array document.write(myCars.length); // output: 3	Object.size = function(obj) {    var size = 0, key;    for (key in obj) {      if (obj.hasOwnProperty(key)) size++;    }     return size; }; document.write(Object.size(personObj)); // output: 4
// print individual element of array document.write(myCars[0]); // output: Saab	document.write(personObj['firstname']); // output: John document.write(personObj.firstname); // output: John
// print all elements of array for(var x = 0; x < myCars.length; x++){      document.write(myCars[x] + " "); } // output: Saab Volvo BMW	var x; for (x in personObj) {      document.write(personObj[x] + " "); } // output: John Doe 50 blue

Refer site:
http://www.w3schools.com/js/js_obj_array.asp
http://www.w3schools.com/js/js_objects.asp

JavaScript: Split a string and store into array

Example 1:

<script type="text/javascript">
var myString = "123456789";
var mySplitResult = myString.split("5");
document.write("The first element is " + mySplitResult[0]); 
document.write("
 The second element is  " + mySplitResult[1]); 
</script>

Output 1:

The first element is 1234
The second element is 6789

Example 2:

<script type="text/javascript">
 var cars = 'bmw,audi,honda,chrysler';
 var split_cars = cars.split(',');
 for (var i = 0; i < split_cars.length; i++) {
  document.write(split_cars[i] + '
'); // print all words
 }
</script>

Output 2:

bmw
audi
honda
chrysler

Refer site:
http://www.w3schools.com/jsref/jsref_split.asp
http://www.alexxoid.com/blog/dev/javascript-dev/how-to-explode-the-string-in-javascript.html

JavaScript: Create simple array using loop

Code:

<script type="text/javascript">
// same with --> var value = [];
var value = new Array(8); 

for(var i=0; i<=8; i++) {
 value[i] = i;
}

// check output 
console.log(value);

// print output
for(i=0; i<=8; i++) { 
   document.write(value[i] + ", "); 
}
</script>

Output:

0, 1, 2, 3, 4, 5, 6, 7, 8

Refer: http://www.hunlock.com/blogs/Mastering_Javascript_Arrays

Anytime a piece of JavaScript is being loaded or evaluated, everything else has to wait. ~ meanderingpassage

JavaScript: Simple show hide content II

JavaScript 1

<script language="javascript">
function show_tab(id){
 var tabId = [1,2,3];
 var idx = tabId.indexOf(id); // Find index which in the array
 if(idx!=-1) tabId.splice(idx, 1); // Remove element from array
 
 // show content
 document.getElementById('tab' + id).style.display = 'block';
 
 // hide content
 for(var i = 0; i < tabId.length; i++){
  document.getElementById('tab' + tabId[i]).style.display = 'none';
 }
}
</script>

Or: JavaScript 2

<script language="javascript">
function show_tab(id){  
 for(var i=1; i<4; i++){
  if(i == id){
   // show content
   document.getElementById('tab'+i).style.display='block';
  }else {
   // hide content
   document.getElementById('tab'+i).style.display='none';
  }
 }
}
</script>

HTML

<a href="javascript:void(0)" onclick="show_tab(1)">Tab 1</a> |
<a href="javascript:void(0)" onclick="show_tab(2)">Tab 2</a> |
<a href="javascript:void(0)" onclick="show_tab(3)">Tab 3</a>

<div id="tab1">content 1</div>
<div id="tab2" style="display:none;">content 2</div>
<div id="tab3" style="display:none;">content 3</div>

Refer:
Simple show hide content I
http://wolfram.kriesing.de/blog/index.php/2008/javascript-remove-element-from-array

Javascript: Drop down list onchange

HTML select tag with onchange action.

Example:

<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
<option value="">Choose a destination...</option>
<option value="http://www.yahoo.com/">YAHOO</option>
<option value="http://www.google.com/">GOOGLE</option>
<option value="http://www.altavista.com/">ALTAVISTA</option>
<option value="http://www.amazon.com/">AMAZON</option>
<option value="http://artlung.com/">ARTLUNG</option>
</select>

Refer site:
http://www.htmlcodetutorial.com/forms/_INPUT_onChange.html
http://lab.artlung.com/dropdown/
http://www.pageresource.com/jscript/jdrop2.htm
 

Javascript: Form Validation with Prototype

Article @ http://tetlaw.id.au/view/javascript/really-easy-field-validation

Current Version: 1.5.4.1 - 06 Jan 2007 - Download

Demo:

Javascript: Highlight all text by clicking textfield or textarea

Sample:

Textarea:
This text you can select all by clicking here

Input TextBox:


Code:

The script is really very simple. Text field must have unique identifier, this indentifier will be passed to the SelectAll() function. The function call only two methods: focus() and select().

<script type="text/javascript">
function SelectAll(id)
{
document.getElementById(id).focus();
document.getElementById(id).select();
}
</script>

Textarea:<br>
<textarea rows="3" id="txtarea" onClick="SelectAll('txtarea');" style="width:200px" >This text you can select all by clicking here </textarea>

Input TextBox:<br>
<input type="text" id="txtfld" onClick="SelectAll('txtfld');" style="width:200px" value = "This text you can select all" />

If you find this useful, would you like to buy me a drink? No matter more or less, it will be an encouragement for me to go further. Thanks in advance!! =)

Javascript : Validate file upload

Javascript code:

<script language="javascript">
function Checkfiles()
{
var fup = document.getElementById('upload_filename');
var fileName = fup.value;
var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
if(ext == "gif" || ext == "GIF" || ext == "JPEG" || ext == "jpeg" || ext == "jpg" || ext == "JPG" || ext == "doc")
{
return true;
}
else
{
alert("Upload Gif or Jpg images only");
fup.focus();
return false;
}
}
</script>

HTML form:

<form action="#" enctype="multipart/form-data" method="POST" onsubmit="return Checkfiles();">
<input type="file" id="upload_filename">
<input type="submit" value="Go!">
</form>

Or Ruby on Rails form:

<% form_for(@upload, :html => {:multipart => true, :onsubmit=>"return Checkfiles();"}) do |f| %>
<%= f.file_field :filename %>
<%= f.submit 'Create' %>
<% end %>

If you find this useful, would you like to buy me a drink? No matter more or less, it will be an encouragement for me to go further. Thanks in advance!! =)

Javascript : Return Confirm()

Choice 1:

<script>
function confirmDelete(delUrl) {
if (confirm("Are you sure you want to delete")) {
document.location = delUrl;
}
}
</script>

<a href="javascript:confirmDelete('delete.page?id=1')">Delete</a>

Choice 2:

<a href="delete.page?id=1" onclick="return confirm('Are you sure you want to delete?')">Delete</a>

Choice 3:

<script>
function logout()
{
if (confirm('Are you sure you want to logout?'))
location.href = "http://www.tackleprices.com/merchant/logout.php";
}
</script>

aI("text=Logout;url=javascript:logout();");

Choice 4:

> Multiple-button alert/confirm box
> Annoucement box

If you find this useful, would you like to buy me a drink? No matter more or less, it will be an encouragement for me to go further. Thanks in advance!! =)

Javascript : Close Thickbox and Refresh parent page

Choice 1 : When click the grey overlay, or close link or press escape key will remove ThickBox and refresh the parent page.

In the thickbox.js, add a line in the tb_remove() function

function tb_remove() {
  $("#TB_imageOff").unbind("click");
 $("#TB_closeWindowButton").unbind("click");
 $("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
 $("#TB_load").remove();
 if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
  $("body","html").css({height: "auto", width: "auto"});
  $("html").css("overflow","");
 }
 document.onkeydown = "";
 document.onkeyup = ""; 
 parent.location.reload(1); // Add this line
 return false;
}

Choice 2 : Click a button to close the thickbox and refresh the parent page

<button onClick="parent.tb_remove(); parent.location.reload(1)">Close It</button>

Taken From : http://jquery.com/demo/thickbox/

Related Links:
Lightbox 2
Fancybox

JavaScript : Close pop-up window and redirect to parent page

:target => adds the html attribute target to the link. This opens up a new window and names the new window the target.

You have to use javascript or Ajax to redirect the old page,

window.opener.location.href="http://new_url";

and then close the old window.

window.close();

This can be done either through the rjs file or directly in the javascript.