Search
get directions from google maps form embed
this is a random form that posts back to google maps showing the directions needed to get from one address to another location, im not sure where this would be usefull. Maybe on a site where you neede..
get yesterdays date with javascript
This gets todays date and minuses one day from it to be ... yesterday. let yesterday = new Date(new Date().setDate(new Date().getDate()-1));console.log(yesterday); This format is the full da..
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..
how to decode xml in php
how to decode xml into an array in php Here is a full example taking an xml string and converting it into a php array.
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..
php function to remove the query string from a url
i was reusing this a few times manually and thought i would save my self a bit of time by just using the following function which returns the same full url, but removes the query string from it. ..
How to Use PropTypes to Define Props in React
React allows you to define the types of props given to your components to make sure that invalid data is not sent as the prop to the element. To do this you can define propTypes. You can defin..
twitter social sharing meta tags
I had done this one so many times on client sites I actually forgot that i had not applied it to my own site! Doh! Anyway this is the tag setup i use for adding the title, url, author and featured im..
change selected color on input elements css
this can be useful if you are using darker form elements and they happen to have white on white text, so you can target the :focus on the input. here is the text input before the colour change, the c..
moving the hits widget into the post header and footer
I wanted to make a smaller deal of the views page widget, i was adding it as a full widget and it does not need to be that huge so moving from widget area to the top of the post. Move it down..
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..
add some foundation tabs working example
they show the tabs here on the example page, but there is no full working code... for some reason. So i thought i would add one here. Hmm foundation makes this site look weird, and very bright! :P ..
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 ..
foundation grid for 6.6x - also known as the foundation xy grid
some foundation grid demos for 6.6x foundation you can get foundation here: https://get.foundation/ or here https://cdnjs.com/libraries/foundation more docs on this here: https://get.foundatio..
use a list group for listing by category page [todo]
change this to a list group, should make it neater. Page to update: https://kruxor.com/list-category/code/ so for some reason this is listed using this function PHP $list_wiki_menu = $clas..
responsive menu research full screen multi level
i was just looking into responsive menu's that are easy to impliment and navigate even if they have multiple levels still just in research mode at the moment Menu One Menu Sub One Menu Sub..
Comments Listing should be a custom list rather than using search
For some reason when i listed the comments under posts on this site, i used the search function and then searched for the related uid, which maybe was easier at the time than adding an additional cate..
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..
set active class based on url value
this will check the full url and then loop through all the a elements in #test-div when it finds a matching url it will add the class active to that button this is good for persisting active links o..
check server https or http value in php using $_SERVER
this will check the server method and if its https assign the value to $server_http_val so this will either be "https://" or "http://" good for generating full url's for your domain.
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..
python extract images into an array from a url
this should extract all images from a url into an array using python python from bs4 import BeautifulSoupfrom urllib.request import urlopenurl = "https://www.kruxor.com/view/code/LOveX/"page = urlop..
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..
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..
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..
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 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..
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/..
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..
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..
codemirror htmlmixed textarea
a working (hopefully) version of codemirror using the htmlmixed mode, not sure why its not doing code highlighting.
using multiple text shadow
sometimes you want to use more than one text shadow, like if you want one with 2px on the bottom left and then one with 2px on the top right, so you can get a full outline or a more even shadow on you..
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..
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..
add paging to wp list query
this is a raw template with list query for specific category names and also includes paging, if the post number is greater than 8 posts in the included categories.
list items from blog and filter by category name
this is a bit raw, but shows the $args = array('category_name' => 'Categy Name 1','Categy Name 2','Categy Name 3' => 8, 'paged' => $paged ); for querying the category_name to do multiple pro..
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
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..
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..
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 ..
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
fixing the website footer and making it less ugly
Here i show you in a couple of steps how to make the footer on this site look nicer, while actually doing it. Here is what the footer currently looks like. Yep pretty average looking. Lets add a ..
tar.gz to compress a directory in linux and then decompress it
a pretty common way to zip up contents in a directory into one (or technically two) archive(s). Add to tar.gz This will add the directory and all sub directories into the archive called the-archiv..
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..
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..
Custom 12 Grid using CSS Grid
For a while i have been using frameworks for their easy grid systems, like foundation and bootstrap. I guess this is a bit lazy and very bloated as you are loading the full css library and using about..
Objects in javascript
creating and using an object in javascript, the full version of this testing is on codepen
js check the length of a string
using the javascript .length property
Making Images Retina Display Friendly
Have you ever noticed images look a bit blurry on your high res screen? Sometimes this is referred to as a "Retina" display... Its probably because the image used is exactly the pixels made for a regu..
xcopy backup full directory windows bat
xcopy /y/s/e/d/c/k/r d:\photos\*.* h:\photos
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 ..
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 show posts loop with feature image thumbnail
this is surprisingly hard to find code that lists all blog posts in a template with the feature image that does not use an additional plugin. you shouldnt need a plugin to do this as its already built..
load google sheet data into json string with jquery
Just discovered this the other day, you can actually export google sheets data into json format and load it directly into your site, how good is that. A free mini basic database! Initially i was lo..
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..
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.
show the year with js
just a simple one liner that will show the current year, so no more need for static years in html footers! var d = new Date(); document.getElementById("year").innerHTML = d.getFullYear(); Usage E..
using foundation 6.4 xy grid basics
Foundation 6.4 introduced a new xy grid which replaces the old row and large-x format here is a basic grid layout (foundation grid) add some style to show the cell border <style> .grid-x .ce..
make all links target new window
I was actually searching for a js way to do this, but i found this instead. Here is a really easy way to make all links target a _blank window. Just add this to your <head>. <base targ..
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 ..
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.
take full page screenshot screencapture using chrome dev tools
This isnt really html, but its handy ;) Here is how to take a full page screen shot using the chrome dev tools. Open dev tools in chrome and the page you want to capture the image from F12 Pr..
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: ..
youtube embed iframe
<iframe width="100%" height="340" src="https://www.youtube.com/embed/ScMzIvxBSi4" frameborder="0" allowfullscreen></iframe>
video embed full screen all screen sizes
this will make a video cover the full screen of the browser no matter what size it is. It will do some cropping to make it fit. <style> body, html { margin:0; padding:0; } .video-cont..
foundation includes cdnjs
Foundation Full Full Foundation CSS <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css"> Minified Foundation CSS <link rel="stylesheet..
truncate text long titles with text overflow ellipsis
this one can be useful for fitting text into smaller places without it looking broken. text-overflow: ellipsis; this basically adds the 3 dots where the end of the text used to be... Also if you are ..
foundation make row full width
Just incase you want a full screen width layout and still have it sitting in rows for foundation css .full-width { width: 100%; margin-left: auto; margin-right: auto; max-width: 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. ..
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 ..
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 e..
