Search
Search Code
Search Code by entering your search text above.
wordpress
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. 

1:59 am, August 1, 2023
simple_html_dom
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..

5:02 am, April 18, 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
php errors
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..

7:07 am, April 11, 2023
Windows Apps
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 ..

11:30 pm, November 28, 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
php functions
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..

12:45 am, September 30, 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
windows 11
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..

12:24 am, September 13, 2022
jquery
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..

12:35 am, September 5, 2022
CSS
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..

12:44 am, August 24, 2022
SQLite
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..

1:32 am, June 25, 2022
php functions
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. 

5:00 am, June 24, 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
Site Bugs
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 ..

6:39 am, May 20, 2022
linux
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..

2:23 am, May 19, 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
git
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..

3:23 am, April 22, 2022
html
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..

12:31 am, April 1, 2022
javascript
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..

12:12 am, March 9, 2022
javascript
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..

3:59 am, March 7, 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
svg
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..

8:46 am, February 17, 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
css
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. 

12:27 pm, January 18, 2022
html
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..

12:19 pm, January 17, 2022
css
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..

11:26 pm, December 14, 2021
javascript
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.

12:22 pm, December 6, 2021
javascript
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..

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

11:47 am, November 29, 2021
php functions
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..

12:24 pm, November 22, 2021
mac
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..

2:31 am, November 19, 2021
virtual box
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..

2:26 am, November 8, 2021
php
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 ..

5:54 am, November 1, 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
javascript
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. 

4:43 am, October 26, 2021
jquery
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. 

4:36 am, October 26, 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
bootstrap
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>

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

4:40 am, October 19, 2021
site bugs
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..

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

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

3:10 am, October 14, 2021
react
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..

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

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

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

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

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

3:51 am, September 22, 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
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 ..

6:53 am, September 17, 2021
javascript
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..

3:58 am, September 16, 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
css
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..

9:52 am, August 16, 2021
javascript
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..

5:17 am, August 10, 2021
php
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

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

5:48 am, August 6, 2021
foundation
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 ..

5:01 am, August 3, 2021
css
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 ..

5:36 am, July 27, 2021
css
404 Error Page Codepen

found this in my links the other day, still looks cool...

1:16 am, July 16, 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
site documentation
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..

1:15 am, June 11, 2021
site documentation
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..

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

4:19 am, June 3, 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
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..

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

3:10 am, May 13, 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
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 ..

5:12 am, May 5, 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
css
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

4:58 am, March 26, 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
javascript
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 ..

5:23 am, March 17, 2021
javascript
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

11:35 pm, March 16, 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
linux
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..

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

5:23 am, February 19, 2021
linux
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..

2:19 am, February 17, 2021
css
css slow zoom in animation

give a bit of extra interest to otherwise static images

2:57 am, February 10, 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
javascript
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..

12:14 am, February 5, 2021
apps
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..

11:10 pm, January 28, 2021
linux
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..

5:16 am, January 24, 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
php
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...

11:32 am, January 12, 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 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.  ..

2:43 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
html
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.

5:38 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
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
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

2:05 am, September 22, 2020
css
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..

12:27 am, September 2, 2020
bootstrap
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..

12:05 am, August 28, 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
wordpress
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('')

5:07 am, June 16, 2020
webdev
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 ..

3:43 am, June 6, 2020
php
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.

4:16 am, May 4, 2020
css
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..

12:56 am, December 13, 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
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
javascript
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.

4:50 am, July 16, 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
Move any element with css offsets

Make any element moveable without moving other items around by making it position: relative;

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

12:00 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 - 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..

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

12:44 am, March 22, 2019
php
calculate a percentage (dec) difference based on two numbers

this function will show you the percentage difference between two numbers

12:13 am, March 22, 2019
php
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..

12:27 am, February 11, 2019
css
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..

4:27 am, January 16, 2019
php
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..

3:37 am, October 22, 2018
wordpress
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'] != ..

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

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

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

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

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

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
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..

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

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
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..

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

6:20 am, August 31, 2018
html
simple dropdown multi level navigation ul li css

updated to work standalone and not effect other list elements on the page

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

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

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

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

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

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

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

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
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. ..

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

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

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

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

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


Random CSS Property

:host-context()

The :host-context() CSS pseudo-class function selects the shadow host of the shadow DOM containing the CSS it is used inside (so you can select a custom element from inside its shadow DOM) — but only if the selector given as the function's parameter matches the shadow host's ancestor(s) in the place it sits inside the DOM hierarchy.
:host-context() css reference