Search
Search Code
Search Code by entering your search text above.
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
php
Deprecated: parse_str(): Calling parse_str() without the result argument is deprecated

I had this error on a function that i was not even sure i was calling. This was on some old code i was testing for an old site, i must have fixed this error on a never version of the function.  ..

6:39 am, April 11, 2023
php functions
Return a file extention from a string

This php function returns a file extention from a string.  I think it will only work if the string does not have any additional . in it.  I think a better way to do this function would be ..

5:45 am, April 7, 2023
slick slider
Slick slider code testing with slower slides and auto play on videos

additional testing with changes for slick slider videos and auto play

4:28 am, March 1, 2023
slick slider
Chat GPT slick slider code testing

slick slider testing using code from chat gpt 1. write for me the code to embed a video into slick slider in html and css 2. can you also add the javascript required to get this working 3. can..

4:21 am, March 1, 2023
sections
four box section template in foundation with classes find and replace (4 box)

this section uses the large-auto classes so you can add or remove boxes easily.  find and replace the name "boxsection" to rename your new classes for the section I have layed this one out a ..

11:08 pm, October 24, 2022
fonts
Proxima Nova Font alternative on google fonts Figtree Embed and Quick Install Code

According to a recent google search by me the font Figtree is the closest one to the Adobe Font Proxima Nova, so lets do a quick install code for it and test if its actually the same.  All Style..

3:33 am, October 12, 2022
fonts
font quick embed inter all styles google font

For some reason every time I go into google fonts website it seems to get more and more complex, i dont really care too much about all the font details i just want the embed link! Anyway... Maybe im g..

4:58 am, September 19, 2022
css
rainbow text background clip with linear gradient

testing using background clip with a linear gradient background colour to make the text appear rainbow colours 🌈 

2:02 am, July 6, 2022
php
using preg_match to extract text from elements

using preg_match to extract specified text from elements I also tried this search "if you have the start and end of a string extract the middle with php" as thats really all i need it to do, i have t..

1:41 am, June 24, 2022
modals
Load fancybox modal on hash check

I was just testing this code, not working on the hash check as yet. 

1:40 am, June 15, 2022
Site Updates
Welcome Widget Card - Toggle

Testing the welcome widget with a more or less toggle.  This version seems to work, with a jquery slide toggle. 

5:07 am, June 10, 2022
api
test love like dislike script from api

just testing writing to page from javascript and api

5:04 am, March 11, 2022
javascript
Uncaught TypeError: Cannot set properties of null (setting 'onclick')

I was just testing some code and noticed i had this error on my site.  Locate the error in the site code I removed this script, so the whole thing is now not required, as i opted for the au..

12:12 am, March 9, 2022
javascript
check url hash using javascript

What is a url hash? This is a URL Hash. You can add the # symbol on the end of a url and content after it, and this will not effect the content usually, unless the browser is intructed to do somet..

3:59 am, March 7, 2022
javascript
Converting PHP to Javascript for State Extraction by numeric value Australian State Names

I cant even remember when i originally wrote this php function, but now i need to have it in javascript, should not be much change to it to get it working.  The original function takes an austra..

2:33 am, February 25, 2022
svg
svg animated line testing - shooting star right

I found this on a random site i was looking at it took me a while to extract the animation, but i found it and its working below.  There is shoot right and also shoot left, if you are that way i..

8:46 am, February 17, 2022
javascript
Auto Create HTML Code Snippets

make anything within a <code> tag into a nice looking code snippit with highlighting via prism. To get this code to make a snippit, you need to: Give an element a .make-snippet class and it's ..

4:17 am, February 14, 2022
Alpine JS
Alpine JS Testing

some simple tests using alpine js

10:28 pm, February 10, 2022
node
Testing Playwrite on for Node

I came across this library on y news, and thought id give it a bit of a test.  I managed to get it working but not really sure what tests it can do.  I set it to take a screen shot of a we..

4:00 am, January 28, 2022
php functions
Spam IP Database and delete button

The Background and Reason for the SPAM IP Database and Delete I actually wrote up half of this article and was still testing the function and lost the whole post, which will teach me for adding it st..

12:24 pm, November 22, 2021
php functions
youtube search api request function

This function requests a search from the youtube search api, and searches the text in the snippet for the seearch string. You can get your own API key for this from the google developers console. They..

2:04 am, November 4, 2021
php
add every value in the load_array array into the out for testing

quick foreach to add every variable and variable name into out and return it. good for testing.

3:40 am, October 31, 2021
php
using the $_SERVER['HTTP_REFERER'] to check referring pages

shows how you can display the contents of the $_SERVER['HTTP_REFERER'] tag in php to show referring pages i read in an article that this is stripped out of HTTPS requests, but it seems to still be wo..

3:28 am, October 17, 2021
react
How to Write a React Component from Scratch

Just testing my react component writing skills...

12:09 am, October 16, 2021
react
What is a Stateless Functional Component in React

What is a Stateless Functional Component? A stateless component is one that can recive data and render it, but it does not manage the provided data or track changes to it.  This method creates ..

12:24 am, October 12, 2021
react
adding react with JSX using babel

just wanted to see how JSX would work with react and babel, so this way you can write JSX and babel compiles it for use with react.  This is apparently not a good way to do things and can be qui..

9:18 am, October 11, 2021
react
using babel for react compiling in browser

this is currently just an idea, as i saw that codepen uses babel to run react i was wondering i can do the same thing here and then just write normal react script and have babel compile it.  so ..

8:41 am, October 11, 2021
react
react hello world with variable name

i was just testing some of the hello world examples on the react site, and as they use JSX they cant be directly entered into your code, so you need to run a pre compiler (not sure of the exact term f..

4:00 am, October 11, 2021
php
create a 200 character summary from a longer html string

this is a quick function that can create a 200 word plain text summary from a html string. Also added the option to specify the char length of the string.  Function function create_summary($htm..

11:16 pm, October 5, 2021
javascript
twitter json feed testing

just testing using the Twitter Post Fetcher script, seems to be working well.

9:33 am, September 10, 2021
php
test php bundle write

just testing

1:49 am, August 26, 2021
css
how to bundle css files together using windows or mac

so i was wondering how to do this the other day using some modern end tools, and i found this way just do it straight from mac or windows.  lets say i have these css files main.css style.css..

9:52 am, August 16, 2021
javascript
center mode slick zoom testing

update : this is a tricky one to get working! I have done a lot of testing on this one, and got a demo working from a combination of the following links. the demo is still not 100% styled, but its..

5:17 am, August 10, 2021
svg
globe svg testing (broken)

nope seems not to be working, it seems you cant just copy the glyph path into a normal svg and hope for the best, oh well i tried. 

6:32 am, June 29, 2021
php
verify the google recapture server php

i was still getting quite a bit of spam even after using google recapture v2 and i think this is just as i was using the javascript only version, which disables the submit button if the capture is not..

12:45 am, June 25, 2021
jquery
jquery toggle menu testing

using jquery toggle to show and hide the sub menu's

3:52 am, June 15, 2021
css
backdrop-filter: blur(10px);

just testing this filter

11:34 pm, May 25, 2021
javascript
json test objects (or arrays)

here is a couple of test objects in external js files just in case you need to test some ajax loading functions or need external objects, i mostly use them in my testing. Basic JSON Object with 3 ite..

12:22 pm, May 25, 2021
jquery
json load from jquery and loop through the results

this is the same as this post but i have added the object to an external test file. so rather than already having the object data on the page we have to load it somehow Note: you can test that the o..

6:48 am, May 25, 2021
javascript
fancybox image popout easy

just in case you want to easily apply a modal or pop out effect to your images when they cant be displayed full size on the page.  related: https://kruxor.com/view/code/3gNUD/inline-fancybox-m..

4:12 am, May 10, 2021
html
a page with two images

a page with two images for testing

7:03 am, April 4, 2021
css
adding a background image to the titles of the dark mode card on this page

Just wanted to see what it would look like if i added some kinda image to the background of the titles. Side Note: i wonder if its a bad idea to add images that are uploaded to imgur rather than to t..

6:00 am, March 26, 2021
javascript
replacement slider for ken wheeler's slick carousel tiny slider 2 [testing]

I have been looking for a little while for a replacement for the now classic and a bit depreciated, ken wheeler's slick carousel. After a bit of looking around i think the best replacement, is a non ..

5:23 am, March 17, 2021
javascript
slick carousel jump to a slide on element hover

jumps to a specific slider on hover over on an element this is working now, here is the example, mouse over the buttons to see the slide change. trying to add this: Javascript $( selector ).mous..

4:00 am, February 15, 2021
css
animated rings expanding with delay ripple water effects

just testing this one

5:00 am, February 10, 2021
jquery
jquery page search [testing]

just testing this one at the moment for a in page search.  Based on this: https://codepen.io/chriscoyier/pen/ExgqWab  I would like to adapt this code to search through page elements and ma..

8:27 am, February 3, 2021
Testing
Testing

test <p>test</p> x .my-selector{ value:1px;} HTML <table></table> CSS .css{} Javascript function test() { console.log('test'); } PHP a = 1; x x

11:42 pm, February 2, 2021
site bugs
linking search results to view pages [finished] 🤣

I was thinking it might be useful to link the search term to the page, so that it can be found more easily using that search. For example, Link this search text (somehow) to the post page and display..

2:44 am, January 12, 2021
php
include tinymce only if a user is logged into the site

For google page speed i had an issue when every page was loading tinymce, which is quite a large script. I only actually use this script when editing pages, so this is the change i made to only inser..

5:44 am, December 23, 2020
html
test page for the custom css 12 grid used on this site

This is my testing page for the grid used on this site, it shows elements and other things for use on the grid and other general formatting.

5:38 am, December 23, 2020
css
css perspective and transform css properties testing

i wanted to see what i could do using the perspective and transform css properties. i dont really get how the perspective one works, but you can tweak it so it doesent look too weird.  with the ..

2:51 am, November 23, 2020
bootstrap
extracting the useful bits of bootstrap

Back in the early instances of bootstrap they used to provide a build system for the individual components. It seems that these days its all or nothing, or use some kind of build tool to include the b..

5:14 am, August 31, 2020
javascript
inline fancybox modal testing

just testing to see if i can get a fancybox popup loading using an inline script rather than a document ready one, might be easier to implement. similar to this one, but without the need for documen..

6:12 am, June 3, 2020
javascript
Generate Random Whole Numbers within a Range

My testing for generating a random whole number within a range... 🤞 While the solution here works, it just loops until it gets a random number that is lower than the max, so not sure if this is th..

5:15 am, September 24, 2019
html
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 ..

3:27 am, September 4, 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
testing equality

showing the difference between == and === operators

5:57 am, July 22, 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
css :active pseudo-class usage

The :active selector is a CSS pseudo-class. It represents an element that is being activated by the user when they are interacting with a button or link.

1:22 am, October 5, 2018
php
using parse_url to extract parts of a url

Category: PHP the parse_url php function will split a url into an array of url fragments $url = "http://kruxor.com/path/?argument=value#anchor"; var_dump(parse_url($url)); parse_url example ..

6:20 am, August 31, 2018
php
show errors in php with toggle

Toggle showing errors in php if your server is configured not to show them, good for testing. If you dont have this enabled it will usually just show a 500 error with no details of where the error o..

6:20 am, August 31, 2018
js
scrollbar replacement simplebar

a nice and simple scroll bar replacement code <link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" /> <script src="https://unpkg.com/simplebar@latest/dist/..

6:20 am, August 31, 2018
js
parallax js scroll testing

Update: the demo on this one seems a bit broken, i have to fix it! :) you can view a working demo here: https://codepen.io/kruxor/pen/PpGLRG This is one that i had a demo of on codepen, and then code..

6:20 am, August 31, 2018
js
mithril testing

https://mithril.js.org/simple-application.html example this example is not going to work without npm Adding Elements How to add a link using mithril with target _blank m("a[href=https://mithril..

6:20 am, August 31, 2018
js
testing chartjs

Update: 30 June 2020 I checked this code, and it was broken all fixed now. The issue with the demo included on the main site is that it was trying to run the chart js before the chart library was load..

6:20 am, August 31, 2018
js
stacktable jQuery plugin for stacking tables on small screens

stacktable.js The purpose of stacktable.js is to give you an easy way of converting wide tables to a format that will work better on small screens. It creates a copy of the table that is converted in..

6:20 am, August 31, 2018
css
click through an overlay element pointer events

This one is usefull if you have an element overlapping another element and you want the one underneath to be clickable, like positioning an image over the top of a slider with controls underneath it. ..

6:20 am, August 31, 2018
css
table border collapse

I see this quite often when dealing with tables the border-collapse: collapse; used on a table as so: table { border-collapse: collapse; } So what is the point of doing this? It seems to help..

6:20 am, August 31, 2018
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
"We're tight-fisted with property and money, yet think too little of wasting time, the one thing about which we should all be the toughest misers.”
Seneca
Random CSS Property

margin-inline-start

The margin-inline-start CSS property defines the logical inline start margin of an element, which maps to a physical margin depending on the element's writing mode, directionality, and text orientation. It corresponds to the margin-top, margin-right, margin-bottom, or margin-left property depending on the values defined for writing-mode, direction, and text-orientation.
margin-inline-start css reference