Search
Testing Playwrite on for Node
I came across this library on y news, and thought id give it a bit of a test. I managed to get it working but not really sure what tests it can do. I set it to take a screen shot of a we..
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..
get tomorrows date with javascript
Same as the get yesterdays date except with a +1 rather than a -1 let tomorrow = new Date(new Date().setDate(new Date().getDate()+1));
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..
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..
Sweet Alert 2 Methods and Examples
I love this alert replacement so i thought i would just add some of the examples here to show how awesome it is! You can check out the official sweet alert documents here if you want to browse throug..
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..
Add custom symbol to ul li list and align text items
Pick a symbol from here. Then you can copy and paste it into the following css to change the list symbol, for more unique looking list items. If the list items dont align correctly you will nee..
javascript random string to put on url for cache
I was having a bit of a cache issue with a external css file, so i thought i might fix this by appending a random query string to the file name. This should force the browser to recheck the file each ..
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..
How to Pass an Array as Props in React
If you need to pass larger amounts of information to a component you can pass in an array rather than just a single variable. More information on the join method on the array can be found here. Here..
list_all_array an early stages of list all function that uses an array to pass in main variables
I think this is more neat than passing in individual variables into the list_all function, seems to work ok so far. Still in early stages of this listing function, more needs to be built into i..
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. ..
Changing the default hero image based on the category name [not yet done]
This is more of a todo item, at the moment the hero image uses the same image for every post unless a hero is specified for each, i would also like to set the default image per category so if the post..
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..
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..
responsive three box section with tabular data or table data
here is a section in foundation with 3 hero boxes with images on top, and then a title and some tabular (is that the same as table?) data in each box, so could be good for some kinda products and then..
easy section wrap in foundation - 3 boxes responsive
this is a 3 box section responsive wrap in foundation, you can change this to large-auto if you want to have multiple boxes
How to record your own page views with PHP, and make them into weekly monthly and yearly charts
Building a better Simple Page View Counter Currently this site has a very basic view counter on it. Here is how it currently works. Load the page, function checks if the page has a existing r..
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 ..
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..
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..
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..
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 ..
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 ..
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..
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..
this is a weird one table underline appearing and dissapearing on mouse over
very strange that also reminds me that i have to get rid of these random searches idea: i was thinking of adding a more detailed hit system where it can record the month and also the year of the..
for auto filled fields, need to change the text and background colours
for some reason bootstrap or the browser is doing this to auto filled fields. according to my searching there is a pseudo class added to auto filled fields CSS input:-webkit-autofill { col..
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..
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..
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..
json test objects (or arrays)
here is a couple of test objects in external js files just in case you need to test some ajax loading functions or need external objects, i mostly use them in my testing. Basic JSON Object with 3 ite..
loop through a complex object json javascript
just a note to say that a complex object is an object with more than one nested object in it for example just kinda playing around with this one to get the handle on objects and how to access them C..
json load from jquery and loop through the results
this is the same as this post but i have added the object to an external test file. so rather than already having the object data on the page we have to load it somehow Note: you can test that the o..
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..
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..
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..
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..
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..
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..
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..
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:/..
fix view page for search links [reported]
its still showing raw data on these view pages e.g https://kruxor.com/view/search_links/KJYU0/mt-maunganui/ Looks like that example is already out of date, here is a new one: https://kruxor..
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.
css perspective and transform css properties testing
i wanted to see what i could do using the perspective and transform css properties. i dont really get how the perspective one works, but you can tweak it so it doesent look too weird. with the ..
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..
hero box with title sub title logos and call to action buttons
Here is a basic hero box section that contains: Title Sub Title 6 Logos (could replace with carousel logos) 2 call to action buttons I think it can be made more responsive, by replacing the..
using linear gradient background on text css
If you want to have a background gradient on your foreground text you can use this css. I think currently this only works on webkit enabled browsers, but it looks pretty cool.
setting up css variables in your stylesheet
Using css variables at the start of your stylesheet can make things down the road much easier to change. You can also use it for more complex variables like drop shadow settings as shown below. ..
bootstrap collapse or toggle a div visibility
if you have bootstrap and want to toggle an element or show and hide a div its already built in, just use the following code to toggle something.
create a rainbow background using css linear gradient
just incase one gradient is not enough for you we can also use it to create a rainbow background gradient
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..
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..
Use Sweet Alert rather than alert!
i love this script, it make the default alert look so much nicer, and its very easy to install. Just add the one script to your site, and then use Swal.fire rather than alert. simple usage Swal.fire..
check if a timestamp is older than one hour
this will check if the timestamp string is less or more than one hour old.
using css linear gradient for background overlays
a few examples using css linear gradient for the background
Use Multiple Conditional (Ternary) Operators
I actually find if then statements much easier to read than these ones, but these seem more efficient.
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..
Objects in javascript
creating and using an object in javascript, the full version of this testing is on codepen
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..
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..
Regular expression breakdown regex preg_replace php
/ - opening delimiter (necessary for regular expressions, can be any character that doesn't appear in the regular expression \( - Match an opening parenthesis [^)]+ - Match 1 or more character that..
Get Current Page URL PHP
There is a few methods of getting this but here is a simple one. Replacing the http or https manually. $current_url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; Here is a more complex ..
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'] != ..
change the window title
This is a pretty easy one liner But we can make it a bit more complex with jquery and add a counter It is questionable that crawlers and bots will see this so may be bad for SEO. document.t..
scrollbar replacement simplebar
a nice and simple scroll bar replacement code <link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" /> <script src="https://unpkg.com/simplebar@latest/dist/..
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..
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..
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..
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: ..
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...
more complex responsive tables css
i did a simple version of this before here but now im going to make it a bit more complicated and functional. table { width: 100%; border-collapse: collapse; } tr:nth-of-type(odd) { ..
targeting the printed version of a page with media print
there are 2 ways to target the printed version of a webpage, you can do it with a @media print query inside your css, or you can link the whole style sheet and target the print media. target print ..
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..
