perfect-scrollbar : Tiny but perfect jQuery Scrollbar plugin

Tiny but perfect jQuery scrollbar plugin.

Features:

  • There should be no css change on any original element.
  • The scrollbar should not affect the original design layout.
  • The design of the scrollbar should be (nearly) fully customizable.
  • If the size of the container or the content changes, the scrollbar size and position should be able to change.

Source:  perfect-scrollbar : Tiny but perfect jQuery Scrollbar plugin – jQuery Rain.

Advertisements

Login with Dropbox on your Website OAuth Authentication : jQuery plugin

This script uses OAuth in a jquery plugin to authenticate users on your website using their Dropbox account credentials.Pulls the user details from its Dropbox account and displays the same on your webpage.

Source:  Login with Dropbox on your Website OAuth Authentication : jQuery plugin – jQuery Rain.

jKit – jQuery based UI Toolkit – Index

jKit – jQuery based UI Toolkit – Index.

fresherEditor : jQuery Rich html text editor

fresherEditor is a light-weight WYSIWYG rich text editor plugin that uses contentEditable support in modern browsers for in-place HTML editing.

Features:

  1. Supports all text editing features such as bold, italic, font size and font name settings, text alignments, links and picture insertion, and more
  2. Builds toolbar automatically. By default, all buttons are built. You can configure which buttons to hide
  3. Triggers ‘change’ event so you can perform action when html content changes
  4. Uses Twitter Bootstrap

 

Download:  https://github.com/mquan/freshereditor

Demo:  http://dl.dropbox.com/u/140543/FresherEditor/demo.html

Source:  fresherEditor : jQuery Rich html text editor.

clueTip: A jQuery Tooltip Plugin

Overview

The clueTip plugin allows you to easily show a fancy tooltip when the user’s mouse hovers over (or, optionally, clicks on) any element you designate in your script. If the element includes a title attribute, its text becomes the heading of the clueTip.

Quick Start Guide

Showing the most basic clueTip can be achieved in two easy steps.

Add HTML markup to your page for elements that you want to invoke a clueTip. By default, the clueTip plugin will use the rel attribute to load contents into the tooltip body via AHAH.

  <!-- use ajax/ahah to pull content from fragment.html: -->
  <p><a class="tips" href="fragment.html" rel="fragment.html">show me the cluetip!</a></p>

  <!-- use title attribute for clueTip contents, but don't include anything in the clueTip's heading -->
  <p><a id="houdini" href="houdini.html" title="|Houdini was an escape artist.|He was also adept at prestidigitation.">Houdini</a></p>
Include the jQuery core file and the clueTip plugin in the <head> of your document. You may optionally include the hoverIntent plugin as well. After these scripts are referenced, you can reference a custom script file to invoke your clueTips (preferred) or enter the script directly in the <head> (shown below). You should also include the clueTip stylesheet (jquery.cluetip.css) after the scripts.
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.hoverIntent.js" type="text/javascript"></script> <!-- optional -->
<script src="jquery.cluetip.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
  $('a.tips').cluetip();

  $('#houdini').cluetip({
    splitTitle: '|'// use the invoking element's title attribute to populate the clueTip...
                     // ...and split the contents into separate divs where there is a "|"
    showTitle: false // hide the clueTip's heading
  });
});
</script>
<link rel="stylesheet" href="jquery.cluetip.css" type="text/css" />

Drag ‘n’ Drop File Uploads : Dropzone.js

Dropzone.js is a JavaScript library that simplifies creating a drag ‘n’ drop file upload functionality.

It works with jQuery and works almost out-of-the-box by giving a special class name to any form.

Multiple files can be uploaded at the same time where previews of images can be displayed as well.

There are also options for defining the max file size, thumbnail dimensions (if they will be generated), enable/disable previews and more.

Dropzone.js.

jQuery AJAX Differences Between GET vs POST

jQuery AJAX Differences Between GET vs POST | jQuery4u.