Search

Search Code by entering the text above.
javascript
Slick Slider Carousel with Fade Transition
...

here is a working example of slick carousel with a fade transition between elements rather than a slide transition

5:01 am, April 21, 2021
css
logo tickers marquee slow scrolling
...

logo tickers with a slide animation

12:07 am, March 14, 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
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
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
css
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..

1:55 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
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
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
site bugs
spin rotate an element on mouse over [css]
...

i thought it might look good to spin this element around when the mouse is over it. Added the following css to second_nav_toggle.  

12:51 am, January 17, 2021
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
style page numbers [fixed]
...

need to style the page numbers. https://kruxor.com/list-table/search_links/  Before: After: Dark Mode Light Mode  

2:26 am, January 14, 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
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
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
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
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
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
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
css
bold the numbers in a ol li list
...

sounds like an easy thing to do, but maybe not so simple. you can do this using the counter css element. code below:

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

1:45 am, June 30, 2020
gimp
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 ..

1:16 am, June 30, 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
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
css
simple linear gradient overlay for an image to make it darker or lighter
...

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

11:07 pm, June 2, 2020
css
target data attribute with css
...

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

11:52 pm, August 12, 2019
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
css
Drop Down Menu Swapping Left align to Right
...

this is useful if you have a nav that hits the right side of the screen and you want it to open on the left rather than the right side. you can see on the very right drop down item opens with its item..

5:36 am, June 26, 2019
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
php
for loop with a 5 increment
...

$css_out = "";$max_width = "50";for($i=0; $i<=$max_width; $i = $i + 5) {$css_out .= ".m".$i."{margin:".$i."px;}";}return $css_out;

2:45 am, September 17, 2018
js
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..

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

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

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

6:20 am, August 31, 2018
html
link to an external stylesheet
...

Not sure why but i always forget this, how to link to an external stylesheet. <link rel="stylesheet" href="../css/margin padding.css">

6:20 am, August 31, 2018
html
using foundation 6.4 xy grid basics
...

.grid-x .cell { border:1px solid #CCC; } Foundation 6.4 introduced a new xy grid which replaces the old row and large-x format here is a basic grid layout add some style to show the ..

6:20 am, August 31, 2018
html
video embed full screen all screen sizes
...

this will make a video cover the full screen of the browser no matter what size it is. It will do some cropping to make it fit. <style> body, html { margin:0; padding:0; } .video-cont..

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

6:20 am, August 31, 2018
css
css grid sidebar main content fluid layout
...

I was playing around with css grid the other day and i found a nice (and easy) way to do a standard left sidebar and fluid main content area. this is rather than floating the sidebar and then setting ..

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

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

6:20 am, August 31, 2018
css
css grid for layouts with no rows
...

I had a look at this recently, but my previous example still used rows for a grid, which apparently is not the correct way of using css grids. I think the issue (I had) with css grid is it seems co..

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

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
transform rotate an element in css
...

good if you need to rotate elements using css code <div class='abox rotated'></div> <style> .abox { background:pink; height:150px; width:150px; margin:50px auto 0; }..

6:20 am, August 31, 2018
css
transform rotate a hexagon in css
...

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

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
css accordion basics
...

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

6:20 am, August 31, 2018
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
Treasure every moment that you have and treasure it more because you shared it with someone special, special enough to spend your time...and remember that time waits for no one.
Unknown