STYLE SWITCHER

Jquery

TypeIt

TypeIt

The most versatile animated typing utility on the planet. |
Website
More
Progress Nav – Animated Progress Bar to Highlight Current Section

Progress Nav – Animated Progress Bar to Highlight Current Section

Progress Nav is an animated progress bar that highlights sections of a page that are currently in view.

This page demonstrates an idea for how progress can be visualized inside of a standard page nav. Scroll the page and note how the marker animates to highlight all of the sections that are currently on screen.

The rest of the content below is taken from slides.com/developers. Take a look at that to see how the progress nav looks on a real page.

Created by Hakim El Hattab | hakim.se | @hakimel

Website
More
Amplitude JS

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 – 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 – 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

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

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 – 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 – 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

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