Search
Search Code
Search Code by entering your search text above.
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
js
fancybox youtube showing video links in a lightbox - updated with fixed code parts

do people still use lightboxes, it seems yes in some cases. ;) if you feel the urge to use lightboxes and need to link to some youtube videos this is how you can do it. you will need jquery and fanc..

6:43 am, June 26, 2023
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
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
jquery
wrap an iframe with another div inside another div

so lets say you had an iframe within another div and that div had the class called content. you cant actually edit the page content but you can add some jquery to the page can you add a wrapper to t..

12:35 am, September 5, 2022
html
codemirror with auto preview window

this should auto preview html code into the preview area using code mirror

7:15 am, July 5, 2022
Factorio
Factorio Megabase-In-A-Book

Just in case i decide to start up playing factorio again... Megabase in a Book Lets Play Book Contents Copper Smelting Iron Smelting Steel Smelting (from Ore) Steel Smelting (from Plate) Gr..

1:56 am, July 4, 2022
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
fancybox
fancybox load iframe inline

All you need to load content in an iframe using fancybox modal javascript plugin. not quite an inline load, but not much script to get this going. 

2:44 am, September 4, 2021
php
creating embedded php code from a database field

i actually dont know why i didnt think of doing this earlier, i already have the php code field in these code articles. I thought why not embed this code into an actual file and then run it as a test..

4:23 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
php
extract youtube image from video url

showing how you can get the image wallpaper in different sizes from a youtube video I used to have this tool a while ago, it just passes the video id and extracts the images and also can produce the ..

3:52 am, July 31, 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
add a youtube video preloader function, lazy load youtube [fixed]

I noticed that this list page: https://kruxor.com/list/rs3_efficient_skill/ Loads about 29 (well exactly 29) youtube video embeds and was wondering if there was an easy way to replace these iframes w..

2:58 am, January 21, 2021
html
scroll to top html css and js

add a button to your website that allows scrolling to the top of the page css add scroll behavior smooth to your html, to allow the page to scroll nicely rather than just jumping to the top, in supp..

1:13 am, July 21, 2020
gimp
stretching an image to fit in a banner image with gimp

sometimes i need to get a square image to fit in a rectangle box this is a way to do it with GIMP get a square image, or pick any image (pexels) fit it in this box.. For this one we will be using ..

1:16 am, June 30, 2020
html
hide parts of a form until the 1st item is selected

this code can be used when you just want to show the 1st field on a form then when it is selected it shows the rest of the form elements

1:26 am, June 17, 2020
nginx
Nginx Server Block with Rewrite

Nginx Server Block with Rewrite Here is a basic nginx server block with rewrite to the index.php file. So it takes all the parameters and passes them into the index, into the variable $p or $_GE..

11:16 pm, March 29, 2020
php
uniqid random string

Here is a smaller implimentation of the built in uniqid() function. Good if you want to generate smaller unique strings for url's uniqid example suniqid(5) function suniqid($len = 5) { $..

6:20 am, August 31, 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
php get the file modified time with filemtime

Good for reading the modified time of files with php... echo date("F d Y H:i:s.",filemtime("html/php-get-the-file-modified-time-with-filemtime.html")); will output

6:20 am, August 31, 2018
php
count the elements in an array

seems easy, if you need to know the amount of elements in an array this is how you do it. good if you need to know where the end of an array is. code <pre> <?php $array = [ "yo", ..

6:20 am, August 31, 2018
js
flems embed in url

Flems.io is a single-file, embeddable Web sandbox. It keeps all its state in the URL, so just make your changes, copy the URL from the address bar, and send it wherever you please. Most popular link s..

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
tiny mce editor tinymce

Just loading the editor, as its useful for formatting stuff sometimes 😋. I usually use a function to load it into text areas with the tool bars + styles that i find useful. Example fu..

6:20 am, August 31, 2018
js
fancybox youtube showing video links in a lightbox

Updated version with code here do people still use lightboxes, it seems yes in some cases. ;) if you feel the urge to use lightboxes and need to link to some youtube videos this is how you can do it..

6:20 am, August 31, 2018
js
jqueryui date selector with examples and code

This has to be one of the most used date picker items from jquery ui. And its usually the reason i even include jquery ui. Without using a theme this one looks pretty good. This version of it does n..

6:20 am, August 31, 2018
js
using vue and json data

Based on This Demo: https://jsfiddle.net/kkpLnv6k/ so i was looking through the jquery way of loading json data and was wondering what the point of loading it in with a vue.js instance is. I guess ..

6:20 am, August 31, 2018
html
layout homepage

just some experiments external link

6:20 am, August 31, 2018
html
youtube embed no controls auto play iframe

Sometimes you want the video to loop and play with just no controls on it, this is how you can do it. You can still click to pause it, but the normal controls are gone. Also it seems you have to ..

6:20 am, August 31, 2018
html
flexbox layout template

thought i would see what a full page example layout would be like using flexbox rather than floats Using this for flexbox reference flexbox layout Note: tested working in ie11.. yay.

6:20 am, August 31, 2018
html
youtube embed iframe

<iframe width="100%" height="340" src="https://www.youtube.com/embed/ScMzIvxBSi4" frameborder="0" allowfullscreen></iframe>

6:20 am, August 31, 2018
css
css grid for layouts with no rows

I had a look at this recently, but my previous example still used rows for a grid, which apparently is not the correct way of using css grids. I think the issue (I had) with css grid is it seems co..

6:20 am, August 31, 2018
css
css grid for layouts and how to use it

Note: Added version 2 of this with no rows for the grid css grid for layouts with no rows so there is this thing called the CSS Grid Layout, and apparently we dont need a framework for grids anymore...

6:20 am, August 31, 2018
css
why are people so amazed that a column layout can have a full width element

Is it because its inside a grid still? i must me missing something anyway i have been noticing that there is this post (and this one) going around showing that you can break out of a css grid and go ..

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
Old programmers never die; they just lose some of their functions.
Random CSS Property

contain

The contain CSS property allows an author to indicate that an element and its contents are, as much as possible, independent of the rest of the document tree. This allows the browser to recalculate layout, style, paint, size, or any combination of them for a limited area of the DOM and not the entire page, leading to obvious performance benefits.
contain css reference