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 :
//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
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-YYYYOut Put Format Types
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);Example
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") );Example
Click in the field below and type in the url you would like
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)
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(); })Example
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() );Example
When you click on the button below, it will only print this line and ignore the rest of the page content
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 & 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 & 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:
//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);Example
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//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');