Search
Search Code
flip card animation 3d front and back css html
3d flipping card with front and back content and animation
4 box custom grid with responsive
simple 4 box 25% grid with a responsive break at 1024px to stack the boxes in the grid
Boots Widget change from widget to cat head and click function
Moving this from the widget area to the bottom, to make it less obvious but still there if needed.
how to show your DNS in windows and then copy it to the clipboard in one command
Here is how you can show your current DNS server in windows command line and then copy it to the clipboard, ready for pasting. Open Windows Command Prompt<windows key> + R Type cmd ..
pulse map dots
bunch of pulsing dots for a map or image. allows overlaying of clickable dots on an image, you can change the colors with the css below. modified from here: e.g:
find a text string and replace it in javascript
There is a function in javascript called replace. You can just give it some text and it should replace it with your target text. For example #1 this just runs and replaces the first instance o..
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..
redirect www to non www
usually i point the www to the ip address of the server and then create a redirect block on nginx, but this seems like extra work for nothing. Tested the cname point to the address but this see..
basic radio checklist - check and item and get its value in a textarea
a basic radio input type checklist, where you can only select one of the items in the list. Ok so no longer so basic. This script allows you to fil the value of a text area with the valu..
set a css grid to auto to make it stack on mobile
to make a grid stack when the screen size gets smaller you need to set the grid items to auto when it gets to the desired screen size. In this example once the screen size gets to 1024px or les..
duplicate a line in vscode shortcut
if you ever wanted to duplicate a line in vscode, this is the shortcut for you. rather than doing the hightlight, and then CTRL + C and then CTRL + V you can use the following shortcut. just put you..
using the :user-valid CSS pseudo-class
It seems this is currently only working in firefox. Here is a test of the code in firefox, you can see if you add a "valid" email address it will add a border and a green tick.
add a button to an existing link using :after css
Adding a button style to an existing link using :after and css. Preview
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..
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..
add a toggle with jquery and change the class
With this code I just wanted a quick bit of inline code that could add a toggle to an element or multiple and also switch its class to make it show that the item is toggled on or off. Here is t..
content editable p tag with spell check enabled
im not sure how this is useful, but you can set a p element to content editable so you can change its contents and then also set the spellcheck to true so the browser knows that it should run its spel..
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..
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>
log the console log output to a div
I do a lot of console logging so i thought it would be nice to be able to see this on my test pages. Apparently you can grab this quite easily with the following code. I had to modify this a b..
list group bootstrap template
this generates a bootstrap list group basic template layout, nice option for lists with links in them rather than using a ul li style list, this makes them into neater looking elements so rather than ..
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 ..
change selected color on input elements css
this can be useful if you are using darker form elements and they happen to have white on white text, so you can target the :focus on the input. here is the text input before the colour change, the c..
get the value from a range input field with javascript
this script will retrieve the current value from a range slider html input if you want the value to only update when the slider interaction has been stopped change the oninput to onchange then it w..
animated duck on footer
Thought this was cool. How do i do it? Page Source: https://www.learninpublic.org/ Copy this section Lets see what is attached to it. So i can see from the classes its a tailwind based ..
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..
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..
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 ..
extract youtube image from video url
showing how you can get the image wallpaper in different sizes from a youtube video I used to have this tool a while ago, it just passes the video id and extracts the images and also can produce the ..
check browser version and show a message
a button that displays your browser version in a modal Demo (gif)
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:
404 Error Page Codepen
found this in my links the other day, still looks cool...
set the amount of lines to show in a textarea field
using the rows will allow you to add the specified amount of rows to the textarea you can also specify the cols which does the amount of characters width
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..
this is a weird one table underline appearing and dissapearing on mouse over
very strange that also reminds me that i have to get rid of these random searches idea: i was thinking of adding a more detailed hit system where it can record the month and also the year of the..
hero widget header - creates a nice looking hero item from a target uid and class
this creates a "nice" looking hero widget, just wanted to create something that looked decent and had an attached background image, surprizingly annoying to link items together. For some reason i kee..
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:
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..
css responsive max and min targets @media
showing how you can target elements within a max and min screen width 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 ..
a page with two images
a page with two images for testing
python extract images into an array from a url
this should extract all images from a url into an array using python python from bs4 import BeautifulSoupfrom urllib.request import urlopenurl = "https://www.kruxor.com/view/code/LOveX/"page = urlop..
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..
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
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 check the temperature of the pi using command line
to get the temperature of the pi in shell or command line type the following: BASH vcgencmd measure_temp This measures the GPU temperature. Which should generate something like this: To get the..
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..
box hover over effects using pulsate animation
Bit of a different box hover over effect. Just using the pulse animation.
box shadow example(s) - drop shadow
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:/..
darkmode toggle switch with local storage to remember the last selection
Here is a darkmode toggle switch, that swaps out the body class so you can target dark-mode or light-mode on all your elements! It saves to local storage the last selection so if you come back to the..
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.
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..
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 ..
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..
Leaflet Quick Start Example
just a quick start map embed for leaflet js an alternative to google maps
Create a UTF8 General MySQL Database with Command
This will create a UTF8 database with the character encoding utf8_general_ci replacing the with your database name. I was manually doing this in adminer before this and selecting the encoding, this i..
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 ..
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. ..
fixing the website footer and making it less ugly
Here i show you in a couple of steps how to make the footer on this site look nicer, while actually doing it. Here is what the footer currently looks like. Yep pretty average looking. Lets add a ..
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..
Radial Click Effect
shows the radial click effect like in the material design, so when you click a button it will show a click at that area with a nice animation. Uses CSS and javascript to generate this effect.
Making Images Retina Display Friendly
Have you ever noticed images look a bit blurry on your high res screen? Sometimes this is referred to as a "Retina" display... Its probably because the image used is exactly the pixels made for a regu..
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..
asp classic get a url and display it
gets a url and displays it using XMLHTTP
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..
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..
