Search
Search Code
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 ..
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..
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..
rainbow text background clip with linear gradient
testing using background clip with a linear gradient background colour to make the text appear rainbow colours 🌈
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..
Load fancybox modal on hash check
I was just testing this code, not working on the hash check as yet.
Welcome Widget Card - Toggle
Testing the welcome widget with a more or less toggle. This version seems to work, with a jquery slide toggle.
test love like dislike script from api
just testing writing to page from javascript and api
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..
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..
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..
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..
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 ..
Alpine JS Testing
some simple tests using alpine js
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..
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..
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..
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.
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..
How to Write a React Component from Scratch
Just testing my react component writing skills...
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 ..
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..
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 ..
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..
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..
twitter json feed testing
just testing using the Twitter Post Fetcher script, seems to be working well.
test php bundle write
just testing
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..
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..
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.
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..
jquery toggle menu testing
using jquery toggle to show and hide the sub menu's
backdrop-filter: blur(10px);
just testing this filter
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..
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..
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..
a page with two images
a page with two images for testing
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..
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 ..
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..
animated rings expanding with delay ripple water effects
just testing this one
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..
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
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..
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..
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.
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 ..
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..
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..
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..
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 ..
Objects in javascript
creating and using an object in javascript, the full version of this testing is on codepen
testing equality
showing the difference between == and === operators
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 ..
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.
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 ..
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..
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/..
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..
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..
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..
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..
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. ..
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..
