AFTC.js
A collection of usefull everyday utilities / functions.
Find AFTC.JS useful? Please Donate...
Any and all donations to help keep active development and the lights on are more than welcome.
##
Want the ES6+ modules version? aftc-modules.js
Visit https://github.com/DarceyLloyd/aftc-modules
``
npm i aftc-modules
`
What's new
Added loadCss(href,onComplete)
Added alias loadScript for loadJs
Reduced core to it's bare minimum
Why? This is because of the direction JS development is going, if I am building a webpack project I often only want: log, logTo, onReady and argsToObject. And so a new core was born! Using webpack? You should be using aftc-modules unless I haven't migrated a feature over yet.
Added fadeTo and fadeFromTo to AFTC.Color()
`
let color = new AFTC.Color();
color.setRGB(0,255,0); // set starting color
let colors1 = color.fadeTo(255,0,0,10);
// Or do it with fromTo
let colors2 = color.fadeFromTo(0,0,0,255,0,0,10);
`
AnimationFrameStack
A single request animation frame function stack which can be used to control multiple classes / whole applications renderers etc via methods add(fn) remove(fn) stop() start() dispose()
`
let AnimStack = new AnimationFrameStack();
animStack.add(fn1);
animStack.stop();
adnimStack.remove(fn2);
animStack.start();
`
aftc.js v1.6.x
You can view all pens at
https://codepen.io/AllForTheCode/pens/public/?grid_type=list
##
Added loadJS(src,onComplete,onProgress)
Quick and easy script loading and attachement to the DOM.
##
attachDebug(no, ele)
Attach some visual debug divs to an element which you can logTo, returns an array of elements so you can:
`
let v = attachDebug(10,document.body);
debugTo(v[0],"hello world 1");
debugTo(v[9],"hello world 10");
`
$3
`
npm i aftc.js
`
or via cdn:
- https://cdn.jsdelivr.net/npm/aftc.js@latest/dist/aftc.min.js
- https://cdn.jsdelivr.net/npm/aftc.js@latest/dist/aftc.core.min.js
#### Use aftc.min.js in your html include or vendor merged packages.
#### Use aftc-modules.js in your ES6 projects for tree shacking.
$3
Then include the version you wish to use, your options are:
- aftc.min.js (44KB) - Have it all!
- aftc.core.min.js (3.71KB) - onReady, log, Log, getElement shortcuts, getRandomInt/float etc.
##### NOTE: You can always customise your build of the AFTC.JS, see the Build Guide below.
---
$3
`
gulp build
`
---
#### Step by step
- Open aftc.js directory in VSCode
- Open "gulpfile.js" and edit / comment out or uncomment any of the imports that you want or don't want
`
// The extras, the modules, the ooo or to some, the bloat
// Nice to have, but not essential
var aftc_modules = [
"./dist/aftc.core.js", // The AFTC Core (required)
"./src/AFTC/AFTC.Audio.js", // Enables new AFTC.Audio() and playSound()
"./src/AFTC/AFTC.Animate.js", // Enables new AFTC.Animate()
"./src/AFTC/AFTC.Canvas.js", // Enables new AFTC.Canvas();
// "./src/AFTC/AFTC.CheckboxHideShow.js", // Up for review - to be updated or removed
"./src/AFTC/AFTC.Color.js", // Enables new AFTC.Color();
"./src/AFTC/AFTC.Visibility.js", // Enables hide(), show(), fade(), fadeIn() & fadeOut()
// "./src/AFTC/AFTC.ResizeManager.js", // Up for review - to be updated or removed
"./src/AFTC/AFTC.XHR.js", // Everyone needs some IO, I know I do...
];
`
- Open terminal in VSCode by pressing CTRL + '
- Type into terminal
`
gulp build
`
---
NPMJS Has issues with Docs from GITHUB from this point, want to see the docs better please visit the github page https://github.com/DarceyLloyd/AFTC.js.git
Quick links:
addClass(elementOrId,classname)
addEvent(obj,type,fn,useCapture)
AFTC.Animate()
AFTC.Animate(elementId, onComplete)
AFTC.Audio({options})
AFTC.Color({params})
AFTC.Point(x,y)
AFTC.Rectangle(x, y, w, h)
AFTC.Velocity(vx,vy)
AFTC.XHR({options})
argsToObject(fArgs, obj, strict)
arrayContains(needle,haystack)
arrayEmpty(arr)
arrayGetMin(arr)
arrayRemoveIndex(arr,index)
arrayShuffle(arr)
arrayShuffle2(arr)
arrayToSingleLineString(arr)
boolToString(bool)
boolToYesNo(bool)
centerAbsoluteElement(elementId)
cleanJSONString(s)
cls()
convertToArray(val)
cutStringTo(input, len)
cycle(pos, max)
degToRad(input)
escapeHTML(input)
exitFullScreen()
getAllStringsBetween(str,start,end)
getAnchor(url)
getArrayOfRandomNumbers(arraySize,min,max)
getArrayOfRandomStrings(arraySize,strLength)
getBooleanFrom(input)
getBrowser()
getCookie(name)
getDateTime(local)
getDaysBetween(startDateTime, endDateTime)
getElementByClassName(className)
getElementById(id)
getElementByName(name)
getElementByTagName(tagName)
getElementOffsetTop(elementId)
getElementsByClassName(className)
getElementsByName(name)
getElementsByTagName(tagName)
getFileExtension(input)
getFileExtension2(input)
getFunctionName(fn)
getIEVersion()
getLastPartOfUrl(url)
getMaxFromArray(arr)
getOS(testUserAgent)
getRandomColor()
getRandomFloat(min,max)
getRandomInt(min,max)
getRandomThatsNot(min,max,not)
getSQLDateTime()
getStringBetween(input,start,end)
getUID(length)
getUKDateFromDate(dte)
getUkDateFromDbDateTime(input)
getUkDateTimeFromDbDateTime(input)
getUSDateFromDate(dte)
getWeightedRandom(odds, iterations)
goFullScreen(element)
guid()
hasClass(elementOrId, cls)
hexToRgb(hex)
iOS()
isAlphaNumeric(input)
isAndroid()
isArray(input)
isBoolean(input)
isChecked(elementId)
isChrome()
isDOM(obj)
isEdge()
isElement(o)
isElement2(element)
isEven(n)
isFireFox()
isIE()
isInString(find,source)
isMobile()
isNumberKey(evt)
isNumeric(n)
isOdd(n)
isOpera()
isSafari()
isStringInArray(needle,haystack)
leftTrim(str, by)
limitLengthInWords(str, maxWords)
log(*)
logTo(element,str,append)
onReady(fn)
openDebugWindow(html)
parseArrayToFloat(arr)
parseArrayToInt(arr)
parseJSONToSelect(j, selectElementIdOrElement, label, value)
querySelector(query)
radToDeg(input)
randomString(length)
redirect(url)
removeAllSelectOptions(elementId)
removeClass(elementOrId,className)
removeFileFromPath(path)
rgb2Hex(r,g,b)
rgbToHex(r,g,b)
scrollToElement(elementId, duration, offset)
setCookie(name, value)
setHTML(elementOrId,html);
String.prototype.endsWith(str)
String.prototype.startsWith(str)
stringToBool(str)
toArray(v)
toHex(num)
trimStringBy(input, trimBy)
validateEmail(email)
Browse on codepen
https://codepen.io/AllForTheCode/pens/public/?grid_type=list
FILE: AFTC.JS
argsToObject(fArgs, obj, strict)
Quick and easy args to object
More information
Parameters:
Name |
Type |
Description |
args |
object |
arguments (from the function structure, typically code will always be 'arguments' |
obj |
object |
object to parse into |
strict |
boolean |
console.warn any args that have been supplied that don't exist in args |
Returns: null
Alias's:
- argsTo
Usage examples:
- https://codepen.io/AllForTheCode/pen/PaqbKN
getElementById(id)
Gets an element from the DOM by ID. NOTE
More information
Parameters:
Name |
Type |
Description |
id |
string |
The ID of the DOM element you wish to find |
Returns: html element
Alias's:
- getId
- byId
Usage examples:
- https://codepen.io/AllForTheCode/pen/PedyNO
querySelector(query)
Gets an element from the DOM via DOM Query. NOTE
More information
Parameters:
Name |
Type |
Description |
query |
string |
The DOM Query / css element path you wish to find |
Returns: html element
Alias's:
- query
Usage examples:
- https://codepen.io/AllForTheCode/pen/MGqPrN
getElementsByName(name)
Gets an array of element from the DOM that have a specific name. NOTE
More information
Parameters:
Name |
Type |
Description |
name |
string |
The name of the DOM element you wish to find |
Returns: array of html elements
Usage examples:
- https://codepen.io/AllForTheCode/pen/gzdBdz
getElementByName(name)
Gets the first element from the DOM that has a specific name. NOTE
More information
Parameters:
Name |
Type |
Description |
name |
string |
The name of the DOM element you wish to find |
Returns: html elements
Usage examples:
- https://codepen.io/AllForTheCode/pen/gzdBdz
getElementsByClassName(className)
Gets an array of html elements from the DOM that have a specific class name. NOTE
More information
Parameters:
Name |
Type |
Description |
className |
string |
The class the DOM element(s) use you wish to find |
Returns: array of html elements
Usage examples:
- https://codepen.io/AllForTheCode/pen/odPQxE
getElementByClassName(className)
Gets the first html element from the DOM that has a specific class name. NOTE
More information
Parameters:
Name |
Type |
Description |
className |
string |
The class name the DOM element uses you wish to find |
Returns: html elements
Usage examples:
- https://codepen.io/AllForTheCode/pen/odPQxE
getElementsByTagName(tagName)
Gets an array of html elements from the DOM that has a specific tag name. NOTE
More information
Parameters:
Name |
Type |
Description |
tagName |
string |
the tag name you wish to find |
Returns: array of html elements
getElementByTagName(tagName)
Gets the first html element from the DOM that has a specific tag name. NOTE
More information
Parameters:
Name |
Type |
Description |
tagName |
string |
the tag name you wish to find |
Returns: html element
log(*)
Shortcut for console.log with some formatting capabilities, you can also log to html elements see logTo()
`
log("Hello World");
log("a = " + a);
log("myVar1 = " + myVar1 + " myVar2 = " + myVar2);
log(MyObject);
log(MyClass);
`
More information
Parameters:
Name |
Type |
Description |
* |
input |
what you want to console.log |
Alias's:
- log
- trace
Usage examples:
- https://codepen.io/AllForTheCode/pen/pVOOZV
- https://codepen.io/AllForTheCode/pen/NMLLJX
logTo(element or elementId,string,append:boolean=true)
Shortcut for console.log with some formatting capabilities, you can also log to html elements see logTo()
`
logTo("MyElement","Hello World",false); // clears element and inserts
logTo("MyElement","Hello World"); // appends
let myElement = document.getElementById("MyElementId");
logTo(myElement,"Hello World"); // appends
`
More information
Parameters:
Element or ElementId |
String |
Append |
HTML Element or String |
String to be inserted into element |
To append string or not to elements contents |
cls()
Clears the console if supported
More information
Alias's:
- clearLog();
Usage examples:
- https://codepen.io/AllForTheCode/pen/pVOOZV
- https://codepen.io/AllForTheCode/pen/NMLLJX
FILE: ARRAY.JS
arrayRemoveIndex(arr,index)
remove a specified index from an array
More information
Parameters:
Name |
Type |
Description |
arr |
array |
the array you wish to remove an index on |
index |
number |
the array index you wish to remove |
Returns: array
Usage examples:
- https://codepen.io/AllForTheCode/pen/mLzyGP
isStringInArray(needle,haystack)
Check to see if a string is in an array
More information
Parameters:
Name |
Type |
Description |
needle |
string |
what you want to search for in each array index |
haystack |
string |
the array you want to search |
Usage examples:
- https://codepen.io/AllForTheCode/pen/QrZrBM
arrayContains(needle,haystack)
Check to see if your array contains something you want to find
More information
Parameters:
Name |
Type |
Description |
needle |
string |
what you want to search for in each array index |
haystack |
string |
the array you want to search |
Alias's:
- isInArray
Usage examples:
- https://codepen.io/AllForTheCode/pen/VxExVw
arrayEmpty(arr)
clears/empties an array for garbage collection
More information
Parameters:
Name |
Type |
Description |
array |
arr |
the array to clear / empty |
Alias's:
- arrayClear
Usage examples:
- https://codepen.io/AllForTheCode/pen/ELdRYJ
getMaxFromArray(arr)
returns the maximum value in an array
More information
Parameters:
Name |
Type |
Description |
array |
arr |
the array you wish to find the maximum value in |
Alias's:
- arrayGetMax
- arrayMax
Usage examples:
- https://codepen.io/AllForTheCode/pen/GdYGjW
arrayGetMin(arr)
returns the minimum value in an array
More information
Parameters:
Name |
Type |
Description |
arr |
array |
the array you wish to find the minimum value in |
Alias's:
- getMinFromArray
- arrayMin
Usage examples:
- https://codepen.io/AllForTheCode/pen/bMmKBa
arrayShuffle(arr)
shuffles an array (method 1)
More information
Parameters:
Name |
Type |
Description |
arr |
array |
the array to shuffle |
Alias's:
- shuffle
- arrayShuffle
Usage examples:
- https://codepen.io/AllForTheCode/pen/wjYjmo
arrayShuffle2(arr)
shuffles an array (method 2)
More information
Parameters:
Name |
Type |
Description |
arr |
array |
the array to shuffle |
Alias's:
- shuffle2
- arrayShuffle2
Usage examples:
- https://codepen.io/AllForTheCode/pen/wjYjmo
arrayToSingleLineString(arr)
Converts an array to a single line string (usefull for debug)
More information
Parameters:
Name |
Type |
Description |
arr |
array |
the convert |
Alias's:
- arrayToString
Usage examples:
- https://codepen.io/AllForTheCode/pen/XqoVEe
convertToArray(val)
takes an input and returns it as index[0] of an array
More information
Parameters:
Name |
Type |
Description |
val |
* |
value to make into array an array |
Alias's:
- valueToArray
Usage examples:
- https://codepen.io/AllForTheCode/pen/QrzazK
FILE: BROWSER.JS
redirect(url)
no more typing self.location.href, just use redirect(url)
More information
Parameters:
Name |
Type |
Description |
url |
string |
the url you wish to redirect to |
Usage examples:
- https://codepen.io/AllForTheCode/pen/RyEpPY
goFullScreen(element)
Go full screen, on an element if specified or whole browser if left out
More information
Parameters:
Name |
Type |
Description |
element |
element |
optional - html element that you want to go full screen on, leave out for whole browser |
Usage examples:
- https://codepen.io/AllForTheCode/pen/ELGWpE
exitFullScreen()
Exits full screen mode
More information
Usage examples:
- https://codepen.io/AllForTheCode/pen/ELGWpE
FILE: CONVERSION.JS
radToDeg(input)
converts radians to degrees
More information
Parameters:
Name |
Type |
Description |
input |
number |
the radians you wish converted to degrees |
Alias's:
- rad2deg
Usage examples:
- https://codepen.io/AllForTheCode/pen/wjRpBZ
degToRad(input)
converts degrees to radians
More information
Parameters:
Name |
Type |
Description |
number |
input |
the value you wish converted to radians |
Alias's:
- deg2rad
Usage examples:
- https://codepen.io/AllForTheCode/pen/jxXYbE
toHex(num)
Converts a number to hex
More information
Parameters:
Name |
Type |
Description |
num |
number |
decimal base 10 |
Returns: hexidecimal value
Usage examples:
- https://codepen.io/AllForTheCode/pen/ELGoKX
boolToString(bool)
converts boolean to a string of true or false
More information
Parameters:
Name |
Type |
Description |
bool |
boolean |
the boolean you wish to convert |
Usage examples:
- https://codepen.io/AllForTheCode/pen/PeXEbg
boolToYesNo(bool)
converts a boolean to yes or no
More information
Parameters:
Name |
Type |
Description |
bool |
boolean |
the boolean you wish to convert |
Usage examples:
- https://codepen.io/AllForTheCode/pen/zjypZz
stringToBool(str)
Converts a string to a boolean (y,yes,"1",no etc)
More information
Parameters:
Name |
Type |
Description |
str |
string |
the string you wish to convert |
Usage examples:
- https://codepen.io/AllForTheCode/pen/vjvpmQ
getBooleanFrom(input)
converts an input to a boolean
More information
Parameters:
Name |
Type |
Description |
* |
input |
the variable you wish to convert to a boolean |
Usage examples:
- https://codepen.io/AllForTheCode/pen/XqoVea
parseArrayToFloat(arr)
parses all values in array to float
More information
Parameters:
Name |
Type |
Description |
array |
arr |
array to process |
Alias's:
- arrayToFloat
Usage examples:
- https://codepen.io/AllForTheCode/pen/erbyVR
parseArrayToInt(arr)
parses all values in array to float
More information
Parameters:
Name |
Type |
Description |
array |
arr |
array to process |
Alias's:
- arrayToInt
Usage examples:
- https://codepen.io/AllForTheCode/pen/yjGpqM
toArray(v)
takes an input and returns it as index[0] of an array
More information
Parameters:
Name |
Type |
Description |
* |
arg |
value to insert into array |
Alias's:
- convertToArray
- valueToArray
Usage examples:
- https://codepen.io/AllForTheCode/pen/QrzazK
rgb2Hex(r,g,b)
rgb to hex
More information
Parameters:
Name |
Type |
Description |
number |
r |
red |
number |
g |
green |
number |
b |
blue |
rgbToHex(r,g,b)
rgb to hex
More information
Parameters:
Name |
Type |
Description |
number |
r |
red |
number |
g |
green |
number |
b |
blue |
hexToRgb(hex)
hexToRgb
More information
Parameters:
Name |
Type |
Description |
string |
hex |
hex color |
FILE: COOKIES.JS
setCookie(name, value, expiryTimeInDays)
Sets a cookie by name with a value
More information
Parameters:
Name |
Type |
Description |
name |
string |
name of the cookie |
value |
string |
value of the cookie |
expiryTimeInDays |
number |
Specify the number of days the cookie will expire in. |
Usage examples:
- https://codepen.io/AllForTheCode/pen/RyBMwq
getCookie(name)
Gets the value of a cookie by name
More information
Parameters:
Name |
Type |
Description |
name |
string |
name of the cookie to get |
Usage examples:
- https://codepen.io/AllForTheCode/pen/RyBMwq
FILE: CSS.JS
addClass(elementOrId,classname)
Add a css class to a html element
More information
Parameters:
Name |
Type |
Description |
elementOrId |
elementORstring |
The elemnt or id of the html element to add a css class to |
className |
string |
the class name to add |
Alias's:
-
Usage examples:
- https://codepen.io/AllForTheCode/pen/BxvYmW
removeClass(elementOrId,className)
shortcut to remove a class from a html element
More information
Parameters:
Name |
Type |
Description |
elementOrId |
elementORstring |
The elemnt or id of the html element to add a css class to |
className |
string |
the class name to remove |
Alias's:
-
Usage examples:
- https://codepen.io/AllForTheCode/pen/gzZvKL
hasClass(elementOrId, cls)
Check to see if an element has a class attached to it
More information
Parameters:
Name |
Type |
Description |
elementOrId |
string |
The elemnt or id of the html element |
cls |
string |
class to look for |
Usage examples:
- https://codepen.io/AllForTheCode/pen/dewdwY
FILE: DATETIME.JS
getDaysBetween(startDateTime, endDateTime)
Gets the number of whole days between a start and end date
More information
Parameters:
Name |
Type |
Description |
startDateTime |
DateTime |
start date |
endDateTime |
DateTime |
end date |
Alias's:
- getNoOfDaysBetween
- getDaysBetweenDates
Usage examples:
- https://codepen.io/AllForTheCode/pen/pVqaGZ
getUKDateFromDate(dte)
Formats a date in the UK format
More information
Parameters:
Name |
Type |
Description |
dte |
Date |
|
Usage examples:
- https://codepen.io/AllForTheCode/pen/RyEMwp
getUSDateFromDate(dte)
Formats a date in the US format
More information
Parameters:
Name |
Type |
Description |
dte |
Date |
date |
Usage examples:
- https://codepen.io/AllForTheCode/pen/XqoEWL
getUkDateFromDbDateTime(input)
get a uk date from a mysql db date value
More information
Parameters:
Name |
Type |
Description |
input |
MySQLDateTimeString |
MySQL DB DateTime |
Usage examples:
- https://codepen.io/AllForTheCode/pen/BxvePW
getUkDateTimeFromDbDateTime(input)
get a uk date from a mysql db date time value
More information
Parameters:
Name |
Type |
Description |
input |
MySQLDateTimeString |
MySQL DB DateTime |
Usage examples:
- https://codepen.io/AllForTheCode/pen/MGZdBB
getSQLDateTime()
gets the date time now for sql insert
More information
Usage examples:
- https://codepen.io/AllForTheCode/pen/wjRbEe
getDateTime(local)
gets the date time at a specified local
More information
Parameters:
Name |
Type |
Description |
local |
string |
options are us or do not supply for en-gb |
Usage examples:
- https://codepen.io/AllForTheCode/pen/GdPaYj
FILE: DEBUG.JS
openDebugWindow(html)
open a popup window with the html you wish to display in it
More information
Parameters:
Name |
Type |
Description |
html |
string |
the html you wish to display in the popup window |
Alias's:
- stringToWindow
- htmlToWindow
Usage examples:
- https://codepen.io/AllForTheCode/pen/ELGWpE
FILE: DETECTION.JS
isMobile()
Detects if the device you are using is a mobile or not
More information
Usage examples:
- https://codepen.io/AllForTheCode/pen/KRbLdm
isAndroid()
Detects if the device you are using is android or not
More information
Usage examples:
- https://codepen.io/AllForTheCode/pen/RyEmgN
iOS()
Detects if the device you are using is iOS or not
More information
Usage examples:
- https://codepen.io/AllForTheCode/pen/ELGzXO
isFireFox()
Detects FireFox
More information
Usage examples:
- https://codepen.io/AllForTheCode/pen/mLaYMe
isChrome()
Detects Chrome
More information
Usage examples:
- https://codepen.io/AllForTheCode/pen/xjmNLM
isEdge()
Detects Edge
More information
Usage examples:
- https://codepen.io/AllForTheCode/pen/aGPrLP
isSafari()
Detects Safari
More information
Usage examples:
- https://codepen.io/AllForTheCode/pen/gzZJXr
isIE()
Detects IE
More information
Usage examples:
- https://codepen.io/AllForTheCode/pen/MGZdOG
isOpera()
Detects Opera
More information
Usage examples:
- https://codepen.io/AllForTheCode/pen/dewEJb
getIEVersion()
Gets version of IE
More information
Usage examples:
- https://codepen.io/AllForTheCode/pen/BxveJp
getBrowser()
Detects browser
More information
Usage examples:
- https://codepen.io/AllForTheCode/pen/GdPaQZ
getOS(testUserAgent)
Attempts to get the os from the user agent or the test user agent
More information
Parameters:
Name |
Type |
Description |
string |
testUserAgent |
test user agent string |
Usage examples:
- https://codepen.io/AllForTheCode/pen/erbaVj
FILE: DOM.JS
setHTML(elementOrId,html);
Quick shortcut for outputting html to an element
`
setHTML("header","Welcome");
``
More information
Parameters:
Name |
Type |
Description |
elementOrId |
stringIdOrHtmlElement |
the element or the element id you wish to set the html of |
html |
string |
the html string to insert into your element |
Alias's:
- html
Usage examples:
-
https://codepen.io/AllForTheCode/pen/KRbLER
getElementOffsetTop(elementId)
Gets an elements top offset
More information
Parameters:
Name |
Type |
Description |
elementId |
string |
the element ID you wish to get the top offset of |
Usage examples:
-
https://codepen.io/AllForTheCode/pen/GdPaLr
centerAbsoluteElement(elementId)
Center element that is absolute positioned
More information
Parameters:
Name |
Type |
Description |
elementId |
string |
element or id of element to center |
Usage examples:
-
https://codepen.io/AllForTheCode/pen/ZRGabV
scrollToElement(elementId, duration, offset)
Scroll to element on page
More information
Parameters:
Name |
Type |
Description |
elementId |
string |
ID of element you wish to scroll to |
duration |
float |
Duration in seconds |
offset |
number |
How much to offset scroll by |
Usage examples:
-
https://codepen.io/AllForTheCode/pen/eKNeVq
FILE: EASING.JS
FILE: EVENTS.JS
addEvent(obj,type,fn,useCapture)
Shortcut for adding events with old browser compatibility
More information
Parameters:
Name |
Type |
Description |
obj |
object |
The object you wish to attach the event listener to |
type |
string |
The event type (e.type) mousedown, mouseup, click etc |
fn |
function |
The function to call when the event is triggered |
useCapture |
boolean |
Whether the event should be executed in the capturing or in the bubbling phase |
Usage examples:
-
https://codepen.io/AllForTheCode/pen/VxExLg
onReady(fn)
A replacement for using body onload and no need for jQuery's $(document).ready
More information
Parameters:
Name |
Type |
Description |
fn |
function |
inline function or pass it a function for when your page is loaded and ready to be used |
Alias's:
- ready
Usage examples:
-
https://codepen.io/AllForTheCode/pen/GdYxVa
FILE: FORM.JS
isChecked(elementId)
Checks to if checkbox is checked or not
More information
Parameters:
Name |
Type |
Description |
elementId |
string |
element id of the form element to check |
Usage examples:
-
https://codepen.io/AllForTheCode/pen/KRbjpx
isNumberKey(evt)
Checks if evt supplied (use on form input events via onkeyup or onkeydown)
More information
Parameters:
Name |
Type |
Description |
evt |
event |
html onkeyup(event) or onkeydown(event) |
Usage examples:
-
https://codepen.io/AllForTheCode/pen/vjvqLg
removeAllSelectOptions(elementId)
Removes all the options in a select
More information
Parameters:
Name |
Type |
Description |
elementId |
string |
id of select element |
Usage examples:
-
https://codepen.io/AllForTheCode/pen/mLaZEm
-
https://codepen.io/AllForTheCode/pen/rvoEME
parseJSONToSelect(j, selectElementIdOrElement, label, value)
parses a json object of key value pairs to a form select element
More information
Parameters:
Name |
Type |
Description |
j |
string |
the json data |
selectElementIdOrElement |
elementOrIdString |
the json data |
label |
string |
of key value pair this is the key |
value |
string |
of key value pair this is the value |
Usage examples:
-
https://codepen.io/AllForTheCode/pen/rvoEME
FILE: GEOMETRY.JS
AFTC.Point(x,y)
2D Point
More information
Parameters:
Name |
Type |
Description |
x |
number |
x coordinate |
y |
number |
y coordinate |
Methods:
Name |
Description |
|
position |
|
clone |
|
delta |
|
distance |
|
moveTo |
|
moveAtAngle |
|
applyVelocity |
|
angleRadians |
|
angleDeg |
|
rotate |
Usage examples:
-
https://codepen.io/AllForTheCode/pen/qYLzzm
AFTC.Rectangle(x, y, w, h)
Rectangle class, allos you to set x, y, width and height or a rectangle
More information
Parameters:
Name |
Type |
Description |
x |
number |
x coordinate |
y |
number |
y coordinate |
w |
number |
w width |
h |
number |
h height |
Methods:
Name |
Description |
|
offsetOuter |
|
offsetInner |
|
setX |
|
setY |
|
setW |
|
setH |
Returns: AFTC.Rectangle
Usage examples:
-
https://codepen.io/AllForTheCode/pen/JvQRKg
AFTC.Velocity(vx,vy)
AFTC.Velocity class helper
More information
Parameters:
Name |
Type |
Description |
vx |
number |
velocity vector x |
vy |
number |
velocity vector y |
Methods:
Name |
Description |
flip |
flip |
flipX |
flipX |
flipY |
flipY |
multiply |
multiply |
divide |
divide |
Usage examples:
-
https://codepen.io/AllForTheCode/pen/erxRBo
FILE: GET.JS
getFunctionName(fn)
tries to get the function name of a suppled function
More information
Parameters:
Name |
Type |
Description |
fn |
function |
the function wish to get the name of |
Usage examples:
-
https://codepen.io/AllForTheCode/pen/YLBKRy
FILE: IS.JS
isInString(find,source)
check for string in string
More information
Parameters:
Name |
Type |
Description |
string |
find |
The string to look for |
string |
source |
The string to look in |
Usage examples:
-
https://codepen.io/AllForTheCode/pen/jxdONK
isEven(n)
check if input is even
More information
Parameters:
Name |
Type |
Description |
n |
number |
variable / value you wish to test |
Usage examples:
-
https://codepen.io/AllForTheCode/pen/rvPNBR
isOdd(n)
check if input is odd
More information
Parameters:
Name |
Type |
Description |
n |
number |
variable value you wish to test |
Usage examples:
-
https://codepen.io/AllForTheCode/pen/gzqOOW
isAlphaNumeric(input)
check if an input is an alpha numerical value ([a-z],[A-Z],[0-9] only)
More information
Parameters:
Name |
Type |
Description |
string||number |
input |
variable / value you wish to check |
Usage examples:
-
https://codepen.io/AllForTheCode/pen/pVGooO
isElement(o)
checks if your variable is an element or not
More information
Parameters:
Name |
Type |
Description |
o |
* |
variable you wish to check |
Usage examples:
-
https://codepen.io/AllForTheCode/pen/RyvwPK
isElement2(element)
checks to see if your vairable is an element or not
More information
Parameters:
Name |
Type |
Description |
element |
* |
the variable you wish to check |
Usage examples:
-
https://codepen.io/AllForTheCode/pen/RyvwPK
isDOM(obj)
checks to see if your variable is a DOM object
More information
Parameters:
Name |
Type |
Description |
obj |
object |
variable to check |
Usage examples:
-
https://codepen.io/AllForTheCode/pen/JvxjYo