HTML how to add an IMAGE! Quick HTML Tutorial

Just doing a bit of a series on HTML basics, i will list them here as i add them. We upload an image to imgur, and i show how to get the image link and insert it into html to show it! Super basic a..

HTML How to CENTRE Text Easy! - Quick HTML and CSS Tutorial

How to center text in html, there is a few options i discuss here and probably more that i missed out.  Codepen: https://codepen.io/kruxor/pen/poMOVYe

Wordpress add a sub menu to your plugin

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

css html vertical center

seems to break this layout... there must be a better way... 

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

Quick Embed code for Titillium Web Google Font

Quick Embed code for Titillium Web Google Font and a bit of test code to see if the font is working properly. Im not sure if including all styles of this font is a good idea. Who even uses italic thes..

display a subnav for the current wordpress page

good if you are doing custom page work and need to show the current sub nav somewhere other than the main menu. 

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 

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in simple_html_dom.php on line 722

Initial thought on this error is that there is a version issue. This only happened on version 1.11 for me, will check what other version i have.  Yep not sure why but the older version of php ht..

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

chart js line chart dont show below 0

had an issue where the chart was displaying values in the negative, and wanted to start the chart at 0 and no go below. the additional option fixed this issue.  Javascript options: { scales..

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.   

Fancybox Quick Video Modal Popup Code Inline

have you ever needed to add a quick video modal using fancybox. Probably not, but if you do, here is the code.

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

how to show your DNS in windows and then copy it to the clipboard in one command

Here is how you can show your current DNS server in windows command line and then copy it to the clipboard, ready for pasting.  Open Windows Command Prompt<windows key> + R Type cmd ..

pulse map dots

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

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

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

return author title from simplepie rss atom feed

i was just returning the author from this, and for some reason it returns a number. $class->$target_item = $item->get_author(); where you also need to pass the get_name function to this to ext..

imgur upload from php

function that takes an image and uploads it to imgur using a client api id, and then returns all the data. i did this one ages ago and did not make it into a function, but this version should work as..

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

Google Font Embed - Play Gaming Font

Quick Embed Codes for the google font Play, kind of a gaming style of font. As usual you can choose the @import or the link tags in the scripts section to embed this font quickly. Then apply the c..

loading a non processed item using the load_from_fields_array function

Example using the load_from_fields_array function  to load a single item where the processed value is equal to FALSE.

cookie consent quick install script js html css vanilla

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

simple file cache and check in php

just a quick cache bit of code, may need tweaking to actually work... i just added it here as i thought it was re-usable.  Also requires simple_html_dom library.

font quick embed inter all styles google font

For some reason every time I go into google fonts website it seems to get more and more complex, i dont really care too much about all the font details i just want the embed link! Anyway... Maybe im g..

How to switch desktops in windows 11 with keyboard

this is just a quick one as i could not see the option, which you would think they would add to the new desktop switching screen.. Anyway here is how you can switch desktops in windows 11 and create n..

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

using preg_match to extract text from elements

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

using figcaption and figure for your images

So i usually add images in a <p> tag with just an <img> tag and then <br> and the image caption, but there is actually a tag for this that i should get used to using. The <figcapt..

redirect www to non www

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

Welcome Widget Card - Toggle

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

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.

php convert number with k on the end to full number

I have a function that converts raw numbers into shorthand or human readable numbers, but was wondering how to convert these back if they are stored in that format, and also makes it better if you are..

basic radio checklist - check and item and get its value in a textarea

a basic radio input type checklist, where you can only select one of the items in the list.  Ok so no longer so basic.  This script allows you to fil the value of a text area with the valu..

Invalid argument supplied for foreach()

Fix for Warning: Invalid argument supplied for foreach() in /var/www/html/pages/seo-meta-tag-search.page.php on line 204 As this is just a warning, i may not have noticed it originall..

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

jquery load wait function

load something in jquery, wait for it to load then do something else

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

Auto Changing Image URL

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

using the :user-valid CSS pseudo-class

It seems this is currently only working in firefox. Here is a test of the code in firefox, you can see if you add a "valid" email address it will add a border and a green tick.

Footer Design and Redesign

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

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

best way to write html into an existing page javascript

this probably isnt the "best way" but it is a way that works. say you want to add some elements to a page with javascript this is a method to do it.  Add an element, before including the script..

Core Function : list_search_by_class_return_links - List Searches by Class Type and Return Links

Function that list's the latest and top searches by the class name and return a list of links, with the search totals on them.  I wanted to extract the top searches and the latest searches by da..

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

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

Converting PHP to Javascript for State Extraction by numeric value Australian State Names

I cant even remember when i originally wrote this php function, but now i need to have it in javascript, should not be much change to it to get it working.  The original function takes an austra..

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

svg animated line testing - shooting star right

I found this on a random site i was looking at it took me a while to extract the animation, but i found it and its working below.  There is shoot right and also shoot left, if you are that way i..

Auto Create HTML Code Snippets

make anything within a <code> tag into a nice looking code snippit with highlighting via prism. To get this code to make a snippit, you need to: Give an element a .make-snippet class and it's ..

add a toggle with jquery and change the class

With this code I just wanted a quick bit of inline code that could add a toggle to an element or multiple and also switch its class to make it show that the item is toggled on or off.  Here is t..

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. 

content editable p tag with spell check enabled

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

function to delete older sqlite records when the limit is reached

I had an issue where a sqlite database was hitting over 100,000 records and this was causing quite a lot of lag and crashing on my server, the number of records was not really meant to be this high, s..

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 the content of a url get the content of a link with php and test if the result is empty

Where $import_url is the target URL. 

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

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

Use destructuring assignment to swap the values of a and b

Use destructuring assignment to swap the values of a and b so that a receives the value stored in b, and b receives the value stored in a. I was havi..

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

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

Console Tips and Tricks

Here are some quick commands for the console. Getting to the console in your browser Press F12 and Find the console tab. That little blue > there is the console. this is in brave or chrome, bu..

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

Add custom symbol to ul li list and align text items

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

install cmatrix on mac m1

For some reason i thought the mac would have apt or apt-get to install packages, but apparently not.  Here is how you can install cmatrix a matrix emulator or other unix type terminal apps on ma..

how to embed google fonts icons

For some reason when i go to embed a google font icon, they dont seems to have any obvious way to actually use it, i can find the icons ok here. But then when i go and use it it links to a how to embe..

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. 

allow internal networking connection from virtual box vm

This will allows you to access a shared folder on a Windows 10 Virtual box from Windows 11. Probably also works with other windows versions, but only tested with the host OS beinf windows 11 and the V..

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

list all array json function list_all_array_json

I wrote this a while ago, and i always forget the complex functions i write so ill add it here.  This loads all fields and then returns them as json. 

javascript random string to put on url for cache

I was having a bit of a cache issue with a external css file, so i thought i might fix this by appending a random query string to the file name. This should force the browser to recheck the file each ..

using php parse_url function to remove the query string from a url

I recently had to remove the query string from a url, the bit after the ?key=1 or whatever is after the actual url.  I initially thought i could just use a explode function on the ? which would ..

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

load json data url with jquery

loads a api or json url or endpoint using jquery and console logs the result Tested working on my test json file, check the console and it should be there. 

add a divider to your dropdown nav toggles

good for seperating menu sections in the same dropdown item add this to your toggle <li><hr class="dropdown-divider"></li>

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

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

javascript basic test array and loop

Here is just a basic test array and a loop to show a basic loop through the test array.  With the loop i use the length of the array as the max variable, so the loop stops when it hits the array..

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

using the $_SERVER['HTTP_REFERER'] to check referring pages

shows how you can display the contents of the $_SERVER['HTTP_REFERER'] tag in php to show referring pages i read in an article that this is stripped out of HTTPS requests, but it seems to still be wo..

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

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

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

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

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

views list function for checking what views have been made on the current week

this is related to the views class that i added with monthly week number and yearly views, this is the function that i use to extract the top viewed pages for the week num, month num and year num. I ..

load array load all items from an array while in a sqlite load sql loop

i find this useful when loading a bunch of items in a class while looping through data, rather than assigning variables manually i just add the array of item names into the class to begin with and the..

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

responsive three box section with tabular data or table data

here is a section in foundation with 3 hero boxes with images on top, and then a title and some tabular (is that the same as table?) data in each box, so could be good for some kinda products and then..

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

hidden scroll anchor for custom scroll position

just incase you need to link to a scroll anchor that is not in the place where you need it.

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

load from fields array php class function

this class function loads from multiple fields from an array, much easier than passing in a bunch of variables into a function nice and clean, the only issue is you need to remember what fields to add..

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

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

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

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

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

creating embedded php code from a database field

i actually dont know why i didnt think of doing this earlier, i already have the php code field in these code articles. I thought why not embed this code into an actual file and then run it as a test..

create directory with php create folder with php

i thought i had already done this somewhere but i guess i didnt. Anyway here is how you can create a directory with PHP. PHP mkdir("directory_name") yep its that easy just make sure you are in the..

bootstrap dark mode

Bootstrap Darkmode https://github.com/vinorodrigues/bootstrap-dark/blob/master/README.md#method-1 https://github.com/vinorodrigues/bootstrap-dark    CSS Dark Mode Preparing for dark mod..

how to bundle css files together using windows or mac

so i was wondering how to do this the other day using some modern end tools, and i found this way just do it straight from mac or windows.  lets say i have these css files main.css style.css..

check if a product already exists by its md5

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

still more comment spam

this is getting annoying now. so much spam. i already have the google recapture, but spam is still getting through. who runs this stuff, bots i guess. annoying.  update: 10 August 2021 Still..

split a string into links using the comma

this is a common function for some field data, lets say you have a string like this. category one, category two, another category in one field or string but i want it to display like this category ..

add some foundation tabs working example

they show the tabs here on the example page, but there is no full working code... for some reason. So i thought i would add one here. Hmm foundation makes this site look weird, and very bright! :P ..

extract youtube image from video url

showing how you can get the image wallpaper in different sizes from a youtube video I used to have this tool a while ago, it just passes the video id and extracts the images and also can produce the ..

simple php ip blocker

just to quickly block annoying ip addresses using an array and $_SERVER['REMOTE_ADDR'] so i woke up this morning to find 200 comments from this spam ip, here is a simple script that will block that i..

vertically align text within a fixed height div using flex

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

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

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:  

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

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

hide the third row in a table with css

just wondered how hard it is to hide the third column in a table with css, rather than deleting it in the html here is the test table cell 1a cell 2a cell 3a cell 4a cell 5a cell 1b ..

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

this is a weird one table underline appearing and dissapearing on mouse over

very strange that also reminds me that i have to get rid of these random searches idea: i was thinking of adding a more detailed hit system where it can record the month and also the year of the..

for auto filled fields, need to change the text and background colours

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

use a list group for listing by category page [todo]

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

Comments Listing should be a custom list rather than using search

For some reason when i listed the comments under posts on this site, i used the search function and then searched for the related uid, which maybe was easier at the time than adding an additional cate..

ajax callback to delete with sweet alert confirmation to make it cool! 😎

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

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

rtrim strip white space or strings from the end of a string

good for removing trailing , or any repeating character from the end of a string

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. 

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

json test objects (or arrays)

here is a couple of test objects in external js files just in case you need to test some ajax loading functions or need external objects, i mostly use them in my testing. Basic JSON Object with 3 ite..

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

add chevrons to a ul list

adding a chevron to a list item rather than the default dot and the moving one, here is the demo:

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

check column exists in table sqlite

this will return 1 if the column name exists in the table or 0 if it does not

adding an item to an array with php

how to add items to an array in php here is a working sandbox version of this code: sandbox. 

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. 

allow a title to be in the foreground while still having a before overlay for the background

i came across this issue recently, where a title was within an element and it needed to have a background overlay while still allowing the title to be on top of the overlay.  I found the fix was..

passing in arrays to your functions rather than using variables

this is probably an old technique, but i discovered it the other day when i was playing around, and i thought wow i should do this to all my functions, i cant see the downside, apart from having to re..

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

form submit override with javascript

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

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

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

python import and print url

here is an example script that imports html from a url and prints it add it to a .py file and then run it with python3 filename.py Python from urllib.request import urlopenurl = "http://olympus.rea..

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

Creating a chart about charts.css with charts.css from the command line

Creating a chart about charts.css with charts.css from the command line: BASH (      echo "<table class='charts-css bar show-labels show-heading'>"      echo "&l..

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

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

inline form field padding

I noticed this when doing this demo (get the value of an input form element).  Looks like inline form elements look pretty average when a button is added to the same line. i think this should..

get the value of an input form element (input value)

add how to get the value of an input form element with javascript for some reason i can get this working with: Javascript console.log(document.getElementById("my_input").value); but when trying to..

minutes to decimal calculator javascript version

trying to do a more simple version of this post. https://kruxor.com/view/code/NIjAQ/quick-tool-to-convert-time-into-decimal/  the php version requires post back to the server, so i think this c..

check if a certain query string is set then apply it to all url's on the page

this script will check if a query string is already set, and if it matches it will append the same query string to all url's on the page Here is the test link with the field, and all url's on this pa..

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 check the temperature of the pi using command line

to get the temperature of the pi in shell or command line type the following: BASH vcgencmd measure_temp This measures the GPU temperature. Which should generate something like this: To get the..

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

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.

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

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  

calculate a percentage (dec) difference based on two numbers

I wrote this function a while ago, but im not actually sure what its suppost to do, so ill test it here and see what it returns. I think after running this function it returns the differents in perce..

Adding HTML Templates into TinyMCE Editor

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

jquery page search [testing]

just testing this one at the moment for a in page search.  Based on this: https://codepen.io/chriscoyier/pen/ExgqWab  I would like to adapt this code to search through page elements and ma..

How to set a cookie and expire it in 30 days

Here is some basic usage for the js cookie library. Include the following script. Or you can grab the latest version at the cdnjs website. HTML <script src="https://cdnjs.cloudflare.com/ajax/lib..

change images to upload file also to imgur [reported]

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

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

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

fix view page for search links [reported]

its still showing raw data on these view pages e.g https://kruxor.com/view/search_links/KJYU0/mt-maunganui/  Looks like that example is already out of date, here is a new one: https://kruxor..

checking the current url and then marking a link active based on that url

i want a script that can check the current page uri and then match it to a list of links to be able to add an active class that survives page reloading So here we go... 1. Get the current page url. ..

linking search results to view pages [finished] 🤣

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

badge border colour is too dark or light on number badges [fixed]

I noticed that the badges here were to light, so i must have missed something when updating the badge css. Demo Linkhttps://www.kruxor.com/search/code/site+bugs/ Bug Status:Fixed Problem: The bo..

badge placement is offset in list pages [fixed]

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

top bar overflow issues [fixed]

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

make labels or badges look better

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

easy twitter embed code

Just need to switch your twitter user name to show that feed here. Back when i used to use twitter, apparently. 

How to add jquery to squarespace site

I dont use square space, but if i did and i wanted to use jquery in it. This is where i would add it... ;) Settings > Code Injection > Header Then add your script, like this one:

make an image white with css using filter brightness and invert

If you have an icon or something with transparency this can be useful if you dont want to have to edit the image and create another copy of it you can apply the filter brightness and invert. You can ..

add a jquery date picker to your text box

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

foundation old grid format

This uses the old foundation grid style, i think it was a float grid, not sure which version it was maybe version 5 foundation. Somewhere around here: https://cdnjs.com/libraries/foundation/5.0.0&nbs..

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

background image on 3 boxes not scaling correctly fix

So i had this weird task the other day, where there was three boxes with a background image set. When the screen changed size the image would go out of wack. The fix?  Pixels rather than Perce..

Windows Emoji Shortcut

I keep forgetting this shortcut so ill add it here. Windows Key + . Windows Key + ; These both pop open the emoji menu in windows. Enjoy Your Emoji's 😘

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

check that a number is in the correct range based on a form selection

This script will check if the number is correct based on a form selection this can be used for checking that a postcode matches a state value or something similar Lets grab the html select form from ..

how to install js socials for social media share buttons and make them rounded

This should be a nice quick one on how to install js socials which add social media sharing buttons on your pages.  Yeah i always just ignore these as well, but hey some people may use them?? H..

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

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

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

generating all css colours with php?

I was looking at doing this just to generate all css colours, i think the only issue is there is a lot! You can do this with rgb(0,0,0) all the way up to rgb(255,255,255) how many seperate colours is..

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

php countries array to dropdown form element

here we generate a form dropdown from a php countries array using the country code as the name of the form option

wordpress get the current category id name and slug

This gets and displays the current category id in a wordpress blog post if you have the current id, if not you can leave the $post_id blank and it should see if there is a category loaded to the curre..

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

extracting the useful bits of bootstrap

Back in the early instances of bootstrap they used to provide a build system for the individual components. It seems that these days its all or nothing, or use some kind of build tool to include the b..

Bootstrap 4 Center menu items in a navbar

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

Fix for Fatal error: Uncaught Error: Call to undefined function file_get_dom() simplehtmldom simple_html_dom

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

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

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

stretching an image to fit in a banner image with gimp

sometimes i need to get a square image to fit in a rectangle box this is a way to do it with GIMP get a square image, or pick any image (pexels) fit it in this box.. For this one we will be using ..

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

add a tag to wordpress header from a plugin

when i googled this it just showed me plugins to add and remove things from the wordpress header. here is how you actually add your own tags to the wordpress header. This function will add the tag hi..

fixing the website footer and making it less ugly

Here i show you in a couple of steps how to make the footer on this site look nicer, while actually doing it. Here is what the footer currently looks like. Yep pretty average looking. Lets add a ..

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.

javascript isset equivalent

i was just looking for an equivalent to the isset in php for javascript, i was initially using .length but this can still cause errors so i found this solution. if (typeof my_var !== 'undefined') {}

making var_dump look nice

i was var_dumping an array the other day, and it comes out like a massive string you cant read. a fast way to make this readable is just to add some pre tags to it.

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.

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

load a youtube video in a fancybox modal

With just a couple of lines of js and html you can load your video links in a modal lightbox. Get the latest version of the fancybox scripts (just the links) from here: https://cdnjs.com/libraries/fa..

using css linear gradient for background overlays

a few examples using css linear gradient for the background

ES5 vs ES6 Object Example

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

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.

Complex Arrow Function Example

Here is an example using a Complex or Higher Order arrow function, which slightly reduces the amount of code lines used. This should return the square root of all positive integers passed into it.

Writing Arrow Functions with Parameters

you can pass parameters to arrow functions as well as shown in the following demo, these functions are only meant to be used once where normal functions can be re-used.

using let rather than var

Using let rather than var and use strict can avoid some overwriting of variables i will write a function here that shows how let throws an error. This function now gives an error in the console. Uncau..

Generate Random Whole Numbers within a Range

My testing for generating a random whole number within a range... 🤞 While the solution here works, it just loops until it gets a random number that is lower than the max, so not sure if this is th..

Custom 12 Grid using CSS Grid

For a while i have been using frameworks for their easy grid systems, like foundation and bootstrap. I guess this is a bit lazy and very bloated as you are loading the full css library and using about..

card counting example from fcc

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

using switch with multiple identical cases

this can be used if you have several outcomes where the return value will be the same by omitting the break from the cases before the final

defining a variable inside a function without using var will create a global variable

here is an example showing a variable defined within a function showing how it becomes a global variable if not defined with var

add something to the start of an array with unshift

unshift is the opposite of push where push adds to the end of an array unshift will add to the start of the array.

Multidimensional Array

sounds complex, but it's not really here is an example of a Multidimensional Array in javascript. It's just one array nested in another.

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

Move any element with css offsets

Make any element moveable without moving other items around by making it position: relative;

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.

PHP str_replace - find and replace part of a string

basic usage for the str_replace php function str_replace ( mixed $search , mixed $replace , mixed $subject)

using scroll-behavior: smooth css

This is a nice example of smooth scroll using just css. You can add it to the page by adding it to the html element html { scroll-behavior: smooth; } for this demo I will add some padding to ..

using a css grid area template

here we can specify areas for the grid. using grid-template-areas. once the areas are defined we can add the items into each area with grid-area: header in each element Use grid-area Without Creatin..

grid column and row spacing

here we add some additional spacing to our grid, we can get certain cells to take up 2 parts of the grid using grid-column: 1 / 3; to get box number 5 to take up 2 cols we can add grid-column: 2 / 4..

Random string generator function in php suniqid

Here is a a smaller version of the built in php function uniqid() uses letters and numbers and specify the length of the random string.

CSS Grid - Basic Columns

Here is a basic demo showing the usage for css grid columns. You just need to add the display:grid property and then add the grid-template-columns: adding the size of each column, adding a value for e..

Applied Accessibility - Tab Index

using the tabindex property on elements allows you to press the tab key while on the page and tab through the elements depending on the order specified by the tabindex. tab index can be applied to man..

Applied Accessibility - Access Keys

Access keys can be applied to link elements and in chrome you can access them by pressing ALT+ SHIFT + [accesskey] for some reason when testing this in chrome the a key was not accessible, but g and ..

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

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

using the disk free space function in php

here is a built in php function that will show the amount of free space available on your server.

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

function to create a uid from html

this function converts a html string into a uid or unique id type string, its not actually unique, but its a string that can be used to make the title of something that contains html into a usable str..

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

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

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

human_filesize php

function via here http://php.net/manual/en/function.filesize.php#106569

sqlite check table name exists

check that the table name exists in a sqlite database, this function it taken from a class.

replace anything in brackets in a string using preg_replace regex php

Lets say we have a string like this hi there im a string (not really a string). and we want to remove this bit (not really a string) We can do this using the following regex (preg_replace) $strin..

Get Current Page URL PHP

There is a few methods of getting this but here is a simple one. Replacing the http or https manually.  $current_url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"; Here is a more complex ..

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

uniqid random string

Here is a smaller implimentation of the built in uniqid() function. Good if you want to generate smaller unique strings for url's uniqid example suniqid(5) function suniqid($len = 5) { $..

wordpress show the page content for use in a template

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

basic for loop

I know i always forget this so ill add it here, see if i can remember it. This should count to 10 Out 0 1 2 3 4 5 6 7 8 9 10

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

csv read example

Not sure if this is the best or correct way of handling CSV file imports, but it worked for me. here is an example of opening a csv and importing the content into a class, you will need to create ..

wordpress check home and not home for banners and things

this quick function will check if the page is home or not good if you want something on the other pages and something just on the home page in the header or that kind of thing. i have tested this i..

sqlite delete data older than timestamp days

good if you need to delete data older than a certain date, i tested this and it seems to delete data older than 2 days but might have had the time stamp incorrect or something. DELETE FROM $db_tabl..

simple html dom extract attributes simplehtmldom

this is if you have an element as follows, and you want to extract attributes from it. <img class="an-image-wow" src="image.jpg" data-image="data-image.jpg" alt="my alt tag"> list all its attr..

pretty printing json with php

nice if you are working with json string data and just want to be able to read through the structure without copy pasting it somewhere else. $json_string = json_encode($data, JSON_PRETTY_PRINT);

wordpress show posts loop with feature image thumbnail

this is surprisingly hard to find code that lists all blog posts in a template with the feature image that does not use an additional plugin. you shouldnt need a plugin to do this as its already built..

search within files in a directory

During my quest to create a semi-static site that is searchable and fast to load. I thought while loading all of this content in with ajax and such that it would be interesting if i could do a text ..

wordpress show the post content for use in a template

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

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

count the elements in an array

seems easy, if you need to know the amount of elements in an array this is how you do it. good if you need to know where the end of an array is. code <pre> <?php $array = [ "yo", ..

google map with overlay data

Ever wanted to add a really slightly complex google map to your site? Working Example /* Always set the map height explicitly to define the size of the div * element that con..

truncate string using jquery

.test { padding:10px;border:1px solid #999;border-radius: 3px; } so lets say we had the following string on the page and we needed to make it a bit shorter for some reason. like if you dont have co..

detect window scroll position jquery

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

flems embed in url

Flems.io is a single-file, embeddable Web sandbox. It keeps all its state in the URL, so just make your changes, copy the URL from the address bar, and send it wherever you please. Most popular link s..

Slick Slider Carousel

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

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

parallax js scroll testing

Update: the demo on this one seems a bit broken, i have to fix it! :) you can view a working demo here: https://codepen.io/kruxor/pen/PpGLRG This is one that i had a demo of on codepen, and then code..

do something later with settimeout or loop with setinterval

setTimeout This one will run a certain time after the document loads. So if i want to execute something 5 seconds (or so) after the page loads i would do this. You will need to check your console..

json loop load elements

Loading json content from a url can be tricky, there are a few different things you need to watch out for. Here is some examples using an example json feed. Load the feed this will load the feed and..

document ready wordpress jquery

Wordpress uses JQuery rather than $ to initialize so here is a workaround that allows you to still use the $ to access JQuery functions. Just incase your normal document ready is not working. tags: ..

testing chartjs

Update: 30 June 2020 I checked this code, and it was broken all fixed now. The issue with the demo included on the main site is that it was trying to run the chart js before the chart library was load..

set and check a cookie using js cookie

this library makes setting and checking cookies so easy its amazing! include this script <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.m..

random string generator guid

a nice easy one to generate a random string. i use this one to stop items from caching or you could use it as a guid. var nocache = Math.random().toString(36).substring(2, 15) + Math.random().toStr..

find all elements add class jquery

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

stacktable jQuery plugin for stacking tables on small screens

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

jquery clone and append elements

This jquery function clones an element and appends it to another one.  Here is the basic code: $( ".clone-me" ).clone().appendTo( ".append-me" );I also updated this to work with just raw js, so..

show the year with js

just a simple one liner that will show the current year, so no more need for static years in html footers! var d = new Date(); document.getElementById("year").innerHTML = d.getFullYear(); Usage E..

get select option form value with jquery

Handy if you need to get the value of a selected item in an option list basic code $("#select option").filter(":selected").val(); working demo Value 1 Value 2 Value 3 Value 4 ..

fancybox youtube showing video links in a lightbox

Updated version with code here do people still use lightboxes, it seems yes in some cases. ;) if you feel the urge to use lightboxes and need to link to some youtube videos this is how you can do it..

jquery accordion

here is an easy drop in if you need a quick and dirty accordion sometimes you just need something quick, here is mine for the jquery accordion also changed the default selected tab to green rather t..

jqueryui date selector with examples and code

This has to be one of the most used date picker items from jquery ui. And its usually the reason i even include jquery ui. Without using a theme this one looks pretty good. This version of it does n..

using 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 any element editable

not sure if this will work on "all" or "any" elements, but it works on p tags. demo Type whatever you like here. code <p contenteditable="true" style='font-size:30px;'>Type whatever ..

random emojis copy and paste

 Update: this is a better list that you can search by title ctrl + f emoji data Sometimes i like to copy and paste emojis, so here is a few you can copy. I probably need to organise this som..

meta refresh reload page

this can use a meta tag to get the browser to reload the current page. the following code will reload the page every 30 seconds. usually you have to add meta tags into the header of your page, not ..

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

make all links target new window

I was actually searching for a js way to do this, but i found this instead. Here is a really easy way to make all links target a _blank window. Just add this to your <head>. <base targ..

responsive viewport meta tag (responsive meta tag)

this one meta tag will make the page appear correctly on mobile devices. You may need to do other things to get all the other elements to fit. Here is the one I usually use <meta name="viewport" ..

take full page screenshot screencapture using chrome dev tools

This isnt really html, but its handy ;) Here is how to take a full page screen shot using the chrome dev tools. Open dev tools in chrome and the page you want to capture the image from F12 Pr..

emoji data - version 1.0

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

video embed tag

to embed a video in a web page example Video not suported, download it here. code <video width="100%" height="340" preload="none" poster="myImage.jpg" autoplay loop controls&g..

video embed no controls

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

css grid sidebar main content fluid layout with fallback

this is a continuation from the original post with added fallback for older browsers that do no support the grid elements yet. I have tested this fallback in IE11 and it seems to work well, if you wa..

color cycle drop shadow - rainbow drop shadow

Just incase you are bored with a static shadow, here you can cycle through a bunch of different shadow colours. .cycle-shadow { -webkit-animation:img-cycle 3s infinite; animation:img-cycle 3s i..

filter drop shadow

using a filter drop shadow can add shadow to transparent areas of a png filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.9));

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

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

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

click through an overlay element pointer events

This one is usefull if you have an element overlapping another element and you want the one underneath to be clickable, like positioning an image over the top of a slider with controls underneath it. ..

why are people so amazed that a column layout can have a full width element

Is it because its inside a grid still? i must me missing something anyway i have been noticing that there is this post (and this one) going around showing that you can break out of a css grid and go ..

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

transform rotate a hexagon in css

if you ever needed a hexagon in css here is how you can do it.

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

material design icons google font

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

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

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

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

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

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

table border collapse

I see this quite often when dealing with tables the border-collapse: collapse; used on a table as so: table { border-collapse: collapse; } So what is the point of doing this? It seems to help..

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

check the server method post or get using php

Here is a basic usage method for checking if the server is in post or get mode. most normal pages are served in get mode. You can send data back to a page using get by adding variables to the string ..