making the search page nicer

Sometimes i dont even notice things like this, as i look at them all day and go, ah yeah thats a search box. I forget that all these things can be fixed.  Anyway, even just adding this form to a..

Darkmode JS - Add darkmode to your site with one script

This library looks really nice! It drops in ok, but maybe with more complex layouts or coloring, it seems to break a little bit.  Darkmode JS Example Source Links https://darkmodejs.learn.un..

center align vertical 2 items in a container flex

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

simple javascript no library accordion

a simple button and div based accordion with a toggled indicator

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

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

youtube search api request function

This function requests a search from the youtube search api, and searches the text in the snippet for the seearch string. You can get your own API key for this from the google developers console. They..

javascript try catch example function

try catch is a good way to stop errors breaking your javascript. here is the example from the firefox mozilla with a basic try catch logging the error to your console, rather than just breaking all t..

Fix for PHP Warning Trying to get property '*name*' of non-object

i was getting this error when checking parts of an object that were sometimes set and sometimes they did not exist depending on the values.  Warning / Error : Warning Trying to get property '*na..

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. 

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

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

down chevron and styles

a down chevron and the class to style it, default this is 16x16px but you can zoom it in or out easily, just change the height and width of it target with the class bi-chevron-down

How to record your own page views with PHP, and make them into weekly monthly and yearly charts

Building a better Simple Page View Counter Currently this site has a very basic view counter on it.  Here is how it currently works. Load the page, function checks if the page has a existing r..

using a radial gradient for background overlay

usually i just use linear gradients for my background elements but i noticed this one the other day, a radial gradient. you can actually specify multiple colours and also opacity levels to overlay a ..

simulate a click on an element with jquery

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

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:  

verify the google recapture server php

i was still getting quite a bit of spam even after using google recapture v2 and i think this is just as i was using the javascript only version, which disables the submit button if the capture is not..

using clamp js to clamp lines of text

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

Scroll down indicator css javascript and html

I have seen these a couple of times, indictating to the user that there is further content down the page, and they should scroll to view it. Then as you scroll down the indicator dissapears. So we w..

add a gtag.js pdf click event

how to add a pdf click event using the gtag.js analytics

responsive menu research full screen multi level

i was just looking into responsive menu's that are easy to impliment and navigate even if they have multiple levels still just in research mode at the moment Menu One Menu Sub One Menu Sub..

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

prevent default click event on link

This will prevent the default event on a link url, so for example if you have a <a href="">link</a> link this code will prevent it from loading the href link when clicked and you can do so..

counting the occurrence of words in a multidimensional array

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

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:

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

form submit override with javascript

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

add a toast alert when logging in with half moon

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

replacement slider for ken wheeler's slick carousel tiny slider 2 [testing]

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

add years as options to select dropdown

add the years as dropdown items between a range of years with javascript document ready js only version

logo tickers marquee slow scrolling

logo tickers with a slide animation

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

add click event to multiple link items and load the link content into a target div ajax

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

add click event to multiple link items

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

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

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

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

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

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.  

linking search results to view pages [finished] 🤣

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

change the cursor to a pointer for an element

i find this class quite useful if you are adding a javascript click event to an element, and need the mouse to look like its a click item rather than just a normal item. If you mouse over the test ..

chevron up

chevron down

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

replicating the bootstrap dropdown toggle in jquery

here is a code that can toggle a sub element using the same format as bootstrap. Update: also added another line that closes all the open menu's when one is clicked, so that you dont have a bunch of ..

chevron left

chevron right

using jquery appear for checking if an element is visible on screen

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

Monitoring Visible Objects on Screen

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

simple table stripe striping

this uses the nth-child(even) element to add color striping to the following table test table x       x     x           &..

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

add a class or remove it based on window scroll location

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

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') {}

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.

jquery add a click function if the window size is greater than target_width

this function will add a click event to the target if the window size is greater than the target_width

Prevent Object Mutation

This shows how you can lock an object so its content cannot be modified. if you comment out the line Object.freeze(my_object); it will allow it to be modified again.

Changing an array declared with const

a const means that you cannot re-declare the variable name, but you can still mutate an array content that is declared as a const. so you can see in the following example that even though the array is..

document ready javascript standalone version no jquery

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

add a class to a div with an id javascript

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

jquery click function

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

white space pre-wrap formatting

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

using parse_url to extract parts of a url

Category: PHP the parse_url php function will split a url into an array of url fragments $url = "http://kruxor.com/path/?argument=value#anchor"; var_dump(parse_url($url)); parse_url example ..

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

jqueryui date selector

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

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

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

emoji data

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

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

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