Search
Search Code
Search Code by entering your search text above.
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
html
Video different sources on screen sizes video embed html responsive

video embed tag using media tag to switch video sources depending on screen size This example will switch the video souce at 800px screen width.

1:31 am, September 6, 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
javascript
Twitter Post Fetcher v18.0.4 - javascript twitter feed fetcher

A few queries showing how to get latest tweets and post likes using the Twitter Post Fetcher v18.0.4 script.

12:42 am, August 31, 2022
css
set a css grid to auto to make it stack on mobile

to make a grid stack when the screen size gets smaller you need to set the grid items to auto when it gets to the desired screen size.  In this example once the screen size gets to 1024px or les..

1:51 am, May 12, 2022
javascript
Twitter Post Fetcher Script

Uses javascript to fetch a twitter feed from a user screen name. Totally stylable alternative to using the twitter embed code. Your Welcome... 

12:43 am, May 3, 2022
CSS
CSS Only Table Stacking Solution

11:24 pm, February 8, 2022
images
center image preview with lightbox and caption

I just wanted a thumbnail or preview of the image, where if clicked it would load into a lightbox, but the preview just shows the center of whatever image is added to it.  Note: I just picked ra..

2:54 am, January 12, 2022
javascript
Use destructuring assignment within the argument to the function half to send only max and min inside the function.

this seems like a tricky one, can be resolved with removing the stats array reference. Im not sure how it still knows to access the stats array. I dont know how that is correct as the console just lo..

12:34 am, December 17, 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 functions
generate random username function in php

a function that takes several random words and creates a user name from them. This will generate a user name with between one to three words and a prefix if prefix_show is set to true. usage generat..

5:04 am, October 23, 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
css
bootstrap dark mode

Bootstrap Darkmode https://github.com/vinorodrigues/bootstrap-dark/blob/master/README.md#method-1 https://github.com/vinorodrigues/bootstrap-dark    CSS Dark Mode Preparing for dark mod..

1:24 am, August 19, 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
css
how to view a web page in its printer format

if you have to check a website in its print or @media print format this is how you can emulate it in browser if you are using chrome or edge.  Open the Dev Tools (usually F12) Click the menu ..

6:26 am, July 28, 2021
css
404 Error Page Codepen

found this in my links the other day, still looks cool...

1:16 am, July 16, 2021
css
how to make a transparent logo white with css

lets say you have a logo and its dark on a black background, how annoying is that, you still want the dark background but also want to see the logo.  well with this css trick you can just make t..

3:07 am, June 29, 2021
site documentation
for auto filled fields, need to change the text and background colours

for some reason bootstrap or the browser is doing this to auto filled fields.  according to my searching there is a pseudo class added to auto filled fields CSS input:-webkit-autofill { col..

12:11 am, June 17, 2021
php
counting the occurrence of words in a multidimensional array

array sorting example The array Array ( [0] => Array ( [0] => Some [1] => great-looking [2] => special [3] => editio..

4:19 am, June 3, 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
css
css responsive max and min targets @media

showing how you can target elements within a max and min screen width demo:

1:39 am, May 7, 2021
linux
linux mount a drive manually

this is how you can mount a drive in linux first list the drives available with:  BASH sudo lsblk -o UUID,NAME,FSTYPE,SIZE,MOUNTPOINT,LABEL,MODEL or this BASH sudo blkid ok once we have th..

4:24 am, March 12, 2021
javascript
Adding HTML Templates into TinyMCE Editor

This can be very useful if you are using the tinymce editor on your site and want to be able to add simple or complex html templates. Here is how to do it: Add this to your tinymce init Javascrip..

12:14 am, February 5, 2021
javascript
enable dark mode in tinymce

Here we have a darkmode verion of tinymce, ahh my eyes feel much better. The change to version 5 seems quite easy as well, as it uses the same init script as 4 still.  You need to also includ..

2:53 am, January 23, 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
css
css prefers-color-scheme example

This uses the @media and prefers-color-scheme to check which one you have as a setting in your browser

12:06 pm, December 7, 2020
javascript
how to install js socials for social media share buttons and make them rounded

This should be a nice quick one on how to install js socials which add social media sharing buttons on your pages.  Yeah i always just ignore these as well, but hey some people may use them?? H..

5:42 am, November 23, 2020
design elements
hero box with title sub title logos and call to action buttons

Here is a basic hero box section that contains: Title Sub Title 6 Logos (could replace with carousel logos) 2 call to action buttons I think it can be made more responsive, by replacing the..

2:43 am, November 9, 2020
js
enable tinymce on a target textarea by id

this is useful if you have multiple textareas on a page and want to enable tinymce on, also included are buttons to enable and disable on all textareas on the page

12:15 am, August 19, 2020
javascript
stop tinymce replacing urls with relative url's

If you have been using tiny mce for your content editing, you will sometimes find that it replaces your full url strings with its relative ones. This can be annoying so this is how you can disable it..

12:55 am, August 18, 2020
css
stop overscrolling on responsive ios

this stops the site bouncing around all over the place when you try and scroll in ios

3:50 am, July 31, 2020
css
switching stack order of floats with flex

responsive stacking, changing the order of how they stack. so by default they should stack in order they are listed in, like if the pink box is 1st then it should stack on top of the blue box when it ..

11:55 pm, July 28, 2020
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
javascript
loading content into fancybox modal using ajax

This loads content into a fancybox modal using an ajax request so you can specify a url to load into the modal when the button is clicked

4:30 am, June 5, 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
fancybox modal popup example

an example showing fancybox text modal window attached to a button to open it

6:59 am, May 29, 2020
javascript
Load and Unload TinyMCE editor from a button

Enable TinyMCE Disable TinyMCE Some Content function load_tinymce(idclass) { tinymce.init({ selector: idclass, plugins: [ "spellchecker code aut..

2:53 am, April 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
wordpress
wordpress enqueue slicknav and slick slider

add this to your theme scripts functions file here is the full one from HTML5 Blank // Load HTML5 Blank scripts (header.php) function html5blank_header_scripts() { if ($GLOBALS['pagenow'] != ..

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
jquery
document ready wordpress jquery

Wordpress uses JQuery rather than $ to initialize so here is a workaround that allows you to still use the $ to access JQuery functions. Just incase your normal document ready is not working. tags: ..

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
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
more complex responsive tables css

i did a simple version of this before here but now im going to make it a bit more complicated and functional. table { width: 100%; border-collapse: collapse; } tr:nth-of-type(odd) { ..

6:20 am, August 31, 2018
css
target internet explorer with css and html

target all internet explorer versions with this <!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> <![endif]--> target ie 10 and 11 p { col..

6:20 am, August 31, 2018
css
targeting the printed version of a page with media print

there are 2 ways to target the printed version of a webpage, you can do it with a @media print query inside your css, or you can link the whole style sheet and target the print media. target print ..

6:20 am, August 31, 2018
css
set transparent menu over background image

this is probably obvious, but i found it useful for those themes that look nice with a semi-transparent header sitting over the top of an image. I think ill do this as an external example, as its eas..

6:20 am, August 31, 2018
css
stack a table using css responsive

this can be useful for fitting tables into smaller screens, usually add this to a media query. #tableid td { display: table-row; width:100%; display:block; } and with a screen size added @me..

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
In this case my anchor this week becomes driving almost 2hrs outside of Atlanta to one of my favorite hard core gyms in the world.. MetroFlex aka The Dungeon. The gym owners turn the heat way up so it becomes a fun sweat box and the gym members just watch from afar and leave me alone. I happily drive myself long distances to find MY ANCHOR. Our anchor allows us to have balance, focus and be as productive as possible. And if you're in the middle of a heavy set and your headphones start to fall off your head, like mine did here.. well.. f*ck the headphones. Let em break and fall. You can always get a new pair, but the iron ain't ever gonna lift itself.
Unknown
Random CSS Property

:any-link

The :any-link CSS pseudo-class selector represents an element that acts as the source anchor of a hyperlink, independent of whether it has been visited. In other words, it matches every <a> or <area> element that has an href attribute. Thus, it matches all elements that match :link or :visited.
:any-link css reference