Create Thumbnail of pdf and video file with certain width and height – JavaScript Function
The following code creates a 480 X 320 px thumbnail and calls the upload function to upload...
Read More
Category: Code Snippets
HTML form with detectable changes and a reset button
Let’s create an HTML form with many different types of inputs with values and a hidden submit button and a reset button. Now, create a jQuery script that detects changes in input fields, unhides the submit and reset...
Read More
OTP HTML and Script that allows pasting
Here is a code with the demo I just found on Codepen, that handles pasting OTP also. See the Pen...
Read More
Gradient loader animation with html and css only
Here is a very simple example with a demo and source code for making a cool loader animation with...
Read More
Matrix rain drop 01 digit code
Here is a code with a demo for matrix raindrop-like animation from top to bottom with 0 and 1 as...
Read MoreResponsive Media Queries – CSS
@media (max-width:1800px) { } @media (max-width:1400px) { } @media (max-width:1300px) { } @media (max-width: 1199.98px) { } @media (max-width: 1199.98px) { } @media (max-width: 991.98px) { } @media (max-width: 767.98px) { }...
Read MoreCode for GSAP SplitText plugin
This is just a code snippet. I will add a demo when I get time. gsap.registerPlugin(ScrollTrigger, SplitText); // Register plugin first // Timeline for split text var tl = gsap.timeline(), mySplitText = new...
Read MoreReplace all images with .svg extension with SVG code and retain image’s classes
Here is a jQuery code snippet that will replace all your images with the SVG codes and retain all classes that images have, getting added to the SVG class attribute. // Replace image tag with svg const replaceWithSVG = () => {...
Read MoreReplace an SVG image by SVG code – Script
Here is a script that will help you replace an image tag with an SVG extension image file with SVG code. This can be helpful when you don’t want too much SVG code inside your HTML file. (function () {...
Read MoreCSS zebra stripe logic for more than two colors
Zebra stripes are a popular design element that can be used to add visual interest and organization to tables and other elements. By default, zebra stripes are created using alternating colors of white and light gray. However,...
Read MoreCSS technique for elastic moving active background for navigations
Here is a simple CSS solution (javascript not needed here) to achieve the active state elastic animations that go from left to right during the active state of a particular nav tab. Let “.bg-elastic” is the...
Read More
Zoom everything on bigger screens – CSS Media queries
Hi, if you want to zoom your website on a bigger screen like QHD and UHD i.e > 1920px you can...
Read More
You must be logged in to post a comment.