Search
Search Code
Search Code by entering your search text above.
php
echo the page id from wordpress

11:42 pm, March 21, 2024
php simple html dom
find a custom data attribute in simple html dom

locate the div based on a custom data attribute, in this case the data-field="regularMarketChange" full docs

12:39 pm, March 13, 2024
css
CSS Object Fit for Image fill rather than using background image on a div

CSS Object Fit can crop off the sides of an image, while also preserving its aspect ratio, and then fill in the space to fit any size.  Object Fit You can use: object-fit: With the following ..

3:47 am, February 23, 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
SQLite
How To Install SQLite on Ubuntu 20.04

  Bash sudo apt install sqlite3 and to get it working with php, pick your version of php and change the following Bash sudo apt-get install php7.4-sqlite3

7:36 am, June 14, 2023
php
getcwd usage in php to get the current working directory for file includes

the builtin function getcwd in php gets the current working directory, this can then be used to include files or check the current working directory rather than manually adding the directory into your..

4:13 am, April 6, 2023
html
Boots Widget change from widget to cat head and click function

Moving this from the widget area to the bottom, to make it less obvious but still there if needed.   

4:26 am, March 27, 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
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
html
pulse map dots

bunch of pulsing dots for a map or image. allows overlaying of clickable dots on an image, you can change the colors with the css below.  modified from here: e.g: 

12:14 am, November 8, 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
css filters
CSS Filter Generator from Hex Code Usage Example

quick example of how to apply a css filter to change logo or image color using this tool

4:40 am, August 16, 2022
html
codemirror with auto preview window

this should auto preview html code into the preview area using code mirror

7:15 am, July 5, 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
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
domains
redirect www to non www

usually i point the www to the ip address of the server and then create a redirect block on nginx, but this seems like extra work for nothing.  Tested the cname point to the address but this see..

5:42 am, June 10, 2022
Site Bugs
Warning: file_put_contents(/var/www/html/bundle/responsive-viewport-meta-tag-responsive-meta-tag/index.php): failed to open stream: Permission denied in /var/www/html/pages/update.page.php on line 167

i think that the content in this location is not writable by php so need to change the permissions too fix this error.  This should fix it, as it was not correctly write permissioned Bash cs /..

1:56 am, May 21, 2022
Images
Auto Changing Image URL

Here is a picsum url that you can use to generate image sizes, just change the numbers in the url to change its generated size.  Some examples of the sizes you can use are below. 

1:31 am, May 1, 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
javascript add class to element

how to add a class to an element in raw javascript I wrote a quick demo here showing how you can add a class to an element with an id on a button click

3:35 am, March 15, 2022
css
highlight a button with an animation css

While i was downloading the latest AdoptJDK i noticed this button, and thought it was a nice effect.  I wondered how hard it would be to replicate this. Copy the link html Check each class..

12:48 am, March 4, 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
CSS
Using Marker to add a Triangle to List Items

In this demo i use the ::marker attribute on the list items to change the content of the marker to a ▶

11:33 pm, February 14, 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
html
content editable p tag with spell check enabled

im not sure how this is useful, but you can set a p element to content editable so you can change its contents and then also set the spellcheck to true so the browser knows that it should run its spel..

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

10:39 pm, January 10, 2022
css
hide the first h3 tag on the page with css

in case you want to target the first item on a page and hide it or change it with css. 

2:29 am, January 10, 2022
javascript
Create Strings using Template Literals

if you use the backtick to enclose your strings you no longer have to use \n for a new line.  For example: `this is a multiline ...string!!` Console Example

5:55 am, December 29, 2021
javascript
Use destructuring assignment within the argument to the function half to send only max and min inside the function.

this seems like a tricky one, can be resolved with removing the stats array reference. Im not sure how it still knows to access the stats array. I dont know how that is correct as the console just lo..

12:34 am, December 17, 2021
javascript
Using Destructuring and the Rest Parameter to Reassign Array Elements

Use destructuring assignment with the rest parameter to perform an effective Array.prototype.slice() so that arr is a sub-array of the original array source with the firs..

11:26 am, December 13, 2021
css grid
Using CSS Grid instead of Float's for a 3 column simple list

I have been in the habit of just using float:left and then width 31% with margin 1% for list items, and it seems to work fine usually.  But i thought i probably should update the defaults in by ..

12:37 am, December 7, 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
html
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..

5:01 am, November 19, 2021
css
button zoom effect with expanding background

Just playing around with zoom and background size effects on a promo button, if you change the background to 110% and then zoom to 1.1 you can see how the background appears to zoom out while the butt..

8:21 am, November 11, 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
react
Using props with Stateless Functional Components in React

Here is an example of a Stateless Functional Component but i cant get the PropTypes working correctly in my demo, not sure what im doing wrong here, but the code seems to work in the compiler just not..

5:30 am, October 19, 2021
react
How to Access Props Using this.props in React

If you would like to access a class component prop within its self you can do this using the this keyword.

5:15 am, October 19, 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
react
How to Override Default Props in React

The following code explains how you can override the default props in react.  In this example the default of quantity is set to 0, so we can pass in quantity in the items to override its default..

4:17 am, October 19, 2021
react
How to use default props in React

If you dont want to specify props every time you use an element, you can also specify defaults for these items. This can also be useful to remember which props are needed per component. This can be a..

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

1:56 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
react
How to Pass Props to a Stateless Functional Component in React

Props are like properties that you can pass into a component in react. A prop would be something like this in your component.  JSX <div>  <MyProp id="1234" /></div> The..

12:24 am, October 16, 2021
react
How to Render a React Class Component to the DOM

This shows how you can get react to render a component into the page or DOM. So actually getting and showing the code that you have been writing in react. 

9:28 pm, October 15, 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
How to Compose React Components in React

In this code we nest the components NonCitrus and Citrus into the Fruits Component. Then nest the Fruits within the TypesOfFood component.  Also added the additional components, Vegetables, Non..

11:29 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 Component with Composition in React

This shows how you can compose multiple React components together. In this example we return the parent component which has within it the child component, you can add as many child components as requ..

2:56 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
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
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
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
sections
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

12:23 am, September 29, 2021
wordpress
link to a custom style sheet in your theme directory wordpress

this is how you can include a manual link in your wordpress header file with a link to a stylesheet called theme.css then if you change theme names or something it will still link correctly, rather t..

2:35 am, September 28, 2021
svg
down chevron and styles

a down chevron and the class to style it, default this is 16x16px but you can zoom it in or out easily, just change the height and width of it target with the class bi-chevron-down

2:43 am, September 24, 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
html
test image url that always changes unsplash placeholder

good if you are doing a test site and need some changing images for test placeholders, and they are nice looking images as well. you can just use this image tag link and specify the size required.&nb..

3:05 am, September 20, 2021
javascript
change the box-shadow of an element with javascript boxShadow

changes the box shadow of test_div using the javascript object(?) boxShadow

4:39 am, September 18, 2021
javascript
change the background color of an element with javascript

gets the element by its id and changes the background color style css value the following example: gets the element by its id "my_bg" changes the style.backgroundColor to #123456

4:03 am, September 18, 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
javascript
change padding of element with javascript

change the padding of an element with javascript only

1:27 pm, September 15, 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
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
css
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..

1:24 am, August 19, 2021
css
vertically align text within a fixed height div using flex

this can be used to make text align nicely while still keeping the same layout. the example below shows how you can set the height of the containing element and still have the text aligned center to ..

9:55 am, July 29, 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
site documentation
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..

12:11 am, June 17, 2021
site documentation
use a list group for listing by category page [todo]

change this to a list group, should make it neater. Page to update: https://kruxor.com/list-category/code/  so for some reason this is listed using this function PHP $list_wiki_menu = $clas..

12:02 am, June 17, 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
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..

4:29 am, June 11, 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
javascript
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..

12:19 pm, May 25, 2021
javascript
load json with vanilla javascript no jquery

this basically does the same thing that a jquery .getJSON does but without the need for jquery.

9:57 am, May 25, 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
css
css responsive max and min targets @media

showing how you can target elements within a max and min screen width demo:

1:39 am, May 7, 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
javascript
dropdown change input box on select

changes the value of an hidden input depending on the selection of the dropdown

6:20 am, April 23, 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
html
a page with two images

a page with two images for testing

7:03 am, April 4, 2021
python
python extract images into an array from a url

this should extract all images from a url into an array using python python from bs4 import BeautifulSoupfrom urllib.request import urlopenurl = "https://www.kruxor.com/view/code/LOveX/"page = urlop..

6:56 am, April 4, 2021
git
git pull changes from a repository

use this to pull from an existing git repo into a new directory

1:27 am, April 3, 2021
git
commit and push changes to git repo

run this to add all files in current directory to repo and push the changes to git git add * git commit git push

1:26 am, April 3, 2021
javascript
change a select box back to its initial select value

this will reset the select box selected value back to the 1st item in its options list

1:00 am, March 17, 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
javascript
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..

11:38 pm, March 7, 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
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
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
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
site bugs
change images to upload file also to imgur [reported]

may also create a seperate db to store imgur image links? can update the source_link in the current images to link to the imgur version. I remember i did this a while ago but cant remember the code ..

8:48 am, January 23, 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
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
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..

3:00 am, January 14, 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
css
change the cursor to a pointer for an element

i find this class quite useful if you are adding a javascript click event to an element, and need the mouse to look like its a click item rather than just a normal item. If you mouse over the test ..

12:19 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
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
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
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
add a jquery date picker to your text box

This JQuery UI Date picker is good if you want to add a nice dropdown date selector to your input box, rather than having to type in the date manually. Requires: JQuery  JQuery UI Documen..

12:56 am, December 22, 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
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
jquery
using jquery appear for checking if an element is visible on screen

Yes.. sometimes i like using jquery as well, as it can make things so easy! :) Here is a quick demo using the JQuery Appear plugin so make an element change if it on or off screen.  Plugin Link..

12:24 am, December 1, 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
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
css
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. ..

5:36 am, October 14, 2020
php
Fix for Fatal error: Uncaught Error: Call to undefined function file_get_dom() simplehtmldom simple_html_dom

This error is caused due to a function name change in the simple_html_dom.php library if you are using an older one and upgrading to the never version, you can see it in the change log here: https://s..

1:08 am, August 26, 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
javascript
stop tinymce replacing urls with relative url's

If you have been using tiny mce for your content editing, you will sometimes find that it replaces your full url strings with its relative ones. This can be annoying so this is how you can disable it..

12:55 am, August 18, 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
php
change string to capital words ucwords

This will change an upper case or lower case, or mixed case string to uc words. Example with this page title

6:08 am, July 21, 2020
php
change upper case case string to lower case (uppercase, lowercase)

this can change a lower case or any case into upper case using the str to upper php function Example

6:02 am, July 21, 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
wordpress
list items matching a category title

this is just raw at the moment, not tested or working. this is matching a category number at the moment so would need an additional way to link that number to the category name, or know what the categ..

4:08 am, June 12, 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
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
ES5 vs ES6 Object Example

here you can see the syntax changes between ES5 vs ES6 Object declaration, you can still access the values in the same way.

12:41 am, February 3, 2020
javascript
Use Recursion to Count Down

just a slight change to the count up version of this, using unshift rather than push to the array.

10:29 pm, February 2, 2020
javascript
Using the Spread Operator to Evaluate Arrays In-Place Tests

My tests using the Spread Operator rather than the apply function. In the 1st function show_max_array i use the apply operator to convert the array into comma seperated values. In the show_max_array..

1:02 am, October 14, 2019
javascript
Changing an array declared with const

a const means that you cannot re-declare the variable name, but you can still mutate an array content that is declared as a const. so you can see in the following example that even though the array is..

6:17 am, September 30, 2019
javascript
using let and const example

This example uses let and const rather than just vars, let can only be declaired once rather than overwritten like vars and const is a read only variable so it cant be changed. 

4:55 am, September 27, 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
css
form checkbox replacement with large tick using label

this is good if you want to change a form checkbox with the default and show a fancy tick or something else, this will still check the checkbox so will work normally as the form element

2:15 am, August 7, 2019
javascript
card counting example from fcc

here is a solved version of the card counting function from free code camp you can test it using console log.

2:00 am, July 29, 2019
jquery
Change link target with JQuery

this will change the link href target to # on document load rather than its original link

12:17 am, June 28, 2019
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
wordpress
wordpress show the page content for use in a template

if you are using page templates in wordpress and need to show content from wordpress this is the easiest method. This only works for wordpress "pages" not blog "posts". For showing blog posts you will..

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
wordpress
wordpress show the post content for use in a template

if you are looking to show the page content in a template you can find that here. This will show all posts in the selected category Modified source from here

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

6:20 am, August 31, 2018
js
change favicon with jquery

Updated: This seems to not work on this page, as it has multiple link icon elements to deal with different sizes. I just changed it to a function and it runs ok, but the browser seems to choose a diff..

6:20 am, August 31, 2018
js
change the water colour in google maps for an already initialised map

good if you are using google maps and cant change the original map init code to change the styles. var mapOptions = { styles: [ { featureType: "water", stylers: [ { v..

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
find all elements add class jquery

this will grab all a elements, and dump them to the console. var allLinkElements = $( "a" ); console.log(allLinkElements); then we need to split into a jquery object, this is a jquery version of an..

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
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
emoji
emoji data - version 1.0

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

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

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
material design icons google font

you can just link to this like a font in your header how do we use the icons? <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> this one should ..

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

@viewport

Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
@viewport css reference