STYLE SWITCHER

Jquery

Amplitude JS

Amplitude.js is the HTML5 Audio Player for the modern era. No dependencies required.

Amplitude.js is a lightweight JavaScript library that allows you to control the design of your media controls in your webpage -- not the browser. No dependencies (jQuery not required). Amplitude.js is available under the MIT License.

Features

  • Completely independent library (no jQuery required)
  • 100% customizable design of all player elements
  • Available by CDN or single command install: npm install --save amplitudejs
  • Multiple playlist support on single page
  • Song meta data display
  • Soundcloud integration
  • Live streaming support
  • Call back functions for events
Website Download
More

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.
  • Fully extensible
  • Dynamic item creation
  • Full browser support
Website
More

Moment Timezone – Parse and Display Dates in Any Timezone

Moment Timezone is timezone support for moment.js that parse and display dates in any timezone.
Website
More

ContentShare

ContentShare is a jQuery plugin which lets you share the exact content on a page which you actually want to share. It enables you to share selected text on your social network rather the default text specified in thetags. By default, it supports Facebook and Twitter but you can add more networks easily.
Usage
  
 <html>
     <head>
          // css file for tooltip
          <link rel="stylesheet" type="text/css" href="tooltipster.min.css"/>
          // jquery library
          <script src="jquery-1.8.3.min.js"></script>
          // tooltip plugin
         <script type="text/javascript" src="jquery.tooltipster.min.js"></script>
         // our awesome ContentShare plugin
         <script src="contentshare.js"></script>
    </head>
</html>

ContentShare by default works on the text within ptags. So, if you are okay with this then you can skip this part. To customize, you can specify any element via CSS/jQuery Selectors and pass it while calling the plugin like:
// calling the plugin on DOM ready
$(document).ready(function(){
    $("p").contentshare();
    $.fn.contentshare.defaults.shareable.on('mouseup',function(){
        $.fn.contentshare.showTooltip();
    });            
});
Website
More

Responsive Facebook Like Box

Code
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>

<div id="container" style="width:100%;">
<div class="fb-like-box" data-href="https://www.facebook.com/adobegocreate" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
</div>

<div id="fb-root"></div>
<script>
/*
* REMEMBER TO CHANGE TO YOUR APP ID AND CHANGE data-href TO SUIT YOU
*/
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=ADD YOUR APP ID HERE";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
$(window).bind("load resize", function(){
var container_width = $('#container').width();
$('#container').html('<div class="fb-like-box" ' +
'data-href="https://www.facebook.com/adobegocreate"' +
' data-width="' + container_width + '" data-height="730" data-show-faces="false" ' +
'data-stream="true" data-header="true"></div>');
FB.XFBML.parse( );
});
</script>

 

</body>
</html>

More

Tabella.js – Touch Enabled Responsive Tables

Tabella.js is a pure javascript, touch enabled, responsive table plugin. Table header is fixed only when at least some part of the table is in the viewport.
Website
More

Macy.js – Lightweight JavaScript Masonry Layout Library

Macy.js is a lightweight, dependency-free, 4kb masonry layout library, designed for a hassle-free configuration.

Features

  • User definable breakpoints
  • Works with CSS transitions
  • Simple event API
  • No dependencies
Website
More

Lazy Line Painter

A jQuery plugin for SVG path animation

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.

Website
More

18 web design trends for 2017

As we look forward to 2017 — a year that hopefully won’t be plagued by the passing of so many of the world’s greatest artists and performers — the big question on every designer’s mind has to be: what will define design in 2017?
So with that in mind, I decided to ask Webflow’s own designers what trends they think will dominate the world of digital design in 2017. (And wrote up a little commentary on their thoughts.) First, let’s hear from Webflow’s Chief Design Officer, Sergie Magdalin.
Sergie Magdalin, Chief Design Officer at Webflow
‍Sergie Magdalin, Chief Design Officer at Webflow

Layouts that let content shine

The arrangement of design elements within a given structure should allow the reader to easily focus on the message, without slowing down the speed of his reading

The last few years have seen a sea change in how people view design’s role in business. Design has shifted from a late-in-the-process “optimization” stage where designers swooped in to sprinkle on some “pretty” like mystical fairy dust to a real competitive advantage.

It’s been an amazing evolution to watch.

And a fascinating element of that evolution has been the shift back toward a focus on content: the meat on the bones of the web. Designers worldwide have realized that people visit websites for their content — whether it’s raging tweetstorms, thoughtful long-reads, or the latest “user-generated” meme — and that design’s ultimate role is to present content in an intuitive, efficient, and “delightful” way.

That’s one reason for the shift away from skeuomorphic design toward “flatter,” more minimalist design approaches, as seen in Google’s Material aesthetic, and really, across the web and our various devices.

Of course, as Newton’s third law states, for every action, there’s an equal and opposite reaction. Many designers feel that the flat design trend has taken the “soul” out of design. We expect to see this conversation continue across 2017, but look forward to it becoming a productive dialogue that never loses sight of the heart of our design work: the content.

Better collaboration between designers, and between designers and developers

As design has taken a greater and more influential role in shaping businesses, more and more attention has been paid to designers’ collaboration with both their fellow designers, and their developer colleagues.

The emphasis on designer collaboration has arisen in part from the massiveness of the web and mobile apps we’re building these days. Gigantic platforms like Google, Facebook, Twitter, and LinkedIn require not only huge design teams working on disparate aspects of the platform, but also better ways for designers to stay on the same page — and that means more collaboration, and better communication.

All kinds of tools have arisen to help facilitate that collaboration, from the shared templates and dashboards in Webflow’s Team plan to the real-time, shared canvas of Figma — and you can bet 2017 will bring both improvements to those platforms, and all-new options.

On the designer-developer collaboration front, lots of attention has been focused on the all-important handoff stage. Where designers used to hand off massive packages of static images and specs, they’re now sharing dynamic visualizations enabled by tools like InVision, Marvel, and UXPin — or doing one better by exporting real, production-ready code from Webflow.

Read Article
More

Responsive Google Plus Widget

<div class="gp-wrap" id="gp-wrap">
<div class="g-page" data-href="https://plus.google.com/102226233421872956936" data-rel="publisher"></div>
<script type="text/javascript">
(function() {
// this guy right here
document.getElementsByClassName('g-page')[0].setAttribute('data-width', document.getElementById('gp-wrap').clientWidth);
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div> 
More