fade in and out elements on scroll - css js html

php redirect

quick and simple php redirect to a url

React - Use State to Toggle an Element

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

Bind 'this' to a Class Method

Binding 'this' to Class Methods in React React class components allow you to define custom methods alongside managing state and props. These methods often need to access component properties li..

rotate an element when its hover

add and remove the class open to rotate

rotate an element when its selected

add and remove the class open to rotate

find a custom data attribute in simple html dom

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

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

flip card animation 3d front and back css html

3d flipping card with front and back content and animation

six box grid css html custom no gap

re-usable four box grid with no gap, plus stack on responsive 1024px

four box grid css html custom

re-usable four box grid with gap calculations

4 box custom grid with responsive

simple 4 box 25% grid with a responsive break at 1024px to stack the boxes in the grid

Kinda Crappy 3D button code

4 box custom grid css layout stack on mobile 1024 lower

Using the HTML tag details for easy accordions

Using the HTML Tag ` ` for automatic accordions.

wordpress jquery find and replace option text value

renames the Select Category in the option value 1 to Topics add to the footer, uses jQuery rather than $ but you can just switch to $ if not using the wordpress jquery init. 

wordpress block grid code

the basic wordpress grid column layout this is a 3 col layout

mysql to sqlite notes

  ### MySQL to SQLite converterhttps://pypi.org/project/mysql-to-sqlite3/https://github.com/dumblob/mysql2sqlitehttps://stackoverflow.com/questions/3890518/convert-mysql-to-sqlite ```pip instal..

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

sqlite escape string

simple sqlite php escaped string https://www.php.net/manual/en/sqlite3.escapestring.php 

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

show views list function

list items by the view count

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

Return a file extention from a string

This php function returns a file extention from a string.  I think it will only work if the string does not have any additional . in it.  I think a better way to do this function would be ..

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

Boots Widget change from widget to cat head and click function

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

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

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

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: 

slick slider section quick add

everything you need for a quick slide section

get current year in javascript

get and display the current year using javascript. a usage example would be adding the current year as a copyright to the footer of a page

find a text string and replace it in javascript

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

fancybox v3.4 - Mixed gallery

subscribe to newsletter section example

check if an item id exists in javascript

checks if 2 ids exist in one function and console logs the status here is the result in console log

shorten string php, string length php, clip string length php

I'm pretty sure i have done this function before but i cant find it due to the keywords being wrong! Here is a function that takes a string and shortens it and adds .. to the end, with the rest of th..

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

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

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.

cookie consent quick install script js html css vanilla

Found this super slick looking cookie consent script here, looks awesome, and its easy to install (i hope). https://github.com/orestbida/cookieconsent  CDN Links https://cdn.jsdelivr.net/gh/or..

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.

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

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

Factorio Megabase-In-A-Book

Just in case i decide to start up playing factorio again... Megabase in a Book Lets Play Book Contents Copper Smelting Iron Smelting Steel Smelting (from Ore) Steel Smelting (from Plate) Gr..

MySQL to Sqlite converter

# Converts a mysqldump file into a Sqlite 3 compatible file. It also extracts the MySQL `KEY xxxxx` from the# CREATE block and create them in separate commands _after_ all the INSERTs. # Awk is choos..

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

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

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

turn on or off error reporting php

Allows you to turn on or off errors in php, like the following: Warning: SQLite3::query(): Unable to prepare statement: 5, database is locked Warning: SQLite3::query(): database is locked in 

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

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.

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

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

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

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

set a css grid to auto to make it stack on mobile

to make a grid stack when the screen size gets smaller you need to set the grid items to auto when it gets to the desired screen size.  In this example once the screen size gets to 1024px or les..

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

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

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

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

add a button to an existing link using :after css

Adding a button style to an existing link using :after and css. Preview

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

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

javascript add class to element

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

update value of element using javascript

using innerHTML to update the value of an element

javascript attach a click event to an id not using jquery

I just wanted to bind a click to a button, not using JQuery, turns out its not that hard at all. Why am i using jquery for this stuff???...

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

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

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

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

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

Slick Slider Showing Multiple Items at a time

Just wanted to test some review type items showing more than one on slick, Seems to work well.  This shows two items at a time, but you can show as many as you like. Could be good for a testimo..

CSS Only Table Stacking Solution

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

add an outline to everything!

very handy for checking elements and other things on your page. this one line will add an outline to every element, so you can see where all the elements are located. 

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

loop to arr.length or array length

showing a simple loop that uses the length of the array to find the end of the loop. This just console logs each item in the array and stops the loop when it gets to the end of the array. 

get directions from google maps form embed

this is a random form that posts back to google maps showing the directions needed to get from one address to another location, im not sure where this would be usefull. Maybe on a site where you neede..

center image preview with lightbox and caption

I just wanted a thumbnail or preview of the image, where if clicked it would load into a lightbox, but the preview just shows the center of whatever image is added to it.  Note: I just picked ra..

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

add new random image with button

this appends a new random image from picsum.photos to the div with the id app

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

Common and Uncommon Meta Tag's and Social Meta Tags

I am writing an api that checks for meta tags so i thought i would add a list here of some of the common meta tag names that i found.  The ones prefixed with og: are facebook and linked in and s..

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

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

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

Sweet Alert 2 Methods and Examples

I love this alert replacement so i thought i would just add some of the examples here to show how awesome it is! You can check out the official sweet alert documents here if you want to browse throug..

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

Slick Slider Carousel with Custom Next and Prev Buttons

I had a slider the other day where i needed to attach some detached buttons, so added the following click events to control the next and previous events on the slider.  Note the class names: sli..

how to copy the folder path in finder

Moving from windows to mac is quite a shock, especially when you go from explorer which shows the file and folder path on every window in file explorer. Then we go to mac finder, which is nice, but h..

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

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

php get file and save it

gets a file from a url and saves it to your local server

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

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

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

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

show the current date in javascript

Returns the current date and time and sets the value in a div.  Also added a demo with setinterval to update the time and date in the div every second. 

How to Pass Props to a Stateless Functional Component in React

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

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. 

get element by id and hide it

This example gets an element by its id and hides it by setting the css style value to display none 

get element by id with javascript

gets an element using its id using javascript

set a cookie on click and then check if the cookie is set and dont show that message again

this script shows a message, and if the message is closed it will set a cookie to not show that message again for 1 day.  The cookie in this example is set to expire in a day, so then if you com..

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

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

foundation base html template - foundation template

just a basic html template with foundation and the required javascripts, good for a starter html page using foundation framework.

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 with JSX using babel

just wanted to see how JSX would work with react and babel, so this way you can write JSX and babel compiles it for use with react.  This is apparently not a good way to do things and can be qui..

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

react basic hello world

the most basic hello world using react js

bootstrap alert template

here is a templated bootstrap alert where you can switch the alert type with the @alert_type variable. Here are the different alerts: primary secondary success danger warning info light dar..

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.

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

stackable bio or biography list with portrait image title and text

a nice easily stackable bio or biography list done in foundation, just duplicate the bio-item and switch out the content and you have a nice responsive bio layout.  As its in foundation here is ..

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

get and show the featured image on a wordpress page template

this will extract the featured image on wordpress page if you are using custom page templates. 

document placeholder for a4 in portrait

a nice document placeholder image with dropshadow and transparency

landscape image document placeholder

A nice landscape image of a blank presentation format, in landscape mode with drop shadow.

change selected color on input elements css

this can be useful if you are using darker form elements and they happen to have white on white text, so you can target the :focus on the input. here is the text input before the colour change, the c..

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

change the box-shadow of an element with javascript boxShadow

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

change the background color of an element with javascript

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

javascript update item in object

find something in a javascript array by its array id and then update the value of that item i changed this from an array to an object as i wanted to use something other than numbers for the index Ob..

change the border radius of an element with javascript only

change padding of element with javascript

change the padding of an element with javascript only

get the value from a range input field with javascript

this script will retrieve the current value from a range slider html input if you want the value to only update when the slider interaction has been stopped change the oninput to onchange then it w..

animated duck on footer

Thought this was cool. How do i do it? Page Source: https://www.learninpublic.org/  Copy this section Lets see what is attached to it. So i can see from the classes its a tailwind based ..

twitter json feed testing

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

atom on mac and synchronise settings

installing atom and syncronise settings between windows and mac versions. Install the package Syncronize Settings the package is called sync-settings but searching for sync-setting and Syncroniz..

fancybox load iframe inline

All you need to load content in an iframe using fancybox modal javascript plugin. not quite an inline load, but not much script to get this going. 

using filter grayscale to make an image dark

lets make this image grayscale using a css filter

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

simulate a click on an element with jquery

you can actually use jquery to simulate a click event using the following .click() so as soon as the document is ready and you have jquery loaded it will run the click event for you, and should pop ..

center mode slick zoom testing

update : this is a tricky one to get working! I have done a lot of testing on this one, and got a demo working from a combination of the following links. the demo is still not 100% styled, but its..

gallery carousel center mode

i found this one here, looks cool. see if i can get it working like the demo.  currently getting this error on running the script i wonder if this is caused by a document ready issue? what is..

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

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

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

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

check browser version and show a message

a button that displays your browser version in a modal Demo (gif)

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

right align something in its element

easily align a block or inline block item to the right in its outer element

foundation grid for 6.6x - also known as the foundation xy grid

some foundation grid demos for 6.6x foundation you can get foundation here: https://get.foundation/ or here https://cdnjs.com/libraries/foundation  more docs on this here: https://get.foundatio..

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

fix for wordpress requesting ftp login details installing plugins

add this to wp config define('FS_METHOD', 'direct');

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

scroll down the page using a button click

scrolling down 600px from where you currently are on the screen demo vid

using clamp js to clamp lines of text

there is a css version of this as well but this version works in a greater range of browsers (i think) this one is not working for me... i think the overflow elipsis is still a better option than thi..

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

check if a ul contains a ul li

i could not find a way to do this with just raw css so i had to use jquery /sad

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

jquery check if a sub element exists

this can be done with .length

jquery toggle menu testing

using jquery toggle to show and hide the sub menu's

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

load the latest single item only

this function loads the lastest item from the selected class

load oldest item based on insdate then update the insdate to now - load_latest_single_update

i keep finding these functions that i wrote ages ago and forgot about so ill list them here so maybe i can remember them. I think this one was to loop through items, so it grabs the oldest item and t..

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

dropdown section

What generates the dropdown widget items? generated by the function generate_section_button() per class template file section-dropdown-bootstrap.html  

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

counting the occurrence of words in a multidimensional array

array sorting example The array Array ( [0] => Array ( [0] => Some [1] => great-looking [2] => special [3] => editio..

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

foundation accordion for version 6.x

yep the foundation does weird things to this sites css, but the demo still works if you want to use the built in foundation accordions. 

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');

submit a form with javascript onclick

submit a form with javascript, good if you want to submit a form with a button that is not within that form. the form will require an id

Slick Slider Carousel with Fade Transition

here is a working example of slick carousel with a fade transition between elements rather than a slide transition

add a toast alert when logging in with half moon

example of adding a document dom ready wait and then the script that launches a new toast message just adapting a php cms using halfmoon as the ui, its quite nice.  a bit bright in non dark mod..

clear a input field when it looses focus using onblur

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

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

css double page document preview with shadow

two div elements that look like blank documents with drop shadows

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

page scroll indicator research

I was wondering the other day how they do those page scroll indicators, i saw one when viewing this site: https://blog.wolfram.com/2021/03/24/the-solution-of-the-zodiac-killers-340-character-cipher..

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

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

change a select box back to its initial select value

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

select onchange

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

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

logo tickers marquee slow scrolling

logo tickers with a slide animation

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 and load the link content into a target div ajax

this will get a group of links with existing href targets and load them dynamically with an ajax callback you will need to also include the full jquery script as the slim one does not include the aja..

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

set the html of an element javascript

this will set the innerhtml value of an element

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

append a query string to all url's on a page

this should append the query string test=1 to all url's on this page. if it works... make sure its added to document ready.

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

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

github logo background png css

just the github transparent logo as a css class, yes it should probably be a svg, but here it is in all its PNG glory.

css slow zoom in animation

give a bit of extra interest to otherwise static images

using the last-of-type css selector to remove a border from the last item in a list

i find using the last-of-type css selector quite useful when there is a list or re-occuring items and the last one has to be slightly different from the other ones.  This allows me to target the..

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

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

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

spin rotate an element on mouse over [css]

i thought it might look good to spin this element around when the mouse is over it. Added the following css to second_nav_toggle.  

animate and zoom six elements on a timer [addClass, removeClass, setTimeout]

set of six elements that i wanted to highlight using a simple setTimeout and the addClass and removeClass  this also involves some css changes to get this working i would also like in the fut..

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

set maxHeight of element by id with javascript

sets the max height value of an element with javascript demo pending

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.

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:

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

chevron left

bootstrap basic grid layout

nice and easy copy and paste for a basic grid layout

Modern HTML5 Techniques for changing classes

vimeo thumbnail generator

play a sound every # of seconds

This plays a beep sound every # of seconds, to stop it just reload the page 4 Minutes is 240 4.5 Minutes is 270 5 Minutes is 300

bootstrap toggle element collapse

the example code for toggling elements, show and hide

download icon svg

a simple download icon in svg format, also added button example usage so you can use the svg within the button as an icon and change the fill colour on mouse over, plus it scales nicely on mobile devi..

add paging to wp list query

this is a raw template with list query for specific category names and also includes paging, if the post number is greater than 8 posts in the included categories. 

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

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

Leaflet Quick Start Example

just a quick start map embed for leaflet js an alternative to google maps

match a category id in wordpress and then add styles just for that id

this is in template-parts/content.php which may be different based on your theme or version of wordpress.  you can locate the category id in wordpress by going into categories and then clicking ..

country select javascript check which option is selected and show a hidden element

this shows a country dropdown and then if a selected country name is matched it will show the second part of the form for this test australia is the confirmed country

country select javascript check which option is selected

this is an example of how you can get the selected country value with javascript from a html countries dropdown

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

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

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

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

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

What is Core?

17 Aug 20 core is php content management system where the content is editable from the front end of the site, so there is no real back end to this system. i designed it to be easily extended so every..

Custom JS Tabs - No Jquery or Jquery UI

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

add a class or remove it based on window scroll location

if you inspect the header div you will see a class added to it when scrolled down, i have added additional margins to it so you can still see it even when scrolled. then you add a fixed property to m..

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

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

fancybox modal popup example

an example showing fancybox text modal window attached to a button to open it

wordpress main nav dropdown fix

this unsets the flex and allows the menu items to stack properly in a dropdown menu, not sure if this is reusable

Create a admin main wordpress custom menu item

matches the url and does something if it matches a certain string

force existing link to open in a new window with javascript

here is some javascript that grabs an existing link and then forces it to open in a new tab when clicked.

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

Get the documentURI with JS

This function gets the current document URI assigns it to the variable documentURI so it can be reused and shows it in the result area once you click on run function.

jquery document ready with foundation init as well

here is a jquery document ready that also loads the foundation js library. im not sure if the document foundation needs to be loaded in the document ready, but this way seems to work.

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.

get the current url in javascript

this will get the current address add it to a variable and show it on the result element

copy a file when the date of the source is newer than the destination

using xcopy and a loop i found this is a good way to make sure that changes in one file make their way across to another location using a windows batch file. this one loops every 5 seconds, i think yo..

tinymce remove auto p tags setting

this is the setting to remove the automatic p tag's when pressing enter and forces the use of br tags instead which can also be toggled, if you dont want it to add anything.

toggle div function with chevron up down toggle

showing an example of chevron toggles kinda like a manual accordion

document ready javascript standalone version no jquery

this is a version of a dom ready or document ready that does not require jquery

add a class to a div with an id javascript

a one liner to add a class name to an element with a specific id, for this to run it seems to need a document ready.

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.

PHP Finding the position of a string in another string using strpos

$dot_location = strpos($my_string,"."); The first version of this does not seem to work in all cases, so i have updated this with a working version here.

jquery click function

Bind something to a click event on an element using jquery. Needs to be combined with a document ready.

Making an image responsive using css

the following css will make an image display 100% its size and keep its aspect ratio if the screen size or element size gets smaller than the containing image. you should be able to drag the edge of t..

Change link target with JQuery

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

Drop Down Menu Swapping Left align to Right

this is useful if you have a nav that hits the right side of the screen and you want it to open on the left rather than the right side. you can see on the very right drop down item opens with its item..

Cut a string when it finds a certain character with PHP

ok so lets say we have a string like this: Hi there im a string. I am also part of the same string. And we want to shorten the above string into just:  Hi there im a string. This is what i wo..

PHP MySQL vs SQLite Count Items Function

I have been writing a few functions using sqlite and mysql. There are a couple of slight differences which can be seen in this count items_function.

How Many Days Since a Date and other Calculations

Here i calculate the number of days since a certain date in php and use the values for checking how much something costs per day.  Start Date Lets add the date that the item was purchaced. In d..

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

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

hide and show elements with js using getElementById and style.display

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.

for loop with a 5 increment

$css_out = "";$max_width = "50";for($i=0; $i<=$max_width; $i = $i + 5) {$css_out .= ".m".$i."{margin:".$i."px;}";}return $css_out;

Get the document root path in php $_SERVER['DOCUMENT_ROOT']

I ususally use this one if i am linking to files in the server document root folder rather than specifying ../directory/include.file.php i will use something like this:  $document_root = $_..

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

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"; }

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'] != ..

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

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

show errors in php with toggle

Toggle showing errors in php if your server is configured not to show them, good for testing. If you dont have this enabled it will usually just show a 500 error with no details of where the error o..

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

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

change the window title

 This is a pretty easy one liner But we can make it a bit more complex with jquery and add a counter It is questionable that crawlers and bots will see this so may be bad for SEO. document.t..

Slick Slider Carousel

Edit: Sorry this page was broken for a bit, its fixed now with working examples! 😛 Nice and simple slider / carousel

add this

To Add: https://github.com/processing/p5.js/wiki/Loading-external-files:-AJAX,-XML,-JSON

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

mithril testing

https://mithril.js.org/simple-application.html example this example is not going to work without npm Adding Elements How to add a link using mithril with target _blank m("a[href=https://mithril..

validate form data using javascript to check required html elements

for use in a javascript function to submit a form var form = document.getElementById('myForm'); for(var i=0; i < form.elements.length; i++){ if(form.elements[i].value === '' && form.elements[i..

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

clipboard copy js

for copying things to the clipboard, like the click to copy. Basic Usage Include the script <script src="js/clipboard.min.js"></script> add a field to copy to the clipboard..

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

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

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

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

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

jquery document ready

The most used script in jquery, loads things after the document is ready. $(document).ready(function(){ // do some stuff });

simple dropdown multi level navigation ul li css

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

using foundation 6.4 xy grid basics

Foundation 6.4 introduced a new xy grid which replaces the old row and large-x format here is a basic grid layout (foundation grid) add some style to show the cell border <style> .grid-x .ce..

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

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

emoji data - version 1.0

  Emoji Data version 1.0 This is a better emoji list that you can search by title ctrl + f emoji-data.txt # Emoji Data for UTR #51 # # File: emoji-data.txt # Version: 1.0 # Date: 20..

video embed no controls

embed a video, for use as a background or a slide element, or wherever you need a large video. I found that there was a bug in chrome (which is probably fixed now) that was ignoring the autoplay tag ..

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

css grid for responsive layouts and how to use it - 12 col layout

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

recreate marquee element using css

as the marquee element has been removed from html5 (which is probably a good thing) its now unsupported, but you can use css and keyframes to recreate it. Yay.. CSS Marquee Demo Some Marquee ..

more complex responsive tables css

i did a simple version of this before here but now im going to make it a bit more complicated and functional. table { width: 100%; border-collapse: collapse; } tr:nth-of-type(odd) { ..

remove border glow css from textarea on select

how to remove the glow around a text area when selected or in focus using css. Text Area Highlight Here is what it looks like just to show you where the textarea is while editing, but can look m..

simple dropin wordpress dropdown navigation css

this is good if you just want to drop in some css and get a dropdown navigation back using the default wordpress nav example of the default styles code (css) /* Menu Dropdown */ .nav ul { l..

css accordion basics

can we create an accordion with out using jquery ui? I think yes, it will be basic but also keeping it simple it probably a good idea. tried adding transitions to make the divs showing a bit smooth..

set transparent menu over background image

this is probably obvious, but i found it useful for those themes that look nice with a semi-transparent header sitting over the top of an image. I think ill do this as an external example, as its eas..

stack a table using css responsive

this can be useful for fitting tables into smaller screens, usually add this to a media query. #tableid td { display: table-row; width:100%; display:block; } and with a screen size added @me..

design nice block header

I saw this the other day and thought the color scheme looked quite nice. Ill see if i can replicate it here. @import url('https://fonts.googleapis.com/css?family=Raleway:300'); .mid-header { ..

wordpress get template directory

Get the current theme directory, good for use in wordpress templates. <?php echo get_template_directory_uri(); ?> Usage Example To link to an image located in the theme directory <..