Javascript Archives | Page 8 of 37 | portalZINE NMN

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

14. May 2016

Fine UI inspiration at Code My UI

Code My UI provides handpicked code snippets, you can use in your own web projects. You can find website design inspiration, plus some code samples.

Code My UI

14. May 2016

Map that DOM element with a Minimap

Minimap provides a preview of a full webpage or its DOM element. All with flexible positioning and navigation support.

//Desired dom element
var previewBody = $('body').minimap();

1 2	//Desired dom element var previewBody = $('body').minimap();

GitHub