Search
Search Code
extract a wordpress menu using its id
when you edit the menu in wordpress you can check the url, and it will have the id to extract in the following string: /wp-admin/nav-menus.php?menu=12
Left Fixed nav with right fluid content
left fixed nav section with right fluid section css and html using flexbox
css html vertical center
seems to break this layout... there must be a better way...
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..
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 ..
six box grid css html custom no gap
re-usable four box grid with no gap, plus stack on responsive 1024px
4 box custom grid with responsive
simple 4 box 25% grid with a responsive break at 1024px to stack the boxes in the grid
Quick Embed code for Titillium Web Google Font
Quick Embed code for Titillium Web Google Font and a bit of test code to see if the font is working properly. Im not sure if including all styles of this font is a good idea. Who even uses italic thes..
Quick Embed Figtree Font
Quick embed code and test paragraph for the google font figtree
wordpress block grid code
the basic wordpress grid column layout this is a 3 col layout
clean excess binary logs from mysql - free up space
Update: 30 July 2023 I actually prefer this command, i just have to figure out why im getting so many binlog files! MYSQL PURGE BINARY LOGS BEFORE '2023-07-30 00:00:00';PURGE BINARY LOGS BEFORE NOW..
fancybox youtube showing video links in a lightbox - updated with fixed code parts
do people still use lightboxes, it seems yes in some cases. ;) if you feel the urge to use lightboxes and need to link to some youtube videos this is how you can do it. you will need jquery and fanc..
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
make clickable element with clickable class open link in new window
makes an element with a link into a clickable element. This finds the 1st a tag in the target element and then opens the link in a _blank tab. Then if you have an element that you want to be clickabl..
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 ..
list page links function list_page_links
list top number of page links from selected table test run time on db of 4k items. select * from pages where publish = 'publish' order by insdate desc limit 10 10 rows (0.005 s)
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..
Deprecated: parse_str(): Calling parse_str() without the result argument is deprecated
I had this error on a function that i was not even sure i was calling. This was on some old code i was testing for an old site, i must have fixed this error on a never version of the function. ..
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..
chart js line chart dont show below 0 and add axis labels
Now we take the chart js chart and add some axis labels on x and y using the same options values. This will also add axis labels to the chart on the x and y axis Javascript options: { scales: {..
chart js line chart dont show below 0
had an issue where the chart was displaying values in the negative, and wanted to start the chart at 0 and no go below. the additional option fixed this issue. Javascript options: { scales..
Slick slider code testing with slower slides and auto play on videos
additional testing with changes for slick slider videos and auto play
Chat GPT slick slider code testing
slick slider testing using code from chat gpt 1. write for me the code to embed a video into slick slider in html and css 2. can you also add the javascript required to get this working 3. can..
Quick Embed - Google Font - Inter
Quick Embed code for google font inter
Check free space amount and show it in a nice human readable format
this checks the disk space amount on the linux macine and returns the result in human readable form. df -H Usually this will show it in the following format. Example below.
Fancybox Quick Video Modal Popup Code Inline
have you ever needed to add a quick video modal using fancybox. Probably not, but if you do, here is the code.
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 ..
add ssh keys on your linux box in 10 seconds
Here i was typing in the ssh password over and over when connecting to ssh, when i could have just typed this one command and had my ssh keys copied to my linux box! What was i doing all that time! :..
Flickity - autoPlay with Loop
Flickity slider with auto play
windows robocopy /? help and usage
Reference for the windows robocopy command ------------------------------------------------------------------------------- ROBOCOPY :: Robust File Copy for Windows ..
can you set all image heights to match with css no stretching
Short Answer: Yes with object-fit: cover; on the css of the image properties. object-fit: cover; You might also need: object-position: right bottom; ..
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 ..
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:
four box section template in foundation with classes find and replace (4 box)
this section uses the large-auto classes so you can add or remove boxes easily. find and replace the name "boxsection" to rename your new classes for the section I have layed this one out a ..
Proxima Nova Font alternative on google fonts Figtree Embed and Quick Install Code
According to a recent google search by me the font Figtree is the closest one to the Adobe Font Proxima Nova, so lets do a quick install code for it and test if its actually the same. All Style..
return author title from simplepie rss atom feed
i was just returning the author from this, and for some reason it returns a number. $class->$target_item = $item->get_author(); where you also need to pass the get_name function to this to ext..
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..
simple pie get link from enclosure item in simplepie rss feed
i had an item like this in a rss feed, and i wanted to grab the enclosure url, took me a while to figure this out for some reason even though the solution is quite simple. PHP <item> &l..
simplepie error : XML or PCRE extensions not loaded!
using simplepie it does not load the target feed, and does not display any errors. Just nothing. if your feed is init'd with $feed check for feed errors with: $feed ..
four box responsive section with all classes find and replace boxsection title foundation grid (4 box)
four box responsive grid, find and replace the word... boxsection with your new section name to generate all class names and section names to match for rapid section creation. Demo Codepen
Google Font Embed - Play Gaming Font
Quick Embed Codes for the google font Play, kind of a gaming style of font. As usual you can choose the @import or the link tags in the scripts section to embed this font quickly. Then apply the c..
loading a non processed item using the load_from_fields_array function
Example using the load_from_fields_array function to load a single item where the processed value is equal to FALSE.
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.
font quick embed inter all styles google font
For some reason every time I go into google fonts website it seems to get more and more complex, i dont really care too much about all the font details i just want the embed link! Anyway... Maybe im g..
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..
Add font awesome icons as placeholder text in inputs
An old one i found on codepen, works with only the old version of font awesome i think. Not tested on the later versions.
basic section item with foundation wrap and grid - single item in section
section with inner and outer css selectors for reuse and basic layout formatting. you can then search for "section-name" and replace it with your own section name. section-name section-name..
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..
Random User Profile Loading Script in vue
uses the random user ui here to generate profile boxes using vue js original script here: https://codepen.io/l-i-lc/pen/WNxNwvd?editors=1010
Twitter Post Fetcher v18.0.4 - javascript twitter feed fetcher
A few queries showing how to get latest tweets and post likes using the Twitter Post Fetcher v18.0.4 script.
loop through $_GET in php
I thought this one would be something like PHP foreach($_GET) { echo $_GET; } but actually as $_GET is an array you need to do the $key and $value loop like this PHP foreach ($_GET as $..
php strip non numbers from string - remove all non-numeric characters from a string
this will remove all non alpha numeric numbers from a string. in this example it returns: 123456 from $1234.56x
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..
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
Regex replace or find anything in brackets
Search for anything within brackets ( find this ) and the bracket its self. REGEX \((.*?)\)
Quick Embed Import and Code Samples for Google Font Roboto
quick embed codes and code examples for the google font Roboto. Roboto Font Preview
codemirror with auto preview window
this should auto preview html code into the preview area using code mirror
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..
Oswald Font Quick Embed
Quick Embed code and class for Oswald Google Font. This includes all font weights and styles for the Oswald font, just add the class oswald onto your elements, or you can apply it to all page element..
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..
using figcaption and figure for your images
So i usually add images in a <p> tag with just an <img> tag and then <br> and the image caption, but there is actually a tag for this that i should get used to using. The <figcapt..
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..
encode spaces in items passed to url to %20 not +
I was using urlencode in php and it was encoding words with spaces into word+space rather than word%20space This can be resolved by using the function rawurlencode rather than urlencode.
Load fancybox modal on hash check
I was just testing this code, not working on the hash check as yet.
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..
Welcome Widget Card - Toggle
Testing the welcome widget with a more or less toggle. This version seems to work, with a jquery slide toggle.
php function load as table - load_as_table
Load data and add into a table format by passing in the required fields as an array. Example Result Live Example https://kruxor.com/view/nz_postcodes/5KrBW/zurich-place-weymouth-manukau/&nb..
add a custom event trigger in jquery document ready
i saw something that said if you add an event listener at the end of the doc ready it should fire last, but i dont think this is correct as it runs everything at once. so i think this code does not wo..
get json with php from a url and display it
yep its that easy. this code shows getting the contents from a json request api. var dumping all of the results and extracting one single item by its array key and showing it.
Install PHP without Apache on Ubuntu
I was actually about to do some coding and then i got distracted with this annoying error on vscode. I keep getting this error on vscode: I had been ignoring it, but i thought fine, ill fix it and..
fancybox inline auto size modal easy
It seems weird to me that the examples on here, do not have code linked to them, and rather i have to dig through the source and find how they work.
a google font like muli - mulish and embed code
mulish font embed codes and styles with example
content-visibility and contain-intrinsic-size for page load rendering speed increase
interested to see if this makes any difference content-visibility The content-visibility CSS property controls whether or not an element renders its contents at all, along with forcin..
php convert number with k on the end to full number
I have a function that converts raw numbers into shorthand or human readable numbers, but was wondering how to convert these back if they are stored in that format, and also makes it better if you are..
extract variables from url string php
How do I extract query parameters from a URL string in PHP? You can do this using the parse_url function or parse_str function in php. Say my url string is: $url = "https://kruxor.com..
basic radio checklist - check and item and get its value in a textarea
a basic radio input type checklist, where you can only select one of the items in the list. Ok so no longer so basic. This script allows you to fil the value of a text area with the valu..
Invalid argument supplied for foreach()
Fix for Warning: Invalid argument supplied for foreach() in /var/www/html/pages/seo-meta-tag-search.page.php on line 204 As this is just a warning, i may not have noticed it originall..
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 /..
Warning: Undefined variable $class_single_hero in /var/www/html/pages/section.page.php on line 177
This warning was caused by a dot in front of the equals $class_single_hero .= $code->hero_widget($t_uid = $class_single->uid,$t_class = $p2); Fixed version Easiest way to fix this is remo..
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 ..
flush dns on mac
sudo dscacheutil -flushcache;sudo killall -HUP mDNSResponder
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..
duplicate a line in vscode shortcut
if you ever wanted to duplicate a line in vscode, this is the shortcut for you. rather than doing the hightlight, and then CTRL + C and then CTRL + V you can use the following shortcut. just put you..
unable to write to a sqlite database with docker
turns out this was not a docker specific problem, i was getting the readonly database error. even if the database has full write permissions, the directory also needs to have write permissions ..
add user to sudo group in ubuntu
Adds the user "username" to the sudo group usermod -aG sudo username
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
truncate text with line clamp allow a certain number of lines
This shows how you can truncate text to a certain number of lines using the css property line-clamp. -webkit-line-clamp: 3; line-clamp:3;
Twitter Post Fetcher Script
Uses javascript to fetch a twitter feed from a user screen name. Totally stylable alternative to using the twitter embed code. Your Welcome...
Clear Youtube DL Cache to fix 403 Forbidden error, youtube-dl 403 forbidden
If you are getting the error: File "C:\Python\Python34\lib\urllib\request.py", line 588, in http_error_defaulturllib.error.HTTPError: HTTP Error 403: Forbidden It could be cache that is causing this..
generate a new SSH key on mac for git
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
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..
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.
font similar to century gothic questrial google font quick install
I found this font to be closely related to the paid font "Century Gothic" the only issue i found with this font is that it only comes in regular weight. But Questrial is free to use, so that is..
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..
html and css hoizontal simple timeline section in foundation
a horizontal simple timeline section example done in foundation grid with some custom styles. This also uses the Lato Font quick install! So Quick!.. :P Also works on responsive and mobile dev..
Lato font quick install
a quick code to install the font Lato from google, includes the stylesheet and also the @import links, just pick one.
Javascript Objects Notes
As javascript objects are used so often in javascript i thought i would write an overview and some notes on how they work, well how they work for me anyway. I guess how they work for me should be simi..
how to write a javascript string over multiple lines
i remember learning this on freecodecamp while doing the ES6 training, and i could not remember exactly how to do it. I was using the \ at the end of each line but thats really a bit annoying.&..
best way to write html into an existing page javascript
this probably isnt the "best way" but it is a way that works. say you want to add some elements to a page with javascript this is a method to do it. Add an element, before including the script..
Core Function : list_search_by_class_return_links - List Searches by Class Type and Return Links
Function that list's the latest and top searches by the class name and return a list of links, with the search totals on them. I wanted to extract the top searches and the latest searches by da..
Fatal error: Uncaught Exception: Required extension GD is not loaded.
How to resolve the error: Fatal error: Uncaught Exception: Required extension GD is not loaded. This Error is ususally due to a php library or script requiring the GD php extention. On ubuntu ..
php check if a class exists
check if a class exists in php. this can be used rather than assuming the class exists and then causing an error You can run the class_exists function on the class before loading it with the followi..
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..
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..
submit form with javascript
if you have a form with an id, you can submit it with the following javascript. usually this will be attached to an event or something similar like a button click. If i run this on the demo, it..
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..
A short unsplash image url
You will notice that if you copy the image source from unsplash you will end up with something like this: https://images.unsplash.com/photo-1582639590011-f5a8416d1101?ixlib=rb-1.2.1&ixid=MnwxMjA3..
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..
get the value from a textarea element
gets the value from the textarea and prints it to the console of the browser rather than using innerHTML you have to use value.
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
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 < so that the string is not parsed as h..
generate view statistics widget in php class extend
How i generate the Week, Month and Year view statistics widget for this site. Views Widget Function This generates the widget based on the views data. PHP // views widget /* using fi..
Uncaught Error: Call to undefined function mb_convert_encoding()
I was getting this error when calling a function in the readability php class, on a new server for code that worked on the old server. Uncaught Error: Call to undefined function mb_convert_encoding()..
Auto Create HTML Code Snippets
make anything within a <code> tag into a nice looking code snippit with highlighting via prism. To get this code to make a snippit, you need to: Give an element a .make-snippet class and it's ..
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..
Testing Playwrite on for Node
I came across this library on y news, and thought id give it a bit of a test. I managed to get it working but not really sure what tests it can do. I set it to take a screen shot of a we..
card.html template
a card template with title, content and a mb-3 for bottom margin for usage with the php template system.
making the search page nicer
Sometimes i dont even notice things like this, as i look at them all day and go, ah yeah thats a search box. I forget that all these things can be fixed. Anyway, even just adding this form to a..
fixing error Call to undefined function simplexml_load_string
usually the error "Call to undefined function simplexml_load_string" happens when the php xml library is missing from your server. You can install the xml php library with the following command, repl..
get tomorrows date with javascript
Same as the get yesterdays date except with a +1 rather than a -1 let tomorrow = new Date(new Date().setDate(new Date().getDate()+1));
get yesterdays date with javascript
This gets todays date and minuses one day from it to be ... yesterday. let yesterday = new Date(new Date().setDate(new Date().getDate()-1));console.log(yesterday); This format is the full da..
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
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
get the content of a url get the content of a link with php and test if the result is empty
Where $import_url is the target URL.
Darkmode JS - Add darkmode to your site with one script
This library looks really nice! It drops in ok, but maybe with more complex layouts or coloring, it seems to break a little bit. Darkmode JS Example Source Links https://darkmodejs.learn.un..
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..
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..
simple javascript no library accordion
a simple button and div based accordion with a toggled indicator
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..
Use destructuring assignment to swap the values of a and b
Use destructuring assignment to swap the values of a and b so that a receives the value stored in b, and b receives the value stored in a. I was havi..
Hello world in C and seeing what it is actually doing
One of the most simple C applications, how to compile it and how to objdump it. C #include int main() { int i; for(i=0;i < 10; i++) { puts("Hello Mac\n"); } return ..
How to download music to mp3 format from youtube using youtube-dl
How to download ABGT from youtube. youtube-dl sudo apt install python3-pip ffmpeg brew install ffmpeg brew install youtube-dl Getting this error: The operation couldn’t be completed. Un..
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 ..
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.
Input Suggestions using a datalist
I found this cool piece of code here, looks very handy. Basically you can add the input and then provide it a data list with suggestions, which then will allow you to start typing the item and it wil..
get php to validate its self with php check syntax
Did you know that php has a syntax checking function built into it? Well it does and this is how you can use it to check your php files for errors, rather than just running them and hoping for the be..
Console Tips and Tricks
Here are some quick commands for the console. Getting to the console in your browser Press F12 and Find the console tab. That little blue > there is the console. this is in brave or chrome, bu..
Spam IP Database and delete button
The Background and Reason for the SPAM IP Database and Delete I actually wrote up half of this article and was still testing the function and lost the whole post, which will teach me for adding it st..
Add custom symbol to ul li list and align text items
Pick a symbol from here. Then you can copy and paste it into the following css to change the list symbol, for more unique looking list items. If the list items dont align correctly you will nee..
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..
how to embed google fonts icons
For some reason when i go to embed a google font icon, they dont seems to have any obvious way to actually use it, i can find the icons ok here. But then when i go and use it it links to a how to embe..
convert json string to a php array
takes a json string in php and converts it into a php array using the json_decode function.
how to decode xml in php
how to decode xml into an array in php Here is a full example taking an xml string and converting it into a php array.
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..
count total results from distinct sqlite
a query to count the total items found on a distinct query
youtube search api request function
This function requests a search from the youtube search api, and searches the text in the snippet for the seearch string. You can get your own API key for this from the google developers console. They..
javascript try catch example function
try catch is a good way to stop errors breaking your javascript. here is the example from the firefox mozilla with a basic try catch logging the error to your console, rather than just breaking all t..
Fix for PHP Warning Trying to get property '*name*' of non-object
i was getting this error when checking parts of an object that were sometimes set and sometimes they did not exist depending on the values. Warning / Error : Warning Trying to get property '*na..
write the contents of a url into a file with php
save the content of a url into a file with php using the following command. This grabs the $url and saves the content into the file my_file.html
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..
php return json header and content
sets the header to json and returns a simple json formatted array.
php post data back to a url with a function
this function uses curl to post back data to a url, this acts like a _POST form request from within a function. Function usage: $url the url to post the data back to e.g: $url = "https://kruxor.co..
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>
generate random username function in php
a function that takes several random words and creates a user name from them. This will generate a user name with between one to three words and a prefix if prefix_show is set to true. usage generat..
validate email address from string with jquery working function
Here is a working example of this post validate email address from string. This has very basic checking of an email address by checking that the string has an @ and a . in it. Note: this is still no..
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..
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.
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..
log the console log output to a div
I do a lot of console logging so i thought it would be nice to be able to see this on my test pages. Apparently you can grab this quite easily with the following code. I had to modify this a b..
add hero title to category listing page [not done]
add the hero title and background to the category listing page as a page title or category header. e.g: https://kruxor.com/category/code/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..
how to join an array in javascript using the join method
This example shows how we can join an array into a string using the join method. Its a nice quick way to convert your array into a string with a delimiter such as , or ; Here we can see the test arr..
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..
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..
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..
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..
How to Write a React Component from Scratch
Just testing my react component writing skills...
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.
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. ..
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..
Changing the default hero image based on the category name [not yet done]
This is more of a todo item, at the moment the hero image uses the same image for every post unless a hero is specified for each, i would also like to set the default image per category so if the post..
How to 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 ..
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..
using css counter-increment to add numbering to elements
i just found this element in css where you can add numbering to elements, very handy to add counters and things. This uses the counter-increment: section; in the main element and then adds the ..
using the kbd html tag
You can use the tag <kbd> to highlight keyboard shortcuts, i love this tag! Now i just need a reason to use it.
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..
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 ..
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..
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..
How to Render HTML Elements to the DOM with React
Once you have a JSX element defined you can write it to the page with ReactDOM.render(componentToRender, targetNode), In this example we are targeting the div with the id challenge-node. JSX ..
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..
Create a Complex JSX Element
JSX must return a single element, so you must wrap your items in a div element you cant just return a bunch of p tags. Define a new constant JSX that renders a div which con..
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.
adding react to a website in 3 steps
i was just researching how to add react to a website, and i thought i would need babel to translate or compile the JSX code, but apparently you do not need this... So ill test this here and see..
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 ..
react hello world with time and date updating
here is a react hello world with the date and time updating on setInterval 1000 miliseconds. Again with react it has to be compiled from JSX for it to work, so i have included the original and ..
react hello world with variable name
i was just testing some of the hello world examples on the react site, and as they use JSX they cant be directly entered into your code, so you need to run a pre compiler (not sure of the exact term f..
console table rather than console log for javascript objects and arrays
so i just saw on a tweet, that you can use console.table and i cant wait to try it out! good thing i already have a test object and array ready to go!
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..
list group card item template
this is a list group item for usage with the template list group or list group card template.
php html template class system
just a simple php templating system to extract your html files from within the php code into external files, makes things (or your code) a bit neater.
load array load all items from an array while in a sqlite load sql loop
i find this useful when loading a bunch of items in a class while looping through data, rather than assigning variables manually i just add the array of item names into the class to begin with and the..
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..
twitter social sharing meta tags
I had done this one so many times on client sites I actually forgot that i had not applied it to my own site! Doh! Anyway this is the tag setup i use for adding the title, url, author and featured im..
using strlen to check the length of a string and do something about it
in the following code i use the php function strlen to check the length of a string and then add an if statement to check if the string is longer or shorter than the required length.
using wp_nav_menu to show a custom menu in wordpress
found this quick code snippit here, its not working just for reference of what the array items do. Here is how you would display the menu called "Projects" PHP $..
wordpress add a template file to your theme
this is the basic layout of adding a wordpress template php file to your wordpress theme. good for custom theme pages This is a really basic template with just the header, but once added wordpress w..
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..
ken burns slow image zoom
No i had never heard of Ken Burns either, but hey i like the zoom effects. Slow Zooom...
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 ..
adding a new line in javascript
i was writing a function where i needed to for ease of readability add a new line to the code, you can do this with the \n for the new line and then if you need the string to go to the next line then ..
twitter json feed testing
just testing using the Twitter Post Fetcher script, seems to be working well.
function to load one latest item with a start val load_latest_single_num
This is the same as load oldest item based on insdate then update the insdate to now - load_latest_single_update but it allows you to add a start number to the range, so allows you to access the 2nd, ..
make the view number zoom when mouse over or active
Lets make the view number in the header widget area a bit more exciting... Zoom on mouse over with css. Lets add this effect here: Using Transform Scale In Css To Zoom On Hover Over Simpl..
moving the hits widget into the post header and footer
I wanted to make a smaller deal of the views page widget, i was adding it as a full widget and it does not need to be that huge so moving from widget area to the top of the post. Move it down..
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..
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..
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..
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..
button with separated chevron
I have come across this kind of button format a few times now in various designs and the html and css for it is a bit different to normal button formats I have found. Chevron Detached Button Ex..
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
still more comment spam
this is getting annoying now. so much spam. i already have the google recapture, but spam is still getting through. who runs this stuff, bots i guess. annoying. update: 10 August 2021 Still..
split a string into links using the comma
this is a common function for some field data, lets say you have a string like this. category one, category two, another category in one field or string but i want it to display like this category ..
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 ..
extract youtube image from video url
showing how you can get the image wallpaper in different sizes from a youtube video I used to have this tool a while ago, it just passes the video id and extracts the images and also can produce the ..
simple php ip blocker
just to quickly block annoying ip addresses using an array and $_SERVER['REMOTE_ADDR'] so i woke up this morning to find 200 comments from this spam ip, here is a simple script that will block that i..
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 ..
old browser check with javascript
modified from this script i console logged all the items available so you can do what you need with them these are the avilable variables Javascript console.log(browser.agent);console.log(browser...
roboto and poppins fonts include quick code
css import for poppins and roboto google fonts with the common font weights
CSS Drawing - Beach Scene
i did this one a while ago, cantr even remember it just appeared when i searched in google. here is an animated version, check the bottom for the css version of this:
404 Error Page Codepen
found this in my links the other day, still looks cool...
weird search results being recorded
i noticed some weird search results being recorded like this: the search function should only be recording a result if it finds a result, so this should not be added unless it can actually find thi..
append a #link to the end of all href urls on a target
good for if you need to append target links with a # link
simple backup to google drive fron linux
i added these scripts a while ago to backup mysql databases and web files to google drive a while ago, i just run them on a daily cron to copy the backups every day. the files so the bain backup_a..
verify the google recapture server php
i was still getting quite a bit of spam even after using google recapture v2 and i think this is just as i was using the javascript only version, which disables the submit button if the capture is not..
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..
Scroll down indicator css javascript and html
I have seen these a couple of times, indictating to the user that there is further content down the page, and they should scroll to view it. Then as you scroll down the indicator dissapears. So we w..
this is a weird one table underline appearing and dissapearing on mouse over
very strange that also reminds me that i have to get rid of these random searches idea: i was thinking of adding a more detailed hit system where it can record the month and also the year of the..
for auto filled fields, need to change the text and background colours
for some reason bootstrap or the browser is doing this to auto filled fields. according to my searching there is a pseudo class added to auto filled fields CSS input:-webkit-autofill { col..
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..
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..
ajax callback to delete with sweet alert confirmation to make it cool! 😎
I recently wanted to to an ajax call back on a list of items just to make it easier to move around the place, rather than it reloading the page every time. So i thought why not also use sweet alert on..
change this to a list group - other items
Other item format is a bit average, list group should fix this. This uses the template: core-list-item-simple.html So we can change this a bit to the list group format. Which i..
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..
Latest from Code Widget
What generates the Latest from Code Widget? Code PHP $widget_latest_list = $class->list_all( $start = 0, $max = 10, &n..
prevent default click event on link
This will prevent the default event on a link url, so for example if you have a <a href="">link</a> link this code will prevent it from loading the href link when clicked and you can do so..
make your images look non squished when not using image backgrounds v2
this is a working version of this post, for some reason that image was deleted I think due to a content upgrade. Basically this uses the object-fit: cover; to make images not stretch when they ..
show the difference between two dates in years, months, days, hours and seconds
i modified this code into a function that also detects if there is any values in each item before adding it to the text.
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 ..
json test objects (or arrays)
here is a couple of test objects in external js files just in case you need to test some ajax loading functions or need external objects, i mostly use them in my testing. Basic JSON Object with 3 ite..
load json with vanilla javascript no jquery
this basically does the same thing that a jquery .getJSON does but without the need for jquery.
json load from jquery and loop through the results
this is the same as this post but i have added the object to an external test file. so rather than already having the object data on the page we have to load it somehow Note: you can test that the o..
unable to access the $_FILES when submitting a form php
I was getting this weird error when submitting an image for a form upload and i could not see why the $_FILES was not set as this is where the files go from a $_POST back form in php. The error i was..
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..
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.
allow a title to be in the foreground while still having a before overlay for the background
i came across this issue recently, where a title was within an element and it needed to have a background overlay while still allowing the title to be on top of the overlay. I found the fix was..
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..
fancybox image popout easy
just in case you want to easily apply a modal or pop out effect to your images when they cant be displayed full size on the page. related: https://kruxor.com/view/code/3gNUD/inline-fancybox-m..
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 ..
validate an email address from a form field - version 2
This javascript function will check if the email address in the text box has an @ and a . in it and return a message saying if its valid or not. This is pretty basic as it only includes checkin..
check if a checkbox is checked with javascript
checks if the box is checked and returns true or false reusable function that can check if a checkbox is checked or not just pass it the id of the checkbox Javascript Usage check_my_box('check1');
dont use md5 for password hashing using password_hash and password_verify
apparently md5 is not the best method for password hashing, you should use the php functions password_hash(); and then password_verify(); to verify the hash matches PHP password_hash..
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..
python url to text with beautiful soup
python using beautiful soup to convert a url into text Python from bs4 import BeautifulSoupfrom urllib.request import urlopenurl = "https://kruxor.com"page = urlopen(url)html = page.read().decode("u..
python Install Beautiful Soup
this allows you to install the Beautiful Soup library for python which is used for html parsing BASH python3 -m pip install beautifulsoup4 python3 -m pip show beautifulsoup4 if you get an error say..
python extract title tag from url and html using regex
this will extract the title tag as text from the url and the title tag in the following python script Python import refrom urllib.request import urlopenurl = "http://olympus.realpython.org/profiles/..
python import and print url
here is an example script that imports html from a url and prints it add it to a .py file and then run it with python3 filename.py Python from urllib.request import urlopenurl = "http://olympus.rea..
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..
start ssh and add key git
i usually add this to a .sh file and make it +x to run ssh agent and add the github key bash eval "$(ssh-agent -s)"ssh-add ~/.ssh/github
play youtube videos on firefox in ubuntu 18
sudo apt install libavcodec-extra also checked that firefox was able to pla drm video
javascript page redirect
this one i cant add a working demo for, due to its nature, but it is working if you remove the comment. combine this with this: https://kruxor.com/view/code/wQUDM/do-something-later-with-settimeout-..
zoom background of element when active
I just wanted to see if something like this zoom was possible but just using the background image and leaving the foreground content in the element with no zoom. https://kruxor.com/view/code/kM..
rounded click me button with icon
just a rounded button with a font awesome icon
Creating a chart about charts.css with charts.css from the command line
Creating a chart about charts.css with charts.css from the command line: BASH ( echo "<table class='charts-css bar show-labels show-heading'>" echo "&l..
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 ..
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
linux mount a drive manually
this is how you can mount a drive in linux first list the drives available with: BASH sudo lsblk -o UUID,NAME,FSTYPE,SIZE,MOUNTPOINT,LABEL,MODEL or this BASH sudo blkid ok once we have th..
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..
inline form field padding
I noticed this when doing this demo (get the value of an input form element). Looks like inline form elements look pretty average when a button is added to the same line. i think this should..
get the value of an input form element (input value)
add how to get the value of an input form element with javascript for some reason i can get this working with: Javascript console.log(document.getElementById("my_input").value); but when trying to..
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..
check if a certain query string is set then apply it to all url's on the page
this script will check if a query string is already set, and if it matches it will append the same query string to all url's on the page Here is the test link with the field, and all url's on this pa..
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..
installing exfat and ntfs drivers to enable reading of these filesystems
this will install the ntfs package on your linux system, allowing you to read and mount ntfs partitions on drives. NTFS 3G BASH sudo apt updatesudo apt install ntfs-3g This should give you the fol..
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..
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..
using the nth-of-type selector to target a class with the same name
using the nth-of-type css selector you can target a class with the same name, using a number. I guess this can make your code a bit neater not having to add a sub class
how to check the temperature of the pi using command line
to get the temperature of the pi in shell or command line type the following: BASH vcgencmd measure_temp This measures the GPU temperature. Which should generate something like this: To get the..
how to check linux kernel version on rasberry pi rasberian
You can check which linux kernel version on rasberry pi a couple of ways, the easiest is using the uname command BASH uname -r which should give you something like this (but probably not exactly th..
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..
Uncaught TypeError: $(...).slideToggle is not a function
Uncaught TypeError: $(...).slideToggle is not a function at toggle ((index):226) at HTMLAnchorElement.onclick ((index):239) I noticed this one today when looking up this post:https://kruxor.com/view/..
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..
Aligning Images in TinyMCE or Floating them left and right (code)
Here is the code for this page Aligning Images in TinyMCE or Floating them left and right
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..
Testing
test <p>test</p> x .my-selector{ value:1px;} HTML <table></table> CSS .css{} Javascript function test() { console.log('test'); } PHP a = 1; x x
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..
how can i make my code look nice, or highlighted in evernote
* update: this is actually a paid tool, so i will be skipping this, as the code highlighting function is not that important to me. If anyone finds a nice free way to do this let me know. I have only ..
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..
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 ..
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..
codemirror htmlmixed textarea
a working (hopefully) version of codemirror using the htmlmixed mode, not sure why its not doing code highlighting. Update: 5 Jul 2022, this is working now.
install codemirror for textareas [added]
i think rather than editing all the code using just a plain textarea element it might be nice to have codemirror format them nicer https://stackoverflow.com/questions/21085170/codemirror-how-to-insta..
box shadow example(s) - drop shadow
I realised just now, that i dont have a box shadow example! How does that happen, its one of those css elements that i just use so much that i guess i forgot about it. Related Pages: https:/..
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..
add a youtube video preloader function, lazy load youtube [fixed]
I noticed that this list page: https://kruxor.com/list/rs3_efficient_skill/ Loads about 29 (well exactly 29) youtube video embeds and was wondering if there was an easy way to replace these iframes w..
add a comment recording system for posts [idea]
add a custom comment system for code and posts with google recapcha
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..
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 ..
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..
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. ..
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..
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.
easy twitter embed code
Just need to switch your twitter user name to show that feed here. Back when i used to use twitter, apparently.
How to add jquery to squarespace site
I dont use square space, but if i did and i wanted to use jquery in it. This is where i would add it... ;) Settings > Code Injection > Header Then add your script, like this one:
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 ..
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..
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 ..
CSS Grid Frame Work
8 Dec 2020 Yes i dont have an cool names for it, I just wanted something fairly light that can replace the bootstrap and foundation grid and basic components that i use so often, some of these framew..
bootstrap toggle element collapse
the example code for toggling elements, show and hide
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..
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..
check that a number is in the correct range based on a form selection
This script will check if the number is correct based on a form selection this can be used for checking that a postcode matches a state value or something similar Lets grab the html select form from ..
how to install js socials for social media share buttons and make them rounded
This should be a nice quick one on how to install js socials which add social media sharing buttons on your pages. Yeah i always just ignore these as well, but hey some people may use them?? H..
list items from blog and filter by category name
this is a bit raw, but shows the $args = array('category_name' => 'Categy Name 1','Categy Name 2','Categy Name 3' => 8, 'paged' => $paged ); for querying the category_name to do multiple pro..
Quick tool to convert time into decimal
I needed a quick tool that can convert say 20 minutes into decimal, as im doing this a lot these days. Here is what i come up with, well you can google it as well and that works, but this form is a bi..
using javascript to open a link in the same window and in a new window or tab (open link)
a nice easy way to target _self or _blank when opening a link using javascript
hero box with title sub title logos and call to action buttons
Here is a basic hero box section that contains: Title Sub Title 6 Logos (could replace with carousel logos) 2 call to action buttons I think it can be made more responsive, by replacing the..
bootstrap collapse or toggle a div visibility
if you have bootstrap and want to toggle an element or show and hide a div its already built in, just use the following code to toggle something.
center everything in a div with flex-center (centre)
i usually add this to my base css styles, as a way to easily center something in the middle of an element. then you just add this flex-center class and everything will be horizontally and verti..
php countries array to dropdown form element
here we generate a form dropdown from a php countries array using the country code as the name of the form option
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..
search a zip file with windows command prompt and 7zip
if you ever need to search for a file in a zip file this is how to do it (in windows). Also you will need to install 7zip Open a command prompt CTRL+R and type cmd cd C:\Program Files\7-Zip 7z l c..
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..
extracting the useful bits of bootstrap
Back in the early instances of bootstrap they used to provide a build system for the individual components. It seems that these days its all or nothing, or use some kind of build tool to include the b..
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..
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..
Fixing PHP SQLite database is locked warning - Unable to execute statement: database is locked
Apparently this error is caused by not closing the database after using it. Warning: SQLite3::query(): Unable to execute statement: database is locked. You can close the database using the fol..
simple usage for php password_hash
password_hash is used to generate a hash for a password. using this in its simple form can be good for generating a hash from some text like the following code.
enable tinymce on a target textarea by id
this is useful if you have multiple textareas on a page and want to enable tinymce on, also included are buttons to enable and disable on all textareas on the page
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..
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..
fix for Uncaught TypeError: e.indexOf is not a function
fix for depreciated window load Uncaught TypeError: e.indexOf is not a function at S.fn.init.S.fn.load (jquery-3.5.1.min.js:2) at default.aspx:993 I found this error when upgrading from a..
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 ..
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
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
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
scroll to top html css and js
add a button to your website that allows scrolling to the top of the page css add scroll behavior smooth to your html, to allow the page to scroll nicely rather than just jumping to the top, in supp..
bold the numbers in a ol li list
sounds like an easy thing to do, but maybe not so simple. you can do this using the counter css element. code below:
php countries array
country codes to country names array in php
stretching an image to fit in a banner image with gimp
sometimes i need to get a square image to fit in a rectangle box this is a way to do it with GIMP get a square image, or pick any image (pexels) fit it in this box.. For this one we will be using ..
adding pulsating dots to your css ul li list
get rid of those boring dots in your list and add some pulsation! See the Pen Pulsate your <ul><li> list item dots! by Luke (@kruxor) on CodePen.
wordpress adding post custom field meta and displaying it on you template
if you want to be able to add custom post fields into your pages in wordpress and display them in your template this is how you can do it, no plugin is required for this as post meta is available by d..
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..
hide parts of a form until the 1st item is selected
this code can be used when you just want to show the 1st field on a form then when it is selected it shows the rest of the form elements
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('')
add a tag to wordpress header from a plugin
when i googled this it just showed me plugins to add and remove things from the wordpress header. here is how you actually add your own tags to the wordpress header. This function will add the tag hi..
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 ..
inline fancybox modal testing
just testing to see if i can get a fancybox popup loading using an inline script rather than a document ready one, might be easier to implement. similar to this one, but without the need for documen..
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..
javascript isset equivalent
i was just looking for an equivalent to the isset in php for javascript, i was initially using .length but this can still cause errors so i found this solution. if (typeof my_var !== 'undefined') {}
wordpress show the parent page title with fallback to title
in wordpress either show the parent page title, or if it does not have a parent then show the page title. tags: get parent page title wordpress
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..
Use Sweet Alert rather than alert!
i love this script, it make the default alert look so much nicer, and its very easy to install. Just add the one script to your site, and then use Swal.fire rather than alert. simple usage Swal.fire..
get the href value using jquery
this uses the jquery attr function to get the value of the href. this example targets the first a in the card div, so running the demo should alert you with https://kruxor.com Rather than using alert..
use javascript to open a link in a new tab or window
im not sure why you would use this rather than using the html target="_blank" but it could be useful if you needed to open a new tab in a javascript function.
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..
Load and Unload TinyMCE editor from a button
Enable TinyMCE Disable TinyMCE Some Content function load_tinymce(idclass) { tinymce.init({ selector: idclass, plugins: [ "spellchecker code aut..
Nginx Server Block with Rewrite
Nginx Server Block with Rewrite Here is a basic nginx server block with rewrite to the index.php file. So it takes all the parameters and passes them into the index, into the variable $p or $_GE..
wordpress get page content to display on template page
gets the page content and displays it on a template, this must use the post loop as shown in the code.
ES6 Nested Object Example
extracting variables from a nested object with new variable names
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.
Use Recursion to Return a Range Array
using recursion to return a range array between the two numbers added
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..
js using recursion to create a range of numbers
in this we will create a function that calls its self to add to an array a range of numbers
add google captcha to enable and disable a form button
This will check if the google checkbox is checked and then enable or disable the form button depending on the outcome. This is just a basic version of this check, you should also check that the captu..
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..
Using the rest operator to pass in a variable amount of arguments
If you don't know how many parameters you will need in your function you can use the rest operator to pass them in. ...
Complex Arrow Function Example
Here is an example using a Complex or Higher Order arrow function, which slightly reduces the amount of code lines used. This should return the square root of all positive integers passed into it.
Writing Arrow Functions with Parameters
you can pass parameters to arrow functions as well as shown in the following demo, these functions are only meant to be used once where normal functions can be re-used.
Prevent Object Mutation
This shows how you can lock an object so its content cannot be modified. if you comment out the line Object.freeze(my_object); it will allow it to be modified again.
return a state name from an australian postcode
this will return an australian state code based on the postcode, so you can enter a valid postcode and see which state it belongs too. e.g: 2000 should return NSW
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.
using let rather than var
Using let rather than var and use strict can avoid some overwriting of variables i will write a function here that shows how let throws an error. This function now gives an error in the console. Uncau..
Use Multiple Conditional (Ternary) Operators
I actually find if then statements much easier to read than these ones, but these seem more efficient.
js - Use the Conditional (Ternary) Operator
this statement can be used instead of if this else that statements. to me it makes it look a bit more complex when reading it. this is the basic syntax. condition ? statement-if-true : statement-if-fa..
Use the parseInt Function with a Radix
This is the same as the parseint function, but you can also specify a base for the number which can be between 2 - 36. 2 is binary. Zeros and Ones. I think base 10 is the normal numbering system, but ..
Using parseInt in a function to return an integer or not
this function uses the parseInt function to return a proper integer or an error code if it can't. So this demo should return NaN for the Not an Int (x1235) and The int for the 00001235. I think that N..
Generate Random Whole Numbers within a Range
My testing for generating a random whole number within a range... 🤞 While the solution here works, it just loops until it gets a random number that is lower than the max, so not sure if this is th..
Custom 12 Grid using CSS Grid
For a while i have been using frameworks for their easy grid systems, like foundation and bootstrap. I guess this is a bit lazy and very bloated as you are loading the full css library and using about..
Radial Click Effect
shows the radial click effect like in the material design, so when you click a button it will show a click at that area with a nice animation. Uses CSS and javascript to generate this effect.
sublime text find and replace style tag
good if you have inline styles you want to remove using regex find and replace. in sublime press ctrl + H to do find and replace then paste in the style="([^
target data attribute with css
you can add a data attribite and target it with css using the following demo
apache redirect to https ssl from normal
good if you have apache and access to htaccess file to redirect requests to https version of the site. this one also includes a rewrite to index.php so if you don't need this remove the last line.
Objects in javascript
creating and using an object in javascript, the full version of this testing is on codepen
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.
JS Using typeof to check on string types
you can use the typeof operator to check what kind of variables you have.
defining a variable inside a function without using var will create a global variable
here is an example showing a variable defined within a function showing how it becomes a global variable if not defined with var
using local storage rather than cookies to store data (localStorage)
you can see what is stored in local storage by typing this into your browser console. localStorage Adding something You can add something to local storage by using the setItem function.
add something to the end of an array with push
you can easily add to the end of a javascript array with the .push function.
accessing part of a variable using its index
you can access part of a string variable using its index[1]
js check the length of a string
using the javascript .length property
PHP str_replace - find and replace part of a string
basic usage for the str_replace php function str_replace ( mixed $search , mixed $replace , mixed $subject)
using scroll-behavior: smooth css
This is a nice example of smooth scroll using just css. You can add it to the page by adding it to the html element html { scroll-behavior: smooth; } for this demo I will add some padding to ..
jquery click function
Bind something to a click event on an element using jquery. Needs to be combined with a document ready.
using a css grid area template
here we can specify areas for the grid. using grid-template-areas. once the areas are defined we can add the items into each area with grid-area: header in each element Use grid-area Without Creatin..
grid column and row spacing
here we add some additional spacing to our grid, we can get certain cells to take up 2 parts of the grid using grid-column: 1 / 3; to get box number 5 to take up 2 cols we can add grid-column: 2 / 4..
Random string generator function in php suniqid
Here is a a smaller version of the built in php function uniqid() uses letters and numbers and specify the length of the random string.
CSS Grid - Basic Columns
Here is a basic demo showing the usage for css grid columns. You just need to add the display:grid property and then add the grid-template-columns: adding the size of each column, adding a value for e..
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..
Applied Accessibility - Access Keys
Access keys can be applied to link elements and in chrome you can access them by pressing ALT+ SHIFT + [accesskey] for some reason when testing this in chrome the a key was not accessible, but g and ..
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..
image Checkbox Replacement for Forms
Some sites like to be a bit tricky and have some complicated form checkbox replacement which is not all that hard, just can be a bit annoying as you have to extract the images for this to work. Demo ..
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..
white space pre-wrap formatting
when you want to preserve line breaks in plain text without having to add br tags or p tags.
Core - File Structure
Core works on the following directory structure: //class//class/extends//css//db//images//import//inc//lib//pages//templates/ all of the core structure is fairly self explanitory core.class.php can..
Core Class - Basic Core Structure
A Core class that can be used as a base for all content types and uses the extend classes to define the database variables. So basically you can set up core class and then create sub extend classes to..
page load timer class
usage: $page_timer = new page_timer; // at the start of your code echo $page_timer->end(); // at the end of your code.
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..
assign array to variables in a loop
this will assign all items in the array to variables $p1,$p2.. etc. $p = "/1/2/3/4/5/"; $page_array = explode("/",$p); foreach ($page_array as $key => $value) { if($value > "") { ${"p".$pc..
favicon code meta tag
if you want to link a png as a favicon
generate a random color rgb code with php
this code will generate a random color every time its loaded using the rand function in php and generate something like this. .random-color { color:rgb(111,222,111); } PHP Code <?php ..
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.
Regular expression breakdown regex preg_replace php
/ - opening delimiter (necessary for regular expressions, can be any character that doesn't appear in the regular expression \( - Match an opening parenthesis [^)]+ - Match 1 or more character that..
remove all of an element in a string <h1>
good if you want to remove all of the instances of an element in a string like if you have a <h1> tag in your string and want to remove it you can use the following code. $additional = "some te..
get text between tags
Using DOMDocument you can get strings between tags Useful if you are processing raw html files with php function getTextBetweenTags($string, $tagname){ $d = new DOMDocument(); $d->load..
convert all images into base64 encoded
if you have a bunch of html with inline image links this will convert them into base64 images inline. <?php $html = "my html string with multiple image tags..."; $dom = new DOMD..
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..
read and sort directory contents in php
if you need to read in the contents of a directory in php and sort it by date header('Content-Type: application/json'); $dir = "./html/"; $file_type = ".html"; $out = ""; $files_array[] = ""; ..
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 ..
try catch test
try and catch example try { //enter code to catch file_get_contents($link); } catch(Exception $ex){ //Process the exception $page_content .= "Unable to process : $link"; }
tell wordpress to use the direct file method if its asking for ftp details
this usually happens if the permissions on the wordpress wp-content folder are not correct or writable. check the permissions are correct: (this is for apache, the user names might be different che..
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'] != ..
wordpress include jquery in theme functions
Add this to your themes functions.php file, to include your own version of jquery. if (!is_admin()) add_action("wp_enqueue_scripts", "jquery_enqueue", 11); function jquery_enqueue() { wp_deregi..
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 ..
wordpress use a shortcode in php gravity forms
good for using shortcodes in your wordpress templates
extract meta tags from url and return as json array
this will download the url and extract its meta tags returning a json encoded string, with json headers. If the url is accessable. <?php header('Content-Type: application/json'); if(!isset($..
csv read example
Not sure if this is the best or correct way of handling CSV file imports, but it worked for me. here is an example of opening a csv and importing the content into a class, you will need to create ..
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..
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..
simple html dom extract attributes simplehtmldom
this is if you have an element as follows, and you want to extract attributes from it. <img class="an-image-wow" src="image.jpg" data-image="data-image.jpg" alt="my alt tag"> list all its attr..
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..
pretty printing json with php
nice if you are working with json string data and just want to be able to read through the structure without copy pasting it somewhere else. $json_string = json_encode($data, JSON_PRETTY_PRINT);
extract meta tags from file or url as array
php has a built in function that can be used to extract the meta tags from a page url into an array. usage just pass it a url, if you call this file meta.php. usage: meta.php?url=http://my-url.co..
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..
search within files in a directory
During my quest to create a semi-static site that is searchable and fast to load. I thought while loading all of this content in with ajax and such that it would be interesting if i could do a text ..
count the elements in an array
seems easy, if you need to know the amount of elements in an array this is how you do it. good if you need to know where the end of an array is. code <pre> <?php $array = [ "yo", ..
google map with overlay data
Ever wanted to add a really slightly complex google map to your site? Working Example /* Always set the map height explicitly to define the size of the div * element that con..
round number with js
Round a number to two decimal places. code var rounded = Math.round(num * 100) / 100; demo Result... function round_val() { var val = $("#rval").val(); var rounded = Math.r..
truncate string using jquery
.test { padding:10px;border:1px solid #999;border-radius: 3px; } so lets say we had the following string on the page and we needed to make it a bit shorter for some reason. like if you dont have co..
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');..
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..
Slick Slider Carousel
Edit: Sorry this page was broken for a bit, its fixed now with working examples! 😛 Nice and simple slider / carousel
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..
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..
scrollbar replacement simplebar
a nice and simple scroll bar replacement code <link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" /> <script src="https://unpkg.com/simplebar@latest/dist/..
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..
parallax js scroll testing
Update: the demo on this one seems a bit broken, i have to fix it! :) you can view a working demo here: https://codepen.io/kruxor/pen/PpGLRG This is one that i had a demo of on codepen, and then code..
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..
tiny mce editor tinymce
Just loading the editor, as its useful for formatting stuff sometimes 😋. I usually use a function to load it into text areas with the tool bars + styles that i find useful. Example fu..
json loop load elements
Loading json content from a url can be tricky, there are a few different things you need to watch out for. Here is some examples using an example json feed. Load the feed this will load the feed and..
document ready wordpress jquery
Wordpress uses JQuery rather than $ to initialize so here is a workaround that allows you to still use the $ to access JQuery functions. Just incase your normal document ready is not working. tags: ..
testing chartjs
Update: 30 June 2020 I checked this code, and it was broken all fixed now. The issue with the demo included on the main site is that it was trying to run the chart js before the chart library was load..
set and check a cookie using js cookie
this library makes setting and checking cookies so easy its amazing! include this script <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.m..
random string generator guid
a nice easy one to generate a random string. i use this one to stop items from caching or you could use it as a guid. var nocache = Math.random().toString(36).substring(2, 15) + Math.random().toStr..
using regex with replace to replace all instances of something in a string
so you have a string and you want to replace a recurring character, use this to do it: String Example: var string = "a-string-with-dashes.txt"; var string = "a-string-with-dashes.txt"; string..
digital clock with jquery
Just a simple digital jquery clock that updates every second. Also added the dropshadow animation, not sure why... ;) .digital-clock { font-size:80px; } .transition { transition..
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..
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..
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..
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..
get select option form value with jquery
Handy if you need to get the value of a selected item in an option list basic code $("#select option").filter(":selected").val(); working demo Value 1 Value 2 Value 3 Value 4 ..
jquery jqueryui vue script includes
JQuery 3.2.1 <script src="https://kruxor.com/code/js/js/jquery.3.2.1.min.js"></script> jqueryui includes css and js JQueryUI 1.12.1 <script src="https://cdnjs.cloudflare.com/aja..
fancybox youtube showing video links in a lightbox
Updated version with code here do people still use lightboxes, it seems yes in some cases. ;) if you feel the urge to use lightboxes and need to link to some youtube videos this is how you can do it..
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..
jqueryui date selector with examples and code
This has to be one of the most used date picker items from jquery ui. And its usually the reason i even include jquery ui. Without using a theme this one looks pretty good. This version of it does n..
using vue and json data
Based on This Demo: https://jsfiddle.net/kkpLnv6k/ so i was looking through the jquery way of loading json data and was wondering what the point of loading it in with a vue.js instance is. I guess ..
preserve tabs in textarea when tab key is pressed
If you want to have the text tabbed when pressing tab in textareas rather than it switching fields. $(document).delegate('textarea', 'keydown', function(e) { var keyCode = e.keyCode || e.which;..
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..
make clickable element with clickable class
makes an element with a link into a clickable element
make any element editable
not sure if this will work on "all" or "any" elements, but it works on p tags. demo Type whatever you like here. code <p contenteditable="true" style='font-size:30px;'>Type whatever ..
simple dropdown multi level navigation ul li css
updated to work standalone and not effect other list elements on the page
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 ..
youtube extract thumbnail from video link
Good if you need to extract the ^^ for some reason. replace $v with your video id. raw links https://img.youtube.com/vi/$v/default.jpg https://img.youtube.com/vi/$v/hqdefault.jpg max size https:/..
copy image to data uri using chrome base64 encode
Update: 26 Aug 2020 - Fixed video and original image link all should be working now in chrome. Found this one useful if you want to convert an image to base64 encode and link it directly in css or ht..
make all links target new window
I was actually searching for a js way to do this, but i found this instead. Here is a really easy way to make all links target a _blank window. Just add this to your <head>. <base targ..
youtube embed no controls auto play iframe
Sometimes you want the video to loop and play with just no controls on it, this is how you can do it. You can still click to pause it, but the normal controls are gone. Also it seems you have to ..
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" ..
simple dropdown navigation ul li css
demo .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 16..
take full page screenshot screencapture using chrome dev tools
This isnt really html, but its handy ;) Here is how to take a full page screen shot using the chrome dev tools. Open dev tools in chrome and the page you want to capture the image from F12 Pr..
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..
del
So i was wondering how to add a line through text like this. <del>text<del/> You can also use <strike> or <s>. But as these are depreciated its better to use the <del..
video embed tag
to embed a video in a web page example Video not suported, download it here. code <video width="100%" height="340" preload="none" poster="myImage.jpg" autoplay loop controls&g..
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 ..
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..
bootstrap styled buttons
Just in-case you would like the shiny (flat/rounded) blue buttons from bootstrap without all the css. Example Button add the class btn and btn-primary to your link An Example Primary Button (bt..