Quick Embed - Google Font - DM Sans

DM Sans font quick embed and css class

nice and easy fancybox installation for image lightboxes

jqueryui date selector with examples and code with custom date formatting

Datepicker using jquery ui with current date and date formatting. as dd-mm-yy Example Date formatting with selector  

Using the HTML tag details for easy accordions

Using the HTML Tag ` ` for automatic accordions.

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

table scroll responsive foundation

add this div wrapping your table using the foundation framework and it will allow the table to scroll on smaller screen's. Making a responsive table easier.

Quick Embed - Google Font - Fira Sans

fira sans font quick embed and css class

Slick slider code testing with slower slides and auto play on videos

additional testing with changes for slick slider videos and auto play

Chat GPT slick slider code testing

slick slider testing using code from chat gpt 1. write for me the code to embed a video into slick slider in html and css 2. can you also add the javascript required to get this working 3. can..

Quick Embed - Google Font - Inter

Quick Embed code for google font inter

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.

Flickity - autoPlay with Loop

Flickity slider with auto play

slick slider section quick add

everything you need for a quick slide section

subscribe to newsletter section example

four box section template in foundation with classes find and replace (4 box)

this section uses the large-auto classes so you can add or remove boxes easily.  find and replace the name "boxsection" to rename your new classes for the section I have layed this one out a ..

Proxima Nova Font alternative on google fonts Figtree Embed and Quick Install Code

According to a recent google search by me the font Figtree is the closest one to the Adobe Font Proxima Nova, so lets do a quick install code for it and test if its actually the same.  All Style..

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

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

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

Add font awesome icons as placeholder text in inputs

An old one i found on codepen, works with only the old version of font awesome i think. Not tested on the later versions.

Quick Embed Import and Code Samples for Google Font Roboto

quick embed codes and code examples for the google font Roboto. Roboto Font Preview

codemirror with auto preview window

this should auto preview html code into the preview area using code mirror

Oswald Font Quick Embed

Quick Embed code and class for Oswald Google Font. This includes all font weights and styles for the Oswald font, just add the class oswald onto your elements, or you can apply it to all page element..

Load fancybox modal on hash check

I was just testing this code, not working on the hash check as yet. 

Welcome Widget Card - Toggle

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

Quicksand font quick install

Quicksand font quick install. Note: use the @include in css or the html link to the font only, not both. 

Playfair Display Font Quick Embed - Google Font Quick Embed

Note: you only need the @import in css or the link href not both to embed this font. This font reminds me a bit of Times New Roman

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.

a google font like muli - mulish and embed code

mulish font embed codes and styles with example

font similar to century gothic questrial google font quick install

I found this font to be closely related to the paid font "Century Gothic" the only issue i found with this font is that it only comes in regular weight.  But Questrial is free to use, so that is..

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

Lato font quick install

a quick code to install the font Lato from google, includes the stylesheet and also the @import links, just pick one.

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

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

Slick Slider Showing Multiple Items at a time

Just wanted to test some review type items showing more than one on slick, Seems to work well.  This shows two items at a time, but you can show as many as you like. Could be good for a testimo..

bootstrap form basic

a nice simple bootstrap form layout example template

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

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

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

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

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>

foundation three boxes with text align links to the bottom of element

For some reason i had the request to align the links in three boxes with different height text, not sure why they wanted them aligned, but i guess my task is not too question that but to fix it. ..

foundation base html template - foundation template

just a basic html template with foundation and the required javascripts, good for a starter html page using foundation framework.

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 list group card with footer

a list group within a card and also a footer on the card for additional links. 

Idea: Google Font Dropdown Selector Code

just an idea at the moment, a dropdown list of google fonts and when selected it loads that selected font using the @import css tag.  Loading the fonts Gist : not tested https://gist.github.com..

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

easy section wrap in foundation - 3 boxes responsive

this is a 3 box section responsive wrap in foundation, you can change this to large-auto if you want to have multiple boxes

link to a custom style sheet in your theme directory wordpress

this is how you can include a manual link in your wordpress header file with a link to a stylesheet called theme.css then if you change theme names or something it will still link correctly, rather t..

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

fancybox load iframe inline

All you need to load content in an iframe using fancybox modal javascript plugin. not quite an inline load, but not much script to get this going. 

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

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

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

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

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. 

fancybox image popout easy

just in case you want to easily apply a modal or pop out effect to your images when they cant be displayed full size on the page.  related: https://kruxor.com/view/code/3gNUD/inline-fancybox-m..

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

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

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

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

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

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

codemirror htmlmixed textarea

a working (hopefully) version of codemirror using the htmlmixed mode, not sure why its not doing code highlighting. Update: 5 Jul 2022, this is working now. 

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

@import and html link to Montserrat font family google font

includes the Montserrat font family as @import in your css or add as a link in html with preconnect. also has basic usage as the .montserrat class.

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

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

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

Leaflet Quick Start Example

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

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

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

loading content into fancybox modal using ajax

This loads content into a fancybox modal using an ajax request so you can specify a url to load into the modal when the button is clicked

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

fancybox modal popup example

an example showing fancybox text modal window attached to a button to open it

get the stylesheet directory in wordpress theme

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

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

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

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

jquery jqueryui vue script includes

JQuery 3.2.1 <script src="https://kruxor.com/code/js/js/jquery.3.2.1.min.js"></script> jqueryui includes css and js JQueryUI 1.12.1 <script src="https://cdnjs.cloudflare.com/aja..

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 vue and json data

Based on This Demo: https://jsfiddle.net/kkpLnv6k/ so i was looking through the jquery way of loading json data and was wondering what the point of loading it in with a vue.js instance is. I guess ..

jqueryui includes css and js

these ones are useful as well for including jquery ui JQueryUI 1.12.1 <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> JQueryUI 1.12.1 min..

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

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

flexbox layout template

thought i would see what a full page example layout would be like using flexbox rather than floats Using this for flexbox reference flexbox layout Note: tested working in ie11.. yay.

foundation includes cdnjs

Foundation Full Full Foundation CSS <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css"> Minified Foundation CSS <link rel="stylesheet..

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

animate css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> animate.css

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

target internet explorer with css and html

target all internet explorer versions with this <!--[if IE]> <link rel="stylesheet" type="text/css" href="all-ie-only.css" /> <![endif]--> target ie 10 and 11 p { col..

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

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