List Code
template for testing and live reloading html files
this is a template that i use while testing flat html files, if you add it to a server it will live reload. this does seem to cause issues depending on the site that is is used on, like reloading all ..
Radial Click Effect
shows the radial click effect like in the material design, so when you click a button it will show a click at that area with a nice animation. Uses CSS and javascript to generate this effect.
Generate Random Whole Numbers with JavaScript Function
generate a random whole number function with test buttons
Generate Random Fractions with JavaScript
generate a random fraction and add it to result when clicking a button
FCC - Basic: Profile Lookup
my solution to the FCC Basic js Profile Lookup, with added results area and button to run the function. json, array
copy a file when the date of the source is newer than the destination
using xcopy and a loop i found this is a good way to make sure that changes in one file make their way across to another location using a windows batch file. this one loops every 5 seconds, i think yo..
Do While Loop
showing how to use a do while loop, i don't use these ones very often usually just a for loop.
for loop through an array with javascript
looping through an array with javascript using a basic for loop
get the average of a number list using an array in php
get the average of a array of numbers
sublime text find and replace style tag
good if you have inline styles you want to remove using regex find and replace. in sublime press ctrl + H to do find and replace then paste in the style="([^
tinymce remove auto p tags setting
this is the setting to remove the automatic p tag's when pressing enter and forces the use of br tags instead which can also be toggled, if you dont want it to add anything.
get the dimensions of an image with javascript
this will show the height and width of an image using javascript
target data attribute with css
you can add a data attribite and target it with css using the following demo
toggle div function with chevron up down toggle
showing an example of chevron toggles kinda like a manual accordion
form checkbox replacement with large tick using label
this is good if you want to change a form checkbox with the default and show a fancy tick or something else, this will still check the checkbox so will work normally as the form element
keyframe animations css
moving a background with css keyframes
basic for loop odd numbers
a basic for loop with odd numbers adding to an array
check if something is an array
this function will check if something is an array
apache redirect to https ssl from normal
good if you have apache and access to htaccess file to redirect requests to https version of the site. this one also includes a rewrite to index.php so if you don't need this remove the last line.
getType function for js
this function returns the type of item, array object string number etc
Objects in javascript
creating and using an object in javascript, the full version of this testing is on codepen
card counting example from fcc
here is a solved version of the card counting function from free code camp you can test it using console log.
using switch with multiple identical cases
this can be used if you have several outcomes where the return value will be the same by omitting the break from the cases before the final
using switch in a function
This shows an example using the switch to select multiple options in a function, you can return from the switch with break, or you can end the whole function with return.
IP Address
this uses php $_SERVER['REMOTE_ADDR'] to show your IP address
js function to calculate golf scores
this function will return the score name depending on the par and strokes for golf
compare non equality function
this will check if two values are not equal
compare equality function
this will check if two values are exactly equal
JS Using typeof to check on string types
you can use the typeof operator to check what kind of variables you have.
testing equality
showing the difference between == and === operators
defining a variable inside a function without using var will create a global variable
here is an example showing a variable defined within a function showing how it becomes a global variable if not defined with var
add something to the start of an array with unshift
unshift is the opposite of push where push adds to the end of an array unshift will add to the start of the array.
remove the first element in an array with shift
like pop but shift does the 1st element in an array
document ready javascript standalone version no jquery
this is a version of a dom ready or document ready that does not require jquery
add a class to a div with an id javascript
a one liner to add a class name to an element with a specific id, for this to run it seems to need a document ready.
using local storage rather than cookies to store data (localStorage)
you can see what is stored in local storage by typing this into your browser console. localStorage Adding something You can add something to local storage by using the setItem function.
remove something from the end of an array with pop
pop is the opposite of push and will remove the last item in an array, it also returns the value so you can assign it to a variable
add something to the end of an array with push
you can easily add to the end of a javascript array with the .push function.
Multidimensional Array
sounds complex, but it's not really here is an example of a Multidimensional Array in javascript. It's just one array nested in another.
get the last letter of a string
you can use the .length and the index of a string to get its last value
accessing part of a variable using its index
you can access part of a string variable using its index[1]
using transform scale in css to zoom on hover over
using a css transform will not effect other elements that surround it, so when you mouse over this div (or press it on your phone/tablet) it should scale to 1.5 times its original size.
js check the length of a string
using the javascript .length property
Bootstrap Card Formatting HTML and CSS - Header and Footer
just a bootstrap card format with header and footer elements, makes a piece of content neat easily
Move any element with css offsets
Make any element moveable without moving other items around by making it position: relative;
CSS Improve Compatibility with Browser Fallbacks
when using css variables to increase compatibility you should also include a normal color as a default.
PHP Finding the position of a string in another string using strpos
$dot_location = strpos($my_string,"."); The first version of this does not seem to work in all cases, so i have updated this with a working version here.
PHP str_replace - find and replace part of a string
basic usage for the str_replace php function str_replace ( mixed $search , mixed $replace , mixed $subject)
using scroll-behavior: smooth css
This is a nice example of smooth scroll using just css. You can add it to the page by adding it to the html element html { scroll-behavior: smooth; } for this demo I will add some padding to ..
jquery click function
Bind something to a click event on an element using jquery. Needs to be combined with a document ready.