Search
Search Code
Search Code by entering your search text above.
react
React - Use State to Toggle an Element

Mastering React State: Toggling Elements with Confidence React's state management system is a powerful tool for building dynamic and interactive user interfaces. One common use case involves to..

12:33 am, June 12, 2024
react
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..

11:52 pm, June 11, 2024
css
rotate an element when its hover

add and remove the class open to rotate

11:31 pm, March 21, 2024
css
rotate an element when its selected

add and remove the class open to rotate

11:30 pm, March 21, 2024
wordpress
extract a wordpress menu using its id

when you edit the menu in wordpress you can check the url, and it will have the id to extract in the following string: /wp-admin/nav-menus.php?menu=12

1:25 am, March 15, 2024
css
css cursor types testing

testing all (most) of the available css cursor types, you can mouse over to test how the cursors react depending on your browser type and operating system.  refs https://developer.mozilla.org/e..

5:44 am, February 27, 2024
windows
How to Enable Linux Subsystem in Windows

Enabling the linux subsystem in windows allows you to use linux within windows.  To enable linux sub system in windows you can do the following.  In the start menu type "Windows features..

11:35 pm, January 8, 2024
html
Using the HTML tag details for easy accordions

Using the HTML Tag ` ` for automatic accordions.

12:32 am, October 27, 2023
php function
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 ..

2:46 am, April 13, 2023
slick slider
Slick slider code testing with slower slides and auto play on videos

additional testing with changes for slick slider videos and auto play

4:28 am, March 1, 2023
linux
add ssh keys on your linux box in 10 seconds

Here i was typing in the ssh password over and over when connecting to ssh, when i could have just typed this one command and had my ssh keys copied to my linux box! What was i doing all that time! :..

11:00 pm, November 23, 2022
Windows Apps
windows robocopy /? help and usage

Reference for the windows robocopy command ------------------------------------------------------------------------------- ROBOCOPY :: Robust File Copy for Windows ..

10:54 pm, November 15, 2022
javascript
find a text string and replace it in javascript

There is a function in javascript called replace. You can just give it some text and it should replace it with your target text.  For example #1 this just runs and replaces the first instance o..

11:48 pm, October 27, 2022
php functions
simplepie error : XML or PCRE extensions not loaded!

using simplepie it does not load the target feed, and does not display any errors. Just nothing.  if your feed is init'd with $feed check for feed errors with:        $feed ..

4:01 am, September 29, 2022
cookies
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..

12:19 am, September 20, 2022
javascript
Twitter Post Fetcher v18.0.4 - javascript twitter feed fetcher

A few queries showing how to get latest tweets and post likes using the Twitter Post Fetcher v18.0.4 script.

12:42 am, August 31, 2022
javascript
Are you sure you want to navigate away from this page? #JavaScript warning

You only need to include one of these scripts as the top one seems to work fine by its self not requiring any jquery. Javascript window.onbeforeunload = function (e) { return "You..

3:03 am, July 4, 2022
php
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..

1:41 am, June 24, 2022
Apps
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..

1:34 am, June 21, 2022
jquery
add a custom event trigger in jquery document ready

i saw something that said if you add an event listener at the end of the doc ready it should fire last, but i dont think this is correct as it runs everything at once. so i think this code does not wo..

3:42 am, June 1, 2022
linux
Install PHP without Apache on Ubuntu

I was actually about to do some coding and then i got distracted with this annoying error on vscode. I keep getting this error on vscode: I had been ignoring it, but i thought fine, ill fix it and..

12:30 am, June 1, 2022
css
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..

1:51 am, May 12, 2022
jquery
jquery load wait function

load something in jquery, wait for it to load then do something else

5:05 am, May 10, 2022
javascript
Converting PHP to Javascript for State Extraction by numeric value Australian State Names

I cant even remember when i originally wrote this php function, but now i need to have it in javascript, should not be much change to it to get it working.  The original function takes an austra..

2:33 am, February 25, 2022
php functions
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 &lt; so that the string is not parsed as h..

8:48 am, February 19, 2022
php
Uncaught Error: Call to undefined function mb_convert_encoding()

I was getting this error when calling a function in the readability php class, on a new server for code that worked on the old server. Uncaught Error: Call to undefined function mb_convert_encoding()..

11:45 am, February 15, 2022
jquery
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..

12:00 am, February 8, 2022
sqlite
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..

4:20 am, January 18, 2022
php
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..

4:00 am, January 18, 2022
javascript
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. 

1:33 am, January 18, 2022
css
simple javascript no library accordion

a simple button and div based accordion with a toggled indicator

4:07 am, December 14, 2021
mac
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..

4:42 am, November 23, 2021
icons
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..

12:21 am, November 17, 2021
javascript
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..

2:01 am, October 29, 2021
php
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..

8:53 am, October 28, 2021
php
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..

2:55 am, October 25, 2021
javascript
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..

3:05 am, October 19, 2021
php
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..

11:58 pm, October 17, 2021
php
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..

3:28 am, October 17, 2021
javascript
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. 

2:17 am, October 16, 2021
javascript
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..

5:13 am, October 15, 2021
react
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 ..

12:24 am, October 12, 2021
react
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..

11:55 pm, October 11, 2021
react
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..

9:18 am, October 11, 2021
react
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..

8:49 am, October 11, 2021
php
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..

8:36 am, October 7, 2021
ideas
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..

8:55 am, October 6, 2021
css
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..

2:47 am, September 22, 2021
javascript
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 ..

2:34 am, September 20, 2021
javascript
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..

12:39 pm, September 15, 2021
javascript
twitter json feed testing

just testing using the Twitter Post Fetcher script, seems to be working well.

9:33 am, September 10, 2021
site documentation
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..

1:24 am, September 2, 2021
site documentation
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..

12:52 am, September 2, 2021
php
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..

4:23 am, August 26, 2021
php
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..

6:48 am, August 23, 2021
jquery
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

3:47 am, August 23, 2021
site bugs
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..

6:16 am, August 6, 2021
css
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 ..

6:26 am, July 28, 2021
css
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:  

1:24 am, July 20, 2021
php
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..

12:45 am, June 25, 2021
javascript
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..

11:17 pm, June 22, 2021
html
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..

5:35 am, June 22, 2021
site documentation
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..

3:57 am, June 14, 2021
javascript
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..

1:59 am, June 8, 2021
css
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 ..

6:22 am, June 4, 2021
linux
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  ..

5:26 am, May 26, 2021
php
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..

4:52 am, May 18, 2021
javascript
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..

3:13 am, May 14, 2021
css
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

4:13 am, May 11, 2021
php
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..

1:11 am, May 11, 2021
javascript
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..

4:12 am, May 10, 2021
php
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..

6:19 am, April 7, 2021
apps
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..

2:11 am, April 7, 2021
javascript
clear a input field when it looses focus using onblur

this will cause the input field to clear when it is not in focus

10:56 pm, April 6, 2021
javascript
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..

11:18 pm, March 24, 2021
css
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..

4:53 am, March 19, 2021
javascript
select onchange

select onchange run a function this will run the check_years function when the select value is changed

11:54 pm, March 16, 2021
css
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

10:10 pm, March 11, 2021
jquery
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..

3:51 am, March 9, 2021
jquery
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..

3:24 am, March 9, 2021
css
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..

12:21 am, March 8, 2021
javascript
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..

11:56 pm, March 7, 2021
jquery
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/..

12:11 am, February 17, 2021
javascript
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..

4:00 am, February 15, 2021
css
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..

1:55 am, February 10, 2021
linux
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..

8:39 am, February 6, 2021
javascript
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..

9:51 am, February 2, 2021
javascript
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..

2:53 am, January 23, 2021
javascript
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..

8:49 am, January 21, 2021
site bugs
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.  

12:51 am, January 17, 2021
jquery
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..

3:42 am, January 15, 2021
site bugs
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..

2:44 am, January 12, 2021
site bugs
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..

3:04 am, January 1, 2021
site bugs
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 ..

2:36 am, January 1, 2021
css
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..

6:09 am, December 31, 2020
php
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..

5:44 am, December 23, 2020
html
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. 

3:26 am, December 23, 2020
css
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 ..

5:16 am, December 22, 2020
jquery
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 ..

2:36 am, December 17, 2020
css
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..

1:43 am, December 11, 2020
wordpress
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

12:29 am, December 4, 2020
svg
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..

10:28 pm, December 3, 2020
javascript
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..

12:07 am, December 1, 2020
javascript
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..

5:42 am, November 23, 2020
bootstrap
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..

12:31 am, November 23, 2020
javascript
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

4:26 am, November 13, 2020
bootstrap
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..

5:14 am, August 31, 2020
bootstrap
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..

11:54 pm, August 18, 2020
core
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..

6:52 am, August 17, 2020
jquery
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..

12:20 am, August 3, 2020
css
stop overscrolling on responsive ios

this stops the site bouncing around all over the place when you try and scroll in ios

3:50 am, July 31, 2020
css
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 ..

11:55 pm, July 28, 2020
linux
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

12:50 am, July 27, 2020
jquery
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..

1:45 am, June 30, 2020
javascript
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..

1:59 am, June 17, 2020
html
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

1:26 am, June 17, 2020
wordpress
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..

4:44 am, June 16, 2020
javascript
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

4:30 am, June 5, 2020
jquery
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..

12:03 am, May 8, 2020
javascript
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.

3:49 am, May 1, 2020
javascript
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..

6:23 am, September 24, 2019
css
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.

1:13 am, September 4, 2019
js
Generate Random Fractions with JavaScript

generate a random fraction and add it to result when clicking a button

6:09 am, August 26, 2019
bat
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..

3:27 am, August 26, 2019
javascript
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.

6:15 am, August 13, 2019
javascript
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.

11:19 pm, July 28, 2019
css
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.

2:57 am, July 16, 2019
css
CSS Improve Compatibility with Browser Fallbacks

when using css variables to increase compatibility you should also include a normal color as a default.

2:04 am, July 9, 2019
css
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..

12:14 am, July 2, 2019
html
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 ..

11:40 pm, July 1, 2019
php
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..

5:30 am, April 17, 2019
css
white space pre-wrap formatting

when you want to preserve line breaks in plain text without having to add br tags or p tags.

10:23 pm, January 1, 2019
core
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..

11:33 pm, December 13, 2018
css
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.

1:22 am, October 5, 2018
wordpress
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..

6:20 am, August 31, 2018
php
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..

6:20 am, August 31, 2018
php
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..

6:20 am, August 31, 2018
php
header type json

Changes the header to show json type content when the server requests it. header('Content-Type: application/json');

6:20 am, August 31, 2018
js
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..

6:20 am, August 31, 2018
js
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');..

6:20 am, August 31, 2018
js
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..

6:20 am, August 31, 2018
js
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..

6:20 am, August 31, 2018
js
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..

6:20 am, August 31, 2018
js
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..

6:20 am, August 31, 2018
js
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..

6:20 am, August 31, 2018
js
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;..

6:20 am, August 31, 2018
js
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..

6:20 am, August 31, 2018
css
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..

6:20 am, August 31, 2018
css
css grid for responsive layouts and how to use it - 12 col layout

Note: Added version 2 of this with no rows for the grid css grid for layouts with no rows Update: 12 Nov 2024 - Fixed code and embed as is was linking to some broken and weird iframe. Grid should wor..

6:20 am, August 31, 2018
css
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 ..

6:20 am, August 31, 2018
css
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 ..

6:20 am, August 31, 2018
css
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..

6:20 am, August 31, 2018
css
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..

6:20 am, August 31, 2018
css
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..

6:20 am, August 31, 2018
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote


Not Sure
Random CSS Property

column-rule-style

The column-rule-style CSS property sets the style of the line drawn between columns in a multi-column layout.
column-rule-style css reference