List Code

Total Items found in Code is 1002.
This is a collection of various code tests and descriptions on how to use them. Primarily HTML, CSS, Javascript and PHP.
css
grid column and row spacing

here we add some additional spacing to our grid, we can get certain cells to take up 2 parts of the grid using grid-column: 1 / 3; to get box number 5 to take up 2 cols we can add grid-column: 2 / 4..

2:14 am, July 3, 2019
css
using a css grid area template

here we can specify areas for the grid. using grid-template-areas. once the areas are defined we can add the items into each area with grid-area: header in each element Use grid-area Without Creatin..

2:26 am, July 3, 2019
jquery
jquery click function

Bind something to a click event on an element using jquery. Needs to be combined with a document ready.

5:33 am, July 3, 2019
css
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 ..

2:33 am, July 8, 2019
php
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)

11:52 pm, July 8, 2019
php
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.

12:00 am, July 9, 2019
css
CSS Improve Compatibility with Browser Fallbacks

when using css variables to increase compatibility you should also include a normal color as a default.

2:04 am, July 9, 2019
css
Move any element with css offsets

Make any element moveable without moving other items around by making it position: relative;

2:31 am, July 9, 2019
html
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

2:38 am, July 10, 2019
javascript
js check the length of a string

using the javascript .length property

2:04 am, July 16, 2019
css
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.

2:57 am, July 16, 2019
javascript
accessing part of a variable using its index

you can access part of a string variable using its index[1]

4:34 am, July 16, 2019
javascript
get the last letter of a string

you can use the .length and the index of a string to get its last value

4:40 am, July 16, 2019
javascript
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.

4:50 am, July 16, 2019
javascript
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.

5:49 am, July 16, 2019
javascript
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

5:58 am, July 16, 2019
javascript
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.

11:31 pm, July 16, 2019
javascript
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.

1:11 am, July 17, 2019
javascript
document ready javascript standalone version no jquery

this is a version of a dom ready or document ready that does not require jquery

1:14 am, July 17, 2019
javascript
remove the first element in an array with shift

like pop but shift does the 1st element in an array

2:37 am, July 19, 2019
javascript
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.

2:40 am, July 19, 2019
javascript
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

5:15 am, July 22, 2019
javascript
testing equality

showing the difference between == and === operators

5:57 am, July 22, 2019
javascript
JS Using typeof to check on string types

you can use the typeof operator to check what kind of variables you have.

2:38 am, July 23, 2019
javascript
compare equality function

this will check if two values are exactly equal

10:57 pm, July 23, 2019
javascript
compare non equality function

this will check if two values are not equal

11:15 pm, July 23, 2019
javascript
js function to calculate golf scores

this function will return the score name depending on the par and strokes for golf

1:48 am, July 24, 2019
php
IP Address

this uses php $_SERVER['REMOTE_ADDR'] to show your IP address

1:30 am, July 26, 2019
javascript
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.

11:19 pm, July 28, 2019
javascript
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

1:32 am, July 29, 2019
javascript
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.

2:00 am, July 29, 2019
javascript
Objects in javascript

creating and using an object in javascript, the full version of this testing is on codepen

11:25 pm, July 29, 2019
javascript
getType function for js

this function returns the type of item, array object string number etc

11:50 pm, July 29, 2019
apache
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.

1:20 am, July 31, 2019
javascript
check if something is an array

this function will check if something is an array

5:26 am, July 31, 2019
javascript
basic for loop odd numbers

a basic for loop with odd numbers adding to an array

6:20 am, July 31, 2019
css
keyframe animations css

moving a background with css keyframes

12:27 am, August 6, 2019
css
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

2:15 am, August 7, 2019
html
toggle div function with chevron up down toggle

showing an example of chevron toggles kinda like a manual accordion

1:19 am, August 9, 2019
css
target data attribute with css

you can add a data attribite and target it with css using the following demo

11:52 pm, August 12, 2019
javascript
get the dimensions of an image with javascript

this will show the height and width of an image using javascript

5:55 am, August 13, 2019
javascript
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.

6:15 am, August 13, 2019
sublime
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="([^

12:43 am, August 19, 2019
php
get the average of a number list using an array in php

get the average of a array of numbers

12:48 am, August 21, 2019
javascript
for loop through an array with javascript

looping through an array with javascript using a basic for loop

12:18 am, August 23, 2019
javascript
Do While Loop

showing how to use a do while loop, i don't use these ones very often usually just a for loop.

11:26 pm, August 25, 2019
bat
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..

3:27 am, August 26, 2019
javascript
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

5:38 am, August 26, 2019
js
Generate Random Fractions with JavaScript

generate a random fraction and add it to result when clicking a button

6:09 am, August 26, 2019
js
Generate Random Whole Numbers with JavaScript Function

generate a random whole number function with test buttons

6:20 am, August 26, 2019
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
There is a qualitative and quantitative difference between a day that begins with a little exercise, a book, meditation, a good meal, a thoughtful walk, and the start of a day that begins with a smartphone in bed.
Unknown
Random CSS Property

::after (:after)

In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
::after (:after) css reference