Search

Search Code by entering the text above.
php
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..

6:19 am, April 7, 2021
css
css double page document preview with shadow
...

two div elements that look like blank documents with drop shadows

11:55 pm, March 30, 2021
css
adding a background image to the titles of the dark mode card on this page
...

Just wanted to see what it would look like if i added some kinda image to the background of the titles. Side Note: i wonder if its a bad idea to add images that are uploaded to imgur rather than to t..

6:00 am, March 26, 2021
css
blur the background image while keeping the foreground normal
...

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

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

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

4:58 am, March 26, 2021
javascript
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..

11:18 pm, March 24, 2021
css
zoom background of element when active
...

I just wanted to see if something like this zoom was possible but just using the background image and leaving the foreground content in the element with no zoom.  https://kruxor.com/view/code/kM..

4:53 am, March 19, 2021
css
rounded click me button with icon
...

just a rounded button with a font awesome icon

3:28 am, March 19, 2021
css
logo tickers marquee slow scrolling
...

logo tickers with a slide animation

12:07 am, March 14, 2021
jquery
add click event to multiple link items and load the link content into a target div ajax
...

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

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

11:38 pm, March 7, 2021
linux
installing exfat and ntfs drivers to enable reading of these filesystems
...

this will install the ntfs package on your linux system, allowing you to read and mount ntfs partitions on drives. NTFS 3G BASH sudo apt updatesudo apt install ntfs-3g This should give you the fol..

4:56 am, February 20, 2021
css
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..

5:23 am, February 19, 2021
linux
how to check linux kernel version on rasberry pi rasberian
...

You can check which linux kernel version on rasberry pi a couple of ways, the easiest is using the uname command BASH uname -r which should give you something like this (but probably not exactly th..

2:33 am, February 17, 2021
javascript
slick carousel jump to a slide on element hover
...

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

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

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

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

5:10 am, February 10, 2021
css
animated rings expanding with delay ripple water effects
...

just testing this one

5:00 am, February 10, 2021
html
Aligning Images in TinyMCE or Floating them left and right (code)
...

Here is the code for this page Aligning Images in TinyMCE or Floating them left and right  

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

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

12:14 am, February 5, 2021
jquery
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..

8:27 am, February 3, 2021
apps
TortoiseSVN for updating wordpress plugins
...

For updating wordpress plugins, and probably other SVN related stuff, i found that using TortoiseSVN is the easiest. For windows anyway.  Just go to the downloads page, and pick the correct flav..

11:10 pm, January 28, 2021
css
box hover over effects using pulsate animation
...

Bit of a different box hover over effect. Just using the pulse animation.

12:05 am, January 27, 2021
javascript
enable dark mode in tinymce
...

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

2:53 am, January 23, 2021
site bugs
install codemirror for textareas [added]
...

i think rather than editing all the code using just a plain textarea element it might be nice to have codemirror format them nicer https://stackoverflow.com/questions/21085170/codemirror-how-to-insta..

8:24 am, January 22, 2021
css
box shadow example(s)
...

I realised just now, that i dont have a box shadow example! How does that happen, its one of those css elements that i just use so much that i guess i forgot about it.  Related Pages: https:/..

2:27 am, January 22, 2021
site bugs
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..

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

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

12:41 am, January 19, 2021
jquery
animate and zoom six elements on a timer [addClass, removeClass, setTimeout]
...

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

3:42 am, January 15, 2021
site bugs
linking search results to view pages [finished] 🤣
...

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

2:44 am, January 12, 2021
css
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 ..

12:19 am, January 12, 2021
site bugs
badge border colour is too dark or light on number badges [fixed]
...

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

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

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

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

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

2:36 am, January 1, 2021
html
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. 

3:26 am, December 23, 2020
css
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 ..

5:16 am, December 22, 2020
framework
CSS Grid Frame Work
...

8 Dec 2020 Yes i dont have an cool names for it, I just wanted something fairly light that can replace the bootstrap and foundation grid and basic components that i use so often, some of these framew..

10:56 pm, December 7, 2020
javascript
play a sound every # of seconds
...

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

3:38 am, December 7, 2020
javascript
Monitoring Visible Objects on Screen
...

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

12:07 am, December 1, 2020
javascript
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..

5:42 am, November 23, 2020
bootstrap
Fix Hover Over color on list group dark mode in bootstrap
...

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

12:31 am, November 23, 2020
wordpress
list items from blog and filter by category name
...

this is a bit raw, but shows the $args = array('category_name' => 'Categy Name 1','Categy Name 2','Categy Name 3' => 8, 'paged' => $paged ); for querying the category_name to do multiple pro..

3:03 am, November 18, 2020
php
Quick tool to convert time into decimal
...

I needed a quick tool that can convert say 20 minutes into decimal, as im doing this a lot these days. Here is what i come up with, well you can google it as well and that works, but this form is a bi..

12:55 am, November 16, 2020
design elements
hero box with title sub title logos and call to action buttons
...

Here is a basic hero box section that contains: Title Sub Title 6 Logos (could replace with carousel logos) 2 call to action buttons I think it can be made more responsive, by replacing the..

2:43 am, November 9, 2020
javascript
Leaflet Quick Start Example
...

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

4:45 am, October 26, 2020
wordpress
match a category id in wordpress and then add styles just for that id
...

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

6:20 am, September 29, 2020
css
bootstrap collapse or toggle a div visibility
...

if you have bootstrap and want to toggle an element or show and hide a div its already built in, just use the following code to toggle something. 

1:13 am, September 28, 2020
css
center everything in a div with flex-center (centre)
...

i usually add this to my base css styles, as a way to easily center something in the middle of an element.  then you just add this flex-center class and everything will be horizontally and verti..

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

12:13 am, September 25, 2020
wordpress
get the current post id from content.php
...

this should assign the current wordpress post id to $post_id, from template-parts/content.php if you want to show it, just echo the $post_id

6:07 am, September 21, 2020
wordpress
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..

6:01 am, September 21, 2020
css
create a rainbow background using css linear gradient
...

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

3:53 am, September 1, 2020
bootstrap
extracting the useful bits of bootstrap
...

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

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

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

12:05 am, August 28, 2020
linux
renew all SSL certificates with certbot
...

just issue the following command in bash

6:45 am, August 26, 2020
php
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..

1:08 am, August 26, 2020
js
enable tinymce on a target textarea by id
...

this is useful if you have multiple textareas on a page and want to enable tinymce on, also included are buttons to enable and disable on all textareas on the page

12:15 am, August 19, 2020
bootstrap
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..

11:54 pm, August 18, 2020
javascript
stop tinymce replacing urls with relative url's
...

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

12:55 am, August 18, 2020
css
switching stack order of floats with flex
...

responsive stacking, changing the order of how they stack. so by default they should stack in order they are listed in, like if the pink box is 1st then it should stack on top of the blue box when it ..

11:55 pm, July 28, 2020
html
scroll to top html css and js
...

add a button to your website that allows scrolling to the top of the page css add scroll behavior smooth to your html, to allow the page to scroll nicely rather than just jumping to the top, in supp..

1:13 am, July 21, 2020
css
adding pulsating dots to your css ul li list
...

get rid of those boring dots in your list and add some pulsation! See the Pen Pulsate your <ul><li> list item dots! by Luke (@kruxor) on CodePen.

3:26 am, June 26, 2020
html
hide parts of a form until the 1st item is selected
...

this code can be used when you just want to show the 1st field on a form then when it is selected it shows the rest of the form elements

1:26 am, June 17, 2020
css
css using perspective for transforms
...

just playing around with the perspective and transforms, it does weird and annoying things to the margins. I was interested in how this page worked, so i thought i would try and deconstruct it a bit. ..

5:57 am, June 16, 2020
wordpress
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..

4:44 am, June 16, 2020
wordpress
list items matching a category title
...

this is just raw at the moment, not tested or working. this is matching a category number at the moment so would need an additional way to link that number to the category name, or know what the categ..

4:08 am, June 12, 2020
javascript
inline fancybox modal testing
...

just testing to see if i can get a fancybox popup loading using an inline script rather than a document ready one, might be easier to implement. similar to this one, but without the need for documen..

6:12 am, June 3, 2020
javascript
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') {}

6:39 am, May 19, 2020
jquery
find and replace hrefs in existing page links using jquery
...

sometimes i have to do these things when you cant change the source files for some reason, usually due to old code. Its kind of a patch, but it works. The reason i had to add a delay in running the fu..

12:03 am, May 8, 2020
javascript
Use Sweet Alert rather than alert!
...

i love this script, it make the default alert look so much nicer, and its very easy to install. Just add the one script to your site, and then use Swal.fire rather than alert. simple usage Swal.fire..

11:35 pm, May 7, 2020
php
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.

4:16 am, May 4, 2020
javascript
Load and Unload TinyMCE editor from a button
...

Enable TinyMCE Disable TinyMCE Some Content function load_tinymce(idclass) { tinymce.init({ selector: idclass, plugins: [ "spellchecker code aut..

2:53 am, April 17, 2020
html
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..

10:46 pm, March 2, 2020
javascript
Use Recursion to Count Down
...

just a slight change to the count up version of this, using unshift rather than push to the array.

10:29 pm, February 2, 2020
html
add google captcha to enable and disable a form button
...

This will check if the google checkbox is checked and then enable or disable the form button depending on the outcome. This is just a basic version of this check, you should also check that the captu..

12:14 am, November 12, 2019
javascript
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..

6:17 am, September 30, 2019
javascript
using let and const example
...

This example uses let and const rather than just vars, let can only be declaired once rather than overwritten like vars and const is a read only variable so it cant be changed. 

4:55 am, September 27, 2019
javascript
Use the parseInt Function with a Radix
...

This is the same as the parseint function, but you can also specify a base for the number which can be between 2 - 36. 2 is binary. Zeros and Ones. I think base 10 is the normal numbering system, but ..

6:14 am, September 24, 2019
javascript
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..

5:15 am, September 24, 2019
javascript
Do While Loop
...

showing how to use a do while loop, i don't use these ones very often usually just a for loop.

11:26 pm, August 25, 2019
javascript
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.

4:50 am, July 16, 2019
css
using transform scale in css to zoom on hover over
...

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

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

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

2:38 am, July 10, 2019
css
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 ..

2:33 am, July 8, 2019
css
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..

5:59 am, July 2, 2019
css
using flexbox to align elements in a row
...

flexbox is so good at aligning elements, yes i used to use float left and then percentages and overflow auto or hidden the surrounding div, but now with flex you can just do something like this.

1:37 am, July 2, 2019
php
create a mysql or sqlite current timestamp with php
...

just in case you need to create a CURRENT_TIMESTAMP using php, this formats the current date into the following.

5:45 am, May 27, 2019
php
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..

5:30 am, April 17, 2019
php
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..

12:27 am, February 11, 2019
css
image Checkbox Replacement for Forms
...

Some sites like to be a bit tricky and have some complicated form checkbox replacement which is not all that hard, just can be a bit annoying as you have to extract the images for this to work. Demo ..

12:28 am, January 18, 2019
css
Using Flexbox rather than Floats
...

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

4:27 am, January 16, 2019
core
Core Class - Basic Core Structure
...

A Core class that can be used as a base for all content types and uses the extend classes to define the database variables. So basically you can set up core class and then create sub extend classes to..

11:33 pm, December 13, 2018
php
Get the document root path in php $_SERVER['DOCUMENT_ROOT']
...

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

12:23 am, September 4, 2018
php
get text between tags
...

Using DOMDocument you can get strings between tags Useful if you are processing raw html files with php function getTextBetweenTags($string, $tagname){ $d = new DOMDocument(); $d->load..

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

6:20 am, August 31, 2018
php
some date formatting just day just month just year
...

Useful if you need to get PHP to return parts of the date. The date today in number format $date_today = date("d"); e.g: 21 Todays month name $month_name = date("F"); e.g: July ..

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

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

6:20 am, August 31, 2018
php
extract meta tags from file or url as array
...

php has a built in function that can be used to extract the meta tags from a page url into an array. usage just pass it a url, if you call this file meta.php. usage: meta.php?url=http://my-url.co..

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

6:20 am, August 31, 2018
php
search within files in a directory
...

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

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

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

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

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

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

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

6:20 am, August 31, 2018
js
change favicon with jquery
...

Updated: This seems to not work on this page, as it has multiple link icon elements to deal with different sizes. I just changed it to a function and it runs ok, but the browser seems to choose a diff..

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

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

6:20 am, August 31, 2018
js
scrollbar replacement simplebar
...

a nice and simple scroll bar replacement code <link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" /> <script src="https://unpkg.com/simplebar@latest/dist/..

6:20 am, August 31, 2018
js
mithril testing
...

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

6:20 am, August 31, 2018
js
tiny mce editor tinymce
...

Just loading the editor, as its useful for formatting stuff sometimes 😋. I usually use a function to load it into text areas with the tool bars + styles that i find useful. Example fu..

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

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

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

Just a getJSON JQuery Request that will console log all of the hacker news top stories using the firebase api $.getJSON('https://hacker-news.firebaseio.com/v0/topstories.json', function(json) { va..

6:20 am, August 31, 2018
js
using regex with replace to replace all instances of something in a string
...

so you have a string and you want to replace a recurring character, use this to do it: String Example: var string = "a-string-with-dashes.txt"; var string = "a-string-with-dashes.txt"; string..

6:20 am, August 31, 2018
js
digital clock with jquery
...

Just a simple digital jquery clock that updates every second. Also added the dropshadow animation, not sure why... ;) .digital-clock { font-size:80px; } .transition { transition..

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

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

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

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

6:20 am, August 31, 2018
js
show the year with js
...

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

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

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

6:20 am, August 31, 2018
html
layout homepage
...

just some experiments external link

6:20 am, August 31, 2018
html
lorem ipsum
...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis rutrum sapien non ornare sagittis. Fusce quis dignissim felis. Pellentesque iaculis nisl et est ultricies, id mollis lorem volutpat. Praes..

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

6:20 am, August 31, 2018
html
youtube embed no controls auto play iframe
...

Sometimes you want the video to loop and play with just no controls on it, this is how you can do it. You can still click to pause it, but the normal controls are gone. Also it seems you have to ..

6:20 am, August 31, 2018
css
bootstrap styled buttons
...

Just in-case you would like the shiny (flat/rounded) blue buttons from bootstrap without all the css. Example Button add the class btn and btn-primary to your link An Example Primary Button (bt..

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

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

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

6:20 am, August 31, 2018
css
foundation make row full width
...

Just incase you want a full screen width layout and still have it sitting in rows for foundation css .full-width { width: 100%; margin-left: auto; margin-right: auto; max-width: in..

6:20 am, August 31, 2018
css
css grid for layouts and how to use it
...

Note: Added version 2 of this with no rows for the grid css grid for layouts with no rows so there is this thing called the CSS Grid Layout, and apparently we dont need a framework for grids anymore...

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

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

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

6:20 am, August 31, 2018
css
margin padding framework
...

Just a quick margin and padding framework that i came up with, to make margins padding and basic styles a bit quicker.

6:20 am, August 31, 2018
css
remove border glow css from textarea on select
...

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

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

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

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

6:20 am, August 31, 2018
css
flex align center vertical horizontal
...

lets say you have a box within another box, like so: .box { height:500px; width:500px; background:#CCC; } .another-box { height:50px; width:50px; background:#999; } ..

6:20 am, August 31, 2018
css
simple dropin wordpress dropdown navigation css
...

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

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

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 the height and width of it. this method is fine u..

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

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

6:20 am, August 31, 2018
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
There is a qualitative and quantitative difference between a day that begins with a little exercise, a book, meditation, a good meal, a thoughtful walk, and the start of a day that begins with a smartphone in bed.
Unknown