Educational

Category: Plugins

  • Weather.js

    Weather.js is a jQuery plugin to find the information about weather details.

    A Simple of Weather.js example as shown below −

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

         initial-scale =1"&gt;&lt;link rel ="stylesheet" 
     href ="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"&gt;&lt;link rel ="stylesheet" 
     href ="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css"&gt;&lt;link href ='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700'
     rel ='stylesheet' type ='text/css'&gt;&lt;link rel ="stylesheet" type ="text/css" href ="weather.css"&gt;&lt;/head&gt;&lt;body id ="weather-background"class="default-weather"&gt;&lt;canvas id ="rain-canvas"&gt;&lt;/canvas&gt;&lt;canvas id ="cloud-canvas"&gt;&lt;/canvas&gt;&lt;canvas id ="weather-canvas"&gt;&lt;/canvas&gt;&lt;canvas id ="time-canvas"&gt;&lt;/canvas&gt;&lt;canvas id ="lightning-canvas"&gt;&lt;/canvas&gt;&lt;div class="page-wrap"&gt;&lt;header class="search-bar"&gt;&lt;p class="search-text"&gt;&lt;span class="search-location-text"&gt;
              What's the weather like in&lt;input id ="search-location-input"class="search-location-input" type ="text"
                 placeholder ="City"&gt;?&lt;/span&gt;&lt;/p&gt;&lt;div class="search-location-button-group"&gt;&lt;button id ="search-location-button"class="fa fa-search search-location-button search-button"&gt;&lt;/button&gt;&lt;!----&gt;&lt;button id ="geo-button"class= "geo-button fa
              fa-location-arrow search-button"&gt;&lt;/button&gt;&lt;/div&gt;&lt;/header&gt;&lt;div id ="geo-error-message"class="geo-error-message hide"&gt;&lt;button id ='close-error'class= 'fa fa-times 
           close-error'&gt;&lt;/button&gt;Uh oh! It looks like we can't 
           find your location. Please type your city into the search 
           box above!&lt;/div&gt;&lt;div id ="front-page-description"class="front-page-description middle"&gt;&lt;h1&gt;Blank Canvas Weather&lt;/h1&gt;&lt;/div&gt;&lt;div class="attribution-links hide" id ="attribution-links"&gt;&lt;button id ='close-attribution'class='fa fa-times close-attribution'&gt;&lt;/button&gt;&lt;h3&gt;Icons from &lt;a href ="https://thenounproject.com/"&gt;
           Noun Project&lt;/a&gt;&lt;/h3&gt;&lt;ul&gt;&lt;li class="icon-attribution"&gt;&lt;a href ="https://thenounproject.com/term/cloud/6852/"&gt;
              Cloud&lt;/a&gt; by Pieter J. Smits&lt;/li&gt;&lt;li class="icon-attribution"&gt;&lt;a href ="https://thenounproject.com/term/snow/64/"&gt;
              Snow&lt;/a&gt; from National Park Service Collection&lt;/li&gt;&lt;li class="icon-attribution"&gt;&lt;a href ="https://thenounproject.com/term/drop/11449/"&gt;
              Drop&lt;/a&gt; Alex Fuller&lt;/li&gt;&lt;li class="icon-attribution"&gt;&lt;a href ="https://thenounproject.com/term/smoke/27750/"&gt;
              Smoke&lt;/a&gt; by Gerardo Martín Martínez&lt;/li&gt;&lt;li class="icon-attribution"&gt;&lt;a href ="https://thenounproject.com/term/moon/13554/"&gt;
              Moon&lt;/a&gt; by Jory Raphael&lt;/li&gt;&lt;li class="icon-attribution"&gt;&lt;a href ="https://thenounproject.com/term/warning/18974/"&gt;
              Warning&lt;/a&gt; by Icomatic&lt;/li&gt;&lt;li class="icon-attribution"&gt;&lt;a href ="https://thenounproject.com/term/sun/13545/"&gt;
              Sun&lt;/a&gt; by Jory Raphael&lt;/li&gt;&lt;li class="icon-attribution"&gt;&lt;a href ="https://thenounproject.com/term/windsock/135621/"&gt;
              Windsock&lt;/a&gt; by Golden Roof&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div id ="weather"class="weather middle hide"&gt;&lt;div class="location" id ="location"&gt;&lt;/div&gt;&lt;div class="weather-container"&gt;&lt;div id ="temperature-info"class="temperature-info"&gt;&lt;div class="temperature" id ="temperature"&gt;&lt;/div&gt;&lt;div class="weather-description" id ="weather-description"&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="weather-box"&gt;&lt;ul class="weather-info" id ="weather-info"&gt;&lt;li class="weather-item humidity"&gt;Humidity:&lt;span id ="humidity"&gt;&lt;/span&gt;%&lt;/li&gt;&lt;!----&gt;&lt;li class="weather-item wind"&gt;Wind:&lt;span 
                       id ="wind-direction"&gt;&lt;/span&gt;&lt;span 
                       id ="wind"&gt;&lt;/span&gt;&lt;span 
                       id ="speed-unit"&gt;&lt;/span&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;&lt;div class="temp-change"&gt;&lt;button id ="celsius"class="temp-change-button celsius"&gt;°C&lt;/button&gt;&lt;button id ="fahrenheit"class="temp-change-button fahrenheit"&gt;
                    °F&lt;/button&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;script 
        src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;&lt;script src ="weather.js"&gt;&lt;/script&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • Megadropdown.js

    Megadropdown.js is a jQuery plugin for easy and quickly implementing of drop down menu.

    Example of Drop down menu as shown below −

    <!doctype html><html lang ="en"class="no-js"><head><meta charset ="UTF-8"><meta name ="viewport" content ="width = device-width, initial-scale = 1"><link rel ="stylesheet" href ="css/reset.css"><link rel ="stylesheet" href ="css/style.css"><script src ="js/modernizr.js"></script></head><body><header><div class="cd-dropdown-wrapper"><a class="cd-dropdown-trigger" href ="#0">Dropdown</a><nav class="cd-dropdown"><h2>Title</h2><a href ="#0"class="cd-close">Close</a><ul class="cd-dropdown-content"><li><form class="cd-search"><input type ="search" placeholder ="Search..."></form></li><li class="has-children"><a href ="">images</a><ul class="cd-dropdown-gallery is-hidden"><li class="go-back"><a href ="#0">Menu</a></li><li class="see-all"><a href ="">

                           Browse Gallery&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item" href =""&gt;&lt;img src ="img/img.png" alt ="Product Image"&gt;&lt;h3&gt;Product #1&lt;/h3&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item" href =""&gt;&lt;img src ="img/img.png" alt ="Product Image"&gt;&lt;h3&gt;Product #2&lt;/h3&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item" href =""&gt;&lt;img src ="img/img.png" alt ="Product Image"&gt;&lt;h3&gt;Product #3&lt;/h3&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item" href =""&gt;&lt;img src ="img/img.png" alt ="Product Image"&gt;&lt;h3&gt;Product #4&lt;/h3&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li class="has-children"&gt;&lt;a href =""&gt;Services&lt;/a&gt;&lt;ul class="cd-dropdown-icons is-hidden"&gt;&lt;li class="go-back"&gt;&lt;a href ="#0"&gt;Menu&lt;/a&gt;&lt;/li&gt;&lt;li class="see-all"&gt;&lt;a href =""&gt;
                       Browse Services&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-1" href =""&gt;&lt;h3&gt;Service #1&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-2" href =""&gt;&lt;h3&gt;Service #2&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-3" href =""&gt;&lt;h3&gt;Service #3&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-4" href =""&gt;&lt;h3&gt;Service #4&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-5" href =""&gt;&lt;h3&gt;Service #5&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-6" href =""&gt;&lt;h3&gt;Service #6&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-7" href =""&gt;&lt;h3&gt;Service #7&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-8" href =""&gt;&lt;h3&gt;Service #8&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-9" href =""&gt;&lt;h3&gt;Service #9&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-10" href =""&gt;&lt;h3&gt;Service #10&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-11" href =""&gt;&lt;h3&gt;Service #11&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="cd-dropdown-item item-12" href =""&gt;&lt;h3&gt;Service #12&lt;/h3&gt;&lt;p&gt;This is the item description&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li class="cd-divider"&gt;Divider&lt;/li&gt;&lt;li&gt;&lt;a href =""&gt;Page 1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href =""&gt;Page 2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href =""&gt;Page 3&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/nav&gt;&lt;/div&gt;&lt;/header&gt;&lt;main class="cd-main-content"&gt;&lt;/main&gt;&lt;script src ="js/jquery-2.1.1.js"&gt;&lt;/script&gt;&lt;script src ="js/jquery.menu-aim.js"&gt;&lt;/script&gt;&lt;script src ="js/main.js"&gt;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • Producttour.js

    Producttour.js is a jQuery plugin for quickly and easily implementing of help guide into your website.

    A Simple of producttour.js example as shown below −

    <!doctype html><html lang ="en"class="no-js"><head><meta charset ="UTF-8"><meta name ="viewport" content ="width = device-width, initial-scale = 1"><link rel ="stylesheet" href ="css/reset.css"><link rel ="stylesheet" href ="css/style.css"><script src ="js/modernizr.js"></script></head><body background ="tp.png"><div class="cd-nugget-info"><button id ="cd-tour-trigger"class="cd-btn">Start tour</button></div><ul class="cd-tour-wrapper"><li class="cd-single-step"><span>Step 1</span><div class="cd-more-info bottom"><h2>Step Number 1</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing 

                  elit. Modi alias animi molestias in, aperiam.&lt;/p&gt;&lt;img src ="img/step-1.png" alt ="step 1"&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class="cd-single-step"&gt;&lt;span&gt;Step 2&lt;/span&gt;&lt;div class="cd-more-info top"&gt;&lt;h2&gt;Step Number 2&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur 
              adipisicing elit. Officia quasi in quisquam.&lt;/p&gt;&lt;img src ="img/step-2.png" alt ="step 2"&gt;&lt;/div&gt;&lt;/li&gt;&lt;li class="cd-single-step"&gt;&lt;span&gt;Step 3&lt;/span&gt;&lt;div class="cd-more-info right"&gt;&lt;h2&gt;Step Number 3&lt;/h2&gt;&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing
              elit. Optio illo non enim ut necessitatibus perspiciatis,
              dignissimos.&lt;/p&gt;&lt;img src ="img/step-3.png" alt ="step 3"&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;script src ="js/jquery-2.1.4.js"&gt;&lt;/script&gt;&lt;script src ="js/jquery.mobile.min.js"&gt;&lt;/script&gt;&lt;script src ="js/main.js"&gt;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • Blockrain.js

    Blockrain.js is a jQuery plugin for lets you embed the classic Tetris game on your website.

    A Simple of blockrain example as shown below −

    <!DOCTYPE html><html><head><meta charset ="utf-8"/><link href ='https://fonts.googleapis.com/css?family=Play:400,700' 

         rel ='stylesheet' type ='text/css'&gt;&lt;link rel ="stylesheet" href ="assets/css/style.css"&gt;&lt;link rel ="stylesheet" href ="src/blockrain.css"&gt;&lt;/head&gt;&lt;body&gt;&lt;section id ="examples"&gt;&lt;article id ="example-slider"&gt;&lt;div class="example"&gt;&lt;div class="instructions"&gt;
              Use only arrows
              &lt;div class="keyboard"&gt;&lt;div class="key key-up"&gt;&lt;/div&gt;&lt;div class="key key-left"&gt;&lt;/div&gt;&lt;div class="key key-down"&gt;&lt;/div&gt;&lt;div class="key key-right"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="game" id ="tetris-demo"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/article&gt;&lt;/section&gt;&lt;script src ="assets/js/jquery-1.11.1.min.js"&gt;&lt;/script&gt;&lt;script src ="src/blockrain.jquery.libs.js"&gt;&lt;/script&gt;&lt;script src ="src/blockrain.jquery.src.js"&gt;&lt;/script&gt;&lt;script src ="src/blockrain.jquery.themes.js"&gt;&lt;/script&gt;&lt;script&gt;var $cover =$('#cover-tetris').blockrain({
        autoplay:true,
        autoplayRestart:true,
        speed:100,
        autoBlockWidth:true,
        autoBlockSize:25,
        theme:'candy'});var versusSpeed =500;var $versus1 =$('#tetris-versus-1 .game').blockrain({
        autoplay:true,
        autoplayRestart:true,
        speed: versusSpeed,onGameOver:function(){
           $versus1.blockrain('restart');
           $versus2.blockrain('restart');var $score = $versus2.parent().find('.score');
           $score.text(parseInt($score.text())+1);}});var $versus2 =$('#tetris-versus-2 .game').blockrain({
        autoplay:true,
        autoplayRestart:true,
        speed: versusSpeed,onGameOver:function(){
           $versus1.blockrain('restart');
           $versus2.blockrain('restart');var $score = $versus1.parent().find('.score');
           $score.text(parseInt($score.text())+1);}});var $demo =$('#tetris-demo').blockrain({
        speed:20,
        theme:'black',onStart:function(){ga('send','event','tetris','started');},onLine:function(){ga('send','event','tetris','line');},onGameOver:function(score){ga('send','event','tetris','over', score);}});$('#example-slider').find('.btn-next').click(function(event){
        event.preventDefault();switchDemoTheme(true);});$('#example-slider').find('.btn-prev').click(function(event){
        event.preventDefault();switchDemoTheme(false);});functionswitchDemoTheme(next){var themes = Object.keys(BlockrainThemes);var currentTheme = $demo.blockrain('theme');var currentIx = themes.indexOf(currentTheme);if( next ){ currentIx++;}else{ currentIx--;}if( currentIx &gt;= themes.length ){ currentIx =0;}if( currentIx &lt;0){ currentIx = themes.length-1;}
    

            $demo.blockrain('theme', themes[currentIx]);$('#example-slider .theme strong').text('"'+themes[currentIx]+'"');}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • Checkout.js

    Checkout.js is a jQuery plugin for easy to implementation of check out for e-commerce websites.

    A Simple of checkout.js example as shown below −

    <html xmlns ="https://www.w3.org/1999/xhtml"><head><meta http-equiv ="Content-Type" content ="text/html; charset = iso-8859-1"/><title>Untitled Document</title><script type ="text/javascript" src ="jquery-1.3.2.js"></script><script type ="text/javascript" src ="jquery.livequery.js"></script><link href ="css.css" rel ="stylesheet"/><script type ="text/javascript">$(document).ready(function(){var Arrays =newArray();$('#wrap li').mousemove(function(){var position =$(this).position();$('#cart').stop().animate({

                  left   : position.left+'px',},250,function(){});}).mouseout(function(){});$('#wrap li').click(function(){var thisID =$(this).attr('id');var itemname  =$(this).find('div .name').html();var itemprice =$(this).find('div .price').html();if(include(Arrays,thisID)){var price =$('#each-'+thisID).children(".shopp-price").find('em').html();var quantity =$('#each-'+thisID).children(".shopp-quantity").html();
              quantity =parseInt(quantity)+parseInt(1);var total =parseInt(ite mprice)*parseInt(quantity);$('#each-'+thisID).children(".shopp-price").find('em').html(total);$('#each-'+thisID).children(".shopp-quantity").html(quantity);var prev_charges =$('.cart-total span').html();
              prev_charges =parseInt(prev_charges)-parseInt(price);
              prev_charges =parseInt(prev_charges)+parseInt(total);$('.cart-total span').html(prev_charges);$('#total-hidden-charges').val(prev_charges);}else{
              Arrays.push(thisID);var prev_charges =$('.cart-total span').html();
              prev_charges =parseInt(prev_charges)+parseInt(itemprice);$('.cart-total span').html(prev_charges);$('#total-hidden-charges').val(prev_charges);$('#left_bar .cart-info').append('
                 &lt;div class="shopp" id ="each-'+thisID+'"&gt;&lt;div class="label"&gt;'+itemname+'&lt;/div&gt;&lt;div class="shopp-price"&gt; 
                       $&lt;em&gt;'+itemprice+'&lt;/em&gt;&lt;/div&gt;&lt;span class="shopp-quantity"&gt;1&lt;/span&gt;&lt;img src ="remove.png"class="remove"/&gt;&lt;br class="all"/&gt;&lt;/div&gt;');$('#cart').css({'-webkit-transform':'rotate(20deg)','-moz-transform':'rotate(20deg)'});}setTimeout('angle()',200);});$('.remove').livequery('click',function(){var deduct =$(this).parent().children(".shopp-price").find('em').html();var prev_charges =$('.cart-total span').html();var thisID =$(this).parent().attr('id').replace('each-','');var pos =getpos(Arrays,thisID);
           
           Arrays.splice(pos,1,"0")
           prev_charges =parseInt(prev_charges)-parseInt(deduct);$('.cart-total span').html(prev_charges);$('#total-hidden-charges').val(prev_charges);$(this).parent().remove();});$('#Submit').livequery('click',function(){var totalCharge =$('#total-hidden-charges').val();$('#left_bar').html('Total Charges: $'+totalCharge);returnfalse;});});functioninclude(arr, obj){for(var i =0; i&lt;arr.length; i++){if(arr[i]== obj)returntrue;}}functiongetpos(arr, obj){for(var i =0; i&lt;arr.length; i++){if(arr[i]== obj)return i;}}functionangle(){$('#cart').css({'-webkit-transform':'rotate(0deg)','-moz-transform':'rotate(0deg)'});}&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div align ="left"&gt;&lt;div id ="wrap" align ="left"&gt;&lt;ul&gt;&lt;li id ="1"&gt;&lt;img src ="a1.png"class="items" height ="100" alt =""/&gt;&lt;br clear ="all"/&gt;&lt;div&gt;&lt;span class="name"&gt;Learn Java: 
                 Price&lt;/span&gt;: $&lt;span class="price"&gt;800&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li id ="2"&gt;&lt;img src ="5.png"class="items" height ="100" alt =""/&gt;&lt;br clear ="all"/&gt;&lt;div&gt;&lt;span class="name"&gt;Learn HTML&lt;/span&gt;: $&lt;span class="price"&gt;500&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li id="3"&gt;&lt;img src ="1.png"class="items" height ="100" alt =""/&gt;&lt;br clear ="all"/&gt;&lt;div&gt;&lt;span class="name"&gt;Learn Android 
                 &lt;/span&gt;: $&lt;span class="price"&gt;450&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li id ="4"&gt;&lt;img src ="6.png"class="items" height ="100" alt =""/&gt;&lt;br clear ="all"/&gt;&lt;div&gt;&lt;span class="name"&gt;Learn SVG&lt;/span&gt;: $&lt;span class="price"&gt;1200&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li id ="5"&gt;&lt;img src ="7.png"class="items" height ="100" alt =""/&gt;&lt;br clear ="all"/&gt;&lt;div&gt;&lt;span class="name"&gt;Learn Bootstrap
                 &lt;/span&gt;: $&lt;span class="price"&gt;65&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li id ="6"&gt;&lt;img src ="5.png"class="items" height ="100" alt =""/&gt;&lt;br clear ="all"/&gt;&lt;div&gt;&lt;span class="name"&gt;Learn HTML&lt;/span&gt;: $&lt;span class="price"&gt;800&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li id ="7"&gt;&lt;img src ="7.png"class="items" height ="100" alt =""/&gt;&lt;br clear ="all"/&gt;&lt;div&gt;&lt;span class="name"&gt; Learn Bootstrap
                 &lt;/span&gt;: $&lt;span class="price"&gt;45&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li id ="8"&gt;&lt;img src ="6.png"class="items" height ="100" alt =""/&gt;&lt;br clear ="all"/&gt;&lt;div&gt;&lt;span class="name"&gt;Learn SVG&lt;/span&gt;: $&lt;span class="price"&gt;900&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;li id ="9"&gt;&lt;img src ="8.png"class="items" height ="100" alt =""/&gt;&lt;br clear ="all"/&gt;&lt;div&gt;&lt;span class="name"&gt;Learn Angular Js
                 &lt;/span&gt;: $&lt;span class="price"&gt;20&lt;/span&gt;&lt;/div&gt;&lt;/li&gt;&lt;/ul&gt;&lt;br clear ="all"/&gt;&lt;/div&gt;&lt;div id ="left_bar"&gt;&lt;form action ="#" id="cart_form" name ="cart_form"&gt;&lt;div class="cart-info"&gt;&lt;/div&gt;&lt;div class="cart-total"&gt;&lt;b&gt;Total Charges:&lt;/b&gt; 
                 $&lt;span&gt;0&lt;/span&gt;&lt;input type ="hidden" name ="total-hidden-charges" 
                 id ="total-hidden-charges" value ="0"/&gt;&lt;/div&gt;&lt;button type ="submit" id ="Submit"&gt;CheckOut&lt;/button&gt;&lt;/form&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • Whatsnearby.js

    Whatsnearby.js is a jQuery plugin for quickly find the nearest places.

    A Simple of whatsnearby.js example as shown below −

    <!DOCTYPE html><html><head><meta charset ="utf-8"/><link rel ="stylesheet" 

         href ="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"&gt;&lt;script src ="example/js/es5-shim.min.js" 
     type ="text/javascript"&gt;&lt;/script&gt;&lt;script src ="example/js/es5-sham.min.js" type ="text/javascript"&gt;&lt;/script&gt;&lt;script 
     src ="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
     type ="text/javascript"&gt;&lt;/script&gt;&lt;script 
     src ="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=places"&gt;&lt;/script&gt;&lt;script src ="source/WhatsNearby.js" 
     type ="text/javascript"&gt;&lt;/script&gt;&lt;script type ="text/javascript"&gt;$(document).ready(function(){$("#wn2").whatsnearby({ 
           zoom:15,
           width:"100%",
           address:"jublihills",
           placesRadius:500,
           placesTypes:['restaurant','cafe','gym']});});&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container"&gt;&lt;div class="well"&gt;&lt;div id ="wn2"&gt;&lt;div class="infowindow-markup"&gt;&lt;strong&gt;{{name}}&lt;/strong&gt;&lt;br/&gt;{{vicinity}}&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • Filer.js

    Filer.js is a jQuery plugin for quickly and easily implementing of uploading files.

    A Simple of filer.js example as shown below −

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

         type ="text/css" rel ="stylesheet"/&gt;&lt;!--jQuery--&gt;&lt;script type ="text/javascript" 
     src ="https://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;&lt;script type ="text/javascript" src ="js/jquery.filer.min.js"&gt;&lt;/script&gt;&lt;script type ="text/javascript"&gt;$(document).ready(function(){$('#input1').filer();$('.file_input').filer({
           showThumbs:true,
           templates:{
              box:'&lt;ul class = "jFiler-item-list"&gt;&lt;/ul&gt;',
              item: '&lt;li class="jFiler-item"&gt;\
					
                 &lt;div class="jFiler-item-container"&gt;\
                    &lt;div class="jFiler-item-inner"&gt;\
						
                       &lt;div class="jFiler-item-thumb"&gt;\
                          &lt;div class="jFiler-item-status"&gt;&lt;/div&gt;\
                          &lt;div class="jFiler-item-info"&gt;\
                             &lt;span class="jFiler-item-title"&gt;&lt;
                                b title ="{{fi-name}}"&gt;{{fi-name | 
                                limitTo:25}}&lt;/b&gt;&lt;/span&gt;\
                          &lt;/div&gt;\
                          {{fi-image}}\
                       &lt;/div&gt;\
							
                       &lt;div class="jFiler-item-assets jFiler-row"&gt;\
                          &lt;ul class="list-inline pull-left"&gt;\
                             &lt;li&gt;&lt;span class="jFiler-item-others"&gt;{{fi-icon}}{{fi-size2}}&lt;/span&gt;&lt;/li&gt;\
                          &lt;/ul&gt;\
								
                          &lt;ul class="list-inline pull-right"&gt;\
                             &lt;li&gt;&lt;a class= "icon-jfi-trash
                                jFiler-item-trash-action"&gt;&lt;/a&gt;&lt;/li&gt;\
                          &lt;/ul&gt;\
								
                       &lt;/div&gt;\
							
                    &lt;/div&gt;\
                 &lt;/div&gt;\
              &lt;/li&gt;',
					
              itemAppend: '&lt;li class="jFiler-item"&gt;\
					
                 &lt;div class="jFiler-item-container"&gt;\
                    &lt;div class="jFiler-item-inner"&gt;\
                       &lt;div class="jFiler-item-thumb"&gt;\
                          &lt;div class="jFiler-item-status"&gt;&lt;/div&gt;\
                          &lt;div class="jFiler-item-info"&gt;\
                             &lt;span class="jFiler-item-title"&gt;&lt;
                                b title ="{{fi-name}}"&gt;{{fi-name |
                                limitTo:25}}&lt;/b&gt;&lt;/span&gt;\
                          &lt;/div&gt;\
                          {{fi-image}}\
                       &lt;/div&gt;\
								
                       &lt;div class="jFiler-item-assets jFiler-row"&gt;\
                          &lt;ul class="list-inline pull-left"&gt;\
                             &lt;span class="jFiler-item-others"&gt;{{fi-icon}}{{fi-size2}}&lt;/span&gt;\
                          &lt;/ul&gt;\
									
                          &lt;ul class="list-inline pull-right"&gt;\
                             &lt;li&gt;&lt;a class= "icon-jfi-trash 
                                jFiler-item-trash-action"&gt;&lt;/a&gt;&lt;/li&gt;\
                          &lt;/ul&gt;\
									
                       &lt;/div&gt;\
								
                    &lt;/div&gt;\
                 &lt;/div&gt;\
              &lt;/li&gt;',
					
              progressBar:'&lt;div class = "bar"&gt;&lt;/div&gt;',
              itemAppendToEnd:true,
              removeConfirmation:true,
					
              _selectors:{
                 list:'.jFiler-item-list',
                 item:'.jFiler-item',
                 progressBar:'.bar',
                 remove:'.jFiler-item-trash-action',}},
				
           addMore:true,
				
           files:[{
              name:"appended_file.jpg",
              size:5453,
              type:"image/jpg",
              file:"https://dummyimage.com/158x113/f9f9f9/191a1a.jpg",},{
              name:"appended_file_2.png",
              size:9503,
              type:"image/png",
              file:"https://dummyimage.com/158x113/f9f9f9/191a1a.png",}]});$('#input2').filer({
           limit:null,
           maxSize:null,
           extensions:null,
           changeInput: '
				
           &lt;div class="jFiler-input-dragDrop"&gt;&lt;div class="jFiler-input-inner"&gt;&lt;div class="jFiler-input-icon"&gt;&lt;i class="icon-jfi-cloud-up-o"&gt;&lt;/i&gt;&lt;/div&gt;&lt;div class="jFiler-input-text"&gt;&lt;h3&gt;Drag&amp;Drop files here&lt;/h3&gt;&lt;span style = "display:inline-block; 
                       margin:15px 0"&gt;or&lt;/span&gt;&lt;/div&gt;&lt;a class="jFiler-input-choose-btn blue"&gt;Browse Files&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;',
				
           showThumbs:true,
           appendTo:null,
           theme:"dragdropbox",
				
           templates:{
              box:'&lt;ul class = "jFiler-item-list"&gt;&lt;/ul&gt;',
              item: '&lt;li class="jFiler-item"&gt;\
                 &lt;div class="jFiler-item-container"&gt;\
                    &lt;div class="jFiler-item-inner"&gt;\
							
                       &lt;div class="jFiler-item-thumb"&gt;\
                          &lt;div class="jFiler-item-status"&gt;&lt;/div&gt;\
									
                          &lt;div class="jFiler-item-info"&gt;\
                             &lt;span class="jFiler-item-title"&gt;&lt;b title ="{{fi-name}}"&gt;{{fi-name | 
                                limitTo:25}}&lt;/b&gt;&lt;/span&gt;\
                          &lt;/div&gt;\
									
                          {{fi-image}}\
                       &lt;/div&gt;\
								
                       &lt;div class="jFiler-item-assets jFiler-row"&gt;\
                          &lt;ul class="list-inline pull-left"&gt;\
                             &lt;li&gt;{{fi-progressBar}}&lt;/li&gt;\
                          &lt;/ul&gt;\
									
                          &lt;ul class="list-inline pull-right"&gt;\
                             &lt;li&gt;&lt;a class= "icon-jfi-trash
                                jFiler-item-trash-action"&gt;&lt;/a&gt;&lt;/li&gt;\
                          &lt;/ul&gt;\
									
                       &lt;/div&gt;\
								
                    &lt;/div&gt;\
                 &lt;/div&gt;\
              &lt;/li&gt;',
					
              itemAppend: '&lt;li class="jFiler-item"&gt;\
                 &lt;div class="jFiler-item-container"&gt;\
                    &lt;div class="jFiler-item-inner"&gt;\
							
                       &lt;div class="jFiler-item-thumb"&gt;\
                          &lt;div class="jFiler-item-status"&gt;&lt;/div&gt;\
									
                          &lt;div class="jFiler-item-info"&gt;\
                             &lt;span class="jFiler-item-title"&gt;&lt;b title ="{{fi-name}}"&gt;{{fi-name | 
                                limitTo:25}}&lt;/b&gt;&lt;/span&gt;\
                          &lt;/div&gt;\
									
                          {{fi-image}}\
                       &lt;/div&gt;\
								
                       &lt;div class="jFiler-item-assets jFiler-row"&gt;\
                          &lt;ul class="list-inline pull-left"&gt;\
                             &lt;span class="jFiler-item-others"&gt;{{fi-icon}}{{fi-size2}}&lt;/span&gt;\
                          &lt;/ul&gt;\
									
                          &lt;ul class="list-inline pull-right"&gt;\
                             &lt;li&gt;&lt;a class= "icon-jfi-trash
                                jFiler-item-trash-action"&gt;&lt;/a&gt;&lt;/li&gt;\
                          &lt;/ul&gt;\
									
                       &lt;/div&gt;\
								
                    &lt;/div&gt;\
                 &lt;/div&gt;\
              &lt;/li&gt;',
					
              progressBar:'&lt;div class = "bar"&gt;&lt;/div&gt;',
              itemAppendToEnd:false,
              removeConfirmation:false,
					
              _selectors:{
                 list:'.jFiler-item-list',
                 item:'.jFiler-item',
                 progressBar:'.bar',
                 remove:'.jFiler-item-trash-action',}},
				
           uploadFile:{
              url:"./php/upload.php",
              data:{},
              type:'POST',
              enctype:'multipart/form-data',beforeSend:function(){},success:function(data, el){var parent = el.find(".jFiler-jProgressBar").parent();
						
                 el.find(".jFiler-jProgressBar").fadeOut("slow",function(){$("&lt;div class= \"jFiler-item-others text-success\"
                          &gt;&lt;i class= \"icon-jfi-check-circle\"&gt;&lt;/i&gt; Success
                       &lt;/div&gt;").hide().appendTo(parent).fadeIn("slow");});},error:function(el){var parent = el.find(".jFiler-jProgressBar").parent();
						
                 el.find(".jFiler-jProgressBar").fadeOut("slow",function(){$("&lt;div class= \"jFiler-item-others text-error\"
                          &gt;&lt;i class= \"icon-jfi-minus-circle\"&gt;&lt;/i&gt; Error
                       &lt;/div&gt;").hide().appendTo(parent).fadeIn("slow");});},
					
              statusCode:{},onProgress:function(){},},
				
           dragDrop:{dragEnter:function(){},dragLeave:function(){},drop:function(){},},
				
           addMore:true,
           clipBoardPaste:true,
           excludeName:null,beforeShow:function(){returntrue},onSelect:function(){},afterShow:function(){},onRemove:function(){},onEmpty:function(){},
				
           captions:{
              button:"Choose Files",
              feedback:"Choose files To Upload",
              feedback2:"files were chosen",
              drop:"Drop file here to Upload",
              removeConfirmation:"Are you sure you want to remove this file?",
					
              errors:{
                 filesLimit:"Only {{fi-limit}} files are allowed to be uploaded.",
                 filesType:"Only Images are allowed to be uploaded.",
                 filesSize: "{{fi-name}} is too large! 
                    Please upload file up to {{fi-maxSize}}MB.",
                 filesSizeAll: "Files you've choosed are too large! 
                    Please upload files up to {{fi-maxSize}}MB."
              }}});});&lt;/script&gt;&lt;style&gt;.file_input{
        display: inline-block;
        padding:10px 16px;
        outline: none;
        cursor: pointer;
			
        text-decoration: none;
        text-align: center;
        white-space: nowrap;
			
        font-family: sans-serif;
        font-size:11px;
        font-weight: bold;
			
        border-radius:3px;
        color: #008BFF;
        border:1px solid #008BFF;
        vertical-align: middle;
        background-color: #fff;
        margin-bottom:10px;
			
        box-shadow:0px 1px 5px rgba(0,0,0,0.05);-webkit-transition: all 0.2s;-moz-transition: all 0.2s;
        transition: all 0.2s;}.file_input:hover,.file_input:active {
        background: #008BFF;
        color: #fff;}&lt;/style&gt;&lt;!--[ifIE]&gt;&lt;script src ="https://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;&lt;/head&gt;&lt;body&gt;&lt;div&gt;&lt;form action ="./php/upload.php" method ="post"
        enctype ="multipart/form-data"&gt;&lt;!-- filer 1--&gt;&lt;input type ="file" multiple ="multiple" 
              name ="files[]" id ="input1"&gt;&lt;br&gt;&lt;input type ="submit"&gt;&lt;/form&gt;&lt;/div&gt;&lt;br&gt;&lt;hr&gt;&lt;br&gt;&lt;div&gt;&lt;form action ="./php/upload.php" method ="post"
        enctype ="multipart/form-data"&gt;&lt;!-- filer 2--&gt;&lt;a class="file_input" data-jfiler-name ="files"
           data-jfiler-extensions ="jpg, jpeg, png, gif"&gt;&lt;i class="icon-jfi-paperclip"&gt;&lt;/i&gt; 
           Attach a file&lt;/a&gt;&lt;br&gt;&lt;input type ="submit"&gt;&lt;/form&gt;&lt;/div&gt;&lt;br&gt;&lt;hr&gt;&lt;br&gt;&lt;div style ="background: #f7f8fa;padding: 50px;"&gt;&lt;!-- filer 3--&gt;&lt;input type ="file" multiple ="multiple" 
        name ="files[]" id ="input2"&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • Logosdistort.js

    Logosdistort.js is a jQuery plugin for quickly and easily implementing of mouse over effect on images

    A Simple of logosdistort example as shown below −

    <!DOCTYPE html><html><head><meta name ="viewport" content ="width = device-width, initial-scale = 1.0"><link rel ="stylesheet" 

         href ="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"&gt;&lt;link href ="assets/css/style.css" rel ="stylesheet"/&gt;&lt;link href ="assets/css/perspectiveRules.css" rel ="stylesheet"/&gt;&lt;/head&gt;&lt;body&gt;&lt;div id ="min-max-tag"&gt;&lt;i class="fa fa-chevron-circle-left"&gt;&lt;/i&gt;&lt;/div&gt;&lt;div id ="demo1"&gt;&lt;div id ="particle-target"&gt;&lt;/div&gt;&lt;img alt ="logo" src ="assets/images/logo.png"/&gt;&lt;/div&gt;&lt;script 
     src ="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"&gt;&lt;/script&gt;&lt;script src ="assets/js/jquery.logosDistort.min.js"&gt;&lt;/script&gt;&lt;script src ="assets/js/jquery.particleground.min.js"&gt;&lt;/script&gt;&lt;script&gt;var particles =true,
     particleDensity,
    			

         options ={
        effectWeight:1,
        outerBuffer:1.08,
        elementDepth:220};$(document).ready(function(){$("#demo1").logosDistort(options);if(particles){
           particleDensity = window.outerWidth *7.5;if(particleDensity &lt;13000){
              particleDensity =13000;}elseif(particleDensity &gt;20000){
              particleDensity =20000;}return$('#particle-target').particleground({
              dotColor:'#1ec5ee',
              lineColor:'#0a4e90',
              density: particleDensity.toFixed(0),
              parallax:false});}});&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  • Tagsort.js

    Tagsort.is a jQuery plugin for showing tags.

    A Simple of tagsort Example as shown below −

    <!DOCTYPE html><html lang ="en"><head><meta charset ="UTF-8"><title>Tagsort Demo</title><!-- Demo Styles --><style>

         html,body {
        margin:0;
        padding:0;}
    			

         body {
        background-color: #FFF;
        font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue", Helvetica, Arial,"Lucida Grande", sans-serif; 
        font-weight:300;}.container {
        width:80%;
        margin:0 auto;}
    			

         h1 &gt; small a {
        color: #AAA;
        text-decoration: none;
        font-size:70%;
        margin-left:10px;}
    			

         h1 &gt; small a:hover {
        color: #000;}.item {
        box-sizing: border-box;
        float: left;
        position: relative;
        min-height:1px;
        padding-left:15px;
        padding-right:15px;
        width:20%;
        margin-bottom:40px;
        height:360px;
        max-height:360px;
        overflow: hidden;}.item .wrapper {
        background-color: #f4f4f4;
        padding:8px;
        height:100%;}.item .wrapper img {
        width:100%;}.item .wrapper .item-tags {
        color: #AAA;
        font-size:12px;
        line-height:1.8;}.tagsort-tags-container {
        margin:40px 0;}&lt;/style&gt;&lt;link href ="styles/tagsort.min.css" rel ="stylesheet" type ="text/css"&gt;&lt;/link&gt;&lt;script src ="scripts/jquery-2.1.3.min.js" 
     type ="text/javascript" charset ="utf-8"&gt;&lt;/script&gt;&lt;script src ="scripts/tagsort.min.js" 
     type ="text/javascript" charset ="utf-8"&gt;&lt;/script&gt;&lt;script&gt;$(function(){$('div.tags-container').tagSort({selector:'.item', tagWrapper:'span',
           displaySelector:'.item-tags', displaySeperator:' / ', inclusive:false, fadeTime:200});});&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="container"&gt;&lt;div class="tags-container row"&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="1" 
        data-item-tags ="PHP,JavaScript,React,Memcached,RocksDB,Cassandra,Flux"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/facebook.jpg" alt ="Facebook"&gt;&lt;h2&gt;Facebook&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="2"  
        data-item-tags ="MySQL,JavaScript,jQuery,Memcached,Scala,Rails,Hadoop,Redis"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/twitter.jpg" alt ="Twitter"&gt;&lt;h2&gt;Twitter&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="3" 
        data-item-tags ="MySQL,Node.js,Python,JavaScript,React,Java,Cassandra"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/netflix.jpg" alt ="Netflix"&gt;&lt;h2&gt;Netflix&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="4" 
        data-item-tags ="MySQL,Node.js,Python,Java,Objective-C,PostgreSQL,Redis,MongoDB"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/uber.jpg" alt ="Uber"&gt;&lt;h2&gt;Uber&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="5" 
        data-item-tags ="MySQL,Python,Memcached,nginx"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/dropbox.jpg" alt ="Dropbox"&gt;&lt;h2&gt;Dropbox&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="6" 
        data-item-tags ="Python,Java,Cassandra,Hadoop,PostgreSQL,Hadoop"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/spotify.jpg" alt ="Spotify"&gt;&lt;h2&gt;Spotify&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class=" item col-md-3" data-item-id ="7" 
        data-item-tags ="MySQL,Javascript,jQuery,Ruby,Redis,nginx,Rails,SASS"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/kickstarter.jpg" alt ="Kickstarter"&gt;&lt;h2&gt;Kickstarter&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="8" 
        data-item-tags ="Go,Ruby,MySQL,Redis,Memcached,SASS,Rails,nginx"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/digitalocean.jpg" alt ="DigitalOcean"&gt;&lt;h2&gt;DigitalOcean&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="9" 
        data-item-tags ="Ruby,MySQL,Hadoop,nginx,PHP,Scala,Memcached,Redis"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/tumblr.jpg" alt ="Tumblr"&gt;&lt;h2&gt;Tumblr&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="10"
        data-item-tags ="nginx,MySQL,Redis,Rails,Ruby,Hadoop"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/shopify.jpg" alt ="Shopify"&gt;&lt;h2&gt;Shopify&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="11" 
        data-item-tags ="JavaScript,jQuery,Redis,Java,Go,Cassandra,.NET"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/stackexchange.jpg" alt ="Stack Exchange"&gt;&lt;h2&gt;Stack Exchange&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="item col-md-3" data-item-id ="12" 
        data-item-tags ="nginx,Redis,MongoDB,Python,Java,React,JavaScript,Scala,Cassandra"&gt;&lt;div class="wrapper"&gt;&lt;img src ="images/keenio.jpg" alt ="Keen IO"&gt;&lt;h2&gt;Keen IO&lt;/h2&gt;&lt;p class="item-tags"&gt;&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  •  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>