STYLE SWITCHER

Hi, I am Anish

More about Anish

Name : Anish

Email : anish.alias00@gmail.com

Admin theme color : fresh

Post by Anish

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
Select2 – The jQuery replacement for select boxes

Select2 – The jQuery replacement for select boxes

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
  • In your language
  • Remote data support
  • Theming
  • Fully extensible
  • Dynamic item creation
  • Full browser support

Installation

In order to use Select2, you must include the compiled JavaScript and CSS files on your website. There are multiple options for including these pre-compiled files, also known as a distribution, in your website or application.
Using Select2 from a CDN
A CDN (content delivery network) is the fastest way to get up and running with Select2! Select2 is hosted on both the cdnjs and jsDelivr CDNs. Simply include the following lines of code in the <head> section of your page:
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

Single select boxes

Select2 was designed to be a replacement for the standard <select> box that is displayed by the browser. By default it supports all options and operations that are available in a standard select box, but with added flexibility.
<select class="js-example-basic-single" name="state"> 
    <option value="AL">Alabama</option> 
    ... 
    <option value="WY">Wyoming</option> 
</select>
Select2 will register itself as a jQuery function if you use any of the distribution builds, so you can call .select2() on any jQuery selector where you would like to initialize Select2.
// In your Javascript (external .js resource or <script> tag) 
$(document).ready(function() { 
    $('.js-example-basic-single').select2(); 
});
Website
More