jQuery

These functions have dependency on jQuery

This is one of the most powerful function. With just one line of code you will be able to :

  • Add open in new window and nofollow to all external links
  • Hide href links(downloadable links) that have file extensions (zip ,rar, mp3, mp4 pdf, docx, pptx, xlsx, js, css)
  • Add alt tags to all of your images.
Usage
//Just put this at the top of your page 
js.SEO(); 
//If you want remove "nofollow" from your external links, just: follow="yes" in your a tags
//example
<a href="http:/codewithmark.com/" follow="yes"> Follow Link Example</a>
Example
No Follow Link Example
Follow Link Example

This will convert your string into a number

Usage
//Syntax 
js.Int (StringVal)
js.Int ("1505")
 
//--->Out put will
1505 as number 

This will generate a random string which will have numbers and letters(upper and lower case)

Usage
//Syntax 
js.AutoCode(n)
//n is length of characters
//If n is null, the default will be 8 characters long
//Method 1
js.AutoCode () //--->Out put: h0wgHPcy
//Method 2
js.AutoCode (10) //--->Out put: w02eo8kLRv

With this template function you can easily create your own templates like "Mustache"

Let's suppose for a second you have the following div

<div class="MKClass">
 <div class="ClassName">Hello my name is: UserName and my favorite food is UserFood </div>
</div>

You have a user that you want replace "UserName" with the person's name and "UserFood" with the food that person likes.

You can easily do that with this function

Usage
//Your template div container
<div class="TemplateDiv">Hello my name is: {UserName} and my favorite food is {UserFood} </div>
//Your output div... where you are going to show your user info
<div class="UserDiv"></div>
//Function Syntax
js.Template (ObjArr,StringData)
var ObjArr =
{  
  "{UserName}":"Mark Kumar", 
  "{UserFood}":"Fast Food"
};
var strContent = $('.TemplateDiv').html();
//Create user content
var NewContent = js.Template (ObjArr,strContent);
//Out put user content
$('.UserDiv').html(NewContent);
//Out put will be
<div class="UserDiv">
Hello my name is: Mark Kumar and my favorite food is Fast Food
</div>

You can easily run the same process for 10 people

 
//Assuming you have your data in an array like below
var UserData = 
[
  {name: "Mike", food: "Pizza"},
  {name: "Jack", food: "Chocolate"},
  {name: "Bob", food: "Ice Cream"},
  {name: "Rob", food: "Bacon"},
  {name: "Mark", food: "Burgers"},
  {name: "Jane", food: "Chicken"},
  {name: "Lisa", food: "French Fries"},
  {name: "Tara", food: "Tacos"},
  {name: "John", food: "Sushi"}, 
]
for(var i =0; i < UserData.length; i++)
{
  var ObjArr =
  {  
 "{UserName}":UserData[i].name, 
 "{UserFood}":UserData[i].food,
  };
  var strContent = $('.TemplateDiv').html();
 
  //Create user content
  var NewContent = js.Template (ObjArr,strContent);
  //Out put user content
  $('.UserDiv').append(NewContent);
}

Unlike other libraries, you can only do this on page load. But with Template Function, you can dynamically do this.

Also, with this function you have the flexibility to modify the template parameter.

For example, instead of using “{parameter }”, you can use “{{parameter }}” or “{{{parameter}}}” or “|||parameter|||” or  “{-> parameter<-}” or anything else you would like.

This will change the title of the page dynamically

Usage
//Syntax 
js.ChangePageTitle (strNewPageTitle)
//Before call
<title>Some page title</title>
 
//Call it like this
js.ChangePageTitle ('Awesome Functions')
//After call
<title>Awesome Functions</title>

This function was built upon moment js

Usage
//Syntax 
js.FormatDateTime  (value,FormatType) 
//With no value
js.FormatDateTime  ('','YYYY-MM-DD')  //--->Out put: YYYY-MM-DD
js.FormatDateTime  ('','MM-DD-YYYY h:mm:ss')  //--->Out put: MM-DD-YYYY h:mm:ss
js.FormatDateTime  ('','MM-DD-YYYY')  //--->Out put: MM-DD-YYYY
//Current date/time
var now = new Date();
//With values
js.FormatDateTime (now,'YYYY-MM-DD')  //--->Out put: YYYY-MM-DD
js.FormatDateTime (now,'MM-DD-YYYY h:mm:ss')  //--->Out put: MM-DD-YYYY h:mm:ss
js.FormatDateTime (now,'MM-DD-YYYY')  //--->Out put: MM-DD-YYYY

FormatTypeOutput
MonthM1 2 ... 11 12
Mo1st 2nd ... 11th 12th
MM01 02 ... 11 12
MMMJan Feb ... Nov Dec
MMMMJanuary February ... November December
QuarterQ1 2 3 4
Qo1st 2nd 3rd 4th
Day of MonthD1 2 ... 30 31
Do1st 2nd ... 30th 31st
DD01 02 ... 30 31
Day of YearDDD1 2 ... 364 365
DDDo1st 2nd ... 364th 365th
DDDD001 002 ... 364 365
Day of Weekd0 1 ... 5 6
do0th 1st ... 5th 6th
ddSu Mo ... Fr Sa
dddSun Mon ... Fri Sat
ddddSunday Monday ... Friday Saturday
Day of Week (Locale)e0 1 ... 5 6
Day of Week (ISO)E1 2 ... 6 7
Week of Yearw1 2 ... 52 53
wo1st 2nd ... 52nd 53rd
ww01 02 ... 52 53
Week of Year (ISO)W1 2 ... 52 53
Wo1st 2nd ... 52nd 53rd
WW01 02 ... 52 53
YearYY70 71 ... 29 30
YYYY1970 1971 ... 2029 2030
Y1970 1971 ... 9999 +10000 +10001
Note: This complies with the ISO 8601 standard for dates past the year 9999
Week Yeargg70 71 ... 29 30
gggg1970 1971 ... 2029 2030
Week Year (ISO)GG70 71 ... 29 30
GGGG1970 1971 ... 2029 2030
AM/PMAAM PM
aam pm
HourH0 1 ... 22 23
HH00 01 ... 22 23
h1 2 ... 11 12
hh01 02 ... 11 12
k1 2 ... 23 24
kk01 02 ... 23 24
Minutem0 1 ... 58 59
mm00 01 ... 58 59
Seconds0 1 ... 58 59
ss00 01 ... 58 59
Fractional SecondS0 1 ... 8 9
SS00 01 ... 98 99
SSS000 001 ... 998 999
SSSS ... SSSSSSSSS000[0..] 001[0..] ... 998[0..] 999[0..]
Time zonez or zz EST CST ... MST PST
Z-07:00 -06:00 ... +06:00 +07:00
ZZ -0700 -0600 ... +0600 +0700
Unix TimestampX1360013296
Unix Millisecond Timestampx1360013296123

This will get a future date

Note: The Format Type is the same as "Format Date Time" function (above)

Usage
//Syntax 
 js.GetFutureDate  (DaysIntoFuture,FormatType)
//Call it like this
js.GetFutureDate (2,'YYYY-MM-DD')  //--->Out put: YYYY-MM-DD 
 
js.GetFutureDate (7,'MM-DD-YYYY')  //--->Out put: MM-DD-YYYY 

This will allow you to limit the number of characters your user can type in a textarea

Usage
//Syntax 
js.CharCount (ElementID,TotalCharsAllowed)
 
//Call it like this
js.CharCount($(".TCharCount"), 100);
 

This will tell you if your user is online or offline

Usage
//Syntax 
js.IsOnline() //Out will be: online or offline 

This will get the current folder path of the url

Usage
//Syntax 
js.GetFolderPath() 
//Will get the path to current folder.
//i.e. if url is: http://codewithmark.com/download/123.mp3 
//will return http://codewithmark.com/download/

This will get the current site url

Usage
//Syntax 
js.GetSiteURL() //output http://www.awesomefunctions.com/

This will capitalize first letter of the word

Usage
//Syntax 
js.CapitalizeFirstLetter(Word)
js.CapitalizeFirstLetter('code with mark'); //output:  Code With Mark

This will get the file name from url path

Usage
//Syntax 
js.GetFileName(FileURL); 
js.GetFileName("http://codewithmark.com/download/123.mp3");
//output:  123

This will get the file ext from url path

Usage
//Syntax 
js.GetFileExt(FileURL); 
js.GetFileExt("http://codewithmark.com/download/123.mp3");
//output:  mp3

This will get the url and hash

Usage
//Syntax  
js.URL(Parametter); 
//Method 1 
js.URL("host"); //output: http://www.awesomefunctions.com
//Method 2
js.URL("hostname"); //output: http://www.awesomefunctions.com
//Method 3 
js.URL("hash"); 
//if url is : http://www.awesomefunctions.com/jquery#Template
//output will: #Template
 

If you are creating a short url site, this function will come in handy to only allow url acceptable characters for your short url

Usage
//Syntax  
js.PrettyURL(FieldElementID); 
//Example 1
js.PrettyURL( $(".ShortURL") );
//Example 2
js.PrettyURL( $("#ShortURL") );
 

Click in the field below and type in the url you would like


http://awesomefunctions.com/

If you need to save a URL, you should be encoding it because some characters have a special meaning according to the URL specification. some characters are not allowed and some characters are not representable in all character sets.

This function easily allow you to do that

Usage
//Syntax  
js.URLEncode(URL); 
//Example 1
js.URLEncode('http://www.awesomefunctions.com')
//Out put will be
http%3A%2F%2Fwww.awesomefunctions.com
//Example 2
js.URLEncode('http://abc.com/my page.html?name=bob&foo=bar#');
//Out put will be
http%3A%2F%2Fabc.com%2Fmy%20page.html%3Fname%3Dbob%26foo%3Dbar%23
 

This function easily allows you decode your encoded url

Usage
//Syntax  
js.URLDecode(URL); 
//Example 1
js.URLDecode('http%3A%2F%2Fwww.awesomefunctions.com')
 
//Out put will be
http://www.awesomefunctions.com
//Example 2
js.URLDecode('http%3A%2F%2Fabc.com%2Fmy%20page.html%3Fname%3Dbob%26foo%3Dbar%23');
//Out put will be
http://abc.com/my page.html?name=bob&foo=bar#

One of the useful information is to know where are your users coming from. With this function you can easily find that out

Usage
//Syntax  
js.GetUserRef(); 

Note:

- If a page is access directly, return will be "direct". Otherwise, it will return the url.



With this function you can easily turn any standard html table in to json array

Usage
//Syntax  
js.TableToJSON (TableElementID) 
//Method 1 
var data = js.TableToJSON($('#mdata') );
console.log("Data Arrray ", data)
//Method 2 
var data = js.TableToJSON($('.mdata') );
console.log("Data Arrray ", data)
 


Look at the console log for json array

Below is the html table

ItemAvailabilityQtyPrice
Don’t Make Me Think by Steve KrugIn Stock1$30.02
A Project Guide to UX Design by Russ Unger & Carolyn ChandlerIn Stock2$52.94 ($26.47 × 2)
Introducing HTML5 by Bruce Lawson & Remy SharpOut of Stock1$22.23
Bulletproof Web Design by Dan CederholmIn Stock1$30.17
Subtotal$135.36
Tax$13.54
Total$148.90

During your web programming, there will come a time when you want to know difference between 2 dates in terms of: Years, months, weeks, days, hours, minutes and seconds

This function makes it easier for you to find the difference between two dates

Usage
//Syntax  
js.DateDiff (interval, date1, date2 ) 
//Note: interval
yr = years
month = months
wk = week
day = day
hr = hours
min = minutes
sec = seconds
 
//Method 1 
js.DateDiff ("yr", "8/1/2015","8/15/2016" ) ; //output:1
//Method 2 
js.DateDiff ("month", "6/1/2016","8/15/2016" ) ; //output: 2
//Method 3
js.DateDiff ("wk", "6/1/2016","8/15/2016" ) ; //output: 10
//Method 4
js.DateDiff ("day", "6/1/2016","8/15/2016" ) ; //output: 75
//Method 5
js.DateDiff ("hr", "8/23/2016","8/24/2016" ); //output: 24
//Method 6
js.DateDiff ("min", "8/23/2016 11:00 pm","8/24/2016 02:00 am" ); //output: 180
 
//Method 7
js.DateDiff ("sec", "8/24/2016 2:00:30 pm","8/24/2016 02:01 pm" ); //output: 30
  
 

If you like to detect whether your users have pressed "Enter Key" or not while being in a input field, this function makes it easy for you to detect that.

Usage
//Syntax  
js.EnterKey (ElementID,callback)
//Method 1 
js.EnterKey ($(".UserEmail"), function (e)
{
  //prevent the page from reloading 
  e.preventDefault();
 
  //Call the submit process
  $(".Btn_UserForm").click();
 
})
//Method 2
js.EnterKey ($("#UserEmail"), function (e)
{
  //prevent the page from reloading 
  e.preventDefault();
 
  //Call the submit process
  $(".Btn_UserForm").click();
})
 

Click in the field below and pressed the enter key and see console.log() for result


If you ever wanted to allow your users to print only part of the page, this function can easily let you do that.

Usage
//Syntax  
js.PrintThis (ElementContent)
//Method 1 
js.PrintThis ($(".UserEmail").html() );
//Method 2
js.PrintThis ($("#UserEmail").html() ); 
 

When you click on the button below, it will only print this line and ignore the rest of the page content


Print This

If you have a string that contains 100 characters but you only want to show first 10 characters, this function can easily let you do that.

Usage
//Syntax  
 js.LimitChar(str, len) 
//Call it like this
js.LimitChar('awesome functions', 8); 
//Output will be: awesome
 

Easily find out the length of a string, arrays, or objects

Usage
//Syntax  
 js.Size(str) 
//Method 1 
js.Size('awesome functions'); //Output will be=> 17
//Method 2 
js.Size([1, 2, 3]); //Output will be => 3
 
//Method 3
js.Size({ 'a': 1, 'b': 2 }); //Output will be => 2
 

Easily convert the characters "&", "<", ">", ' " ', " ' " and along with others to their corresponding HTML entities.

You should run your data through this function to ensure that no sql injections are taking place before going throug php and mysql

Usage
//Syntax  
js.Escape(str) 
//Call it like this
js.Escape('awesome functions, 123 & code with mark'); 
//Output will be=> awesome functions, 123  &amp;  code with mark

You should run your data through this function to reverse the Escape process

Usage
//Syntax  
js.UnEscape(str) 
//Call it like this
js.UnEscape(' awesome functions, 123  &amp;  code with mark'); 
//Output will be=> awesome functions, 123 & code with mark
 

You can easily create a MD5 hash with this function.

This takes a 2 parameters:

  1. String: a string you would like to hash. If a string is not provided, an auto hash will be generated.
  2. Lenght: number of character you would like the hash to return. Max is 32 characters
Usage
//Syntax  
js.MD5(str, len) 
str = string you would like to hash.
//Method 1
js.MD5(); //Output=> c7e2a7f19808b127451330df86352e45 
//Method 2
js.MD5('',5); //Output=> de483
//Method 3
js.MD5('awesome functions'); //Output=> a8c505d8e700045701780e2e0c61c7f7
//Method 4
js.MD5('code with mark',5); //Output=> a8c50
 

This will Encode your string

Usage
//Syntax 
js.Encode (StringVal)
js.Encode("codewithmark")
 
//--->Out put will
Y29kZXdpdGhtYXJr

This will Decode your string

Usage
//Syntax 
js.Decode(StringVal)
js.Decode("Y29kZXdpdGhtYXJr")
 
//--->Out put will
codewithmark

Note: js.Encode() and js.Decode() will only work in javascript unlike the PHP version. Meaning that you can't send js.Encode() value to php and then decode in php. It will not work. 

This function easily allows you to send different types of json ajax requests to your server.

Usage
//Syntax 
js.Ajax(CallType,AjaxURL,DataString)
//Example
var CallType = 'GET' //--->Other options: GET/POST/DELETE/PUT
var AjaxURL = 'http://awesomefunctions.com';
var DataString = {user:'codewithmark',email:[email protected]'};
var ajax = js.Ajax(CallType,AjaxURL,DataString)
//error
ajax.fail(function(xhr, ajaxOptions, thrownError)  
{ 
  //do your error handling here
 console.log(thrownError);
 console.log(xhr); 
});
//success
ajax.done(function(data) 
{ 
  //do your success data processing here
  console.log(data)
}); 
 

This function easily allows create html tables with your json object array data

Usage
//Syntax 
js.CreateTable(DataArr,Columns) 
//Example
var DataArr =
[
 {user_name:'awesomefunctions',site:'http://awesomefunctions.com'},
 {user_name:'codewithmark',site:'http://codewithmark.com'},
 {user_name:'google',site:'http://google.com'},
]
//Method 1 - No custom columns
//Will create and return table data
var tbl = js.CreateTable(DataArr);
//Out put table
$('.mytablediv').html(tbl);
//Method 2 - With custom columns
//Will create and return table data
var Columns = ["Names", "Sites"];
var tbl = js.CreateTable(DataArr,Columns);
//Out put table 
$('.mytablediv').html(tbl);
 

No Custom Columns

With Custom Columns