Search
function to delete older sqlite records when the limit is reached
I had an issue where a sqlite database was hitting over 100,000 records and this was causing quite a lot of lag and crashing on my server, the number of records was not really meant to be this high, s..
fixing error Call to undefined function simplexml_load_string
usually the error "Call to undefined function simplexml_load_string" happens when the php xml library is missing from your server. You can install the xml php library with the following command, repl..
loop to arr.length or array length
showing a simple loop that uses the length of the array to find the end of the loop. This just console logs each item in the array and stops the loop when it gets to the end of the array.
simple javascript no library accordion
a simple button and div based accordion with a toggled indicator
how to copy the folder path in finder
Moving from windows to mac is quite a shock, especially when you go from explorer which shows the file and folder path on every window in file explorer. Then we go to mac finder, which is nice, but h..
how to embed google fonts icons
For some reason when i go to embed a google font icon, they dont seems to have any obvious way to actually use it, i can find the icons ok here. But then when i go and use it it links to a how to embe..
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..
Fix for PHP Warning Trying to get property '*name*' of non-object
i was getting this error when checking parts of an object that were sometimes set and sometimes they did not exist depending on the values. Warning / Error : Warning Trying to get property '*na..
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..
javascript basic test array and loop
Here is just a basic test array and a loop to show a basic loop through the test array. With the loop i use the length of the array as the max variable, so the loop stops when it hits the array..
replace singular variable assignment with an array loop and variable variables
I found this useful when passing in an array to a function, rather than assigning all the variables in the function manually from the array just loop through each item in the array and asign them that..
using the $_SERVER['HTTP_REFERER'] to check referring pages
shows how you can display the contents of the $_SERVER['HTTP_REFERER'] tag in php to show referring pages i read in an article that this is stripped out of HTTPS requests, but it seems to still be wo..
show the current date in javascript
Returns the current date and time and sets the value in a div. Also added a demo with setinterval to update the time and date in the div every second.
set a cookie on click and then check if the cookie is set and dont show that message again
this script shows a message, and if the message is closed it will set a cookie to not show that message again for 1 day. The cookie in this example is set to expire in a day, so then if you com..
What is a Stateless Functional Component in React
What is a Stateless Functional Component? A stateless component is one that can recive data and render it, but it does not manage the provided data or track changes to it. This method creates ..
How to Define a HTML Class in JSX in React
When writing JSX you cant add classes like you would in HTML so this code would not work: JSX <div class="my-class"></div> Instead we have to use className. JSX uses camel case for a l..
adding react with JSX using babel
just wanted to see how JSX would work with react and babel, so this way you can write JSX and babel compiles it for use with react. This is apparently not a good way to do things and can be qui..
adding react to a website in 3 steps
i was just researching how to add react to a website, and i thought i would need babel to translate or compile the JSX code, but apparently you do not need this... So ill test this here and see..
load array load all items from an array while in a sqlite load sql loop
i find this useful when loading a bunch of items in a class while looping through data, rather than assigning variables manually i just add the array of item names into the class to begin with and the..
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..
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 ..
get the value from a range input field with javascript
this script will retrieve the current value from a range slider html input if you want the value to only update when the slider interaction has been stopped change the oninput to onchange then it w..
twitter json feed testing
just testing using the Twitter Post Fetcher script, seems to be working well.
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..
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..
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..
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..
mouse enter mouse leave jquery hover hoverout
showing how you can do things on mouse over and then something else when the mouse leaves an element using jquery
still more comment spam
this is getting annoying now. so much spam. i already have the google recapture, but spam is still getting through. who runs this stuff, bots i guess. annoying. update: 10 August 2021 Still..
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 ..
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:
verify the google recapture server php
i was still getting quite a bit of spam even after using google recapture v2 and i think this is just as i was using the javascript only version, which disables the submit button if the capture is not..
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..
Scroll down indicator css javascript and html
I have seen these a couple of times, indictating to the user that there is further content down the page, and they should scroll to view it. Then as you scroll down the indicator dissapears. So we w..
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..
prevent default click event on link
This will prevent the default event on a link url, so for example if you have a <a href="">link</a> link this code will prevent it from loading the href link when clicked and you can do so..
make your images look non squished when not using image backgrounds v2
this is a working version of this post, for some reason that image was deleted I think due to a content upgrade. Basically this uses the object-fit: cover; to make images not stretch when they ..
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 ..
unable to access the $_FILES when submitting a form php
I was getting this weird error when submitting an image for a form upload and i could not see why the $_FILES was not set as this is where the files go from a $_POST back form in php. The error i was..
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..
foundation responsive tables
in foundation you can make a table scroll when it hits its width limit by adding the class <div class="table-scroll"></div> wrapping the table element
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..
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..
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..
change photoshop to show px rather than pt
if your photoshop is showing pt when you select font sizes, you can change this in the settings. in the Edit menu go into Preferences and then Units and Rulers then you can change both uni..
clear a input field when it looses focus using onblur
this will cause the input field to clear when it is not in focus
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..
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..
select onchange
select onchange run a function this will run the check_years function when the select value is changed
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
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..
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..
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..
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/..
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..
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..
change file permissions to -rw-rw-r--
When adding a new php template file, it adds it under the www-data user with the file permissions set to -rw-r--r-- so its not remotely editable. Use chmod 664 to change it to -rw-rw-r-- chmod 664 ca..
How to set a cookie and expire it in 30 days
Here is some basic usage for the js cookie library. Include the following script. Or you can grab the latest version at the cdnjs website. HTML <script src="https://cdnjs.cloudflare.com/ajax/lib..
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..
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..
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..
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 border colour is too dark or light on number badges [fixed]
I noticed that the badges here were to light, so i must have missed something when updating the badge css. Demo Linkhttps://www.kruxor.com/search/code/site+bugs/ Bug Status:Fixed Problem: The bo..
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..
include tinymce only if a user is logged into the site
For google page speed i had an issue when every page was loading tinymce, which is quite a large script. I only actually use this script when editing pages, so this is the change i made to only inser..
easy twitter embed code
Just need to switch your twitter user name to show that feed here. Back when i used to use twitter, apparently.
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..
adding pagination to custom wp_query
you can add this to your custom wp_query making sure your query also has the paging passed through to it
download icon svg
a simple download icon in svg format, also added button example usage so you can use the svg within the button as an icon and change the fill colour on mouse over, plus it scales nicely on mobile devi..
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..
Fix Hover Over color on list group dark mode in bootstrap
How to fix the problem when switching to dark mode, the list group item text disappears when active. Here is what it currently looks like. To fix this we need to target the element and force the..
using javascript to open a link in the same window and in a new window or tab (open link)
a nice easy way to target _self or _blank when opening a link using javascript
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..
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..
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..
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..
stop overscrolling on responsive ios
this stops the site bouncing around all over the place when you try and scroll in ios
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 ..
To make Ubuntu do nothing when laptop lid is closed
sudo nano /etc/systemd/logind.confchange this to ignore: `HandleLidSwitch=ignore`save the filerestart the login daemon sudo service systemd-logind restart
add a class or remove it based on window scroll location
if you inspect the header div you will see a class added to it when scrolled down, i have added additional margins to it so you can still see it even when scrolled. then you add a fixed property to m..
get element by class name with javascript and change it function
You may have seen the get element by id in javascript, which is great when there is only one element but what if you need to get the element using its class name The issue with classes is that they c..
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
add a tag to wordpress header from a plugin
when i googled this it just showed me plugins to add and remove things from the wordpress header. here is how you actually add your own tags to the wordpress header. This function will add the tag hi..
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
find and replace hrefs in existing page links using jquery
sometimes i have to do these things when you cant change the source files for some reason, usually due to old code. Its kind of a patch, but it works. The reason i had to add a delay in running the fu..
force existing link to open in a new window with javascript
here is some javascript that grabs an existing link and then forces it to open in a new tab when clicked.
js - Use the Conditional (Ternary) Operator
this statement can be used instead of if this else that statements. to me it makes it look a bit more complex when reading it. this is the basic syntax. condition ? statement-if-true : statement-if-fa..
Radial Click Effect
shows the radial click effect like in the material design, so when you click a button it will show a click at that area with a nice animation. Uses CSS and javascript to generate this effect.
Generate Random Fractions with JavaScript
generate a random fraction and add it to result when clicking a button
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..
tinymce remove auto p tags setting
this is the setting to remove the automatic p tag's when pressing enter and forces the use of br tags instead which can also be toggled, if you dont want it to add anything.
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.
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.
CSS Improve Compatibility with Browser Fallbacks
when using css variables to increase compatibility you should also include a normal color as a default.
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 - Access Keys
Access keys can be applied to link elements and in chrome you can access them by pressing ALT+ SHIFT + [accesskey] for some reason when testing this in chrome the a key was not accessible, but g and ..
Cut a string when it finds a certain character with PHP
ok so lets say we have a string like this: Hi there im a string. I am also part of the same string. And we want to shorten the above string into just: Hi there im a string. This is what i wo..
white space pre-wrap formatting
when you want to preserve line breaks in plain text without having to add br tags or p tags.
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..
css :active pseudo-class usage
The :active selector is a CSS pseudo-class. It represents an element that is being activated by the user when they are interacting with a button or link.
wordpress change domain in config, wordpress domain config
When moving wordpress sites around the place its usually easiest to change the domain like this. add these to your wp-config.php file define('WP_HOME','http://newsite.com'); define('WP_SITEURL','ht..
show response headers from file get contents
this will show the http_response_header when using file get contents, can be useful for seeing what the server is doing. $contents = @file_get_contents($url); echo "<pre>"; var_dump($http_re..
tell wordpress to use the direct file method if its asking for ftp details
this usually happens if the permissions on the wordpress wp-content folder are not correct or writable. check the permissions are correct: (this is for apache, the user names might be different che..
header type json
Changes the header to show json type content when the server requests it. header('Content-Type: application/json');
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..
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..
clipboard copy js
for copying things to the clipboard, like the click to copy. Basic Usage Include the script <script src="js/clipboard.min.js"></script> add a field to copy to the clipboard..
testing chartjs
Update: 30 June 2020 I checked this code, and it was broken all fixed now. The issue with the demo included on the main site is that it was trying to run the chart js before the chart library was load..
access hacker news json firebase api via jquery
Just a getJSON JQuery Request that will console log all of the hacker news top stories using the firebase api $.getJSON('https://hacker-news.firebaseio.com/v0/topstories.json', function(json) { va..
preserve tabs in textarea when tab key is pressed
If you want to have the text tabbed when pressing tab in textareas rather than it switching fields. $(document).delegate('textarea', 'keydown', function(e) { var keyCode = e.keyCode || e.which;..
using getElementById and innerHTML to change the html of content no jquery
this is pretty simple, but i always forget it so ill add it here document.getElementById("theid").innerHTML = "the new content"; heres how it works, add a div with an id of theid Example .. <d..
css grid sidebar main content fluid layout with fallback
this is a continuation from the original post with added fallback for older browsers that do no support the grid elements yet. I have tested this fallback in IE11 and it seems to work well, if you wa..
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...
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 ..
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 ..
remove border glow css from textarea on select
how to remove the glow around a text area when selected or in focus using css. Text Area Highlight Here is what it looks like just to show you where the textarea is while editing, but can look m..
make your images look non squished when not using image backgrounds
Update: Fixed the code, you can see it here. i deal with a lot of sites where they have a bunch of images listed and sometimes they can end up looking a bit sqashed unless you add a div and set..
table border collapse
I see this quite often when dealing with tables the border-collapse: collapse; used on a table as so: table { border-collapse: collapse; } So what is the point of doing this? It seems to help..
