Search
Search Code
Bind 'this' to a Class Method
Binding 'this' to Class Methods in React React class components allow you to define custom methods alongside managing state and props. These methods often need to access component properties li..
display a subnav for the current wordpress page
good if you are doing custom page work and need to show the current sub nav somewhere other than the main menu.
Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in simple_html_dom.php on line 722
Initial thought on this error is that there is a version issue. This only happened on version 1.11 for me, will check what other version i have. Yep not sure why but the older version of php ht..
function causing slow load time
i had this function matching a uid using a binary select query. The sites were loading in about 8 full seconds according to my load timer, sometimes up to 12 seconds! So this was running on old site ..
error Warning: getimagesize(uploads/583517f49099a.jpg): failed to open stream: No such file or directory in SimpleImage.php on line 1198
i think this error is just caused by a missing file. But there should be some kind of error checking here to not crash the whole site just due to a missing image file. this error is quite hard to fin..
chocolatey command line for windows
i keep forgetting what this is called but its like a command line installer for useful windows tools like ffmpeg and other useful packages. Its like a simple package manager for windows. How ..
windows robocopy /? help and usage
Reference for the windows robocopy command ------------------------------------------------------------------------------- ROBOCOPY :: Robust File Copy for Windows ..
imgur upload from php
function that takes an image and uploads it to imgur using a client api id, and then returns all the data. i did this one ages ago and did not make it into a function, but this version should work as..
cookie consent quick install script js html css vanilla
Found this super slick looking cookie consent script here, looks awesome, and its easy to install (i hope). https://github.com/orestbida/cookieconsent CDN Links https://cdn.jsdelivr.net/gh/or..
How to switch desktops in windows 11 with keyboard
this is just a quick one as i could not see the option, which you would think they would add to the new desktop switching screen.. Anyway here is how you can switch desktops in windows 11 and create n..
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..
Map Image with Easy Dots and Titles using only CSS
I had to quickly add some dot points with names to a map the other day, so i thought i should probably look for a jquery library for tool tips or something similar. But then i thought why not just add..
MySQL to Sqlite converter
# Converts a mysqldump file into a Sqlite 3 compatible file. It also extracts the MySQL `KEY xxxxx` from the# CREATE block and create them in separate commands _after_ all the INSERTs. # Awk is choos..
get string between other strings function php
So it turns out that i have had this issue before of finding a string in between other strings and made a function for it that i forgot about.
using preg_match to extract text from elements
using preg_match to extract specified text from elements I also tried this search "if you have the start and end of a string extract the middle with php" as thats really all i need it to do, i have t..
Robocopy Options /? help
My usual backup command is now robocopy source destination *.* /M robocopy d:\ f:\ *.* /M Update: actually scrap that, its /E not /M, i used to use the /MIR option, but as deleting files in the des..
Search Duplicating Bugs
Still having issues with the word above duplicating, not sure why. Search Page PHP - Get Search Value $search_value_encoded = htmlentities($search_value); Check for Search value, and then ..
add a user and add the user to sudo group
basic adding of a user in linux and then adding the user to the sudo group to allow it to run super user commands like apt update or other potentially system breaking commands. Note: replace "usern..
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..
jquery load wait function
load something in jquery, wait for it to load then do something else
git basics - git init, git commit, git all, git *
create a new repository git init the following code can be typed in a terminal window, once you have installed git for your OS. This will create a directory called git-test assuming you already hav..
Footer Design and Redesign
I never usually look this far down on the site, but its a bit average... Lets fix it! Some simple changes Just a few elements added and moved around a bit. Added another row to the f..
Uncaught TypeError: Cannot set properties of null (setting 'onclick')
I was just testing some code and noticed i had this error on my site. Locate the error in the site code I removed this script, so the whole thing is now not required, as i opted for the au..
check url hash using javascript
What is a url hash? This is a URL Hash. You can add the # symbol on the end of a url and content after it, and this will not effect the content usually, unless the browser is intructed to do somet..
convert a string into its html entitles using php htmlentities function
this takes a html string such as the following example and converts it into its html entities. it will take a character such as < and convert it into < so that the string is not parsed as h..
svg animated line testing - shooting star right
I found this on a random site i was looking at it took me a while to extract the animation, but i found it and its working below. There is shoot right and also shoot left, if you are that way i..
add a toggle with jquery and change the class
With this code I just wanted a quick bit of inline code that could add a toggle to an element or multiple and also switch its class to make it show that the item is toggled on or off. Here is t..
add an outline to everything!
very handy for checking elements and other things on your page. this one line will add an outline to every element, so you can see where all the elements are located.
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..
center align vertical 2 items in a container flex
i had this issue and i was pretty sure that flex center could fix it but it was causing the two items in the div to sit next to each other, which was annoying as it was a header and content, but i sti..
How to Assign the Value of One Variable to Another in Javascript
Showing a very basic script that assigns the value of the variable a to b and then console log's the object.
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..
Console Tips and Tricks
Here are some quick commands for the console. Getting to the console in your browser Press F12 and Find the console tab. That little blue > there is the console. this is in brave or chrome, bu..
Spam IP Database and delete button
The Background and Reason for the SPAM IP Database and Delete I actually wrote up half of this article and was still testing the function and lost the whole post, which will teach me for adding it st..
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..
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..
using php parse_url function to remove the query string from a url
I recently had to remove the query string from a url, the bit after the ?key=1 or whatever is after the actual url. I initially thought i could just use a explode function on the ? which would ..
javascript try catch example function
try catch is a good way to stop errors breaking your javascript. here is the example from the firefox mozilla with a basic try catch logging the error to your console, rather than just breaking all t..
load json data url or api with javascript
this loads a target json url or api using raw javascript so no jquery required with this one then logs the data returned to the console.
load json data url with jquery
loads a api or json url or endpoint using jquery and console logs the result Tested working on my test json file, check the console and it should be there.
sqlite fetchArray into another array
was having an issue when trying to return a multi array using sqlite over multiple rows. Stack Overflow Inspiration I tried a few of these but it was not incrementing key, and also it was only..
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>
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..
category listing not working on categories with spaces [not fixed]
for some reason the site bugs category and potentially other categories that have spaces in their names are not listing properly. Test URL: https://kruxor.com/category/code/site+bugs/ Probab..
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. ..
How to Use React to Render Nested Components
It can be useful to take components and render them inside other components while still making them into seperate items. This shows how you can take each component and nest it within another one and ..
How to Create a React Component using the ES6 class method
One way to add a react component is to use the Stateless Functional Component method, and another way is to use the ES6 extends syntax. This method seems more complex than the 1st for some reason mayb..
How do Self-Closing JSX Tags Work?
So in JSX all the tags must be closed, other wise it can break the element. for example: <div> must have a closing </div> and also for elements like <br> and <hr> must include..
How to Add Comments in JSX
To put comments inside JSX, you use the syntax {/* */} to wrap around the comment text. You do actually need the curley brackets, and have to add it under the other elements for this to wor..
timeline class and function
this is a class extend that generates a timeline based on structured data and order's the items by year decending. this code will not work out of the box as it has other requirements, but it is a goo..
views list function for checking what views have been made on the current week
this is related to the views class that i added with monthly week number and yearly views, this is the function that i use to extract the top viewed pages for the week num, month num and year num. I ..
using a radial gradient for background overlay
usually i just use linear gradients for my background elements but i noticed this one the other day, a radial gradient. you can actually specify multiple colours and also opacity levels to overlay a ..
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..
video not auto playing issue in chrome and brave
i had this error the other day when i was adding an auto play video to a page. the error was: Javascript Uncaught (in promise) DOMException: play() failed because the user didn't interact with the ..
adding a new line in javascript
i was writing a function where i needed to for ease of readability add a new line to the code, you can do this with the \n for the new line and then if you need the string to go to the next line then ..
javascript update item in object
find something in a javascript array by its array id and then update the value of that item i changed this from an array to an object as i wanted to use something other than numbers for the index Ob..
create directory with php create folder with php
i thought i had already done this somewhere but i guess i didnt. Anyway here is how you can create a directory with PHP. PHP mkdir("directory_name") yep its that easy just make sure you are in the..
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..
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..
load random videos module using template
load 3 random items and extract the video url, and use the youtube function to create a thumbnail and link to that video page
split a string into links using the comma
this is a common function for some field data, lets say you have a string like this. category one, category two, another category in one field or string but i want it to display like this category ..
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 ..
white space break word css
controlling the white space of an element with break word, this can be handy if you need to fit something into a fix but the item has no spaces, otherwise usually by default this will overflow out of ..
404 Error Page Codepen
found this in my links the other day, still looks cool...
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..
change this to a list group - other items
Other item format is a bit average, list group should fix this. This uses the template: core-list-item-simple.html So we can change this a bit to the list group format. Which i..
hero widget header - creates a nice looking hero item from a target uid and class
this creates a "nice" looking hero widget, just wanted to create something that looked decent and had an attached background image, surprizingly annoying to link items together. For some reason i kee..
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 ..
show all methods (functions) in a class
this will show all available methods or functions within a class, once they are in a class they are called methods for some reason. print functions, show all functions, methods in a class, show met..
adding an item to an array with php
how to add items to an array in php here is a working sandbox version of this code: sandbox.
passing in arrays to your functions rather than using variables
this is probably an old technique, but i discovered it the other day when i was playing around, and i thought wow i should do this to all my functions, i cant see the downside, apart from having to re..
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 ..
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..
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
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..
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 ..
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
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 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..
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..
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 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..
css slow zoom in animation
give a bit of extra interest to otherwise static images
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..
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..
Enabling SSH on Ubuntu
To enable SSH connection via putty or another terminal app on ubuntu, do the following. Open a terminal with Ctrl+Alt+T sudo apt update sudo apt install openssh-server Check if its runningsudo syst..
darkmode toggle switch with local storage to remember the last selection
Here is a darkmode toggle switch, that swaps out the body class so you can target dark-mode or light-mode on all your elements! It saves to local storage the last selection so if you come back to the..
using gzdeflate on a string php
yes you can actually run compression on a string to save space and then uncompress it at the other end...
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..
badge placement is offset in list pages [fixed]
Another bug caused by the badge changes I think this can be added to a grid as well, and have the category on the left and the date on the right. Then need to align the category badge nicer. ..
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..
test page for the custom css 12 grid used on this site
This is my testing page for the grid used on this site, it shows elements and other things for use on the grid and other general formatting.
make an image white with css using filter brightness and invert
If you have an icon or something with transparency this can be useful if you dont want to have to edit the image and create another copy of it you can apply the filter brightness and invert. You can ..
replicating the bootstrap dropdown toggle in jquery
here is a code that can toggle a sub element using the same format as bootstrap. Update: also added another line that closes all the open menu's when one is clicked, so that you dont have a bunch of ..
background image on 3 boxes not scaling correctly fix
So i had this weird task the other day, where there was three boxes with a background image set. When the screen changed size the image would go out of wack. The fix? Pixels rather than Perce..
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..
country select javascript check which option is selected and show a hidden element
this shows a country dropdown and then if a selected country name is matched it will show the second part of the form for this test australia is the confirmed country
css font style italic
i had a request to make some font italic the other day, and for some reason i could not remember the css for it. It's font-style: italic; I should know that! I guess italic fonts annoy me a bi..
Bootstrap 4 Center menu items in a navbar
Here we have an example bootstrap navbar you can find the original navbar here. I just want to center the menu item links so they dont appear over to the left on larger screens. Add the follow..
What is Core?
17 Aug 20 core is php content management system where the content is editable from the front end of the site, so there is no real back end to this system. i designed it to be easily extended so every..
getting the site title vs the page name
this statement will check if the current page is the home page and show the get_bloginfo('name') if its another page in the site it will get that pages title using wp_title('')
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 ..
making var_dump look nice
i was var_dumping an array the other day, and it comes out like a massive string you cant read. a fast way to make this readable is just to add some pre tags to it.
center something with css not using flex
This is how you can center something in another element if you dont want to use the flex method. You will need the relative position on the outer element, and the absolute on the center one unl..
copy a file when the date of the source is newer than the destination
using xcopy and a loop i found this is a good way to make sure that changes in one file make their way across to another location using a windows batch file. this one loops every 5 seconds, i think yo..
using switch in a function
This shows an example using the switch to select multiple options in a function, you can return from the switch with break, or you can end the whole function with return.
Multidimensional Array
sounds complex, but it's not really here is an example of a Multidimensional Array in javascript. It's just one array nested in another.
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.
Move any element with css offsets
Make any element moveable without moving other items around by making it position: relative;
PHP Finding the position of a string in another string using strpos
$dot_location = strpos($my_string,"."); The first version of this does not seem to work in all cases, so i have updated this with a working version here.
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..
Applied Accessibility - Tab Index
using the tabindex property on elements allows you to press the tab key while on the page and tab through the elements depending on the order specified by the tabindex. tab index can be applied to man..
function to create a uid from html
this function converts a html string into a uid or unique id type string, its not actually unique, but its a string that can be used to make the title of something that contains html into a usable str..
calculate a percentage (dec) difference based on two numbers
this function will show you the percentage difference between two numbers
How Many Days Since a Date and other Calculations
Here i calculate the number of days since a certain date in php and use the values for checking how much something costs per day. Start Date Lets add the date that the item was purchaced. In d..
Using Flexbox rather than Floats
So i was still using float left for a bunch of elements i was working on the other day, sometimes it's hard to drop old techniques. What are the actual benefits of using flexbox rather than float lef..
get current class name with get_class
This will return the current class name, can be used in side a function of the current class object or give it another object name to return. class myclass {function myfunction() {echo get_class($thi..
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 check home and not home for banners and things
this quick function will check if the page is home or not good if you want something on the other pages and something just on the home page in the header or that kind of thing. i have tested this i..
wordpress advanced custom fields replace shortcode for site url with blog url
Using advanced custom fields, if you know what the shortcode is and what you want to replace it with you can do so with the following. $site_url = get_site_url(); $field = get_field('template_ht..
using custom request headers array with curl
this function passes in an array with custom request headers to curl, good if you need to pass in some headers to request an api url and give it an auth key or something like that. Also added to the a..
find the 1st occurence of a string in another string
do a case-sensitive search for a string within another string strpos mixed strpos ( string $haystack , mixed $needle [, int $offset = 0 ] ) usage find the 1st location of a string position within a..
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..
detect window scroll position jquery
This one adds or removes a class if the document is scrolled 50 px near the top of the window. $(window).scroll(function() { if ($(document).scrollTop() > 50) { $('nav').addClass('shrink');..
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..
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..
do something later with settimeout or loop with setinterval
setTimeout This one will run a certain time after the document loads. So if i want to execute something 5 seconds (or so) after the page loads i would do this. You will need to check your console..
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..
jquery clone and append elements
This jquery function clones an element and appends it to another one. Here is the basic code: $( ".clone-me" ).clone().appendTo( ".append-me" );I also updated this to work with just raw js, so..
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..
simple dropdown multi level navigation ul li css
updated to work standalone and not effect other list elements on the page
random emojis copy and paste
Update: this is a better list that you can search by title ctrl + f emoji data Sometimes i like to copy and paste emojis, so here is a few you can copy. I probably need to organise this som..
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..
responsive viewport meta tag (responsive meta tag)
this one meta tag will make the page appear correctly on mobile devices. You may need to do other things to get all the other elements to fit. Here is the one I usually use <meta name="viewport" ..
video embed no controls
embed a video, for use as a background or a slide element, or wherever you need a large video. I found that there was a bug in chrome (which is probably fixed now) that was ignoring the autoplay tag ..
css grid sidebar main content fluid layout
I was playing around with css grid the other day and i found a nice (and easy) way to do a standard left sidebar and fluid main content area. this is rather than floating the sidebar and then setting ..
transitions and the easy way to apply them
Would you like your element to transition nicely? well you can do it in about 1 line of css. .transition { transition: all 2s; } This is the one I usually use, as its not too slow. transitio..
cycle color using background
I found this the other day (well today actually) and i wanted to see how it worked. background-image: -webkit-linear-gradient(left,#D68AB0 0%,#D8CE5D 25%,#6BD85D 50%,#5DB9D8 75%,#D85DCB 100%); ..
recreate marquee element using css
as the marquee element has been removed from html5 (which is probably a good thing) its now unsupported, but you can use css and keyframes to recreate it. Yay.. CSS Marquee Demo Some Marquee ..
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. ..
flex align center vertical horizontal
lets say you have a box within another box, like so: .box { height:500px; width:500px; background:#CCC; } .another-box { height:50px; width:50px; background:#999; } ..
css accordion basics
can we create an accordion with out using jquery ui? I think yes, it will be basic but also keeping it simple it probably a good idea. tried adding transitions to make the divs showing a bit smooth..
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..
design nice block header
I saw this the other day and thought the color scheme looked quite nice. Ill see if i can replicate it here. @import url('https://fonts.googleapis.com/css?family=Raleway:300'); .mid-header { ..
