Javascript Archives | Page 8 of 37 | portalZINE NMN

31. May 2016

Plyr.io – A simple, accessible and customizable HTML5, YouTube and Vimeo media player

A simple, accessible and customizable HTML5, YouTube and Vimeo media player.

Accessible – full support for VTT captions and screen readers
Lightweight – under 10KB minified and gzipped
Customisable – make the player look how you want with the markup you want
Semantic – uses the right elements. <input type="range"> for volume and <progress> for progress and well,<button>s for buttons. There’s no <span> or <a href="#"> button hacks
Responsive – as you’d expect these days
HTML Video & Audio – support for both formats
Embedded Video – support for YouTube and Vimeo video playback
API – toggle playback, volume, seeking, and more
Universal events – no messing around with Vimeo and YouTube APIs, all events are universal across formats
Fullscreen – supports native fullscreen with fallback to “full window” modes
i18n support – support for internationalization of controls
No dependencies – written in “vanilla” JavaScript, no jQuery required
SASS and LESS provided – If you like these over plain CSS

GitHub

31. May 2016

Bootstrap Panels with extras = Lobipanel

Sort, drag, expand, resize, minimize bootstrap panels
Specify url and load content in panel from this url
Change the name of the panel
Customize action icons and action tooltips
Works for nested panels
HTML5 localStorage support:
- Save panel state: (pinned, unpinned, collapsed, fullscreen, minimized) and apply it on page load
- Save panel position among siblings and apply on next time

GitHub

25. May 2016

Responsive Emails with MJML

MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase. MJML’s open-source engine generates high quality responsive HTML compliant with best practices.

<mjml>
  <mj-body>
    <mj-container>
      <mj-section>
        <mj-column>

          <mj-image width="100" src="/assets/img/logo-small.png"></mj-image>

          <mj-divider border-color="#F45E43"></mj-divider>

          <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>

        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

<mjml>

<mj-body>

<mj-container>

<mj-section>

<mj-column>

<mj-image width="100" src="/assets/img/logo-small.png"></mj-image>

<mj-divider border-color="#F45E43"></mj-divider>

<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>

</mj-column>

</mj-section>

</mj-container>

</mj-body>

</mjml>

mjml

21. May 2016

Snazzy background particle system with ParticleGround

A JavaScript plugin for snazzy background particle systems.

particleground(document.getElementById('your-element'), {
    dotColor: '#ff0000',
    lineColor: '#ff0000'
});

particleground(document.getElementById('your-element'), {

dotColor: '#ff0000',

lineColor: '#ff0000'

});

GitHub

21. May 2016

Create divided multi-scrolling pages

A simple plugin to create multi scrolling websites with two vertical scrolling panels.

“multiScroll.js is fully functional on all modern browsers, as well as some old ones such as Internet Explorer 8, 9, Opera 12… It works with browsers with CSS3 support and with the ones who don’t have it, making it ideal for old browsers compatibility. It is designed to work as well on touch devices such as mobile phones or tablets.”

GitHub

21. May 2016

Extract dominant image color and apply it to its parent with Adaptive Backgrounds

A simple jQuery plugin to extract the dominant color of an image and apply it to the background of its parent element.

Github / Demo

19. May 2016

More than 10 Material Design Resources

I am starting a small list of Material Design resources. If you have anything to share, let me know in the comments.

ICONS

Material Design icons by Google – google.github.io/material-design-icons
Material Design Icons – materialdesignicons.com

FRAMEWORK

PURE CSS

UI

Material UI Colors

JAVASCRIPT

Enjoy coding …

14. May 2016

Create a lockscreen with patternLock.js

Pattern Lock is a light weight plugin to simulate the Android Pattern Lock Mechanism. It’s easy to configure and style.

var lock = new PatternLock("#patternContainer");

var lock= new PatternLock('#patternHolder',{radius:30,margin:20});

var lock = new PatternLock("#patternContainer");

var lock= new PatternLock('#patternHolder',{radius:30,margin:20});

GitHub

14. May 2016

Gridify your pages

Gridify is a jQuery plugin that utilizes CSS3 transformations to transform your website into a multi page grid with smooth animations.

Uses jQuery and Velocity.js!

GitHub

14. May 2016

User-presence detection with jQuery-IdleCat

“Have you ever needed to perform a single or periodic task on your page based on user’s actual presence? Do you think you really need to fetch new notifications from your servers all the time, or isn’t such task quite pointless unless there actually is an active user sitting in front of your page?”

jQuery-IdleCat to the rescue …

// Create an instance of idleCat on a jQuery object.
var instance = $('#status').idleCat({

    // Number of seconds to wait between two scans of user activity.
    interval: 2,

    // How many seconds to hold the activity from the moment of knowing there was not any activity.
    release: 2,

    // The default state of the idleness (use 'active' or 'idle').
    state: 'idle',

    // Callback fired after the discovery of user activity on the page.
    activeCallback: function() {
        $(this).addClass('active');
    },

    // Callback fired after the discovery of used idleness on the page.
    // (+ number of seconds defined in the 'release' property)
    idleCallback: function(element) {
        $(this).removeClass('active');
    },

    // See below for more options...

});

// Log current state from idleCat attached to that jQuery object.
window.setInterval(function() {
    console.log(instance.getState());
}, 1000)

// Create an instance of idleCat on a jQuery object.

var instance = $('#status').idleCat({

// Number of seconds to wait between two scans of user activity.

interval: 2,

// How many seconds to hold the activity from the moment of knowing there was not any activity.

release: 2,

// The default state of the idleness (use 'active' or 'idle').

state: 'idle',

// Callback fired after the discovery of user activity on the page.

activeCallback: function() {

$(this).addClass('active');

// Callback fired after the discovery of used idleness on the page.

// (+ number of seconds defined in the 'release' property)

idleCallback: function(element) {

$(this).removeClass('active');

// See below for more options...

});

// Log current state from idleCat attached to that jQuery object.

window.setInterval(function() {

console.log(instance.getState());

}, 1000)

GitHub