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

FormatType Output
Month M 1 2 ... 11 12
Mo 1st 2nd ... 11th 12th
MM 01 02 ... 11 12
MMM Jan Feb ... Nov Dec
MMMM January February ... November December
Quarter Q 1 2 3 4
Qo 1st 2nd 3rd 4th
Day of Month D 1 2 ... 30 31
Do 1st 2nd ... 30th 31st
DD 01 02 ... 30 31
Day of Year DDD 1 2 ... 364 365
DDDo 1st 2nd ... 364th 365th
DDDD 001 002 ... 364 365
Day of Week d 0 1 ... 5 6
do 0th 1st ... 5th 6th
dd Su Mo ... Fr Sa
ddd Sun Mon ... Fri Sat
dddd Sunday Monday ... Friday Saturday
Day of Week (Locale) e 0 1 ... 5 6
Day of Week (ISO) E 1 2 ... 6 7
Week of Year w 1 2 ... 52 53
wo 1st 2nd ... 52nd 53rd
ww 01 02 ... 52 53
Week of Year (ISO) W 1 2 ... 52 53
Wo 1st 2nd ... 52nd 53rd
WW 01 02 ... 52 53
Year YY 70 71 ... 29 30
YYYY 1970 1971 ... 2029 2030
Y 1970 1971 ... 9999 +10000 +10001
Note: This complies with the ISO 8601 standard for dates past the year 9999
Week Year gg 70 71 ... 29 30
gggg 1970 1971 ... 2029 2030
Week Year (ISO) GG 70 71 ... 29 30
GGGG 1970 1971 ... 2029 2030
AM/PM A AM PM
a am pm
Hour H 0 1 ... 22 23
HH 00 01 ... 22 23
h 1 2 ... 11 12
hh 01 02 ... 11 12
k 1 2 ... 23 24
kk 01 02 ... 23 24
Minute m 0 1 ... 58 59
mm 00 01 ... 58 59
Second s 0 1 ... 58 59
ss 00 01 ... 58 59
Fractional Second S 0 1 ... 8 9
SS 00 01 ... 98 99
SSS 000 001 ... 998 999
SSSS ... SSSSSSSSS 000[0..] 001[0..] ... 998[0..] 999[0..]
Time zone z or zz EST CST ... MST PST
Z -07:00 -06:00 ... +06:00 +07:00
ZZ -0700 -0600 ... +0600 +0700
Unix Timestamp X 1360013296
Unix Millisecond Timestamp x 1360013296123

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

Item Availability Qty Price
Don’t Make Me Think by Steve Krug In Stock 1 $30.02
A Project Guide to UX Design by Russ Unger & Carolyn Chandler In Stock 2 $52.94 ($26.47 × 2)
Introducing HTML5 by Bruce Lawson & Remy Sharp Out of Stock 1 $22.23
Bulletproof Web Design by Dan Cederholm In Stock 1 $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


This will tell you if your visitor is accessing your page from mobile device

Usage
//Syntax 
js.IsMobile()

//just call the function
if(js.IsMobile())
{
 console.log('accessing from mobile')
}
else
{
 console.log('accessing from desktop')  
}

If you need to include a js or css file after the page has been loaded, this function will include it only once. Like php function: include_once

Note: File has to be loaded in the DOM before you can access and use it
Usage
//Syntax 
js.IncludeOnce('your file path')

//just call the function

//include css
js.IncludeOnce('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css');

//include js
js.IncludeOnce('https://awesomefunctions.com/cdn/awesome-functions.min.js');

Use this function to check if the file is included.

Usage
//Syntax 
js.IsIncluded('your file path')

//just call the function

//include css
js.IsIncluded('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css');

//include js
js.IsIncluded('https://awesomefunctions.com/cdn/awesome-functions.min.js');

Use this function to remove to a file

Usage
//Syntax 
js.RemoveOnce('your file path')

//just call the function

//include css
js.RemoveOnce('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css');

//include js
js.RemoveOnce('https://awesomefunctions.com/cdn/awesome-functions.min.js');