Slides Layout

Layouts

Here is a simple responsive example with a demo and code for slide layout. You can use this as a starter template to achieve any demanding animation-heavy slides. DEMO See the Pen Slides Layout by Puneet Sharma (@webdevpuneet) on CodePen. HTML <div...

Sticky Sidebar

JavaScript, UI Components

Javascript function to make the sidebar sticky to the bottom if the content length is more than the sidebar. Also, check the demo for the same. DEMO See the Pen Sticky Sidebar by Puneet Sharma (@webdevpuneet) on CodePen. JavaScript let vw =...

How to detect if node is added or removed inside a DOM element

JavaScript

document.getElementById(“myDiv”).addEventListener(“DOMNodeInserted DOMNodeRemoved”, function(event) { console.log(“A new node has been inserted or removed.”); }); To use these events, you can bind a function to the DOMNodeInserted...

How to restrict textarea inputs to max 10 numbers in a line?

HTML, JavaScript

Here is an example of how to restrict the input of a textarea to a maximum of 10 numeric characters per line, and allow line breaks (newlines) using HTML and JavaScript, while also ensuring that the restriction works during copy-paste: HTML <textarea...

How to maintain aspect ration of YouTube videos with CSS

CSS

Hey, you can create responsive YouTube videos with the help of CSS only and maintain its aspect ratio without needing any third-party JavaScript library. The easiest and quickest way to do it is with the following CSS. HTML <div class=”container”>...