List Code
Aligning Images in TinyMCE or Floating them left and right (code)
Here is the code for this page Aligning Images in TinyMCE or Floating them left and right
using the last-of-type css selector to remove a border from the last item in a list
i find using the last-of-type css selector quite useful when there is a list or re-occuring items and the last one has to be slightly different from the other ones. This allows me to target the..
css slow zoom in animation
give a bit of extra interest to otherwise static images
animated rings expanding with delay ripple water effects
just testing this one
github logo background png css
just the github transparent logo as a css class, yes it should probably be a svg, but here it is in all its PNG glory.
checking for spam comments function
with this function, you can scan through your incoming comments and check them for keywords the function will scan through the comment text and then provide you with a score as you get more spam com..
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..
Uncaught TypeError: $(...).slideToggle is not a function
Uncaught TypeError: $(...).slideToggle is not a function at toggle ((index):226) at HTMLAnchorElement.onclick ((index):239) I noticed this one today when looking up this post:https://kruxor.com/view/..
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..
how to check linux kernel version on rasberry pi rasberian
You can check which linux kernel version on rasberry pi a couple of ways, the easiest is using the uname command BASH uname -r which should give you something like this (but probably not exactly th..
how to check the temperature of the pi using command line
to get the temperature of the pi in shell or command line type the following: BASH vcgencmd measure_temp This measures the GPU temperature. Which should generate something like this: To get the..
using the nth-of-type selector to target a class with the same name
using the nth-of-type css selector you can target a class with the same name, using a number. I guess this can make your code a bit neater not having to add a sub class
adding background blur to an image using css fill screen
I had noticed this cool looking effect used on places like google, and other sites that display portrait images, i think i saw it on the google home as well or maybe google photos. Its basicall..
linux list all drives and partitions
the following command will list all drives and partitions in your shell BASH sudo lsblk -o UUID,NAME,FSTYPE,SIZE,MOUNTPOINT,LABEL,MODEL It should look something like this depending on your drive se..
installing exfat and ntfs drivers to enable reading of these filesystems
this will install the ntfs package on your linux system, allowing you to read and mount ntfs partitions on drives. NTFS 3G BASH sudo apt updatesudo apt install ntfs-3g This should give you the fol..
using text-stroke to add a border to your text
this is quite good for webkit enabled browsers, and most of them are these days. Check what is supported: https://caniuse.com/?search=webkit-text-stroke
append a query string to all url's on a page
this should append the query string test=1 to all url's on this page. if it works... make sure its added to document ready.
check if a query string item is set in the current url
this will check and console log if a query string on this page is set to test=anything example url is: Test is not set: https://kruxor.com/view/code/XzLaT/ Test is set using & : htt..
check if a certain query string is set then apply it to all url's on the page
this script will check if a query string is already set, and if it matches it will append the same query string to all url's on the page Here is the test link with the field, and all url's on this pa..
minutes to decimal calculator javascript version
trying to do a more simple version of this post. https://kruxor.com/view/code/NIjAQ/quick-tool-to-convert-time-into-decimal/ the php version requires post back to the server, so i think this c..
get the value of an input form element (input value)
add how to get the value of an input form element with javascript for some reason i can get this working with: Javascript console.log(document.getElementById("my_input").value); but when trying to..
inline form field padding
I noticed this when doing this demo (get the value of an input form element). Looks like inline form elements look pretty average when a button is added to the same line. i think this should..
set the html of an element javascript
this will set the innerhtml value of an element
add click event to multiple link items
this allows you to get every a element in a-div class and stop the link from loading, so you can do other things with it like run a function or something else Functions used: Javascript Wait for th..
add click event to multiple link items and load the link content into a target div ajax
this will get a group of links with existing href targets and load them dynamically with an ajax callback you will need to also include the full jquery script as the slim one does not include the aja..
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
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..
logo tickers marquee slow scrolling
logo tickers with a slide animation
json jquery ajax request
get json data with jquery using getJSON
loop through object json javascript
this shows how you can loop through a javascript object using for if you check the console you can see the loop results
using moment.js to make your time format nicer
moment.js is a very nice way to handle multiple date strings and output them in a nicer format. grab the latest copy of momen from cdnjs lets say our date is in this format, i think this is un..
add years as options to select dropdown
add the years as dropdown items between a range of years with javascript document ready js only version
select onchange
select onchange run a function this will run the check_years function when the select value is changed
change a select box back to its initial select value
this will reset the select box selected value back to the 1st item in its options list
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 ..
Creating a chart about charts.css with charts.css from the command line
Creating a chart about charts.css with charts.css from the command line: BASH ( echo "<table class='charts-css bar show-labels show-heading'>" echo "&l..
rounded click me button with icon
just a rounded button with a font awesome icon
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..
page scroll indicator research
I was wondering the other day how they do those page scroll indicators, i saw one when viewing this site: https://blog.wolfram.com/2021/03/24/the-solution-of-the-zodiac-killers-340-character-cipher..
javascript page redirect
this one i cant add a working demo for, due to its nature, but it is working if you remove the comment. combine this with this: https://kruxor.com/view/code/wQUDM/do-something-later-with-settimeout-..
background image greyscale filter while foreground is still in colour
i had an issue the other day using a css filter which was causing all items within the element to also have that filter. using the ::before psudo class solves this issue
blur the background image while keeping the foreground normal
this one uses the ::before element to add a background and apply the blur filter to it, while allowing the foreground content to still be non blurry
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..
css double page document preview with shadow
two div elements that look like blank documents with drop shadows
play youtube videos on firefox in ubuntu 18
sudo apt install libavcodec-extra also checked that firefox was able to pla drm video
start ssh and add key git
i usually add this to a .sh file and make it +x to run ssh agent and add the github key bash eval "$(ssh-agent -s)"ssh-add ~/.ssh/github
commit and push changes to git repo
run this to add all files in current directory to repo and push the changes to git git add * git commit git push
git pull changes from a repository
use this to pull from an existing git repo into a new directory
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..
