Anish M Alias
Jan 11th, 2018
0
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
Anish M Alias
Jan 1st, 2018
0
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 --saveamplitudejs - Multiple playlist support on single page
- Song meta data display
- Soundcloud integration
- Live streaming support
- Call back functions for events
Anish M Alias
Aug 25th, 2017
0
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 
Anish M Alias
Aug 24th, 2017
0
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>
Anish M Alias
Aug 10th, 2017
0
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