Posts

Showing posts with the label plugin

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 starCaptio...

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/...

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

jquery-confirm: a popup jQuery plugin

Image
  A jQuery plugin that provides a great set of features like Auto-close, Ajax-loading, Themes, Animations, and more. Official site How to use it? Step1: jquery, jquery-confirm js and CSS can do with nom, bower, or CDN $ npm install jquery-confirm or $ bower install craftpip/jquery-confirm or <script src="// https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js "></script> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script> Step2: my HTML and CSS I set up a button, you can do any DOM you want. Step3: JavaScript select the DOM,and fire up with  .confirm() , also can do  .dialog()  or  .alert() content:the box content title: the title in the content icon: the icon in content, can do with font-awesome like my code, remember to link the font-awesome CSS fil...