CSS Archives - Devnote

CSS List Property With Example

Devnote team — Tue, 10 Dec 2024 00:50:53 +0000

This tutorial is for CSS List Property With Example. The list-style-type CSS property sets the marker (such as a character, disc, or custom counter and images style) of a list item element. The CSS list properties to set different list item markers for ordered lists. Set an image as the list item marker. And add background colors to lists and list items. I will help you to learn CSS List Property in a simple way with an example that that includes syntax, value, and descriptions. In this example, I will cover list-style property like list-style-image, list-style-type.

Example

The post CSS List Property With Example appeared first on Devnote.

How to Create a Cookie Consent Popup in JavaScript

Devnote team — Fri, 24 Nov 2023 07:00:45 +0000

In this tutorial, we will learn how to create a clean and user-friendly Cookie Consent Popup using JavaScript, HTML, and CSS. You have probably seen this popup on many websites. It informs users about cookie usage and allows them to accept the terms before continuing. Cookies store small pieces of data like preferences or login details so your website can remember returning visitors.

We will build this popup from scratch without any external libraries. When a user clicks the accept button, their choice will be saved in the browser using cookies or local storage. This prevents the popup from showing every time the page reloads. By the end of this guide, you will understand how to design the popup interface, handle user actions with JavaScript, and provide a smooth user experience on your website.

Also read: How to add GDPR Cookie Consent in Laravel

When users come to your website, they will get a cookie consent popup and accept the cookies policy. Cookie Consent is what users must know about the cookie privacy & policy of your website.

Create a Cookie Consent Popup in JavaScript







    

    

    How to Create a Cookie Consent Popup in JavaScript

    

    





    

        Cookie Consent

        Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit ducimus, doloremque eligendi animi minus reiciendis perferendis exercitationem soluta ut dolorum nemo corrupti, praesentium asperiores cumque qui earum. Voluptas, ipsam sint? Cookie Policy & Privacy

How to Create a Cookie Consent Popup in JavaScript Output

The post How to Create a Cookie Consent Popup in JavaScript appeared first on Devnote.

Magic Navigation Menu using HTML CSS and Javascript

Devnote team — Fri, 29 Sep 2023 03:25:36 +0000

Today, In this tutorial, I will explain How to create a Magic Navigation Menu using HTML CSS, and Javascript with examples. I will give you an example of How to create a magic navigation menu indicator using HTML, CSS, and Javascript with example.

Magic Navigation Menu using HTML CSS and Javascript

index.html



 

    
    
    
    Magic Navigation Menu using HTML CSS and Javascript
    
    


 
    
        
            
                
                    
                        
                    
                    Home
                    
                
            
            
                
                    
                        
                    
                    Contact
                    
                
            
            
                
                    
                        
                    
                    Chat
                    
                
            
            
                
                    
                        
                    
                    Gallery
                    
                
            
            
                
                    
                        
                    
                    Customize

styles.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,900;1,700&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
 
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #06021b;
}
 
.navigation {
    position: relative;
    width: 440px;
    height: 70px;
    background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
}
 
.navigation ul {
    display: flex;
    width: 350px;
}
 
.navigation ul li {
    position: relative;
    width: 70px;
    height: 70px;
    list-style: none;
    z-index: 1;
}
 
.navigation ul li a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    text-align: center;
}
 
.navigation ul li a .icon {
    position: relative;
    display: block;
    line-height: 75px;
    font-size: 24px;
    text-align: center;
    color: #fff;
    transition: 0.4s;
}
 
.navigation ul li.active a .icon {
    transform: translateY(-36px);
}
 
.navigation ul li a .text {
    position: absolute;
    color: #fff;
    font-size: 16px;
    opacity: 0;
    transform: translateY(20px);
    transition: 0.4s;
}
 
.navigation ul li.active a .text {
    opacity: 1;
    transform: translateY(10px);
}
 
.navigation ul li a .circle {
    position: absolute;
    display: block;
    width: 50px;
    height: 50px;
    background: transparent;
    border-radius: 50%;
    border: 1.8px solid #fff;
    transform: translateY(-37px) scale(0);
}
 
.navigation ul li.active a .circle {
    transition: 0.4s;
    transition-delay: 0.4s;
    transform: translateY(-37px) scale(1);
}
 
.selected {
    position: absolute;
    top: -50%;
    width: 70px;
    height: 70px;
    background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
    border: 6px solid #06021b;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .5s;
}
 
.selected::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -22px;
    width: 20px;
    height: 20px;
    background: transparent;
    border-top-right-radius: 20px;
    box-shadow: 1px -10px 0 #06021b;
}
 
.selected::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -22px;
    width: 20px;
    height: 20px;
    background: transparent;
    border-top-left-radius: 20px;
    box-shadow: -1px -10px 0 #06021b;
}
 
.navigation ul li:nth-child(1).active~.selected {
    transform: translateX(calc(70px * 0));
}
 
.navigation ul li:nth-child(2).active~.selected {
    transform: translateX(calc(70px * 1));
}
 
.navigation ul li:nth-child(3).active~.selected {
    transform: translateX(calc(70px * 2));
}
 
.navigation ul li:nth-child(4).active~.selected {
    transform: translateX(calc(70px * 3));
}
 
.navigation ul li:nth-child(5).active~.selected {
    transform: translateX(calc(70px * 4));
}

.color-white {
    color: #FFF;
}

scripts.js

const listClass = document.querySelectorAll('.list');
 
function activeLink() {
    listClass.forEach((value) =>
    value.classList.remove('active'));
    this.classList.add('active');
}
 
listClass.forEach(
    (value) => value.addEventListener('click', activeLink)
);

Output:

Magic Navigation Menu using HTML CSS and Javascript Output

The post Magic Navigation Menu using HTML CSS and Javascript appeared first on Devnote.

Export HTML Table to PDF using jQuery

Devnote team — Sat, 16 Sep 2023 03:49:28 +0000

In this tutorial, we will learn how to export an HTML table to PDF using jQuery. Many web developers struggle with converting HTML tables into PDF files and often think they must install heavy PHP libraries like FPDF. The good news is: you can do it directly on the client side using JavaScript.

We will use two popular libraries:

html2canvas – to capture the HTML table as a canvas/image
pdfMake – to generate a PDF document from that image

No server-side PDF library is required.

What We Are Going to Build

A simple HTML table
A button labeled “Export to PDF”
When the button is clicked, the table will be captured and downloaded as a PDF file

Example



    Export HTML Table to PDF using jQuery
     


    Export HTML Table to PDF using jQuery
     
        
            Id
            Name
            Email
            Age
        
        
            1
            Raj
            [email protected]
            20
        
        
            2
            John
            [email protected]
            21
        
        
            3
            Lark
            [email protected]
            24
        
        
            4
            Emely
            [email protected]
            24
        
        
            5
            kel
            [email protected]
            27

Output

Export HTML Table to PDF using jQuery

Id	Name	Email	Age
1	Raj	[email protected]	20
2	John	[email protected]	21
3	Lark	[email protected]	24
4	Emely	[email protected]	24
5	kel	[email protected]	27

The post Export HTML Table to PDF using jQuery appeared first on Devnote.

How to make a Calculator using HTML CSS JavaScript

Devnote team — Fri, 28 Jul 2023 05:35:31 +0000

In this tutorial, we will learn JavaScript Calculator Project. If you find out How to make a Calculator using HTML CSS JavaScript then you are in the right place. In this tutorial, first, create the UI design of the Calculator using HTML CSS and then create JavaScript code. we will add the functionality to the calculator. This tutorial is the best JavaScript calculator Project for beginners.

Make a Calculator using HTML CSS and JavaScript

How to make a Calculator using HTML CSS JavaScript Output

index.html




    
    
    
    How to make a Calculator using HTML CSS JavaScript - Devnote.in

style.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;1,700&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, #0a0a0a, #3a4452);
}

.calculator {
    border: 1px solid #717377;
    padding: 20px;
    border-radius: 16px;
    background: transparent;
    box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);
}

#textinput {
    width: 320px;
    border: none;
    padding: 24px;
    margin: 10px;
    background: transparent;
    box-shadow: 0px 3px 15px rgbs(84, 84, 84, 0.1);
    font-size: 40px;
    text-align: right;
    cursor: pointer;
    color: #ffffff;
}

#textinput::placeholder{
    color: #ffffff;
}

button {
    border: none;
    width: 60px;
    height: 60px;
    margin: 10px;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    font-size: 20px;
    box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.equalBtn {
    background-color: #fa0000;
}

.operators {
    color: #00ff1d;
}

script.js

let input = document.getElementById('textinput');
let buttons = document.querySelectorAll('button');

let string = "";
let arr = Array.from(buttons);
arr.forEach(button => {
    button.addEventListener('click', (e) =>{
        if(e.target.innerHTML == '='){
            string = eval(string);
            input.value = string;
        }

        else if(e.target.innerHTML == 'AC'){
            string = "";
            input.value = string;
        }
        else if(e.target.innerHTML == 'DEL'){
            string = string.substring(0, string.length-1);
            input.value = string;
        }
        else{
            string += e.target.innerHTML;
            input.value = string;
        }
    })
})

The post How to make a Calculator using HTML CSS JavaScript appeared first on Devnote.

How to Create a Draggable Card Slider Using HTML, CSS, and JavaScript

Devnote team — Mon, 24 Jul 2023 05:20:39 +0000

Today we will Create A Draggable Card Slider in HTML CSS & JavaScript. Mostly, Sliders have become a crucial part of web design and are used to show images or content in an engaging and interactive way. In this blog post, we will show you how to create a draggable card slider in HTML, CSS, and JavaScript. which can be used to display images, reviews, testimonials, products, user profiles, and other content.

In this tutorial, we will create a draggable card slider that works, we don’t use any external JavaScript libraries such as Owl Carousel or SwiperJs. Instead, we will create the slider from scratch using JavaScript, HTML, and CSS. A Draggable card slider, the user can slide cards by dragging using the left or right arrow. It also includes infinite scrolling and autoplay functionality.

Learn how to build a custom draggable card slider using pure HTML, CSS, and JavaScript. No external libraries required. We’ll create a smooth sliding interface that supports drag, infinite scrolling, and autoplay.

How to Create A Draggable Card Slider in HTML CSS & JavaScript

Example

index.html




    
    How to Create A Draggable Card Slider in HTML CSS & JavaScript
    
    
    
    



    
        How to Create A Draggable Card Slider in HTML CSS & JavaScript
        
        
            
                
                John India
                Sales Manager
            
            
                
                Mike US
                Web Developer
            
            
                
                Lary US
                Online Teacher
            
            
                
                James Canada
                Freelancer
            
            
                
                Kishan India
                Bank Manager
            
            
                
                Lomas India
                App Designer

styles.css

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

body {
    display: flex;
    padding: 0 35px;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.text-center {
    text-align: center;
}

.main-wrapper {
    max-width: 1100px;
    width: 100%;
    position: relative;
}

.main-wrapper i {
    top: 50%;
    height: 50px;
    width: 50px;
    cursor: pointer;
    font-size: 1.25rem;
    position: absolute;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
    transform: translateY(-50%);
    transition: transform 0.1s linear;
}

.main-wrapper i:active {
    transform: translateY(-50%) scale(0.85);
}

.main-wrapper i:first-child {
    left: -22px;
}

.main-wrapper i:last-child {
    right: -22px;
}

.main-wrapper .carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% / 3) - 12px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    border-radius: 8px;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.carousel::-webkit-scrollbar {
    display: none;
}

.carousel.no-transition {
    scroll-behavior: auto;
}

.carousel.dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.carousel.dragging .card {
    cursor: grab;
    user-select: none;
}

.carousel :where(.card, .img) {
    display: flex;
    justify-content: center;
    align-items: center;
}

.carousel .card {
    scroll-snap-align: start;
    height: 342px;
    list-style: none;
    background: #fff;
    cursor: pointer;
    padding-bottom: 15px;
    flex-direction: column;
    border-radius: 8px;
}

.carousel .card .img {
    background: #8B53FF;
    height: 148px;
    width: 148px;
    border-radius: 50%;
}

.card .img img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
}

.carousel .card h2 {
    font-weight: 500;
    font-size: 1.56rem;
    margin: 30px 0 5px;
}

.carousel .card span {
    color: #6A6D78;
    font-size: 1.31rem;
}

@media screen and (max-width: 900px) {
    .main-wrapper .carousel {
        grid-auto-columns: calc((100% / 2) - 9px);
    }
}

@media screen and (max-width: 600px) {
    .main-wrapper .carousel {
        grid-auto-columns: 100%;
    }
}

scripts.js

const wrapper = document.querySelector(".main-wrapper");
const carousel = document.querySelector(".carousel");
const firstCardWidth = carousel.querySelector(".card").offsetWidth;
const arrowBtns = document.querySelectorAll(".main-wrapper i");
const carouselChildrens = [...carousel.children];

let isDragging = false,
isAutoPlay = true,
startX, startScrollLeft, timeoutId;

let cardPerView = Math.round(carousel.offsetWidth / firstCardWidth);

carouselChildrens.slice(-cardPerView).reverse().forEach(card => {
    carousel.insertAdjacentHTML("afterbegin", card.outerHTML);
});


carouselChildrens.slice(0, cardPerView).forEach(card => {
    carousel.insertAdjacentHTML("beforeend", card.outerHTML);
});

carousel.classList.add("no-transition");
carousel.scrollLeft = carousel.offsetWidth;
carousel.classList.remove("no-transition");
arrowBtns.forEach(btn => {
    btn.addEventListener("click", () => {
        carousel.scrollLeft += btn.id == "left" ? -firstCardWidth : firstCardWidth;
    });
});

const dragStart = (e) => {
    isDragging = true;
    carousel.classList.add("dragging");
    startX = e.pageX;
    startScrollLeft = carousel.scrollLeft;
}

const dragging = (e) => {
    if (!isDragging) return;
    carousel.scrollLeft = startScrollLeft - (e.pageX - startX);
}

const dragStop = () => {
    isDragging = false;
    carousel.classList.remove("dragging");
}

const infiniteScroll = () => {
    if (carousel.scrollLeft === 0) {
        carousel.classList.add("no-transition");
        carousel.scrollLeft = carousel.scrollWidth - (2 *
            carousel.offsetWidth);
        carousel.classList.remove("no-transition");
    }

    else if (Math.ceil(carousel.scrollLeft) === carousel.scrollWidth -
        carousel.offsetWidth) {
        carousel.classList.add("no-transition");
        carousel.scrollLeft = carousel.offsetWidth;
        carousel.classList.remove("no-transition");
    }

    clearTimeout(timeoutId);
    if (!wrapper.matches(":hover")) autoPlay();
}

const autoPlay = () => {
    if (window.innerWidth < 800 || !isAutoPlay) return;
    timeoutId = setTimeout(() => carousel.scrollLeft += firstCardWidth,
        2500);
}

autoPlay();
carousel.addEventListener("mousedown", dragStart);
carousel.addEventListener("mousemove", dragging);
document.addEventListener("mouseup", dragStop);
carousel.addEventListener("scroll", infiniteScroll);
wrapper.addEventListener("mouseenter", () => clearTimeout(timeoutId));
wrapper.addEventListener("mouseleave", autoPlay);

Download

Download source code

The post How to Create a Draggable Card Slider Using HTML, CSS, and JavaScript appeared first on Devnote.

How to create Analog Clock in HTML CSS & JavaScript

Devnote team — Wed, 19 Jul 2023 12:00:27 +0000

Today we will learn How to create Analog Clock in HTML CSS & JavaScript. In this example we will create an analog clock using HTML, CSS, and JavaScript is an excellent way to improve your coding skills in web designing and development. I will provide guidance on how to create dark and light mode options for the clock’s functionality.

How to create Analog Clock in HTML CSS & JavaScript

Example




    
    
    
    How to create Analog Clock in HTML CSS & JavaScript
    



    
        
            1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
            
                
                
                
            
        
        Dark Mode

Output

how to create an analog clock in html css javascript output

Download

Download File

The post How to create Analog Clock in HTML CSS & JavaScript appeared first on Devnote.

How to Detect AdBlock using HTML CSS & JavaScript

Devnote team — Wed, 08 Feb 2023 07:19:51 +0000

Today we will learn How to Detect AdBlock using HTML CSS & JavaScript. In this tutorial, you’ll learn how to Detect AdBlock using JavaScript. In the earlier blog, I shared Detect Internet Connection using HTML CSS & JavaScript.

AdBlocker is a content filtering, that blocks check online ads from interrupting your browsing experience. This code helps the user prevent unintended flashing banners, pop-ups, and online advertisements from being displayed.

Detect AdBlock using JavaScript can see in the preview image, there is a popup box with text and a button to dismiss the popup. If the user has enabled AdBlocker, then this popup will be open; if not, then this popup will close.

Detect AdBlock using JavaScript

To create this program [Detect AdBlock using JavaScript]. First, we need to create two files: one index.html and another style.css file. After creating these files, just paste the below codes into your file.

Example

HTML File

Create an HTML file with the name index.html and paste the below codes into your HTML file.

#index.html




    
    
    Detect AdBlock using JavaScript
    
    



    
    
        
            
                
            
            AdBlock Detected!

            Welcome to Devnote
            It looks like you're using an ad-blocker!
            Devnote is an advertising supported site and we noticed you have ad-blocking enabled.
            Please turn off your Ad-Blocker

CSS File

Create a CSS file with the name style.css and paste the below codes into your CSS file.

#style.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Poppins:wght@400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
}

body {
    width: 100%;
    height: 100vh;
    background: linear-gradient(#159957, #155799 100%);
}

.ads-wrapper {
    position: absolute;
    max-width: 480px;
    top: 50%;
    left: 50%;
    width: 100%;
    background: #fff;
    padding: 40px 30px;
    opacity: 0;
    pointer-events: none;
    border-radius: 16px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.06);
    transform: translate(-50%, -50%) scale(1.2);
    transition: opacity 0.2s 0s ease-in-out, transform 0.2s 0s ease-in-out;
}

.ads-wrapper.show {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.ads-wrapper .ads-content,
.ads-content .exclamation-icon,
.exclamation-icon .icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ads-wrapper .ads-content {
    flex-direction: column;
}

.ads-content .exclamation-icon {
    height: 115px;
    width: 115px;
    border-radius: 50%;
    background: linear-gradient(#159957, #155799 100%);
}

.exclamation-icon .icon {
    height: 100px;
    width: 100px;
    background: #fff;
    border-radius: inherit;
}

.exclamation-icon .icon i {
    background: linear-gradient(#159957, #155799 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 50px;
}

.ads-content h2 {
    font-size: 32px;
    margin-top: 35px;
}

.ads-content p {
    font-size: 17px;
    margin-top: 20px;
    text-align: center;
}

.ads-btn {
    height: 57px;
    width: 223px;
    margin-top: 30px;
    border-radius: 50px;
    position: relative;
    overflow: hidden;
}

.ads-btn .background-layer {
    height: 100%;
    width: 300%;
    position: absolute;
    left: -100%;
    background: linear-gradient(#159957, #155799 100%);
    transition: all 0.4s ease;
}

.ads-btn:hover .background-layer {
    left: 0;
}

.ads-content .okay {
    position: relative;
    z-index: 1;
    height: 100%;
    width: 100%;
    background: none;
    font-size: 18px;
    border: none;
    outline: none;
    color: #fff;
    cursor: pointer;
}

::selection {
    color: #fff;
    background: #159957;
}

Now you’ve successfully created How to Detect AdBlock using HTML CSS & JavaScript. If you’ve faced any errors then please
download the source code files from the given download button.

Download Code

The post How to Detect AdBlock using HTML CSS & JavaScript appeared first on Devnote.

How to Add Custom Dropdown in DataTable

Devnote team — Thu, 02 Feb 2023 13:45:42 +0000

In this tutorial, we will learn How to Add Custom Dropdown in DataTable. I will show how to use a custom drop-down menu to filter a DataTable by column value. I will give you an example to create a drop-down that displays the unique list of strings from a column and when the user selects the dropdown value, the data table will be rendered with only records with the selected value.

How to Add Custom Dropdown in DataTable

Table of concept

Gender column Dropdown Filter
Individual column searching

Gender column Dropdown Filter

Example






    

    How to Add Custom Dropdown in DataTable
    
    
    
    



    Gender column Dropdown Filter
    
        

        
        
            
                
                    Id
                    Username
                    Email
                    Gender
                
            
            
                
                    1
                    Meredithe
                    [email protected]
                    Female
                
                
                    2
                    Jere
                    [email protected]
                    Female
                
                
                    3
                    Fara
                    [email protected]
                    Female
                
                
                    4
                    Neron
                    [email protected]
                    Male
                
                
                    5
                    Estel
                    [email protected]
                    Bigender
                
                
                    6
                    Brittni
                    [email protected]
                    Female
                
                
                    7
                    Huntington
                    [email protected]
                    Male
                
                
                    8
                    Cristin
                    [email protected]
                    Female
                
                
                    9
                    Grethel
                    [email protected]
                    Female
                
                
                    10
                    Letitia
                    [email protected]
                    Female
                
                
                    11
                    Alonso
                    [email protected]
                    Male
                
                
                    12
                    Vick
                    [email protected]
                    Male
                
                
                    13
                    Sharity
                    [email protected]
                    Female
                
                
                    14
                    Korie
                    [email protected]
                    Female
                
                
                    15
                    Terry
                    [email protected]
                    Genderfluid
                
                
                    16
                    Estel
                    [email protected]
                    Bigender
                
                
                    17
                    Brittni
                    [email protected]
                    Female
                
                
                    18
                    Huntington
                    [email protected]
                    Male
                
                
                    19
                    Cristin
                    [email protected]
                    Female
                
                
                    20
                    Grethel
                    [email protected]
                    Female
                
                
                    21
                    Letitia
                    [email protected]
                    Female

Id	Username	Email	Gender
1	Meredithe	[email protected]	Female
2	Jere	[email protected]	Female
3	Fara	[email protected]	Female
4	Neron	[email protected]	Male
5	Estel	[email protected]	Bigender
6	Brittni	[email protected]	Female
7	Huntington	[email protected]	Male
8	Cristin	[email protected]	Female
9	Grethel	[email protected]	Female
10	Letitia	[email protected]	Female
11	Alonso	[email protected]	Male
12	Vick	[email protected]	Male
13	Sharity	[email protected]	Female
14	Korie	[email protected]	Female
15	Terry	[email protected]	Genderfluid
16	Estel	[email protected]	Bigender
17	Brittni	[email protected]	Female
18	Huntington	[email protected]	Male
19	Cristin	[email protected]	Female
20	Grethel	[email protected]	Female
21	Letitia	[email protected]	Female

Live Example

Individual column searching

In this example, you can add an event handler when the select element is changed and when you can change the content of the next selection using the selector-modifier.

Individual column searching

Example






    

    How to Add Custom Dropdown in DataTable
    
    
    



    Individual column searching
    

        
        
            
                
                    Id
                    Username
                    Email
                    Gender
                
            
            
                
                    1
                    Meredithe
                    [email protected]
                    Female
                
                
                    2
                    Jere
                    [email protected]
                    Female
                
                
                    3
                    Fara
                    [email protected]
                    Female
                
                
                    4
                    Neron
                    [email protected]
                    Male
                
                
                    5
                    Estel
                    [email protected]
                    Bigender
                
                
                    6
                    Brittni
                    [email protected]
                    Female
                
                
                    7
                    Huntington
                    [email protected]
                    Male
                
                
                    8
                    Cristin
                    [email protected]
                    Female
                
                
                    9
                    Grethel
                    [email protected]
                    Female
                
                
                    10
                    Letitia
                    [email protected]
                    Female
                
                
                    11
                    Alonso
                    [email protected]
                    Male
                
                
                    12
                    Vick
                    [email protected]
                    Male
                
                
                    13
                    Sharity
                    [email protected]
                    Female
                
                
                    14
                    Korie
                    [email protected]
                    Female
                
                
                    15
                    Terry
                    [email protected]
                    Genderfluid
                
                
                    16
                    Estel
                    [email protected]
                    Bigender
                
                
                    17
                    Brittni
                    [email protected]
                    Female
                
                
                    18
                    Huntington
                    [email protected]
                    Male
                
                
                    19
                    Cristin
                    [email protected]
                    Female
                
                
                    20
                    Grethel
                    [email protected]
                    Female
                
                
                    21
                    Letitia
                    [email protected]
                    Female
                
            
            
                
                    Id
                    Username
                    Email
                    Gender

Id	Username	Email	Gender
1	Meredithe	[email protected]	Female
2	Jere	[email protected]	Female
3	Fara	[email protected]	Female
4	Neron	[email protected]	Male
5	Estel	[email protected]	Bigender
6	Brittni	[email protected]	Female
7	Huntington	[email protected]	Male
8	Cristin	[email protected]	Female
9	Grethel	[email protected]	Female
10	Letitia	[email protected]	Female
11	Alonso	[email protected]	Male
12	Vick	[email protected]	Male
13	Sharity	[email protected]	Female
14	Korie	[email protected]	Female
15	Terry	[email protected]	Genderfluid
16	Estel	[email protected]	Bigender
17	Brittni	[email protected]	Female
18	Huntington	[email protected]	Male
19	Cristin	[email protected]	Female
20	Grethel	[email protected]	Female
21	Letitia	[email protected]	Female
Id	Username	Email	Gender

Live Example

The post How to Add Custom Dropdown in DataTable appeared first on Devnote.

How To Create a Simple Animation Movie Using HTML

Devnote team — Mon, 16 Jan 2023 07:15:22 +0000

Today, I will give you an example of How To Create a Simple Animation Movie Using HTML. In this tutorial, you can make that type of animation easily in HTML just using notepad++. This animation is as simple as you insert an image tag in HTML. In this tutorial, you will make simple animation movies using HTML and CSS code. After watching this tutorial you can make it in just only 2 minutes and will be made that type of animation.

Also read: Top 10 HTML Awesome tags

How To Create a Simple Animation Movie Using HTML

Also read: Animated Indian flag using CSS

Now, Open the notepad++ and write the below code:




    
    
    How To Create a Simple Animation Movie Using HTML

Also read: How to use HTML Marquee tag

Here, is the perfect speed for this Animation. what do you think about it?

it is used to slow the delay. it is used for fast. Marquee Tag download The post How To Create a Simple Animation Movie Using HTML appeared first on Devnote.