List Code

Total Items found in Code is 1009.
This is a collection of various code tests and descriptions on how to use them. Primarily HTML, CSS, Javascript and PHP.
slick
change slick slides to adaptive height

just a code snippit at the moment need to add a working example here

2:18 am, March 14, 2025
javascript
Locate a DIV and CLASS and create an IMAGE element using JAVASCRIPT

I had this weird request the other day, well today to replace an image thumbnail that was generated by an aspx script, but the link was from youtube and the list was not auto loading the thumbnail.&nb..

11:29 pm, March 2, 2025
wordpress
wp simple blocks plugin

Just saving this here for later testing: This is just AI generated crap that does not work, ignore it... ;)   Absolutely, let’s start fresh with a simple WordPress plugin that loads a si..

6:38 am, February 27, 2025
html
🔗How to add a Link in HTML?

How to add a link in your HTML and other random things about html links! 

10:36 pm, February 18, 2025
react
Create a React App with Vite and TypeScript on Windows

This assumes that you already have the latest node installed, i had some issues as i had an old version installed and had to manually delete it.  You can check the version of node by typing node..

2:53 am, February 6, 2025
modal
custom modal nice and easy

a nice and simple modal custom made

6:09 am, January 31, 2025
javascript
reload window automatically with javascript

script to reload the window automatically the same as pressing the reload button on the browser so there may still be cache issues when reloading this you can change the 5000 to another value to chan..

5:02 am, January 31, 2025
html
CSSnowflakes simple snowflakes non-JS snowflakes for your website

i like this one as its a nice and simple copy and paste effect that just covers the whole site and does not get in the way of other things like some other scripts i have come across. 

1:03 am, December 10, 2024
html
snowflakes falling body effects

12:59 am, December 10, 2024
html
HTML how to add an IMAGE! Quick HTML Tutorial

Just doing a bit of a series on HTML basics, i will list them here as i add them. We upload an image to imgur, and i show how to get the image link and insert it into html to show it! Super basic a..

1:20 am, November 15, 2024
html
HTML How to CENTRE Text Easy! - Quick HTML and CSS Tutorial

How to center text in html, there is a few options i discuss here and probably more that i missed out.  Codepen: https://codepen.io/kruxor/pen/poMOVYe

5:58 am, November 12, 2024
animation
css
flex to align pagination in list format

using flex to turn a unordered pagination list into a horizontal list

5:44 am, October 22, 2024
windows
disable recall on windows 11

Apparently this can recall what you type??...  Open up the Terminal (as Admin) and type in this command  WIN+X Dism /Online /Get-Featureinfo /Featurename:Recall

10:46 pm, October 15, 2024
wordpress
Wordpress Use the settings API

2:14 am, September 27, 2024
wordpress
fonts
Quick Embed - Google Font - DM Sans

DM Sans font quick embed and css class

3:27 am, September 4, 2024
linux
show all connections on linux command line

the ss command will show all connections

4:09 am, June 28, 2024
php
php redirect

quick and simple php redirect to a url

12:42 am, June 28, 2024
react
React - Use State to Toggle an Element

Mastering React State: Toggling Elements with Confidence React's state management system is a powerful tool for building dynamic and interactive user interfaces. One common use case involves to..

12:33 am, June 12, 2024
react
Bind 'this' to a Class Method

Binding 'this' to Class Methods in React React class components allow you to define custom methods alongside managing state and props. These methods often need to access component properties li..

11:52 pm, June 11, 2024
wordpress
Disable the ACF Warning message in wordpress dashboard

add code to functions.php

2:43 am, June 11, 2024
react
css
make an image or element grayscale switch on mouse over

mouse over the image to see the effect also used: transitions random image

2:21 am, April 26, 2024
wordpress
php
echo the page id from wordpress

11:42 pm, March 21, 2024
css
rotate an element when its hover

add and remove the class open to rotate

11:31 pm, March 21, 2024
css
rotate an element when its selected

add and remove the class open to rotate

11:30 pm, March 21, 2024
wordpress
extract a wordpress menu using its id

when you edit the menu in wordpress you can check the url, and it will have the id to extract in the following string: /wp-admin/nav-menus.php?menu=12

1:25 am, March 15, 2024
wordpress
css
Left Fixed nav with right fluid content

left fixed nav section with right fluid section css and html using flexbox

12:43 am, March 15, 2024
wordpress
add a page template in a wordpress theme

duplicate the page.php to a new php file usually with the template name as the file name with no spaces file in wordpress theme and add the following line to the top.

12:31 am, March 15, 2024
php simple html dom
find a custom data attribute in simple html dom

locate the div based on a custom data attribute, in this case the data-field="regularMarketChange" full docs

12:39 pm, March 13, 2024
misc
css
css html vertical center

seems to break this layout... there must be a better way... 

11:54 pm, March 3, 2024
js
jqueryui date selector with examples and code with custom date formatting

Datepicker using jquery ui with current date and date formatting. as dd-mm-yy Example Date formatting with selector  

6:12 am, February 27, 2024
css
css cursor types testing

testing all (most) of the available css cursor types, you can mouse over to test how the cursors react depending on your browser type and operating system.  refs https://developer.mozilla.org/e..

5:44 am, February 27, 2024
css
CSS Object Fit for Image fill rather than using background image on a div

CSS Object Fit can crop off the sides of an image, while also preserving its aspect ratio, and then fill in the space to fit any size.  Object Fit You can use: object-fit: With the following ..

3:47 am, February 23, 2024
css
flip card animation 3d front and back css html

3d flipping card with front and back content and animation

11:15 pm, February 15, 2024
css
six box grid css html custom no gap

re-usable four box grid with no gap, plus stack on responsive 1024px

12:38 am, February 7, 2024
css
four box grid css html custom

re-usable four box grid with gap calculations

12:37 am, February 7, 2024
templates
4 box custom grid with responsive

simple 4 box 25% grid with a responsive break at 1024px to stack the boxes in the grid

2:50 am, February 5, 2024
css
Kinda Crappy 3D button code

11:47 pm, January 22, 2024
svg
green circle tick svg

converted into inline css and html

12:06 am, January 15, 2024
css
use an image in your list items ol ul li

replacing the default ul li list with an image prefix

12:02 am, January 15, 2024
windows
How to Enable Linux Subsystem in Windows

Enabling the linux subsystem in windows allows you to use linux within windows.  To enable linux sub system in windows you can do the following.  In the start menu type "Windows features..

11:35 pm, January 8, 2024
css
css grid container with 4 auto columns

12:58 am, December 22, 2023
html
font awesome spinner loader loading spinner

just a simple font awesome spinner to use for loading areas

11:48 pm, December 12, 2023
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

"Olivia, my eldest daughter, caught measles when she was seven years old. As the illness took its usual course I can remember reading to her often in bed and not feeling particularly alarmed about it. Then one morning, when she was well on the road to recovery, I was sitting on her bed showing her how to fashion little animals out of coloured pipe-cleaners, and when it came to her turn to make one herself, I noticed that her fingers and her mind were not working together and she couldn’t do anything. 'Are you feeling all right?' I asked her. 'I feel all sleepy,' she said. In an hour, she was unconscious. In twelve hours she was dead. The measles had turned into a terrible thing called measles encephalitis and there was nothing the doctors could do to save her. That was...in 1962, but even now, if a child with measles happens to develop the same deadly reaction from measles as Olivia did, there would still be nothing the doctors could do to help her. On the other hand, there is today something that parents can do to make sure that this sort of tragedy does not happen to a child of theirs. They can insist that their child is immunised against measles. ...I dedicated two of my books to Olivia, the first was ‘James and the Giant Peach’. That was when she was still alive. The second was ‘The BFG’, dedicated to her memory after she had died from measles. You will see her name at the beginning of each of these books. And I know how happy she would be if only she could know that her death had helped to save a good deal of illness and death among other children."

I just checked google books for BFG, and the dedication is there. 

https://www.google.com.au/books/edition/_/quybcXrFhCIC?hl=en&gbpv=1 


Roald Dahl, 1986
Random CSS Property

translateZ()

The translateZ() CSS function repositions an element along the z-axis in 3D space, i.e., closer to or farther away from the viewer. Its result is a <transform-function> data type.
translateZ() css reference