Search
Search Code
React - Use State to Toggle an Element
Mastering React State: Toggling Elements with Confidence React's state management system is a powerful tool for building dynamic and interactive user interfaces. One common use case involves to..
Bind 'this' to a Class Method
Binding 'this' to Class Methods in React React class components allow you to define custom methods alongside managing state and props. These methods often need to access component properties li..
make an image or element grayscale switch on mouse over
mouse over the image to see the effect also used: transitions random image
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..
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..
Random User Profile Loading Script in vue
uses the random user ui here to generate profile boxes using vue js original script here: https://codepen.io/l-i-lc/pen/WNxNwvd?editors=1010
floating message box on bottom right of screen with close button
A floating fixed message box on the bottom right hand side of the screen with a close button.
share to twitter javascript button function open a new window
gets and encodes the current page url and opens a new window to share the link to twitter
share to linked in current url button with javascript
Share the current page url to linked in with a button and javascript
Get current URL and add a share to facebook share button with it
Combines this Facebook HTML for Sharing a Link and encode url with javascript this to make captan planet! Or... makes a share this post to facebook button.
encode url with javascript
get the current url, encode it and log the encoded result to console
add a button to an existing link using :after css
Adding a button style to an existing link using :after and css. Preview
javascript add class to element
how to add a class to an element in raw javascript I wrote a quick demo here showing how you can add a class to an element with an id on a button click
javascript attach a click event to an id not using jquery
I just wanted to bind a click to a button, not using JQuery, turns out its not that hard at all. Why am i using jquery for this stuff???...
submit form with javascript
if you have a form with an id, you can submit it with the following javascript. usually this will be attached to an event or something similar like a button click. If i run this on the demo, it..
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..
get the value from a textarea element
gets the value from the textarea and prints it to the console of the browser rather than using innerHTML you have to use value.
Alpine JS Testing
some simple tests using alpine js
bootstrap form basic
a nice simple bootstrap form layout example template
add new random image with button
this appends a new random image from picsum.photos to the div with the id app
simple javascript no library accordion
a simple button and div based accordion with a toggled indicator
Sweet Alert 2 Methods and Examples
I love this alert replacement so i thought i would just add some of the examples here to show how awesome it is! You can check out the official sweet alert documents here if you want to browse throug..
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..
Spam IP Database and delete button
The Background and Reason for the SPAM IP Database and Delete I actually wrote up half of this article and was still testing the function and lost the whole post, which will teach me for adding it st..
pi400 how to take a screen shot
This is actually built in, well if you have scrot installed anyway. Which it already was for me. Press Print Screen button and it saves it into your home folder.
button zoom effect with expanding background
Just playing around with zoom and background size effects on a promo button, if you change the background to 110% and then zoom to 1.1 you can see how the background appears to zoom out while the butt..
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>
validate email address from string with jquery working function
Here is a working example of this post validate email address from string. This has very basic checking of an email address by checking that the string has an @ and a . in it. Note: this is still no..
set a cookie on click and then check if the cookie is set and dont show that message again
this script shows a message, and if the message is closed it will set a cookie to not show that message again for 1 day. The cookie in this example is set to expire in a day, so then if you com..
adding react to a website in 3 steps
i was just researching how to add react to a website, and i thought i would need babel to translate or compile the JSX code, but apparently you do not need this... So ill test this here and see..
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..
simulate a click on an element with jquery
you can actually use jquery to simulate a click event using the following .click() so as soon as the document is ready and you have jquery loaded it will run the click event for you, and should pop ..
button with separated chevron
I have come across this kind of button format a few times now in various designs and the html and css for it is a bit different to normal button formats I have found. Chevron Detached Button Ex..
check browser version and show a message
a button that displays your browser version in a modal Demo (gif)
404 Error Page Codepen
found this in my links the other day, still looks cool...
verify the google recapture server php
i was still getting quite a bit of spam even after using google recapture v2 and i think this is just as i was using the javascript only version, which disables the submit button if the capture is not..
scroll down the page using a button click
scrolling down 600px from where you currently are on the screen demo vid
ajax callback to delete with sweet alert confirmation to make it cool! 😎
I recently wanted to to an ajax call back on a list of items just to make it easier to move around the place, rather than it reloading the page every time. So i thought why not also use sweet alert on..
change this to a list group - other items
Other item format is a bit average, list group should fix this. This uses the template: core-list-item-simple.html So we can change this a bit to the list group format. Which i..
dropdown section
What generates the dropdown widget items? generated by the function generate_section_button() per class template file section-dropdown-bootstrap.html
show the browsers name in javascript
This function will show you an alert box with the name of your browser, however im using brave at the moment and it shows as Netscape, so i guess you cant trust the result. Also i just discover..
set active class based on url value
this will check the full url and then loop through all the a elements in #test-div when it finds a matching url it will add the class active to that button this is good for persisting active links o..
validate an email address from a form field - version 2
This javascript function will check if the email address in the text box has an @ and a . in it and return a message saying if its valid or not. This is pretty basic as it only includes checkin..
check if a checkbox is checked with javascript
checks if the box is checked and returns true or false reusable function that can check if a checkbox is checked or not just pass it the id of the checkbox Javascript Usage check_my_box('check1');
submit a form with javascript onclick
submit a form with javascript, good if you want to submit a form with a button that is not within that form. the form will require an id
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..
rounded click me button with icon
just a rounded button with a font awesome icon
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 ..
change a select box back to its initial select value
this will reset the select box selected value back to the 1st item in its options list
set the html of an element javascript
this will set the innerhtml value of an element
inline form field padding
I noticed this when doing this demo (get the value of an input form element). Looks like inline form elements look pretty average when a button is added to the same line. i think this should..
get the value of an input form element (input value)
add how to get the value of an input form element with javascript for some reason i can get this working with: Javascript console.log(document.getElementById("my_input").value); but when trying to..
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..
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..
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..
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..
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 ..
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.
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
bootstrap toggle element collapse
the example code for toggling elements, show and hide
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..
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..
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..
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..
using javascript to open a link in the same window and in a new window or tab (open link)
a nice easy way to target _self or _blank when opening a link using javascript
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..
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.
country select javascript check which option is selected and show a hidden element
this shows a country dropdown and then if a selected country name is matched it will show the second part of the form for this test australia is the confirmed country
country select javascript check which option is selected
this is an example of how you can get the selected country value with javascript from a html countries dropdown
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 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..
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
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..
get element by class name with javascript and change it function
You may have seen the get element by id in javascript, which is great when there is only one element but what if you need to get the element using its class name The issue with classes is that they c..
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
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..
get the href value using jquery
this uses the jquery attr function to get the value of the href. this example targets the first a in the card div, so running the demo should alert you with https://kruxor.com Rather than using alert..
use javascript to open a link in a new tab or window
im not sure why you would use this rather than using the html target="_blank" but it could be useful if you needed to open a new tab in a javascript function.
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..
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..
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.
Generate Random Whole Numbers with JavaScript Function
generate a random whole number function with test buttons
Generate Random Fractions with JavaScript
generate a random fraction and add it to result when clicking a button
FCC - Basic: Profile Lookup
my solution to the FCC Basic js Profile Lookup, with added results area and button to run the function. json, array
add a class to a div with an id javascript
a one liner to add a class name to an element with a specific id, for this to run it seems to need a document ready.
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
Applied Accessibility - Tab Index
using the tabindex property on elements allows you to press the tab key while on the page and tab through the elements depending on the order specified by the tabindex. tab index can be applied to man..
css :active pseudo-class usage
The :active selector is a CSS pseudo-class. It represents an element that is being activated by the user when they are interacting with a button or link.
round number with js
Round a number to two decimal places. code var rounded = Math.round(num * 100) / 100; demo Result... function round_val() { var val = $("#rval").val(); var rounded = Math.r..
truncate string using jquery
.test { padding:10px;border:1px solid #999;border-radius: 3px; } so lets say we had the following string on the page and we needed to make it a bit shorter for some reason. like if you dont have co..
change the window title
This is a pretty easy one liner But we can make it a bit more complex with jquery and add a counter It is questionable that crawlers and bots will see this so may be bad for SEO. document.t..
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..
clipboard copy js
for copying things to the clipboard, like the click to copy. Basic Usage Include the script <script src="js/clipboard.min.js"></script> add a field to copy to the clipboard..
set and check a cookie using js cookie
this library makes setting and checking cookies so easy its amazing! include this script <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.4/js.cookie.m..
random string generator guid
a nice easy one to generate a random string. i use this one to stop items from caching or you could use it as a guid. var nocache = Math.random().toString(36).substring(2, 15) + Math.random().toStr..
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..
get select option form value with jquery
Handy if you need to get the value of a selected item in an option list basic code $("#select option").filter(":selected").val(); working demo Value 1 Value 2 Value 3 Value 4 ..
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..
emoji data - version 1.0
Emoji Data version 1.0 This is a better emoji list that you can search by title ctrl + f emoji-data.txt # Emoji Data for UTR #51 # # File: emoji-data.txt # Version: 1.0 # Date: 20..
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..
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..
