My Blog

Author: saqibkhan

  •  Drawsvg.js

    Drawsvg.js is a jQuery plugin to draw svg images

    A Simple of drawsvg example as shown below −

    <!DOCTYPE html><html lang ="en"><head><meta charset ="UTF-8"><link rel ="shortcut icon" type ="image/x-icon" href ="favicon.ico"><link rel ="stylesheet" 

         href ="https://fonts.googleapis.com/css?family=Open+Sans:400,600"&gt;&lt;link rel ="stylesheet" href ="style.css"&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="intro"&gt;&lt;div class="container"&gt;&lt;div class="overlay"&gt;&lt;div class="inner"&gt;&lt;h1&gt;jQuery DrawSVG Sample&lt;/h1&gt;&lt;div class="items-wrapper"&gt;&lt;div class="item active"&gt;&lt;svg viewBox ="0 0 201 146"class="svgClass" 
                       style ="background-color:#ffffff00" 
                          xmlns ="https://www.w3.org/2000/svg" width ="201"
                          height ="146"&gt;&lt;g stroke ="#FFF" stroke-width ="1" fill ="none"&gt;&lt;path d = "M200.5128.586c0 9.302-7.67816.914-17.0616.914H17.56C8.18145.5.5137.888.5128.586V29.414C.520.1128.17812.517.5612.5h165.88c9.382017.067.61217.0616.914v99.172z"/&gt;&lt;path d = "M183.82880.118c0 26.467-21.64447.924-48.3447.924-26.6980-48.342-21.457-48.342-47.924s21.644-47.92448.34-47.924c26.698048.34221.45748.34247.924z"/&gt;&lt;path d = "M171.9880.118c0 19.978-16.33836.177-36.49336.177-20.150-36.49-16.2-36.49-36.1770-19.9816.34-36.17736.49-36.17720.155036.49416.236.49436.178z"/&gt;&lt;path d = "M50.1848.637c0 6.49-5.30411.747-11.85211.747-6.5430-11.847-5.258-11.847-11.7470-6.4885.305-11.74611.848-11.7466.548011.8525.2611.85211.747z"/&gt;&lt;path d = "M17.92839.877c3.41-7.83511.258-13.30520.416-13.3059.16017.0065.4720.41613.305"/&gt;&lt;path d ="M46 12V4H26v8"/&gt;&lt;path d ="M94.833 12l11.5-11.5h59.5l11.5 11.5"/&gt;&lt;path d ="M26.333 92.5h35.5"/&gt;&lt;path d ="M26.333 105.5h43"/&gt;&lt;path d ="M26.333 117.5h52"/&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;svg viewBox ="0 0 207 105" style ="background-color:#ffffff00" 
                       xmlns ="https://www.w3.org/2000/svg" width ="207" 
                       height ="105"&gt;&lt;g stroke ="#FFF" stroke-width ="1" fill ="none"&gt;&lt;path d = "M12763.496C127 85.306144.455103165.998103187.53810320585.30620563.49620541.682187.53724165.99824144.4552412741.68212763.496z"/&gt;&lt;path d ="M195 63.497C195 47.206 182.015 34 166 34"/&gt;&lt;path d = "M263.496C2 85.30619.45510341.00210362.5421038085.3068063.4968041.68262.542441.0022419.45524241.682263.496z"/&gt;&lt;path d = "M64.29622.732C57.65618.09447.4921641.00216c-6.490-12.6751.33-18.33.732-5.6222.404-10.6865.88-14.93810.178"/&gt;&lt;path d = "M159.71563.576c0 3.6342.9026.5756.496.5753.58206.484-2.946.484-6.5740-3.63-2.903-6.575-6.486-6.575-3.5870-6.492.946-6.496.576z"/&gt;&lt;path d = "M34.87364.032c0 3.632.9076.5756.4946.5753.57806.485-2.9456.485-6.5750-3.635-2.907-6.575-6.485-6.575-3.5870-6.4942.94-6.4946.575z"/&gt;&lt;path d ="M163.25 57.026L141.773 3"/&gt;&lt;path d ="M98 63.5H48"/&gt;&lt;path d ="M101.73 57.63L70.5 14.013"/&gt;&lt;path d ="M70.49 14.5h76.646v-.206"/&gt;&lt;path d ="M139.134 14.505L108.468 57.95"/&gt;&lt;path d ="M70.894 15.05L42.834 57.05"/&gt;&lt;path d ="M70.5 14V3"/&gt;&lt;path d ="M141.427 3.23s19.83-7.71 19.83 6.344"/&gt;&lt;path d = "M97.81662.52c0 3.5762.866.4756.396.475s6.392-2.96.392-6.476c0-3.577-2.86-6.476-6.39-6.476s-6.3922.9-6.3926.476z"/&gt;&lt;path d ="M106.642 69.26l2.913 11.044"/&gt;&lt;path d ="M105 83l10-5"/&gt;&lt;path d ="M62.5 3.5h18"/&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;svg viewBox ="0 0 201 116" style ="background-color:#ffffff00" 
                       xmlns ="https://www.w3.org/2000/svg" width ="201" 
                       height ="116"&gt;&lt;g stroke ="#FFF" stroke-width ="1" fill ="none"&gt;&lt;path d = "M19.5101.5V6.45C19.53.17623.12.526.402.5H175.53c3.28205.972.6775.975.95v95.05"/&gt;&lt;path d ="M171.5 89.5h-140v-77h140v77z"/&gt;&lt;path d = "M200.5107.526c0 1.635-1.3442.974-2.9852.974H3.485c-1.640-2.985-1.34-2.985-2.974v-3.052c0-1.6351.344-2.9742.985-2.974h194.03c1.6402.9851.342.9852.974v3.052z"/&gt;&lt;path d ="M1 110l10.5 5.5"/&gt;&lt;path d ="M11.604 115.5H189.46"/&gt;&lt;path d ="M189.5 115.5l9.5-5.5"/&gt;&lt;path d ="M99.5 7.5h5"/&gt;&lt;path d ="M138.5 12.5l28 28"/&gt;&lt;path d ="M148.5 12.5l18 18"/&gt;&lt;path d ="M159.5 12.5l7 6"/&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;svg viewBox ="0 0 200 155" style ="background-color:#ffffff00" 
                       xmlns ="https://www.w3.org/2000/svg" width ="200" 
                       height ="155"&gt;&lt;g stroke ="#FFF" stroke-width ="1" fill ="none"&gt;&lt;path d="M161.996151.39l-33.97-27.178-45.0130.576-35.67-27.603L.36154.24538.66220.0480.8934.034l39.06617.41L161.995.213l37.79222.932-37.792128.246z"/&gt;&lt;path d ="M47.346 127.185L80.892 4.035"/&gt;&lt;path d ="M83.015 154.788l36.942-133.343"/&gt;&lt;path d ="M128.025 124.212l33.97-124"/&gt;&lt;path d ="M46.278 23.935L32.29 75.605"/&gt;&lt;path d ="M95.802 45.718L81.19 97.225"/&gt;&lt;path d ="M106.91 33.115l-22.26 81.39"/&gt;&lt;path d = "M176.76846.665c0 3.523-2.856.376-6.3666.376-3.5140-6.364-2.852-6.364-6.3750-3.5122.85-6.376.364-6.373.51606.3662.8586.3666.37z"/&gt;&lt;path d = "M180.952.392l-10.84419.91-10.394-19.995s-1.143-3.215-1.143-5.067c0-6.5145.273-11.8111.79-11.816.508011.7825.29611.78211.8101.852-1.1925.152-1.1925.152z"/&gt;&lt;path d = "M43.8692.528c0 3.523-2.856.376-6.3676.376-3.5140-6.364-2.853-6.364-6.3760-3.5122.85-6.376.363-6.373.51706.3662.8586.3666.37z"/&gt;&lt;path d = "M47.9998.255l-10.84319.91L26.75498.17s-1.143-3.215-1.143-5.067c0-6.5145.275-11.8111.793-11.816.507011.785.29611.7811.8101.852-1.1925.152-1.1925.152z"/&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id ="fb-root"&gt;&lt;/div&gt;&lt;script async src ="//assets.codepen.io/assets/embed/ei.js"&gt;&lt;/script&gt;&lt;script src ="https://cdn.jsdelivr.net/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;&lt;script 
     src ="https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.min.js"&gt;&lt;/script&gt;&lt;script src ="jquery.drawsvg.min.js"&gt;&lt;/script&gt;&lt;script&gt;$(function(){var $doc =$(document),
        $win =$(window);var $intro =$('.intro'),
        $items = $intro.find('.item'),
        itemsLen = $items.length,
			
        svgs = $intro.find('svg').drawsvg({
           callback: animateIntro,
           easing:'easeOutQuart'}),
			
        currItem =0;functionanimateIntro(){
           $items.removeClass('active').eq( currItem++% itemsLen 
              ).addClass('active').find('svg').drawsvg('animate');}animateIntro();var $header =$('header'),
        headerOffTop = $header.offset().top,
        isFixed =false;functionmenu(){if( $win.scrollTop()&gt;= headerOffTop ){if(!isFixed ){
                 isFixed =true;
                 $header.addClass('affix');}}elseif( isFixed ){
              isFixed =false;
              $header.removeClass('affix');}}
    

            $win.on('scroll', menu);menu();
    

            $header.on('click','a[href^="#"]',function(e){
           e.preventDefault();var hash =this.hash,
           offset =$(hash).offset().top;$('body, html').animate({
              scrollTop: offset
           },600,'easeInOutQuart',function(){
              document.location.hash = hash;});});});&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • Slideshow.js

    Slideshow.js is a jQuery plugin for quickly and easily implementing slide show of images or videos into your website.

    A Simple of slide show example as shown below −

    <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns ="https://www.w3.org/1999/xhtml" xml:lang ="en" lang ="en"><head><meta http-equiv ="content-type" content ="text/html; charset = UTF-8"/><link rel ="stylesheet" href ="css/supersized.css" type ="text/css" 

         media ="screen"/&gt;&lt;link rel ="stylesheet" href ="theme/supersized.shutter.css" 
     type ="text/css" media ="screen"/&gt;&lt;script type ="text/javascript" 
     src ="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"&gt;&lt;/script&gt;&lt;script type ="text/javascript" src =" js/jquery.easing.min.js"&gt;&lt;/script&gt;&lt;script type ="text/javascript" src =" js/supersized.3.2.7.min.js"&gt;&lt;/script&gt;&lt;script type ="text/javascript" src ="theme/supersized.shutter.min.js"&gt;&lt;/script&gt;&lt;script type ="text/javascript"&gt;jQuery(function($){
        $.supersized({
           slideshow         :1,			
           autoplay          :1,			
           start_slide       :1,			
           stop_loop         :0,			
           random            :0,			
           slide_interval    :3000,		
           transition        :6, 			
           transition_speed  :1000,		
           new_window        :1,			
           pause_hover       :0,			
           keyboard_nav      :1,			
           performance       :1,			
           image_protect     :1,			
                                            
           min_width         :0,			
           min_height        :0,			
           vertical_center   :1,			
           horizontal_center :1,			
           fit_always        :0,			
           fit_portrait      :1,			
           fit_landscape     :0,			
           
           slide_links       :'blank',	
           thumb_links       :1,			
           thumbnail_navigation    :0,			
           slides            :[{
                 image :'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', 
                    title :'Sample demo', 
                    thumb :'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', 
                    url :'https://www.tutorialspoint.com'},{
                 image :'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', 
                    title :'Sample demo', 
                    thumb :'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', 
                    url :'https://www.tutorialspoint.com'},{
                 image :'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', 
                    title :'Sample demo', 
                    thumb :'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', 
                    url :'https://www.tutorialspoint.com'},{
                 image :'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', 
                    title :'Sample demo', 
                    thumb :'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', 
                    url :'https://www.tutorialspoint.com'},{
                 image :'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', 
                    title :'Sample demo', 
                    thumb :'https://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', 
                    url :'https://www.tutorialspoint.com'},],
           progress_bar      :1,			
           mouse_scrub       :0});});&lt;/script&gt;&lt;/head&gt;&lt;style type ="text/css"&gt;
  ul#demo-block{ margin:015px 15px 15px;}
  ul#demo-block li{ margin:0010px 0; padding:10px; display:inline; 
     float:left; clear:both; color:#aaa; background:url('img/bg-black.png'); 
     font:11px Helvetica, Arial, sans-serif;}
  ul#demo-block li a{ color:#eee; font-weight:bold;}&lt;/style&gt;&lt;body&gt;&lt;div id ="prevthumb"&gt;&lt;/div&gt;&lt;div id ="nextthumb"&gt;&lt;/div&gt;&lt;a id ="prevslide"class="load-item"&gt;&lt;/a&gt;&lt;a id ="nextslide"class="load-item"&gt;&lt;/a&gt;&lt;div id ="thumb-tray"class="load-item"&gt;&lt;div id ="thumb-back"&gt;&lt;/div&gt;&lt;div id ="thumb-forward"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id ="progress-back"class="load-item"&gt;&lt;div id ="progress-bar"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div id ="controls-wrapper"class="load-item"&gt;&lt;div id ="controls"&gt;&lt;a id ="play-button"&gt;&lt;img id ="pauseplay" src ="img/pause.png"/&gt;&lt;/a&gt;&lt;div id ="slidecounter"&gt;&lt;span class="slidenumber"&gt;&lt;/span&gt;/&lt;span class="totalslides"&gt;&lt;/span&gt;&lt;/div&gt;&lt;div id ="slidecaption"&gt;&lt;/div&gt;&lt;a id ="tray-button"&gt;&lt;img id ="tray-arrow" src ="img/button-tray-up.png"/&gt;&lt;/a&gt;&lt;ul id ="slide-list"&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • Progressbar.js

    Progressbar.js is a jQuery plugin for showing progress bar

    A Simple of progressbar example as shown below −

    <!doctype html><html><head><meta charset ="utf-8"><meta http-equiv ="X-UA-Compatible" content ="IE = edge,chrome = 1"><meta name ="viewport" content = "width = device-width, 

         initial-scale =1"&gt;&lt;link href ="https://www.jqueryscript.net/css/jquerysctipttop.css" 
     rel ="stylesheet" type ="text/css"&gt;&lt;link rel ="stylesheet" href ="jQuery-plugin-progressbar.css"&gt;&lt;script src ="https://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;&lt;script src ="jQuery-plugin-progressbar.js"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="progress-bar position"&gt;&lt;/div&gt;&lt;div class="progress-bar position" data-percent ="40" 
     data-duration ="1000" data-color ="#ccc,yellow"&gt;&lt;/div&gt;&lt;div class="progress-bar position" data-percent ="90" 
     data-color ="#a456b1,#12b321"&gt;&lt;/div&gt;&lt;input type ="submit" value ="reload"&gt;&lt;script&gt;$(".progress-bar").loading();$('input').on('click',function(){$(".progress-bar").loading();});&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • Alertify.js

    Alertify.js is a jQuery plugin for showing alert messages in different format

    A Simple of alertify example as shown below −

    <!doctype html><html lang ="en"><head><meta charset ="utf-8"><title>alertify.js - example page</title><link rel ="stylesheet" href ="alertify.core.css"/><link rel ="stylesheet" href ="alertify.default.css" id ="toggleCSS"/><meta name ="viewport" content ="width = device-width"><style>.alertify-log-custom {

            background: blue;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;h2&gt;Dialogs&lt;/h2&gt;&lt;a href ="#" id ="alert"&gt;Alert Dialog&lt;/a&gt;&lt;br&gt;&lt;a href ="#" id ="confirm"&gt;Confirm Dialog&lt;/a&gt;&lt;br&gt;&lt;a href ="#" id ="prompt"&gt;Prompt Dialog&lt;/a&gt;&lt;br&gt;&lt;a href ="#" id ="labels"&gt;Custom Labels&lt;/a&gt;&lt;br&gt;&lt;a href ="#" id ="focus"&gt;Button Focus&lt;/a&gt;&lt;br&gt;&lt;a href ="#" id ="order"&gt;Button Order&lt;/a&gt;&lt;h2&gt;Ajax&lt;/h2&gt;&lt;a href ="#" id ="ajax"&gt;Ajax - Multiple Dialog&lt;/a&gt;&lt;h2&gt;Logs&lt;/h2&gt;&lt;a href ="#" id ="notification"&gt;Standard Log&lt;/a&gt;&lt;br&gt;&lt;a href ="#" id ="success"&gt;Success Log&lt;/a&gt;&lt;br&gt;&lt;a href ="#" id ="error"&gt;Error Log&lt;/a&gt;&lt;br&gt;&lt;a href ="#" id ="custom"&gt;Custom Log&lt;/a&gt;&lt;br&gt;&lt;a href ="#" id ="delay"&gt;Hide in10 seconds&lt;/a&gt;&lt;br&gt;&lt;a href ="#" id ="forever"&gt;Persistent Log&lt;/a&gt;&lt;h2&gt;Themes&lt;/h2&gt;&lt;a href ="#" id ="bootstrap"&gt;Bootstrap Theme&lt;/a&gt;&lt;script src ="https://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;&lt;script src ="alertify.min.js"&gt;&lt;/script&amp;gt
    		

      &lt;script&gt;functionreset(){$("#toggleCSS").attr("href","alertify.default.css");
			
        alertify.set({
           labels :{
              ok     :"OK",
              cancel :"Cancel"},
				delay :5000,
           buttonReverse :false,
           buttonFocus   :"ok"});}$("#alert").on('click',function(){reset();
        alertify.alert("This is an alert dialog");returnfalse;});$("#confirm").on('click',function(){reset();
			
        alertify.confirm("This is a confirm dialog",function(e){if(e){
              alertify.success("You've clicked OK");}else{
              alertify.error("You've clicked Cancel");}});returnfalse;});$("#prompt").on('click',function(){reset();
			
        alertify.prompt("This is a prompt dialog",function(e, str){if(e){
              alertify.success("You've clicked OK and typed: "+ str);}else{
              alertify.error("You've clicked Cancel");}},"Default Value");returnfalse;});$("#ajax").on("click",function(){reset();
			
        alertify.confirm("Confirm?",function(e){if(e){
              alertify.alert("Successful AJAX after OK");}else{
              alertify.alert("Successful AJAX after Cancel");}});});$("#notification").on('click',function(){reset();
        alertify.log("Standard log message");returnfalse;});$("#success").on('click',function(){reset();
        alertify.success("Success log message");returnfalse;});$("#error").on('click',function(){reset();
        alertify.error("Error log message");returnfalse;});$("#delay").on('click',function(){reset();
        alertify.set({ delay:10000});
        alertify.log("Hiding in 10 seconds");returnfalse;});$("#forever").on('click',function(){reset();
        alertify.log("Will stay until clicked","",0);returnfalse;});$("#labels").on('click',function(){reset();
        alertify.set({ labels:{ ok:"Accept", cancel:"Deny"}});
			
        alertify.confirm("Confirm dialog with custom button labels",function(e){if(e){
              alertify.success("You've clicked OK");}else{
              alertify.error("You've clicked Cancel");}});returnfalse;});$("#focus").on('click',function(){reset();
        alertify.set({ buttonFocus:"cancel"});
			
        alertify.confirm("Confirm dialog with cancel button focused",function(e){if(e){
              alertify.success("You've clicked OK");}else{
              alertify.error("You've clicked Cancel");}});returnfalse;});$("#order").on('click',function(){reset();
        alertify.set({ buttonReverse:true});
			
        alertify.confirm("Confirm dialog with reversed button order",function(e){if(e){
              alertify.success("You've clicked OK");}else{
              alertify.error("You've clicked Cancel");}});returnfalse;});$("#custom").on('click',function(){reset();
        alertify.custom = alertify.extend("custom");
        alertify.custom("I'm a custom log message");returnfalse;});$("#bootstrap").on('click',function(){reset();$("#toggleCSS").attr("href",".alertify.bootstrap.css");
			
        alertify.prompt("Prompt dialog with bootstrap theme",function(e){if(e){
              alertify.success("You've clicked OK");}else{
              alertify.error("You've clicked Cancel");}},"Default Value");returnfalse;});&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • Rowgrid.js

    Rowgrid.js is a jQuery plugin for showing images in a row.

    A Simple of rowgrid example as shown below −

    <!doctype html><html lang ="en"><head><meta charset ="UTF-8"><style>.container:before,.container:after {

            content:"";
        display: table;}.container:after {
        clear: both;}.item {
        float: left;
        margin-bottom:15px;}.item img {
        max-width:100%;
        max-height:100%;
        vertical-align: bottom;}.first-item {
        clear: both;}.last-row,.last-row ~.item {
        margin-bottom:0;}&lt;/style&gt;&lt;script 
     src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;&lt;script src ="/jquery/src/rowgrid/jquery.row-grid.js"&gt;&lt;/script&gt;&lt;script&gt;$(document).ready(function(){$(".container").rowGrid({itemSelector:".item", 
           minMargin:10, maxMargin:25, firstItemClass:"first-item"});});&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;!-- Items with example images --&gt;&lt;div class="container"&gt;&lt;div class="item"&gt;&lt;img src ="https://www.tutorialspoint.com/images/75-logo.jpg" 
           width ="220" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://www.tutorialspoint.com/images/absolute-classes-free.jpg" 
           width ="180" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://www.tutorialspoint.com/images/absolute-classes-latest-technologies.jpg" 
           width ="250" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://www.tutorialspoint.com/images/absolute-classes.jpg" 
           width ="200" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/240/200?5" 
           width ="240" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/210/200?6" 
           width ="210" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/260/200?21" 
           width ="260" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/220/200?22" 
           width ="220" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/220/200?1" 
           width ="220" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/180/200?2" 
           width ="180" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/250/200?3" 
           width ="250" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/200/200?4" 
           width ="200" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/240/200?5" 
           width ="240" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/210/200?6" 
           width ="210" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/200/200?7" 
           width ="200" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/190/200?8" 
           width ="190" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/260/200?9" 
           width ="260" height ="200"/&gt;&lt;/div&gt;&lt;div class="item"&gt;&lt;img src ="https://lorempixel.com/220/200?10" 
           width ="220" height ="200"/&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • Slidebar.js

    Slidebars is a jQuery plugin for quickly and easily implementing app style off-canvas menus and sidebars into your website.

    A Simple of slidebar example as shown below −

    <!doctype html><html><head><title>Slidebars Animation Styles</title><meta name ="viewport" content = "width = device-width, 

         initial-scale =1.0, minimum-scale =1.0, 
     maximum-scale =1.0, user-scalable = no"&gt;&lt;link rel ="stylesheet" href ="slidebars.css"&gt;&lt;link rel ="stylesheet" href ="example-styles.css"&gt;&lt;/head&gt;&lt;body&gt;&lt;div id ="sb-site"&gt;&lt;h1&gt;Tutorilaspoint&lt;/h1&gt;&lt;p&gt;Slidebars is a jQuery plugin for quickly and easily
        implementing app style off-canvas menus and sidebars into your website.&lt;/p&gt;&lt;ul&gt;&lt;li class="sb-toggle-left"&gt;Click here for slider&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="sb-slidebar sb-left sb-style-push"&gt;&lt;p&gt;Android&lt;/p&gt;&lt;hr/&gt;&lt;p&gt;Java&lt;/p&gt;&lt;hr/&gt;&lt;p&gt;CSS&lt;/p&gt;&lt;hr/&gt;&lt;p&gt;PHP&lt;/p&gt;&lt;hr/&gt;&lt;/div&gt;&lt;script 
     src ="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;&lt;script src ="slidebars.js"&gt;&lt;/script&gt;&lt;script&gt;(function($){$(document).ready(function(){
           $.slidebars();});})(jQuery);&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  •  Multiscroll.js

    multiscroll.js is a jQuery plugin for creating split pages with two vertical scrolling panels.

    A Simple of multiscroll example as shown below −

    <!DOCTYPE html><html xmlns ="https://www.w3.org/1999/xhtml"><head><meta http-equiv ="Content-Type" content ="text/html; charset = utf-8"/><title>multiscroll.js - split multi-scrolling pages plugin</title><link rel ="stylesheet" type ="text/css" 

         href ="/jquery/src/multiscroller/jquery.multiscroll.css"/&gt;&lt;link rel ="stylesheet" type ="text/css" 
     href ="/jquery/src/multiscroller/examples.css"/&gt;&lt;script 
     src ="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;&lt;script type ="text/javascript" 
     src ="/jquery/src/multiscroller/jquery.easings.min.js"&gt;&lt;/script&gt;&lt;script type ="text/javascript" 
     src ="/jquery/src/multiscroller/jquery.multiscroll.js"&gt;&lt;/script&gt;&lt;script type ="text/javascript"&gt;$(document).ready(function(){$('#myContainer').multiscroll({
           sectionsColor:['#1bbc9b','#4BBFC3','#7BAABE'],
           anchors:['first','second','third'],
           menu:'#menu',
           navigation:true,
           navigationTooltips:['One','Two','Three'],
           loopBottom:true,
           loopTop:true});});&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;ul id ="menu"&gt;&lt;li data-menuanchor ="first"&gt;&lt;a href ="#first"&gt;First slide&lt;/a&gt;&lt;/li&gt;&lt;li data-menuanchor ="second"&gt;&lt;a href ="#second"&gt;Second slide&lt;/a&gt;&lt;/li&gt;&lt;li data-menuanchor ="third"&gt;&lt;a href ="#third"&gt;Third slide&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div id ="myContainer"&gt;&lt;div class="ms-left"&gt;&lt;div class="ms-section" id ="left1"&gt;&lt;h1&gt;Left 1&lt;/h1&gt;&lt;/div&gt;&lt;div class="ms-section" id ="left2"&gt;&lt;h1&gt;Left 2&lt;/h1&gt;&lt;/div&gt;&lt;div class="ms-section" id ="left3"&gt;&lt;h1&gt;Left 3&lt;/h1&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="ms-right"&gt;&lt;div class="ms-section" id ="right1"&gt;&lt;h1&gt;Right 1&lt;/h1&gt;&lt;/div&gt;&lt;div class="ms-section" id ="right2"&gt;&lt;h1&gt;Right 2&lt;/h1&gt;&lt;/div&gt;&lt;div class="ms-section" id ="right3"&gt;&lt;h1&gt;Right 3&lt;/h1&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • flickerplate

    Flickerplate is a jQuery plugin for creating a slider which allows you cycle through images with animated arrows and dots navigation.

    A Simple of flickerplate example as shown below −

    <!DOCTYPE html><html><head><meta charset ="utf-8"><meta name ="viewport" content = "width = device-width, 

         initial-scale =1.0, maximum-scale =1.0, user-scalable = no"&gt;&lt;script src ="/jquery/src/flickerplate/js/min/jquery-v1.10.2.min.js" 
     type ="text/javascript"&gt;&lt;/script&gt;&lt;script src ="/jquery/src/flickerplate/js/min/modernizr-custom-v2.7.1.min.js" 
     type ="text/javascript"&gt;&lt;/script&gt;&lt;script src ="/jquery/src/flickerplate/js/min/hammer-v2.0.3.min.js"
     type ="text/javascript"&gt;&lt;/script&gt;&lt;link href ="/jquery/src/flickerplate/css/flickerplate.css"  
     type ="text/css" rel ="stylesheet"&gt;&lt;script src ="/jquery/src/flickerplate/js/min/flickerplate.min.js" 
     type ="text/javascript"&gt;&lt;/script&gt;&lt;script&gt;$(function(){$('.flicker-example').flickerplate({
           auto_flick        :true,
           auto_flick_delay  :8,
           flick_animation   :'transform-slide'});});&lt;/script&gt;&lt;link href ="/jquery/src/flickerplate/css/demo.css"  
     type ="text/css" rel ="stylesheet"&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="flicker-example"&gt;&lt;ul&gt;&lt;li data-background = "https://genblock.com/wp-content/uploads/2015/05/download-circles-abstract-wallpaper-
           abstract-photo-abstract-wallpaper.jpg"&gt;&lt;img src ="https://www.tutorialspoint.com/about/images/mohtashim.jpg" 
              style ="margin-left: 428px;"&gt;&lt;div class="flick-title"&gt;Mohtashim M.&lt;/div&gt;&lt;div class="flick-sub-text"&gt;
              Mohtashim is an MCAfromAMU(Aligarah) and a Project
              Management Professional. He has more than 17 years of 
              experience in Telecom and Datacom industries covering 
              complete SDLC. He is managing in-house innovations, 
              business planning, implementation, finance and the overall
              business development of Tutorials Point.&lt;/div&gt;&lt;/li&gt;&lt;li data-background = "https://genblock.com/wp-content/uploads/2015/05/download-circles-abstract-wallpaper-
           abstract-photo-abstract-wallpaper.jpg"&gt;&lt;img src ="https://www.tutorialspoint.com/about/images/gopal_verma.jpg" 
              style ="margin-left: 428px;"&gt;&lt;div class="flick-title"&gt;Gopal K Verma&lt;/div&gt;&lt;div class="flick-sub-text"&gt;
              Gopal is an MCAfromGJU(Hisar) and a Cisco Certified Network 
              Professional. He has more than 11 years of experience in core 
              data networking and telecommunications. He develops contents 
              for Computer Science related subjects. He is also involved in 
              developing Apps for various Mobile devices.&lt;/div&gt;&lt;/li&gt;&lt;li data-background = "https://genblock.com/wp-content/uploads/2015/05/download-circles-abstract-wallpaper-
           abstract-photo-abstract-wallpaper.jpg"&gt;&lt;img src ="https://www.tutorialspoint.com/about/images/mukesh_kumar.jpg" 
              style ="margin-left: 428px;"&gt;&lt;div class="flick-title"&gt;Mukesh Kumar&lt;/div&gt;&lt;div class="flick-sub-text"&gt;
              Mukesh Kumar, having 7+years experience in writing on various
              topics ranging fromIT products and services, legal, medical,
              online advertisement &amp; education to e-commerce businesses.
              He also has experience of text &amp; copy-editing,&amp; online
              research. He has done two masters – MA(Geography) from
              University of Delhi and MA(Mass Communication &amp; 
              Journalism) from Kurukshetra University.&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • Page Pilling

    pagePiling.js is a jQuery plug-in for ‘piling’ your layout sections over one another and accessing them by scrolling.

    A Simple of theming example as shown below −

    <!DOCTYPE html><html xmlns = "https://www.w3.org/1999/xhtml"><head><meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" /><link rel = "stylesheet" type = "text/css" 

         href = "https://fonts.googleapis.com/css?family=Lato:300,400,700" /&gt;&lt;link rel = "stylesheet" type = "text/css" 
     href = "/jquery/src/pagepilling/jquery.pagepiling.css" /&gt;&lt;link rel = "stylesheet" type = "text/css" 
     href = "/jquery/src/pagepilling/examples.css" /&gt;&lt;script 
     src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;&lt;script type = "text/javascript" 
     src = "/jquery/src/pagepilling/jquery.pagepiling.min.js"&gt;&lt;/script&gt;&lt;script type = "text/javascript"&gt;
     $(document).ready(function() {
        $('#pagepiling').pagepiling({
           menu: '#menu',
           anchors: ['page1', 'page2', 'page3', 'page4'],
           sectionsColor: ['#bfda00', '#2ebe21', '#2C3E50', '#51bec4'],
				
           navigation: {
              'position': 'right',
              'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4']
           },
           afterRender: function(){
              //playing the video
              $('video').get(0).play();
           }
        });
     });
  &lt;/script&gt;&lt;style&gt;
	   .section {
        text-align:center;
     }
     #myVideo {
        position: absolute;
        z-index: 4;
        right: 0;
			
        bottom: 0;
        top:0;
        right:0;
        width: 100%;
        height: 100%;
			
        background-size: 100% 100%;
        background-color: black; /* in case the video doesn't fit the whole page*/
        background-image: /* our video */;
        background-position: center center;
        background-size: contain;
        object-fit: cover; /*cover video background */
     }
     #section1 .layer {
        position: absolute;
        z-index: 5;
        width: 100%;
        left: 0;
        top: 43%;
        height: 100%;
     }
     #section1 h1 {
        color:#fff;
     }
     #infoMenu li a {
        color: #fff;
     }
  &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;ul id = "menu"&gt;&lt;li data-menuanchor = "page1" class = "active"&gt;&lt;a href = "#page1"&gt;Page 1&lt;/a&gt;&lt;/li&gt;&lt;li data-menuanchor = "page2"&gt;&lt;a href = "#page2"&gt;
        Page 2&lt;/a&gt;&lt;/li&gt;&lt;li data-menuanchor = "page3"&gt;&lt;a href = "#page3"&gt;
        Page 3&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;div id = "pagepiling"&gt;&lt;div class = "section" id = "section1"&gt;&lt;video autoplay loop muted id = "myVideo"&gt;&lt;source src = "imgs/flowers.mp4" type = "video/mp4"&gt;&lt;source src = "imgs/flowers.webm" type = "video/webm"&gt;&lt;/video&gt;&lt;/div&gt;&lt;div class = "section" id = "section2"&gt;&lt;div class = "intro"&gt;&lt;h1&gt;No limits&lt;/h1&gt;&lt;p&gt;Anything is possible with Tutorialspoint&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class = "section" id = "section4"&gt;&lt;div class = "intro"&gt;&lt;h1&gt;&lt;/h1&gt;&lt;p&gt;Simple Easy Learning&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • Plugins

    A plug-in is piece of code written in a standard JavaScript file. These files provide useful jQuery methods which can be used along with jQuery library methods.

    There are plenty of jQuery plug-in available which you can download from repository link at https://jquery.com/plugins.

    How to use Plugins

    To make a plug-in’s methods available to us, we include plug-in file very similar to jQuery library file in the <head> of the document.

    We must ensure that it appears after the main jQuery source file, and before our custom JavaScript code.

    Following example shows how to include jquery.plug-in.js plugin −

    <html><head><title>The jQuery Example</title><script type ="text/javascript" 

         src ="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"&gt;&lt;/script&gt;&lt;script src ="jquery.plug-in.js" type ="text/javascript"&gt;&lt;/script&gt;&lt;script src ="custom.js" type ="text/javascript"&gt;&lt;/script&gt;&lt;script type ="text/javascript" language ="javascript"&gt;$(document).ready(function(){.......your custom code.....});&lt;/script&gt;&lt;/head&gt;&lt;body&gt;.............................&lt;/body&gt;&lt;/html&gt;</pre>
    



    How to develop a Plug-in
    




    This is very simple to write your own plug-in. Following is the syntax to create a a method −
    




    jQuery.fn.methodName = methodDefinition;

    




    Here methodNameM is the name of new method and methodDefinition is actual method definition.
    




    The guideline recommended by the jQuery team is as follows −
    




      

    • Any methods or functions you attach must have a semicolon (;) at the end.
      • 




    • Your method must return the jQuery object, unless explicity noted otherwise.
      • 




    • You should use this.each to iterate over the current set of matched elements - it produces clean and compatible code that way.
      • 




    • Prefix the filename with jquery, follow that with the name of the plugin and conclude with .js.
      • 




    • Always attach the plugin to jQuery directly instead of $, so users can use a custom alias via noConflict() method.
      • 

    




    For example, if we write a plugin that we want to name debug, our JavaScript filename for this plugin is −
    




    jquery.debug.js

    




    The use of the jquery. prefix eliminates any possible name collisions with files intended for use with other libraries.
    




    Example
    




    Following is a small plug-in to have warning method for debugging purpose. Keep this code in jquery.debug.js file −
    




    jQuery.fn.warning=function(){returnthis.each(function(){alert('Tag Name:"'+$(this).prop("tagName")+'".');});};
    




    Here is the example showing usage of warning() method. Assuming we put jquery.debug.js file in same directory of html page.
    




    <html><head><title>The jQuery Example</title><script type = "text/javascript" 

         src = "https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"&gt;&lt;/script&gt;&lt;script src = "jquery.debug.js" type = "text/javascript"&gt;&lt;/script&gt;&lt;script type = "text/javascript" language = "javascript"&gt;
     $(document).ready(function() {
        $("div").warning();
        $("p").warning();
     });
  &lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;p&gt;This is paragraph&lt;/p&gt;&lt;div&gt;This is division&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>
    



    This would alert you with following result −
    




    This is paragraph
This is division