STYLE SWITCHER

Jquery

Markvis – Make Visualization in Markdown

Markvis is a plugin to generate charts in markdown with few lines of code.
Website
More

Flubber – Tools for Smoother Shape Animations

Flubber is a library to provide a best-guess interpolation for any two arbitrary shapes (or collections of shapes) that results in a reasonably smooth animation.
Website
More

Prevent scrolling of parent element – Jquery

Please ensure that you are include jquery.mousewheel.js
<!DOCTYPE html> 
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>

<style>
 * { padding: 0; margin: 0; }
 html { min-height: 1000%; }

 #toolbox {
 overflow: auto;
 position: fixed;
 top: 100px;
 left: 200px;
 width: 200px;
 height: 300px;
 background: #ccc;
 }
</style>

</head>
<body>

 <div id="toolbox">
 <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
 </div>

 <script src="https://rawgit.com/jquery/jquery-mousewheel/master/jquery.mousewheel.js"></script>

</body>
</html>

$(function() {

 var toolbox = $('#toolbox'),
 height = toolbox.height(),
 scrollHeight = toolbox.get(0).scrollHeight;

 toolbox.bind('mousewheel', function(e, d) {
 if((this.scrollTop === (scrollHeight - height) && d < 0) || (this.scrollTop === 0 && d > 0)) {
 e.preventDefault();
 }
 });

});
Example

Another example

$('div').on( 'mousewheel DOMMouseScroll', function (e) {

var e0 = e.originalEvent;
var delta = e0.wheelDelta || -e0.detail;

this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
e.preventDefault();
});
Website
More

SmartPhoto.js – Responsive Image Viewer for Mobile Devices

SmartPhoto.js is an easy to use responsive image viewer especially for mobile devices.

Features

  • Intuitive gestures such as pinch-in/pinch-out/drag/swipe
  • Use Accelerometer to move images
  • Accessible from keyboard
  • Show pictures via URL hash When the page is loaded
  • Can make photo groups
Website
More

Fade HTML5 audio (adjust volume) using jQuery (window).scroll

$(document).ready(function() {
    var audioElm = $('#soundTour').get(0);
    audioElm.play();

    var height = $(document).height() - $(window).height();

    $(window).scroll(function() {
        audioElm.volume = 1 - $(window).scrollTop() / height;
        console.log(audioElm.volume);
    });
});​
More

Moon – A minimal, blazing fast user interface library.

A minimal, blazing fast user interface library. Weighing in at 5kb minified + gzipped, Moon is one of the lightest libraries out there.
Website
More

Use jQuery to hide a DIV when the user clicks outside of it

$('body').click(function(evt){  
	var eventId = $(event.target).attr('class');
	
       if(eventId == "mobile-menu")
          return;
       //For descendants of menu_content being clicked, remove this check if you do not want to put constraint on descendants.
       if($(evt.target).closest('.cus-popup').length)
          return;             
		$(".cus-popup").slideUp(200);
      //Do processing of click event here for every element except with id menu_content

});

Another simple method

 $(document).mouseup(function(e) 
 {
    var container = $("YOUR CONTAINER SELECTOR");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});
More

Restive.js – Designer Friendly jQuery Toolkit for Responsive Web Design

Restive.js is a designer-friendly jQuery toolkit for building mobile-friendly websites. Using a combination of smart device detection, advanced breakpoints management, and timely CSS class additions, restive.js will make it easier for you to build mobile-friendly and/or responsive Web pages.
Website
More

Styletron – Universal, High Performance JavaScript Styles

Styletron is a universal CSS-in-JS engine built from the ground up for high-performance.
Website
More

Progressbar.js

With ProgressBar.js, it's easy to create responsive and stylish progress bars for the web. Animations perform well even on mobile devices. It provides a few built‑in shapes like Line, Circle and SemiCircle but you can also create custom shaped progress bars with any vector graphic editor.
Website
More