List Code

Showing page 6 of 10 in latest. Total Items: 517
A Collection of Code
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
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
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
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
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
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
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
js check the length of a string
...

using the javascript .length property

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

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

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

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

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

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

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

12:03 am, July 2, 2019
html
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..

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

11:40 pm, July 1, 2019
css
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.

11:24 pm, July 1, 2019
html
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..

11:57 pm, June 30, 2019
jquery
Change link target with JQuery
...

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

12:17 am, June 28, 2019
css
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..

5:36 am, June 26, 2019
tools
Whois Lookup
...

1:00 am, June 24, 2019
php
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.

1:33 am, June 7, 2019
php
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.

5:45 am, May 27, 2019
php
Cut a string when it finds a certain character with PHP
...

ok so lets say we have a string like this: Hi there im a string. I am also part of the same string. And we want to shorten the above string into just:  Hi there im a string. This is what i wo..

5:30 am, April 17, 2019
php
validate a url using php with FILTER_VALIDATE_URL
...

checks if a url is valid

11:04 pm, March 28, 2019
php
function to create a uid from html
...

this function converts a html string into a uid or unique id type string, its not actually unique, but its a string that can be used to make the title of something that contains html into a usable str..

12:44 am, March 22, 2019
php
calculate a percentage (dec) difference based on two numbers
...

this function will show you the percentage difference between two numbers

12:13 am, March 22, 2019
asp
asp classic get a url and display it
...

gets a url and displays it using XMLHTTP

12:08 am, March 20, 2019
css
Using nth-child css to hide list items or repeated elements
...

Lets say that i have a list like this: <div class='my-awesome-list'><div class='a-list-item'>yay im a list item</div><div class='a-list-item'>yay im a list item</div><..

5:10 am, March 13, 2019
php
PHP MySQL vs SQLite Count Items Function
...

I have been writing a few functions using sqlite and mysql. There are a couple of slight differences which can be seen in this count items_function.

3:40 am, February 25, 2019
php
How Many Days Since a Date and other Calculations
...

Here i calculate the number of days since a certain date in php and use the values for checking how much something costs per day.  Start Date Lets add the date that the item was purchaced. In d..

12:27 am, February 11, 2019
css
image Checkbox Replacement for Forms
...

Some sites like to be a bit tricky and have some complicated form checkbox replacement which is not all that hard, just can be a bit annoying as you have to extract the images for this to work. Demo ..

12:28 am, January 18, 2019
css
Using Flexbox rather than Floats
...

So i was still using float left for a bunch of elements i was working on the other day, sometimes it's hard to drop old techniques. What are the actual benefits of using flexbox rather than float lef..

4:27 am, January 16, 2019
php
Date Conversion PHP
...

Convert 1/1/2011 into 2011-01-01 00:00:00

10:40 pm, January 14, 2019
css
white space pre-wrap formatting
...

when you want to preserve line breaks in plain text without having to add br tags or p tags.

10:23 pm, January 1, 2019
php
Generate a random title from an array
...

give this an array of strings and it will pick a random one to return from the array.

1:34 am, December 19, 2018
php
echo todays date and time in a nice format
...

This will produce some thing like this: 19 December 2018 @ 10:12

11:48 pm, December 18, 2018
core
Core - File Structure
...

Core works on the following directory structure: //class//class/extends//css//db//images//import//inc//lib//pages//templates/ all of the core structure is fairly self explanitory core.class.php can..

11:38 pm, December 13, 2018
core
Core Class - Basic Core Structure
...

A Core class that can be used as a base for all content types and uses the extend classes to define the database variables. So basically you can set up core class and then create sub extend classes to..

11:33 pm, December 13, 2018
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
I believe that success can be measured in the number of uncomfortable conversations you're willing to have.
Unknown