List Code

Showing page 2 of 10 in latest. Total Items: 517
A Collection of Code
svg
chevron up
...

11:19 pm, January 10, 2021
svg
chevron down
...

11:05 pm, January 10, 2021
javascript
set maxHeight of element by id with javascript
...

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

3:59 am, January 1, 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
css
make labels or badges look better
...

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

6:09 am, December 31, 2020
php
include tinymce only if a user is logged into the site
...

For google page speed i had an issue when every page was loading tinymce, which is quite a large script. I only actually use this script when editing pages, so this is the change i made to only inser..

5:44 am, December 23, 2020
html
test page for the custom css 12 grid used on this site
...

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

5:38 am, December 23, 2020
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
javascript
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:

11:39 pm, December 22, 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
jquery
add a jquery date picker to your text box
...

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

12:56 am, December 22, 2020
css
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..

11:58 pm, December 17, 2020
jquery
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 ..

2:36 am, December 17, 2020
svg
chevron left
...

5:13 am, December 11, 2020
svg
chevron right
...

5:12 am, December 11, 2020
css
use an emoji on your list items ul li
...

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

4:53 am, December 11, 2020
bootstrap
bootstrap basic grid layout
...

nice and easy copy and paste for a basic grid layout

1:45 am, December 11, 2020
css
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..

1:43 am, December 11, 2020
windows
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 😘

1:58 am, December 10, 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
Modern HTML5 Techniques for changing classes
...

12:56 pm, December 7, 2020
css
css prefers-color-scheme example
...

This uses the @media and prefers-color-scheme to check which one you have as a setting in your browser

12:06 pm, December 7, 2020
javascript
vimeo thumbnail generator
...

5:35 am, 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
bootstrap
bootstrap toggle element collapse
...

the example code for toggling elements, show and hide

1:34 am, December 4, 2020
wordpress
adding pagination to custom wp_query
...

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

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

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

10:28 pm, December 3, 2020
wordpress
add paging to wp list query
...

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

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

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

12:24 am, December 1, 2020
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
css
using attr in css to get content from html
...

im not sure (yet) how this would be useful, but it shows that you can get title attribute content from a div with css

1:11 am, November 30, 2020
javascript
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 ..

4:45 am, November 24, 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
css
css perspective and transform css properties testing
...

i wanted to see what i could do using the perspective and transform css properties. i dont really get how the perspective one works, but you can tweak it so it doesent look too weird.  with the ..

2:51 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
javascript
using javascript to open a link in the same window and in a new window or tab
...

a nice easy way to target _self or _blank when opening a link using javascript

4:26 am, November 13, 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
css
using linear gradient background on text css
...

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

12:02 am, October 26, 2020
css
setting up css variables in your stylesheet
...

Using css variables at the start of your stylesheet can make things down the road much easier to change. You can also use it for more complex variables like drop shadow settings as shown below. ..

5:36 am, October 14, 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
simple table stripe striping
...

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

12:48 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
drop shadow text class easy drop shadow
...

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

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