Posts

Bootstrap star rating — easy rating Plugin

-
Image
  This plugin is based on Javascript, it can be easily manipulated with html5 attributes. Official site Step1: link 4 libraries <link href=” https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css ” rel=”stylesheet”> <link href=” https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.0.7/css/star-rating.css ” rel=”stylesheet”> <script src=” https://code.jquery.com/jquery-3.5.1.min.js ”></script> <script src=” https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.0.7/js/star-rating.js ”></script> Step2: HTML rating section is an input tag, the default value is 4.3. rating-loading is a spinner when the starts do not show. Step3: js simply select the input DOM, and fire it up with  .rating() The basic options :(I think useful) min, max : the minimum and maximum of the stars rating number. step : changing step period stars : the star number shows showCaptions : if want to hide the captions, set them to false starCaptions : set
Read more

Meet Tippy.js: The Complete Tooltip Popover Plugin

-
Image
  Tippy . js  is the complete tooltip, popover, dropdown, and menu solution for the web. Can you play around with tooltips like a pro in one step? Yes, with Tippy.js. Tippy . js  is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper. It provides the logic and optional styling of elements that “pop out” from the flow of the document and float next to a target element. Official site: Tippy.js - Tooltip, Popover, Dropdown, and Menu Library Tippy.js is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper. It provides the… atomiks.github.io Step 1: import npm or CDN # npm npm i tippy.js # Yarn yarn add tippy.js or, <!-- Development --> <script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script> <script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script> <!-- Production --> <script src="https://unpkg.com/@popperjs/
Read more

Meet Typed.js — A JavaScript Typing Animation Library

-
Image
  Use this cool animation library for your next JavaScript project. Typed.js is a JavaScript animation library. Any string can type customer animated with content, speed, and so on. The most common use as I notice is for a landing page that looks modern in style. Official site: Typed.js Another demo made with love by Matt Boldt. # With NPM npm install typed.js # With Yarn yarn add typed.js # With Bower… mattboldt.com Step1: import js library with npm, yarn, bower, or CDN npm install typed.js yarn add typed.js bower install typed.js or <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script> Step2: HTML The content is included in the <div> The place content actually is typing is the <span> Step3: JS fire up the library with  new Typed('id',options) Customization: stringsElement: the content want to show typeSpeed: the speed of typing backDelay:backDelay time before backspacing in milliseconds fadeOut: fade out animation instead of ba
Read more

Meet baguetteBox.js —A Lightbox Script for Generating Animated Images

-
Image
  Use this JavaScript library to generate a lightbox with animated and responsive images. BaguetteBox is a JavaScript library, that generates a lightbox with animated and responsive images. And it also supports swipe gestures on touch-screen devices. Official site: GitHub - feimosi/baguetteBox.js: Simple and easy to use lightbox script written in pure JavaScript zap: Simple and easy to use lightbox script written in pure JavaScript - GitHub - feimosi/baguetteBox.js: Simple and… github.com How to use it? Step1: Install with npm, yarn, bower, or CDN npm install baguettebox.js --save yarn add baguettebox.js bower install baguettebox.js --save or, <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.2/baguetteBox.min.css "> <script src= https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.8.2/baguetteBox.min.js " async></script> Step2: HTML The content is inside the  gallery . Every image is in  <a> tag
Read more