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

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

14. May 2016

Tweene the animation proxy

It is an animation proxy: used as a wrapper of your chosen library, it may allow you to do more and better and it makes easy to switch from one library to another any time you want. Currently it can work together with GSAP, Velocity.js, Transit (CSS transitions) or jQuery.

One to rule them all
Timeline support for all
Support for play(), pause(), resume(), reverse() and restart()
To, From and FromTo tweens, loops and infinite loops, yoyo effect, delay and loops delay, callbacks and directional callbacks, full set of events

As a big velocity fan, Tweene provides some nice unique additional options and the timeline feature pushes things to new levels ;)

Tweene