Search
Search Code
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..
jqueryui date selector with examples and code with custom date formatting
Datepicker using jquery ui with current date and date formatting. as dd-mm-yy Example Date formatting with selector
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..
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.
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..
Slick slider code testing with slower slides and auto play on videos
additional testing with changes for slick slider videos and auto play
windows robocopy /? help and usage
Reference for the windows robocopy command ------------------------------------------------------------------------------- ROBOCOPY :: Robust File Copy for Windows ..
how to show your DNS in windows and then copy it to the clipboard in one command
Here is how you can show your current DNS server in windows command line and then copy it to the clipboard, ready for pasting. Open Windows Command Prompt<windows key> + R Type cmd ..
get current year in javascript
get and display the current year using javascript. a usage example would be adding the current year as a copyright to the footer of a page
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..
simple file cache and check in php
just a quick cache bit of code, may need tweaking to actually work... i just added it here as i thought it was re-usable. Also requires simple_html_dom library.
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..
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..
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..
share to twitter javascript button function open a new window
gets and encodes the current page url and opens a new window to share the link to twitter
share to linked in current url button with javascript
Share the current page url to linked in with a button and javascript
Get current URL and add a share to facebook share button with it
Combines this Facebook HTML for Sharing a Link and encode url with javascript this to make captan planet! Or... makes a share this post to facebook button.
encode url with javascript
get the current url, encode it and log the encoded result to console
using the :user-valid CSS pseudo-class
It seems this is currently only working in firefox. Here is a test of the code in firefox, you can see if you add a "valid" email address it will add a border and a green tick.
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..
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..
javascript get content from element
gets the content from a target element with javascript using its id sets the target with the content from element 1 using its innerHTML attribute
make a nice readable date using a timestamp string function make_nice_date
handy if you have a timestamp like this: 2022-01-10 00:12:42 and want it to look a bit nicer. like this... 12:19 am, January 10, 2022
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..
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..
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.
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..
Create a Simple JSX Element
The current code uses JSX to assign a div element to the constant JSX. Replace the div with an h1 element and add the text Hello JSX! inside it.
using babel for react compiling in browser
this is currently just an idea, as i saw that codepen uses babel to run react i was wondering i can do the same thing here and then just write normal react script and have babel compile it. so ..
list group bootstrap template
this generates a bootstrap list group basic template layout, nice option for lists with links in them rather than using a ul li style list, this makes them into neater looking elements so rather than ..
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 ..
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
How to record your own page views with PHP, and make them into weekly monthly and yearly charts
Building a better Simple Page View Counter Currently this site has a very basic view counter on it. Here is how it currently works. Load the page, function checks if the page has a existing r..
video not auto playing issue in chrome and brave
i had this error the other day when i was adding an auto play video to a page. the error was: Javascript Uncaught (in promise) DOMException: play() failed because the user didn't interact with the ..
get the value from a range input field with javascript
this script will retrieve the current value from a range slider html input if you want the value to only update when the slider interaction has been stopped change the oninput to onchange then it w..
get the current week as a number with php
retrieves the current week as a number from 1 to 52.
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..
get the current working directory in php
gets the current working directory... in php
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..
gallery carousel center mode
i found this one here, looks cool. see if i can get it working like the demo. currently getting this error on running the script i wonder if this is caused by a document ready issue? what is..
PHP/SQLite - Load Random Item
loads a random item from the current class / db using sqlite.
scroll down the page using a button click
scrolling down 600px from where you currently are on the screen demo vid
using clamp js to clamp lines of text
there is a css version of this as well but this version works in a greater range of browsers (i think) this one is not working for me... i think the overflow elipsis is still a better option than thi..
this is a weird one table underline appearing and dissapearing on mouse over
very strange that also reminds me that i have to get rid of these random searches idea: i was thinking of adding a more detailed hit system where it can record the month and also the year of the..
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..
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..
get the current month as a number
this will return the current month as an integer
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..
write string contents to a file with php
this will create a file called my_file_name.txt in the current php working directory usually this is the same one that the script is running in and write the text yay! into that file if the file al..
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..
get current url with php
this checks is $_SERVER['HTTPS'] is set and $_SERVER['HTTP_HOST'] $_SERVER['REQUEST_URI'] to construct the current url
php basic page router
this php page router while pretty basic does the job for this site. it takes all the query string and splits it with the / into $p variables you will also need the following nginx or similar page rew..
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
check if a query string item is set in the current url
this will check and console log if a query string on this page is set to test=anything example url is: Test is not set: https://kruxor.com/view/code/XzLaT/ Test is set using & : htt..
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..
jquery page search [testing]
just testing this one at the moment for a in page search. Based on this: https://codepen.io/chriscoyier/pen/ExgqWab I would like to adapt this code to search through page elements and ma..
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..
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 ..
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.
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..
checking the current url and then marking a link active based on that url
i want a script that can check the current page uri and then match it to a list of links to be able to add an active class that survives page reloading So here we go... 1. Get the current page url. ..
linking search results to view pages [finished] 🤣
I was thinking it might be useful to link the search term to the page, so that it can be found more easily using that search. For example, Link this search text (somehow) to the post page and display..
badge border colour is too dark or light on number badges [fixed]
I noticed that the badges here were to light, so i must have missed something when updating the badge css. Demo Linkhttps://www.kruxor.com/search/code/site+bugs/ Bug Status:Fixed Problem: The bo..
top bar overflow issues [fixed]
So i was just browsing throught the site checking for random errors, which there are quite a lot. And noticed this one. Quite a large bug caused by overflow issues in the main header, i think this ..
make labels or badges look better
How to make these look better. The labels are used in the list items to show a small version of the category or sometimes the view count for a list item. How they look currently Dark Mode Ligh..
adding pagination to custom wp_query
you can add this to your custom wp_query making sure your query also has the paging passed through to it
download icon svg
a simple download icon in svg format, also added button example usage so you can use the svg within the button as an icon and change the fill colour on mouse over, plus it scales nicely on mobile devi..
Fix Hover Over color on list group dark mode in bootstrap
How to fix the problem when switching to dark mode, the list group item text disappears when active. Here is what it currently looks like. To fix this we need to target the element and force the..
using linear gradient background on text css
If you want to have a background gradient on your foreground text you can use this css. I think currently this only works on webkit enabled browsers, but it looks pretty cool.
get the current post id from content.php
this should assign the current wordpress post id to $post_id, from template-parts/content.php if you want to show it, just echo the $post_id
wordpress get the current category id name and slug
This gets and displays the current category id in a wordpress blog post if you have the current id, if not you can leave the $post_id blank and it should see if there is a category loaded to the curre..
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..
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..
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('')
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 ..
wordpress main nav dropdown fix
this unsets the flex and allows the menu items to stack properly in a dropdown menu, not sure if this is reusable
tar.gz to compress a directory in linux and then decompress it
a pretty common way to zip up contents in a directory into one (or technically two) archive(s). Add to tar.gz This will add the directory and all sub directories into the archive called the-archiv..
Find Disk Space Usage using DU
The easiest way to check the space used in a directory in linux is this command: du -h This will do the current directory and all its sub directories. if you want to see a specific one type this d..
Get the documentURI with JS
This function gets the current document URI assigns it to the variable documentURI so it can be reused and shows it in the result area once you click on run function.
php convert date now into a sql timestamp
an easy way to get the current date from php into a mysql or sql timestamp format, this uses the server time
get the current url in javascript
this will get the current address add it to a variable and show it on the result element
create a mysql or sqlite current timestamp with php
just in case you need to create a CURRENT_TIMESTAMP using php, this formats the current date into the following.
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..
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..
Get Current Page URL PHP
There is a few methods of getting this but here is a simple one. Replacing the http or https manually. $current_url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; Here is a more complex ..
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..
using parse_url to extract parts of a url
Category: PHP the parse_url php function will split a url into an array of url fragments $url = "http://kruxor.com/path/?argument=value#anchor"; var_dump(parse_url($url)); parse_url example ..
wordpress enqueue slicknav and slick slider
add this to your theme scripts functions file here is the full one from HTML5 Blank // Load HTML5 Blank scripts (header.php) function html5blank_header_scripts() { if ($GLOBALS['pagenow'] != ..
some date formatting just day just month just year
Useful if you need to get PHP to return parts of the date. The date today in number format $date_today = date("d"); e.g: 21 Todays month name $month_name = date("F"); e.g: July ..
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..
show the year with js
just a simple one liner that will show the current year, so no more need for static years in html footers! var d = new Date(); document.getElementById("year").innerHTML = d.getFullYear(); Usage E..
meta refresh reload page
this can use a meta tag to get the browser to reload the current page. the following code will reload the page every 30 seconds. usually you have to add meta tags into the header of your page, not ..
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..
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 ..
targeting the printed version of a page with media print
there are 2 ways to target the printed version of a webpage, you can do it with a @media print query inside your css, or you can link the whole style sheet and target the print media. target print ..
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..
wordpress get template directory
Get the current theme directory, good for use in wordpress templates. <?php echo get_template_directory_uri(); ?> Usage Example To link to an image located in the theme directory <..