STYLE SWITCHER

Hi, I am Anish

More about Anish

Name : Anish

Email : anish.alias00@gmail.com

Admin theme color : fresh

Post by Anish

jsGrid – Lightweight Grid jQuery Plugin

jsGrid – Lightweight Grid jQuery Plugin

jsGrid is a lightweight client-side data grid control based on jQuery. It supports basic grid operations like inserting, filtering, editing, deleting, paging, and sorting. jsGrid is flexible and allows to customize its appearance and components.

What jsGrid can do

Filtering
jsGrid supports data filtering by different criterias.
Data Editing
jsGrid allows to add new records, update, and remove data rows.
Paging
jsGrid has a flexible pager allowing to paginate data on the client and on the server side.
Fields
jsGrid provides different column types: text, numeric, select, checkbox and more.
Data Sources
jsGrid works with any type of data source from static javascript array to REST-service.

Sorting

jsGrid supports sorting with user interaction and with api.
Validation
jsGrid allows to validate inserting and editing data.
i18n
jsGrid is localized to several languages and allows to add custom locales with ease.
Callbacks
jsGrid provides plenty of callbacks to control and customize behavior. Website
More
Zdog – Round, Flat, Designer-Friendly Pseudo-3D Engine

Zdog – Round, Flat, Designer-Friendly Pseudo-3D Engine

Zdog is a 3D JavaScript engine for <canvas> and SVG. With Zdog, you can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. Its geometries exist in 3D space, but are rendered as flat shapes. This makes Zdog special.
Features:
  • Zdog is small. 2,100 lines of code for the entire library. 28KB minified.
  • Zdog is round. All circular shapes are rendered as proper circles with rounded edges. No polygonal jaggies.
  • Zdog is friendly. Modeling is done with a straight-forward declarative API.

Zdog was designed to bring the simplicity of vector illustration into 3D. Drawing circles and squares is easy and fun. Zdog just adds another dimension.

Download

Link directly to Zdog JS on unpkg.

<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
Website
More
Contact Form 7 – reCaptcha v2

Contact Form 7 – reCaptcha v2

Contact Form 7 v5.1 dropped support for reCaptcha v2 along with the [recaptcha] tag December 2018. This plugin brings that functionality back from Contact Form 7 5.0.5 and re-adds the [recaptcha] tag.
Description

Contact Form 7 v5.1 dropped support for reCaptcha v2 along with the [recaptcha] tag December 2018. This plugin brings that functionality back from Contact Form 7 5.0.5 and re-adds the [recaptcha] tag.

If this plugin is installed before updating Contact Form 7 from v5.0.5 to v5.1.1 then it will carry over your old API keys. At that point you will just need to head to this plugins settings page to tell the website to use reCaptcha v2.

Once installed and configured it should be the same reCaptcha functionality you are used to in previous versions of Contact Form 7.

Plugin Website
More
Angular js 2 Owl Carousel Responsive options

Angular js 2 Owl Carousel Responsive options

<div class="col-md-10 offset-md-1 col-xs-12">
          <owl-carousel [options]="{responsive:{
    '320':{
        items:1

    },
    '600':{
        items:3

    },
     '980':{
        items:4,
       nav:true,
      dots: true

    }

  }}" [items]="viewCustomObjectList" [carouselClasses]="['owl-theme', 'row', 'sliding']">

Owl carousel Angular version, Click here

More
Maintain the aspect ratio of a div with CSS

Maintain the aspect ratio of a div with CSS

In order to maintain the aspect ratio of a div with CSS create flexible elements that keep their aspect ratio (4:3, 16:9, etc.) when resize the browser window.

What is aspect ratio?

The aspect ratio of an element describes the proportional relationship between its width and height. Two common video aspect ratios are 4:3 and 16:9.

To maintain the aspect ratio of the div add a percentage value for padding-top. Different aspect ratio have different percentage values. Some of them are shown below:

aspect ratio  | padding-top value
--------------|----------------------
    1:1       |       100%
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

Syntax

elemenet {
    padding-top: %value;
}
More
Stripe | A complete payments platform‎

Stripe | A complete payments platform‎

Stripe is the best software platform for running an internet business. We handle billions of dollars every year for forward-thinking businesses around the world.

THE COMPLETE TOOLKIT FOR INTERNET BUSINESS

Stripe builds the most powerful and flexible tools for internet commerce. Whether you’re creating a subscription service, an on-demand marketplace, an e-commerce store, or a crowdfunding platform, Stripe’s meticulously designed APIs and unmatched functionality help you create the best possible product for your users. Millions of the world’s most innovative technology companies are scaling faster and more efficiently by building their businesses on Stripe.

DEVELOPERS FIRST

We believe that payments is a problem rooted in code, not finance. We obsessively seek out elegant, composable abstractions that enable robust, scalable, flexible integrations. Because we eliminate needless complexity and extraneous details, you can get up and running with Stripe in just a couple of minutes.

ALWAYS IMPROVING

Stripe is an always-improving toolchain that gains new features every month. Our world-class engineering team constantly iterates upon every facet of the Stripe stack. And from Apple Pay to Alipay, building on Stripe means you get early access to the latest technologies.

GLOBAL SCALE

We help power millions of businesses in 100+ countries and across nearly every industry. Headquartered in San Francisco, Stripe has 9 global offices and hundreds of people working to help transform how modern businesses are built and run.

Website
More
Artplayer.js – Modern HTML5 Video Player

Artplayer.js – Modern HTML5 Video Player

Artplayer.js is a modern and full featured HTML5 video player.
Features
  • Support vtt and srt subtitles
  • Support video quality switching
  • Support for custom control, layer, contextmenu, setting
  • Support playback rate, aspect ratio, flip, window fullscreen or web fullscreen adjustment
  • Support integration with other dependencies, like: flv.js, hls.js, dash.js, shaka-player, webtorrent
  • Support chrome native picture-in-picture mode, or custom picture-in-picture mode
  • Support thumbnails and highlight in the progress bar
  • Support to maintain the original video ratio, adaptive size
  • Support rich custom event monitoring, easy to expand
  • Support for internationalization of controls
  • Support for custom plugins
  • Support local video preview
  • Support subtitle time offset
  • Support screenshot
var url = 'https://zhw2590582.github.io/assets-cdn';
var art = new Artplayer({
    container: '.artplayer-app',
    url: url + '/video/one-more-time-one-more-chance-480p.mp4',
    title: '【新海诚动画】『秒速5センチメートル』',
    poster: url + '/image/one-more-time-one-more-chance-poster.jpg',
    volume: 0.5,
    isLive: false,
    muted: false,
    autoplay: false,
    pip: true,
    autoSize: true,
    screenshot: true,
    setting: true,
    loop: true,
    flip: true,
    playbackRate: true,
    aspectRatio: true,
    fullscreen: true,
    fullscreenWeb: true,
    mutex: true,
    theme: '#ffad00',
    lang: 'zh-cn',
    moreVideoAttr: {
        crossOrigin: 'anonymous',
    },
    contextmenu: [
        {
            html: '自定义菜单 - 天亮请关灯 Σ(っ °Д °;)っ',
            click: function() {
                console.info('自定义菜单 - 天亮请关灯 Σ(っ °Д °;)っ');
                this.hide();
            },
        },
    ],
    layers: [
        {
            html: `<img style="width: 100px" src="${url}/image/your-name.png">`,
            click: function() {
                art.destroy(true);
                art = new Artplayer({
                    autoplay: true,
                    container: '.artplayer-app',
                    url: url + '/video/you-name.mp4',
                });
            },
            style: {
                position: 'absolute',
                top: '20px',
                right: '20px',
                opacity: '.9',
            },
        },
    ],
    quality: [
        {
            default: true,
            name: '标清 480P',
            url: url + '/video/one-more-time-one-more-chance-480p.mp4',
        },
        {
            name: '高清 720P',
            url: url + '/video/one-more-time-one-more-chance-720p.mp4',
        },
    ],
    thumbnails: {
        url: url + '/image/one-more-time-one-more-chance-thumbnails.png',
        width: 190,
        height: 107,
    },
    subtitle: {
        url: url + '/subtitle/one-more-time-one-more-chance.srt',
        style: {
            color: '#03A9F4',
        },
    },
    highlight: [
        {
            time: 60,
            text: 'One more chance',
        },
        {
            time: 120,
            text: '谁でもいいはずなのに',
        },
        {
            time: 180,
            text: '夏の想い出がまわる',
        },
        {
            time: 240,
            text: 'こんなとこにあるはずもないのに',
        },
        {
            time: 300,
            text: '终わり',
        },
    ],
    controls: [
        {
            name: 'preview',
            position: 'right',
            html: '打开',
            mounted: $preview => {
                art.plugins.localPreview.attach($preview);
            },
        },
    ],
    icons: {
        loading: '<img src="./assets/img/ploading.gif">',
        state: '<img src="./assets/img/state.png">',
    },
});
Website
More
Google Places Autocomplete Fill Input Example Without Showing Map

Google Places Autocomplete Fill Input Example Without Showing Map

<input type="text" class="form-control" id="autocomplete_search">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=PUT_YOUR_API_KEY_HERE&amp;libraries=places"></script>

<script>
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var input = document.getElementById('autocomplete_search');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function () {
var place = autocomplete.getPlace();
// place variable will have all the information you are looking for.
$('#lat').val(place.geometry['location'].lat());
$('#long').val(place.geometry['location'].lng());
});
}
</script>

Website
More
Add Options from array in Select using jQuery

Add Options from array in Select using jQuery

<script>
var array = [
{ name: 'John', skills: 'html, css' },
{ name: 'Smith', skills: 'jquery, css' },
{ name: 'Jenny', skills: 'js, angular.js' }
];
var option = '';
for(var i = 0; i < array.length; i++){
option += '<option value="' + array[i].name + '">' + array[i].skills + '</option>';
}
$("#selectList").append(option);
</script>
More
Hugo – The world’s fastest framework for building websites

Hugo – The world’s fastest framework for building websites

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.

Hugo's Go-based templating provides just the right amount of logic to build anything from the simple to complex. If you prefer Jade/Pug-like syntax, you can also use Amber, Ace, or any combination of the three.

Website
More