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..

Darkmode JS - Add darkmode to your site with one script

This library looks really nice! It drops in ok, but maybe with more complex layouts or coloring, it seems to break a little bit.  Darkmode JS Example Source Links https://darkmodejs.learn.un..

Hello world in C and seeing what it is actually doing

One of the most simple C applications, how to compile it and how to objdump it.  C #include int main() { int i; for(i=0;i < 10; i++) { puts("Hello Mac\n"); } return ..

Slick Slider Carousel with Custom Next and Prev Buttons

I had a slider the other day where i needed to attach some detached buttons, so added the following click events to control the next and previous events on the slider.  Note the class names: sli..

install cmatrix on mac m1

For some reason i thought the mac would have apt or apt-get to install packages, but apparently not.  Here is how you can install cmatrix a matrix emulator or other unix type terminal apps on ma..

button zoom effect with expanding background

Just playing around with zoom and background size effects on a promo button, if you change the background to 110% and then zoom to 1.1 you can see how the background appears to zoom out while the butt..

allow internal networking connection from virtual box vm

This will allows you to access a shared folder on a Windows 10 Virtual box from Windows 11. Probably also works with other windows versions, but only tested with the host OS beinf windows 11 and the V..

add a divider to your dropdown nav toggles

good for seperating menu sections in the same dropdown item add this to your toggle <li><hr class="dropdown-divider"></li>

foundation three boxes with text align links to the bottom of element

For some reason i had the request to align the links in three boxes with different height text, not sure why they wanted them aligned, but i guess my task is not too question that but to fix it. ..

bootstrap list group card with footer

a list group within a card and also a footer on the card for additional links. 

Idea: Google Font Dropdown Selector Code

just an idea at the moment, a dropdown list of google fonts and when selected it loads that selected font using the @import css tag.  Loading the fonts Gist : not tested https://gist.github.com..

down chevron and styles

a down chevron and the class to style it, default this is 16x16px but you can zoom it in or out easily, just change the height and width of it target with the class bi-chevron-down

ken burns slow image zoom

No i had never heard of Ken Burns either, but hey i like the zoom effects.  Slow Zooom...

animated duck on footer

Thought this was cool. How do i do it? Page Source: https://www.learninpublic.org/  Copy this section Lets see what is attached to it. So i can see from the classes its a tailwind based ..

atom on mac and synchronise settings

installing atom and syncronise settings between windows and mac versions. Install the package Syncronize Settings the package is called sync-settings but searching for sync-setting and Syncroniz..

make the view number zoom when mouse over or active

Lets make the view number in the header widget area a bit more exciting... Zoom on mouse over with css.  Lets add this effect here: Using Transform Scale In Css To Zoom On Hover Over Simpl..

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..

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..

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..

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 ..

vertically align text within a fixed height div using flex

this can be used to make text align nicely while still keeping the same layout. the example below shows how you can set the height of the containing element and still have the text aligned center to ..

CSS Drawing - Beach Scene

i did this one a while ago, cantr even remember it just appeared when i searched in google.  here is an animated version, check the bottom for the css version of this:  

404 Error Page Codepen

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

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. 

simple backup to google drive fron linux

i added these scripts a while ago to backup mysql databases and web files to google drive a while ago, i just run them on a daily cron to copy the backups every day. the files so the bain backup_a..

using clamp js to clamp lines of text

there is a css version of this as well but this version works in a greater range of browsers (i think) this one is not working for me... i think the overflow elipsis is still a better option than thi..

ajax callback to delete with sweet alert confirmation to make it cool! 😎

I recently wanted to to an ajax call back on a list of items just to make it easier to move around the place, rather than it reloading the page every time. So i thought why not also use sweet alert on..

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..

backup script to google drive that can be used for multiple directories

this zips the content of the target directory and then uploads it to a google drive backup location just create a file called ~/_backup_dir.sh and then add the following BASH - _backup_dir.sh  ..

add chevrons to a ul list

adding a chevron to a list item rather than the default dot and the moving one, here is the demo:

foundation accordion for version 6.x

yep the foundation does weird things to this sites css, but the demo still works if you want to use the built in foundation accordions. 

check box highlight text area css

i just wanted to be able to highlight a text field if a certain check box was checked on a form in this demo below, if you click on the check1 checkbox it will give you an alert saying if the box is ..

Slick Slider Carousel with Fade Transition

here is a working example of slick carousel with a fade transition between elements rather than a slide transition

add a toast alert when logging in with half moon

example of adding a document dom ready wait and then the script that launches a new toast message just adapting a php cms using halfmoon as the ui, its quite nice.  a bit bright in non dark mod..

php basic page router

this php page router while pretty basic does the job for this site. it takes all the query string and splits it with the / into $p variables you will also need the following nginx or similar page rew..

zoom background of element when active

I just wanted to see if something like this zoom was possible but just using the background image and leaving the foreground content in the element with no zoom.  https://kruxor.com/view/code/kM..

logo tickers marquee slow scrolling

logo tickers with a slide animation

add a moving chevron to your href link

this adds a right chevron that moves when the link is active demo: * note: this may not show up in light mode as the chevron is white, so would need to change the color it

how to find what version pi you are using

So i was wondering the other day how to show what raberry pi i had, rather than opening it up. you can install lshw and it can list all your hardware Install it with BASH uname -r which should gi..

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..

css slow zoom in animation

give a bit of extra interest to otherwise static images

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..

TortoiseSVN for updating wordpress plugins

For updating wordpress plugins, and probably other SVN related stuff, i found that using TortoiseSVN is the easiest. For windows anyway.  Just go to the downloads page, and pick the correct flav..

box shadow example(s) - drop shadow

I realised just now, that i dont have a box shadow example! How does that happen, its one of those css elements that i just use so much that i guess i forgot about it.  Related Pages: https:/..

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..

spin rotate an element on mouse over [css]

i thought it might look good to spin this element around when the mouse is over it. Added the following css to second_nav_toggle.  

animate and zoom six elements on a timer [addClass, removeClass, setTimeout]

set of six elements that i wanted to highlight using a simple setTimeout and the addClass and removeClass  this also involves some css changes to get this working i would also like in the fut..

mouse outline svg

checking the current url and then marking a link active based on that url

i want a script that can check the current page uri and then match it to a list of links to be able to add an active class that survives page reloading So here we go... 1. Get the current page url. ..

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..

chevron down

top bar overflow issues [fixed]

So i was just browsing throught the site checking for random errors, which there are quite a lot. And noticed this one. Quite a large bug caused by overflow issues in the main header, i think this ..

make labels or badges look better

How to make these look better. The labels are used in the list items to show a small version of the category or sometimes the view count for a list item. How they look currently Dark Mode Ligh..

add a jquery date picker to your text box

This JQuery UI Date picker is good if you want to add a nice dropdown date selector to your input box, rather than having to type in the date manually. Requires: JQuery  JQuery UI Documen..

chevron left

chevron right

Monitoring Visible Objects on Screen

i found this one when researching how to detect visible objects on screen, and then doing something with them. This one does not use any external scripts to change the box colour as it becomes visible..

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..

Quick tool to convert time into decimal

I needed a quick tool that can convert say 20 minutes into decimal, as im doing this a lot these days. Here is what i come up with, well you can google it as well and that works, but this form is a bi..

Leaflet Quick Start Example

just a quick start map embed for leaflet js an alternative to google maps

generating all css colours with php?

I was looking at doing this just to generate all css colours, i think the only issue is there is a lot! You can do this with rgb(0,0,0) all the way up to rgb(255,255,255) how many seperate colours is..

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..

Fix for Fatal error: Uncaught Error: Call to undefined function file_get_dom() simplehtmldom simple_html_dom

This error is caused due to a function name change in the simple_html_dom.php library if you are using an older one and upgrading to the never version, you can see it in the change log here: https://s..

Bootstrap Darkmode Switch

I have tried this before without success but i googled "Bootstrap Darkmode Switch" and found this repo at the top of the list. So i thought i would give it a try on here and see how it looks. Demo pag..

Create a UTF8 General MySQL Database with Command

This will create a UTF8 database with the character encoding utf8_general_ci replacing the with your database name. I was manually doing this in adminer before this and selecting the encoding, this i..

fix for Uncaught TypeError: e.indexOf is not a function

fix for depreciated window load Uncaught TypeError: e.indexOf is not a function at S.fn.init.S.fn.load (jquery-3.5.1.min.js:2) at default.aspx:993 I found this error when upgrading from a..

bold the numbers in a ol li list

sounds like an easy thing to do, but maybe not so simple. you can do this using the counter css element. code below:

adding pulsating dots to your css ul li list

get rid of those boring dots in your list and add some pulsation! See the Pen Pulsate your <ul><li> list item dots! by Luke (@kruxor) on CodePen.

using transform scale in css to zoom on hover over

using a css transform will not effect other elements that surround it, so when you mouse over this div (or press it on your phone/tablet) it should scale to 1.5 times its original size.

using the disk free space function in php

here is a built in php function that will show the amount of free space available on your server.

Core Class - Basic Core Structure

A Core class that can be used as a base for all content types and uses the extend classes to define the database variables. So basically you can set up core class and then create sub extend classes to..

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'] != ..

wordpress register enqueue javascript require jquery

This usually goes in the theme functions file. This will load it after jquery if it requires it. wp_register_script('scriptname', get_template_directory_uri() . '/js/scripts.js', array('jquery'), ..

google map with overlay data

Ever wanted to add a really slightly complex google map to your site? Working Example /* Always set the map height explicitly to define the size of the div * element that con..

Slick Slider Carousel

Edit: Sorry this page was broken for a bit, its fixed now with working examples! 😛 Nice and simple slider / carousel

set and check a cookie using js cookie

this library makes setting and checking cookies so easy its amazing! include this script <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.m..

jquery jqueryui vue script includes

JQuery 3.2.1 <script src="https://kruxor.com/code/js/js/jquery.3.2.1.min.js"></script> jqueryui includes css and js JQueryUI 1.12.1 <script src="https://cdnjs.cloudflare.com/aja..

fancybox youtube showing video links in a lightbox

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 fan..

jquery accordion

here is an easy drop in if you need a quick and dirty accordion sometimes you just need something quick, here is mine for the jquery accordion also changed the default selected tab to green rather t..

jqueryui date selector

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..

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 ..

jqueryui includes css and js

these ones are useful as well for including jquery ui JQueryUI 1.12.1 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> JQueryUI 1.12.1 min..

youtube extract thumbnail from video link

Good if you need to extract the ^^ for some reason. replace $v with your video id. raw links https://img.youtube.com/vi/$v/default.jpg https://img.youtube.com/vi/$v/hqdefault.jpg max size https:/..

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.

emoji data

Emoji Data version 1.0 This is a better emoji list that you can search by title ctrl + f emoji-data.txt # Emoji Data for UTR #51 # # File: emoji-data.txt # Version: 1.0 # Date: ..

bootstrap styled buttons

Just in-case you would like the shiny (flat/rounded) blue buttons from bootstrap without all the css. Example Button add the class btn and btn-primary to your link An Example Primary Button (bt..