Search Code
Search Code by entering your search text above.
MySQL to Sqlite converter

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

1:32 am, June 25, 2022
php functions
get string between other strings function php

So it turns out that i have had this issue before of finding a string in between other strings and made a function for it that i forgot about. 

5:00 am, June 24, 2022
using preg_match to extract text from elements

using preg_match to extract specified text from elements I also tried this search "if you have the start and end of a string extract the middle with php" as thats really all i need it to do, i have t..

1:41 am, June 24, 2022
Site Updates
Welcome Widget Card - Toggle

Testing the welcome widget with a more or less toggle.  This version seems to work, with a jquery slide toggle. 

5:07 am, June 10, 2022
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..

2:06 am, May 25, 2022
Site Bugs
Search Duplicating Bugs

Still having issues with the word above duplicating, not sure why.  Search Page PHP - Get Search Value $search_value_encoded = htmlentities($search_value); Check for Search value, and then ..

6:39 am, May 20, 2022
floating message box on bottom right of screen with close button

A floating fixed message box on the bottom right hand side of the screen with a close button. 

12:00 am, May 17, 2022
share to twitter html link only

share to twitter the html version of the link only

5:21 am, May 4, 2022
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;

1:32 am, May 4, 2022
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... 

12:43 am, May 3, 2022
git basics - git init, git commit, git all, git *

create a new repository git init the following code can be typed in a terminal window, once you have installed git for your OS. This will create a directory called git-test assuming you already hav..

3:23 am, April 22, 2022
add a button to an existing link using :after css

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

1:39 am, April 4, 2022
Footer Design and Redesign

I never usually look this far down on the site, but its a bit average... Lets fix it!   Some simple changes Just a few elements added and moved around a bit. Added another row to the f..

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

3:33 am, March 29, 2022
center a box in the middle of the screen

and then center everything in that box as well

11:57 pm, March 15, 2022
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.&..

4:33 am, March 11, 2022
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..

2:35 am, March 10, 2022
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.

6:02 am, February 20, 2022
php functions
convert a string into its html entitles using php htmlentities function

this takes a html string such as the following example and converts it into its html entities. it will take a character such as < and convert it into &lt; so that the string is not parsed as h..

8:48 am, February 19, 2022
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..

1:04 am, February 19, 2022
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 ..

4:17 am, February 14, 2022
Alpine JS
Alpine JS Testing

some simple tests using alpine js

10:28 pm, February 10, 2022
Slick Slider
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..

4:55 am, February 9, 2022
CSS Only Table Stacking Solution

11:24 pm, February 8, 2022
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..

4:00 am, January 28, 2022
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. 

1:33 am, January 18, 2022
bootstrap form basic

a nice simple bootstrap form layout example template

11:49 pm, January 17, 2022
get directions from google maps form embed

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

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

2:54 am, January 12, 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

5:55 am, December 29, 2021
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..

3:46 am, December 19, 2021
center align vertical 2 items in a container flex

i had this issue and i was pretty sure that flex center could fix it but it was causing the two items in the div to sit next to each other, which was annoying as it was a header and content, but i sti..

11:26 pm, December 14, 2021
simple javascript no library accordion

a simple button and div based accordion with a toggled indicator

4:07 am, December 14, 2021
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..

5:39 am, December 8, 2021
Slick Slider Carousel with Custom Next and Prev Buttons

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

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

12:58 am, December 6, 2021
Add custom symbol to ul li list and align text items

Pick a symbol from here. Then you can copy and paste it into the following css to change the list symbol, for more unique looking list items.  If the list items dont align correctly you will nee..

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

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

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

2:04 am, November 4, 2021
scroll left animation

1:03 am, October 29, 2021
load json data url or api with javascript

this loads a target json url or api using raw javascript so no jquery required with this one then logs the data returned to the console. 

4:43 am, October 26, 2021
Using props with Stateless Functional Components in React

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

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

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

5:15 am, October 19, 2021
How to Use PropTypes to Define Props in React

React allows you to define the types of props given to your components to make sure that invalid data is not sent as the prop to the element.  To do this you can define propTypes. You can defin..

4:40 am, October 19, 2021
How to Override Default Props in React

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

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

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

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

2:24 am, October 19, 2021
How to Pass an Array as Props in React

If you need to pass larger amounts of information to a component you can pass in an array rather than just a single variable. More information on the join method on the array can be found here. Here..

1:56 am, October 19, 2021
How to Pass Props to a Stateless Functional Component in React

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

12:24 am, October 16, 2021
How to Write a React Component from Scratch

Just testing my react component writing skills...

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

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

9:28 pm, October 15, 2021
set a cookie on click and then check if the cookie is set and dont show that message again

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

5:13 am, October 15, 2021
foundation three boxes with text align links to the bottom of element

For some reason i had the request to align the links in three boxes with different height text, not sure why they wanted them aligned, but i guess my task is not too question that but to fix it. ..

11:51 pm, October 14, 2021
How to Compose React Components in React

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

11:29 pm, October 14, 2021
How to Use React to Render Nested Components

It can be useful to take components and render them inside other components while still making them into seperate items. This shows how you can take each component and nest it within another one and ..

3:10 am, October 14, 2021
How to Create a Component with Composition in React

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

2:56 am, October 14, 2021
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 ..

12:17 am, October 14, 2021
How to Create a React Component using the ES6 class method

One way to add a react component is to use the Stateless Functional Component method, and another way is to use the ES6 extends syntax. This method seems more complex than the 1st for some reason mayb..

11:39 pm, October 12, 2021
What is a Stateless Functional Component in React

What is a Stateless Functional Component? A stateless component is one that can recive data and render it, but it does not manage the provided data or track changes to it.  This method creates ..

12:24 am, October 12, 2021
How do Self-Closing JSX Tags Work?

So in JSX all the tags must be closed, other wise it can break the element. for example: <div> must have a closing </div> and also for elements like <br> and <hr> must include..

12:10 am, October 12, 2021
How to Define a HTML Class in JSX in React

When writing JSX you cant add classes like you would in HTML so this code would not work: JSX <div class="my-class"></div> Instead we have to use className. JSX uses camel case for a l..

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

11:43 pm, October 11, 2021
How to Add Comments in JSX

To put comments inside JSX, you use the syntax {/* */} to wrap around the comment text. You do actually need the curley brackets, and have to add it under the other elements for this to wor..

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

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

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

9:18 am, October 11, 2021
timeline class and function

this is a class extend that generates a timeline based on structured data and order's the items by year decending. this code will not work out of the box as it has other requirements, but it is a goo..

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

8:55 am, October 6, 2021
create a 200 character summary from a longer html string

this is a quick function that can create a 200 word plain text summary from a html string. Also added the option to specify the char length of the string.  Function function create_summary($htm..

11:16 pm, October 5, 2021
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..

11:51 am, October 5, 2021
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 ..

1:13 am, October 1, 2021
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         $..

4:28 am, September 29, 2021
easy section wrap in foundation - 3 boxes responsive

this is a 3 box section responsive wrap in foundation, you can change this to large-auto if you want to have multiple boxes

12:23 am, September 29, 2021
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..

2:01 am, September 23, 2021
change selected color on input elements css

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

2:47 am, September 22, 2021
easy section wrap in foundation

i am always writing these wrap sections so i thought i would just add a basic one here, easy to copy and paste into a new section

4:33 am, September 20, 2021
adding a new line in javascript

i was writing a function where i needed to for ease of readability add a new line to the code, you can do this with the \n for the new line and then if you need the string to go to the next line then ..

6:53 am, September 17, 2021
get the value from a range input field with javascript

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

12:39 pm, September 15, 2021
animated duck on footer

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

5:56 am, September 13, 2021
twitter json feed testing

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

9:33 am, September 10, 2021
site documentation
make the view number zoom when mouse over or active

Lets make the view number in the header widget area a bit more exciting... Zoom on mouse over with css.  Lets add this effect here: Using Transform Scale In Css To Zoom On Hover Over Simpl..

1:24 am, September 2, 2021
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..

4:23 am, August 26, 2021
center mode slick zoom testing

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

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

12:44 am, August 10, 2021
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..

5:48 am, August 9, 2021
site bugs
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..

6:16 am, August 6, 2021
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 ..

3:52 am, July 31, 2021
vertically align text within a fixed height div using flex

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

9:55 am, July 29, 2021
white space break word css

controlling the white space of an element with break word, this can be handy if you need to fit something into a fix but the item has no spaces, otherwise usually by default this will overflow out of ..

5:36 am, July 27, 2021
check browser version and show a message

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

6:47 am, July 23, 2021
404 Error Page Codepen

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

1:16 am, July 16, 2021
set the amount of lines to show in a textarea field

using the rows will allow you to add the specified amount of rows to the textarea you can also specify the cols which does the amount of characters width  

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

4:04 am, July 10, 2021
get last month as a number with php

this will get last month and last month as a text month e.g: 06 and June

12:58 pm, July 5, 2021
using clamp js to clamp lines of text

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

11:17 pm, June 22, 2021
target last item css with :last-of-type

the :last-of-type selector allows you to select the last item of that type in the target container. in the following example i can target the last <p> tag and make the text bold and red.

4:22 am, June 21, 2021
target first item css with :first-of-type

the :first-of-type selector allows you to select the 1st item of that type in the target container. in the following example i can target the 1st <p> tag and make the text bold.

3:48 am, June 21, 2021
site documentation
for auto filled fields, need to change the text and background colours

for some reason bootstrap or the browser is doing this to auto filled fields.  according to my searching there is a pseudo class added to auto filled fields CSS input:-webkit-autofill { col..

12:11 am, June 17, 2021
jquery toggle menu testing

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

3:52 am, June 15, 2021
ajax callback to delete with sweet alert confirmation to make it cool! 😎

I recently wanted to to an ajax call back on a list of items just to make it easier to move around the place, rather than it reloading the page every time. So i thought why not also use sweet alert on..

4:29 am, June 11, 2021
site documentation
hero widget header - creates a nice looking hero item from a target uid and class

this creates a "nice" looking hero widget, just wanted to create something that looked decent and had an attached background image, surprizingly annoying to link items together. For some reason i kee..

12:10 am, June 11, 2021
site documentation
Latest from Code Widget

What generates the Latest from Code Widget? Code PHP $widget_latest_list = $class->list_all(        $start = 0,        $max = 10,      &n..

6:18 am, June 9, 2021
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..

1:59 am, June 8, 2021
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 ..

6:22 am, June 4, 2021
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. 

1:03 am, June 4, 2021
write string contents to a file with php

this will create a file called my_file_name.txt in the current php working directory usually this is the same one that the script is running in and write the text yay! into that file if the file al..

12:48 pm, May 26, 2021
backdrop-filter: blur(10px);

just testing this filter

11:34 pm, May 25, 2021
loop through a complex object json javascript

just a note to say that a complex object is an object with more than one nested object in it for example just kinda playing around with this one to get the handle on objects and how to access them C..

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

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

9:57 am, May 25, 2021
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:

4:12 am, May 10, 2021
check box highlight text area css

i just wanted to be able to highlight a text field if a certain check box was checked on a form in this demo below, if you click on the check1 checkbox it will give you an alert saying if the box is ..

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

6:46 am, April 30, 2021
form submit override with javascript

if you need to run some additional checks on a form before submitting it

5:48 am, April 30, 2021
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

1:05 am, April 26, 2021
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

5:01 am, April 21, 2021
pre-wrap preserve line spacing but also wrap where needed

a class to pre-wrap your line text this preserves line spacing but also wraps the text if the line goes out of its limit

3:38 am, April 20, 2021
change photoshop to show px rather than pt

if your photoshop is showing pt when you select font sizes, you can change this in the settings.  in the Edit menu go into Preferences and then Units and Rulers then you can change both uni..

2:11 am, April 7, 2021
clear a input field when it looses focus using onblur

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

10:56 pm, April 6, 2021
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 = ""page = urlop..

6:56 am, April 4, 2021
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 = ""page = urlopen(url)html ="u..

2:08 am, April 4, 2021
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 = "

1:30 am, April 4, 2021
css double page document preview with shadow

two div elements that look like blank documents with drop shadows

11:55 pm, March 30, 2021
blur the background image while keeping the foreground normal

this one uses the ::before element to add a background and apply the blur filter to it, while allowing the foreground content to still be non blurry

5:28 am, March 26, 2021
background image greyscale filter while foreground is still in colour

i had an issue the other day using a css filter which was causing all items within the element to also have that filter. using the ::before psudo class solves this issue

4:58 am, March 26, 2021
rounded click me button with icon

just a rounded button with a font awesome icon

3:28 am, March 19, 2021
replacement slider for ken wheeler's slick carousel tiny slider 2 [testing]

I have been looking for a little while for a replacement for the now classic and a bit depreciated, ken wheeler's slick carousel. After a bit of looking around i think the best replacement, is a non ..

5:23 am, March 17, 2021
json jquery ajax request

get json data with jquery using getJSON

3:34 am, March 15, 2021
add a moving chevron to your href link

this adds a right chevron that moves when the link is active demo: * note: this may not show up in light mode as the chevron is white, so would need to change the color it

10:10 pm, March 11, 2021
add click event to multiple link items and load the link content into a target div ajax

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

3:51 am, March 9, 2021
add click event to multiple link items

this allows you to get every a element in a-div class and stop the link from loading, so you can do other things with it like run a function or something else Functions used: Javascript Wait for th..

3:24 am, March 9, 2021
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..

12:21 am, March 8, 2021
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..

11:56 pm, March 7, 2021
using text-stroke to add a border to your text

this is quite good for webkit enabled browsers, and most of them are these days.  Check what is supported:   

12:23 am, February 22, 2021
slick carousel jump to a slide on element hover

jumps to a specific slider on hover over on an element this is working now, here is the example, mouse over the buttons to see the slide change. trying to add this: Javascript $( selector ).mous..

4:00 am, February 15, 2021
checking for spam comments function

with this function, you can scan through your incoming comments and check them for keywords the function will scan through the comment text and then provide you with a score as you get more spam com..

5:27 am, February 10, 2021
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  

5:32 am, February 8, 2021
Adding HTML Templates into TinyMCE Editor

This can be very useful if you are using the tinymce editor on your site and want to be able to add simple or complex html templates. Here is how to do it: Add this to your tinymce init Javascrip..

12:14 am, February 5, 2021
jquery page search [testing]

just testing this one at the moment for a in page search.  Based on this:  I would like to adapt this code to search through page elements and ma..

8:27 am, February 3, 2021
enable dark mode in tinymce

Here we have a darkmode verion of tinymce, ahh my eyes feel much better. The change to version 5 seems quite easy as well, as it uses the same init script as 4 still.  You need to also includ..

2:53 am, January 23, 2021
codemirror htmlmixed textarea

a working (hopefully) version of codemirror using the htmlmixed mode, not sure why its not doing code highlighting.

2:09 am, January 23, 2021
site bugs
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

8:24 am, January 22, 2021
using multiple text shadow

sometimes you want to use more than one text shadow, like if you want one with 2px on the bottom left and then one with 2px on the top right, so you can get a full outline or a more even shadow on you..

3:37 am, January 22, 2021
site bugs
add a youtube video preloader function, lazy load youtube [fixed]

I noticed that this list page: Loads about 29 (well exactly 29) youtube video embeds and was wondering if there was an easy way to replace these iframes w..

2:58 am, January 21, 2021
my default text shadow css

just a quick copy and paste for easy text shadow that fits in most places

12:41 am, January 19, 2021
site bugs
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.  

12:51 am, January 17, 2021
site bugs
style page numbers [fixed]

need to style the page numbers.  Before: After: Dark Mode Light Mode  

2:26 am, January 14, 2021
explode a string into an array

This uses the php explode function to split a string into an array based on a delimiter character. I always forget which order this goes in.

5:19 am, January 13, 2021
site bugs
linking search results to view pages [finished] 🤣

I was thinking it might be useful to link the search term to the page, so that it can be found more easily using that search. For example, Link this search text (somehow) to the post page and display..

2:44 am, January 12, 2021
site bugs
badge 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 Link Bug Status:Fixed Problem: The bo..

3:04 am, January 1, 2021
site bugs
badge placement is offset in list pages [fixed]

Another bug caused by the badge changes I think this can be added to a grid as well, and have the category on the left and the date on the right. Then need to align the category badge nicer.  ..

2:43 am, January 1, 2021
site bugs
top bar overflow issues [fixed]

So i was just browsing throught the site checking for random errors, which there are quite a lot. And noticed this one. Quite a large bug caused by overflow issues in the main header, i think this ..

2:36 am, January 1, 2021
make labels or badges look better

How to make these look better. The labels are used in the list items to show a small version of the category or sometimes the view count for a list item. How they look currently Dark Mode Ligh..

6:09 am, December 31, 2020
test page for the custom css 12 grid used on this site

This is my testing page for the grid used on this site, it shows elements and other things for use on the grid and other general formatting.

5:38 am, December 23, 2020
add a jquery date picker to your text box

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

12:56 am, December 22, 2020
use an emoji on your list items ul li

I didnt think this would work but it does somehow, i guess it may differ depending on what emojis are available on your system.

4:53 am, December 11, 2020
vimeo thumbnail generator

5:35 am, December 7, 2020
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

3:38 am, December 7, 2020
adding pagination to custom wp_query

you can add this to your custom wp_query making sure your query also has the paging passed through to it

12:29 am, December 4, 2020
download icon svg

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

10:28 pm, December 3, 2020
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. 

11:37 pm, December 1, 2020
using jquery appear for checking if an element is visible on screen

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

12:24 am, December 1, 2020
Monitoring Visible Objects on Screen

i found this one when researching how to detect visible objects on screen, and then doing something with them. This one does not use any external scripts to change the box colour as it becomes visible..

12:07 am, December 1, 2020
Fix Hover Over color on list group dark mode in bootstrap

How to fix the problem when switching to dark mode, the list group item text disappears when active. Here is what it currently looks like. To fix this we need to target the element and force the..

12:31 am, November 23, 2020
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..

3:03 am, November 18, 2020
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..

12:55 am, November 16, 2020
design elements
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..

2:43 am, November 9, 2020
using linear gradient background on text css

If you want to have a background gradient on your foreground text you can use this css.  I think currently this only works on webkit enabled browsers, but it looks pretty cool.

12:02 am, October 26, 2020
drop shadow text class easy drop shadow

makes it a bit easier to read light text on a dark background or vice versa

12:33 am, September 28, 2020
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..

12:07 am, September 28, 2020
create a rainbow background using css linear gradient

just incase one gradient is not enough for you we can also use it to create a rainbow background gradient

3:53 am, September 1, 2020
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..

5:14 am, August 31, 2020
Bootstrap 4 Center menu items in a navbar

Here we have an example bootstrap navbar you can find the original navbar here. I just want to center the menu item links so they dont appear over to the left on larger screens.  Add the follow..

12:05 am, August 28, 2020
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.

1:06 pm, August 25, 2020
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

12:15 am, August 19, 2020
stop tinymce replacing urls with relative url's

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

12:55 am, August 18, 2020
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:

1:13 am, July 14, 2020
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..

1:33 am, June 24, 2020
get element by class name with javascript and change it function

You may have seen the get element by id in javascript, which is great when there is only one element but what if you need to get the element using its class name The issue with classes is that they c..

1:59 am, June 17, 2020
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

1:26 am, June 17, 2020
loading content into fancybox modal using ajax

This loads content into a fancybox modal using an ajax request so you can specify a url to load into the modal when the button is clicked

4:30 am, June 5, 2020
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..

6:12 am, June 3, 2020
simple linear gradient overlay for an image to make it darker or lighter

i use this one often if i have a background image and some text over the top, you can darken or lighten the linear gradient values to match the text content and make it readable.

11:07 pm, June 2, 2020
fancybox modal popup example

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

6:59 am, May 29, 2020
Add a post date to your custom wordpress post listing

this is an example using: get_the_date: this one gets the post date the_excerpt: which gets the .. excerpt or summary text from the post and get_the_post_thumbnail_url which gets the image from th..

5:49 am, May 4, 2020
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..

2:53 am, April 17, 2020
for loop through an array with javascript

looping through an array with javascript using a basic for loop

12:18 am, August 23, 2019
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="([^

12:43 am, August 19, 2019
target data attribute with css

you can add a data attribite and target it with css using the following demo

11:52 pm, August 12, 2019
using transform scale in css to zoom on hover over

using a css transform will not effect other elements that surround it, so when you mouse over this div (or press it on your phone/tablet) it should scale to 1.5 times its original size.

2:57 am, July 16, 2019
Bootstrap Card Formatting HTML and CSS - Header and Footer

just a bootstrap card format with header and footer elements, makes a piece of content neat easily

2:38 am, July 10, 2019
PHP Finding the position of a string in another string using strpos

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

12:00 am, July 9, 2019
Applied Accessibility - Screen reader only css

This is how a screen reader only css markup can be added. The content will still be available to screen reader clients.

11:24 pm, July 1, 2019
Dropdown Box with Searchable Text

Here we have a dropdown select box, that you can type into to search the available options. No Javascript Required for this the browser does all the work. Press into the text box, and you will see a..

11:57 pm, June 30, 2019
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..

5:36 am, June 26, 2019
asp classic get a url and display it

gets a url and displays it using XMLHTTP

12:08 am, March 20, 2019
Using Flexbox rather than Floats

So i was still using float left for a bunch of elements i was working on the other day, sometimes it's hard to drop old techniques. What are the actual benefits of using flexbox rather than float lef..

4:27 am, January 16, 2019
white space pre-wrap formatting

when you want to preserve line breaks in plain text without having to add br tags or p tags.

10:23 pm, January 1, 2019
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..

11:33 pm, December 13, 2018
remove all of an element in a string &lt;h1&gt;

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

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

6:20 am, August 31, 2018
file get contents reads entire file into a string

you can use the file_get_contents function to read a file or a web address usage get a url content $homepage = file_get_contents(''); echo $homepage; get a file con..

6:20 am, August 31, 2018
wordpress enqueue slicknav and slick slider

add this to your theme scripts functions file here is the full one from HTML5 Blank // Load HTML5 Blank scripts (header.php) function html5blank_header_scripts() { if ($GLOBALS['pagenow'] != ..

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

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

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

6:20 am, August 31, 2018
detect window scroll position jquery

This one adds or removes a class if the document is scrolled 50 px near the top of the window. $(window).scroll(function() { if ($(document).scrollTop() > 50) { $('nav').addClass('shrink');..

6:20 am, August 31, 2018
Slick Slider Carousel

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

6:20 am, August 31, 2018
load google sheet data into json string with jquery

Just discovered this the other day, you can actually export google sheets data into json format and load it directly into your site, how good is that. A free mini basic database! Initially i was lo..

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

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

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

6:20 am, August 31, 2018
access hacker news json firebase api via jquery

Just a getJSON JQuery Request that will console log all of the hacker news top stories using the firebase api $.getJSON('', function(json) { va..

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

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

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

6:20 am, August 31, 2018
stacktable jQuery plugin for stacking tables on small screens

stacktable.js The purpose of stacktable.js is to give you an easy way of converting wide tables to a format that will work better on small screens. It creates a copy of the table that is converted in..

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

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

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

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

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

6:20 am, August 31, 2018
emoji data - version 1.0

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

6:20 am, August 31, 2018

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

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

6:20 am, August 31, 2018
truncate text long titles with text overflow ellipsis

this one can be useful for fitting text into smaller places without it looking broken. text-overflow: ellipsis; this basically adds the 3 dots where the end of the text used to be... Also if you are ..

6:20 am, August 31, 2018
transitions and the easy way to apply them

Would you like your element to transition nicely? well you can do it in about 1 line of css. .transition { transition: all 2s; } This is the one I usually use, as its not too slow. transitio..

6:20 am, August 31, 2018
cycle color using background

I found this the other day (well today actually) and i wanted to see how it worked. background-image: -webkit-linear-gradient(left,#D68AB0 0%,#D8CE5D 25%,#6BD85D 50%,#5DB9D8 75%,#D85DCB 100%); ..

6:20 am, August 31, 2018
recreate marquee element using css

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

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

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

6:20 am, August 31, 2018
target internet explorer with css and html

target all internet explorer versions with this <!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> <![endif]--> target ie 10 and 11 p { col..

6:20 am, August 31, 2018
darken background image using css

darken a background image using css only useful if you have overlay text or just want to add a nicer effect to an image, i usually find that adding this to an image with the text over the top makes it..

6:20 am, August 31, 2018
targeting the printed version of a page with media print

there are 2 ways to target the printed version of a webpage, you can do it with a @media print query inside your css, or you can link the whole style sheet and target the print media. target print ..

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

6:20 am, August 31, 2018
make your images look non squished when not using image backgrounds

Update: Fixed the code, you can see it here.  i deal with a lot of sites where they have a bunch of images listed and sometimes they can end up looking a bit sqashed unless you add a div and set..

6:20 am, August 31, 2018
css accordion basics

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

6:20 am, August 31, 2018
use font awesome on elements lists ul

good if you need to use font awesome in list items like ul lists, etc. .element { position: relative; } /*replace the content value with the corresponding value from the list below*/ ..

6:20 am, August 31, 2018
set transparent menu over background image

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

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

6:20 am, August 31, 2018
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(''); .mid-header { ..

6:20 am, August 31, 2018

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕


Subscribe to weekly update emails.
Random Quote
In this case my anchor this week becomes driving almost 2hrs outside of Atlanta to one of my favorite hard core gyms in the world.. MetroFlex aka The Dungeon. The gym owners turn the heat way up so it becomes a fun sweat box and the gym members just watch from afar and leave me alone. I happily drive myself long distances to find MY ANCHOR. Our anchor allows us to have balance, focus and be as productive as possible. And if you're in the middle of a heavy set and your headphones start to fall off your head, like mine did here.. well.. f*ck the headphones. Let em break and fall. You can always get a new pair, but the iron ain't ever gonna lift itself.
Random CSS Property


The overflow CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.
overflow css reference