Category: UI Components

CKEditor 4 – Strip p tags from output

Here is a simple method with demo to get output free of p tags from instance of CKEditor 4 DEMO See the Pen CKEditor 4 – Strip p tags from output by Puneet Sharma (@webdevpuneet) on CodePen.

Adding classes to particular dates in jQuery UI datepicker

UI Components

Here is a working example of adding classes to particular dates in the jQuery UI date picker plugin. You might need to change dates to get the results like image below jquery UI datepicker DEMO See the Pen Untitled by Puneet Sharma (@webdevpuneet) on CodePen....

Sparkline Charts using Chart.js

UI Components

Here is a demo with source code to create cool responsive sparkling charts for your website and web applications. DEMO See the Pen Sparkline chart by Puneet Sharma (@webdevpuneet) on CodePen. HTML <div class=”sparklineContainer”> <canvas...

OTP UI with hide show button and use image as placeholder

UI Components

Here is a demo with HTML, CSS, and jQuery script to create OTP input UI with toggle hide-show click eye. I also show a lock icon as a placeholder for an empty field. DEMO See the Pen OTP UI with hide show button by Puneet Sharma (@webdevpuneet) on CodePen. HTML...

OTP Input Complete User Interface

jQuery, UI Components

OTP Input Complete User Interface Here is a working demo with HTML, CSS, and jQuery Script for the complete functional OTP user interface for you web pages. DEMO See the Pen OTP Input by Puneet Sharma (@webdevpuneet) on CodePen. HTML <div...

Organization Chart – Tree Structure

UI Components

An organization chart, also known as an org chart or organizational chart, is a graphical representation of a company’s structure, showing the hierarchy of positions and the relationships between them. It is an essential tool for communicating the reporting...