List Code

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.

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..

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..

Random string generator function in php suniqid

Here is a a smaller version of the built in php function uniqid() uses letters and numbers and specify the length of the random string.

CSS Grid - Basic Columns

Here is a basic demo showing the usage for css grid columns. You just need to add the display:grid property and then add the grid-template-columns: adding the size of each column, adding a value for e..

flex shorthand css

flex can be short handed under the flex property. For example, flex: 2 0 20px; will set the item to flex-grow: 2;, flex-shrink: 0;, and flex-basis: 20px;. The following class examples both do the sa..

using flexbox to align elements in a row

flexbox is so good at aligning elements, yes i used to use float left and then percentages and overflow auto or hidden the surrounding div, but now with flex you can just do something like this.

Viewport width and height calculations

Rather than using px and em you can also use the vw and vmin to resize elements which depend on the width and height of the display.

Making Images Retina Display Friendly

Have you ever noticed images look a bit blurry on your high res screen? Sometimes this is referred to as a "Retina" display... Its probably because the image used is exactly the pixels made for a regu..

Making an image responsive using css

the following css will make an image display 100% its size and keep its aspect ratio if the screen size or element size gets smaller than the containing image. you should be able to drag the edge of t..

Applied Accessibility - Tab Index

using the tabindex property on elements allows you to press the tab key while on the page and tab through the elements depending on the order specified by the tabindex. tab index can be applied to man..

Applied Accessibility - Access Keys

Access keys can be applied to link elements and in chrome you can access them by pressing ALT+ SHIFT + [accesskey] for some reason when testing this in chrome the a key was not accessible, but g and ..

Applied Accessibility - Screen reader only css

This is how a screen reader only css markup can be added. The content will still be available to screen reader clients.

Dropdown Box with Searchable Text

Here we have a dropdown select box, that you can type into to search the available options. No Javascript Required for this the browser does all the work. Press into the text box, and you will see a..

Change link target with JQuery

this will change the link href target to # on document load rather than its original link

Drop Down Menu Swapping Left align to Right

this is useful if you have a nav that hits the right side of the screen and you want it to open on the left rather than the right side. you can see on the very right drop down item opens with its item..

Whois Lookup

using the disk free space function in php

here is a built in php function that will show the amount of free space available on your server.

create a mysql or sqlite current timestamp with php

just in case you need to create a CURRENT_TIMESTAMP using php, this formats the current date into the following.