Bootstrap Visual FX : jQuery Plugin

Download   Demo

Video & Parallax add-on allows you to easily add image parallax scrolling effects and video backgrounds to your WordPress site. The plugin integrates straight into Visual Composer’s row settings, and is flexible to suit your theme’s design.

Just activate the plugin into your WordPress theme and video & parallax background images will become available for Visual Composer rows. Create normal or full-width backgrounds, and backgrounds that span multiple rows.

Features:

• Video Backgrounds, YouTube or Vimeo


• Parallax in four directions: up, down, left and right,


• Plug and play, just activate the plugin along with Visual Composer,


• Option to break out of containers, to allow your video or parallax to occupy more space, or even the full browser width,


• Option to span a video or parallax background across multiple rows, for the ultimate layouting experience,


• Option to turn off parallax in mobile devices,


• Translation files included: English .mo and .po files, and


• Integrates perfectly in the Visual Composer interface


• Uses requestAnimationFrame for smooth animating

Bootstrap Visual FX : jQuery Plugin

Bootstrap Markdown : jQuery plugin for markdown editing

Download   Demo

Simple Markdown editing tools that works!

Bootstrap-Markdown designed to be easily integrated with your bootstrap project. It exposes useful API that allow you to fully hook-in into the plugin

---

Markup

Switch regular textarea within your form into Bootstrap-Markdown editor seamlessly by adding data-provide="markdown" attribute

Code

<form><inputname="title"type="text"placeholder="Title?"/><textareaname="content"data-provide="markdown"rows="10">
</textarea><labelclass="checkbox"><inputname="publish"type="checkbox"> Publish
 </label><hr/><buttontype="submit"class="btn">Submit</button></form>

Inline editing with Bootstrap-Markdown is done by adding data-provide="markdown-editable" attribute

Code

<divdata-provide="markdown-editable"><h3>This is some editable heading</h3><p>Well, actually all contents within this "markdown-editable" context is really editable. Just click anywhere!</p></div>

Result

This is some editable heading

Well, actually all contents within this “markdown-editable” context is really editable. Just click anywhere!

---

Usage

Beside using above data-attributes, you could call it via code

$("#some-textarea").markdown(autofocus:false,savable:false)

Noted that Bootstrap-Markdown could be used as a standalone input (without any form). Set savable parameter to true will do the job. Options can be passed via data attributes or via code. Available options are:

 

 

 

 

Bootstrap Markdown : jQuery plugin for markdown editing

Option Name	Type	Description
autofocus	boolean	Indicates that editor will focused after instantiated. Default to false
savable	boolean	Indicates that editor will have save button and action. Default to false
hideable	boolean	If set to true then the editor will be hidden on blur event. Default to false
width	mixed	The editor width. Default to inherit. You could supply any numerical value (that will be set as css), or supply valid Bootstrap class (something like span2)
height	mixed	The editor height. Default to inherit
resize	string	Option to disable or change the resize property. Default to none
iconlibrary	string	The icon library to use. Glyphicons (glyph) and Font Awesome (fa) are supported. In order to use Font Awesome properly, you’ll need to include Font Awesome stylesheet yourself. Default to glyph
language	string	Localization setting. Default to en
footer	mixed	Footer dom. Can be string or callback. Default is empty string
hiddenButtons	mixed	Array or string of button names to be hidden. Default is empty string
disabledButtons	mixed	Array or string of button names to be disabled. Default is empty string

Bootstrap Dual Listbox in jQuery

Download   Demo

Bootstrap Dual Listbox is a responsive dual listbox widget optimized for Twitter Bootstrap. Works on all modern browsers and on touch devices.

Check the official website for a demo.

Usage

1. Download the latest tag from the releases page or get it via bower:

$ bower install bootstrap-duallistbox

1. Include jQuery and Bootstrap:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

1. Include plugin’s code:

<script src="dist/jquery.bootstrap-duallistbox.min.js"></script>
<link rel="stylesheet" type="text/css" href="../src/bootstrap-duallistbox.css">

1. Call the plugin:

$("#element").bootstrapDualListbox(
 // see next for specifications
);

Bootstrap Dual Listbox in jQuery

Filterable : jQuery Table Column Filter for Bootstrap

Download   Demo

Bootstrap and X-editable themed jQuery plugin that preforms per-column filtering for an HTML table.

Usage

• Filterable requires both Bootstrap and X-editable. To be able to change the color of the bootstrap icons, use the Font Awesome Icons inplace of the default ones.
  
  
  

   <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
   <link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet">
   <link href="http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.5/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet">
   <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
   <script src="http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.5/bootstrap-editable/js/bootstrap-editable.min.js"></script>
  

  
  
  
  


• To use Filterable, just select the table that you want to use and call filterable on it.
  
  • $('#exampleTable').filterable();
  
  


• To override any default options, just pass a hash of options to Filterable. This example makes filterable case-sensitive.
  
  • $('#exampleTable').filterable(ignoreCase: false);
  
  

Options

• ignoreColumns
  
  • Column indexes to not make filterable
  
  
  • Type: Array
  
  
  • Default: []
  
  


• onlyColumns
  
  • Column indexes to make filterable, all other columns are left non-filterable.
  
  
  • Type: Array
  
  
  • This takes presidence over ignoreColumns when provided.
  
  
  • Default: null – all columns
  
  


• ignoreCase
  
  • If case should be ignored
  
  
  • Type: Boolean
  
  
  • Default: true
  
  


• isMatch($cell, query)
  
  • Custom function to determine if the cell matches the user supplied filter
  
  
  • Type: Function
  
  
  • Default: null
  
  


• editableOptions
  
  • Any custom options for X-editable
  
  
  • Type: Object
  
  
  • Defaults:
  



• editableSelector
  
  • Selector to use on each heading to define the x-editable object. If not supplied, the enire heading is used.
  
  
  • Type: String
  
  
  • Defaults: null
  
  


• beforeFilter
  
  • Function to call before filtering a column
  
  
  • Type: Function
  
  
  • Defaults: null
  
  


• afterFilter
  
  • Function to call after filtering a column
  
  
  • Type: Function
  
  
  • Defaults: null
  
  

 



Filterable : jQuery Table Column Filter for Bootstrap

jQuery UI Bootstrap : Bootstrap-themed kickstart for jQuery UI widgets

Download   Demo

A jQuery UI theme based on Twitter Bootstrap.This project was started to bring the beauty and ease-of-use of Twitter Bootstrap to jQuery UI widgets.In their original forms, jQuery UI and Bootstrap can’t coexist resulting in conflicts with both CSS classes and styles as well as JavaScript when you do try to use them. jQuery UI Bootstrap provides the JavaScript and CSS required to quickly start a project using both jQuery UI and Twitter Bootstrap.

Our solution offers a custom version of Bootstrap compatible with jQuery UI as well as a Bootstrap-themed jQuery UI theme you can use to prototype your projects.

This project was started to bring the beauty and ease-of-use of Twitter Bootstrap to jQuery UI widgets ♥.

Why?

Bootstrap is one of our favorite projects, but having used it regularly it left us wanting two things:

• The ability to work side-by-side with jQuery UI (something which caused a number of widgets to break visually)


• The ability to theme jQuery UI widgets using Bootstrap styles. Whilst we love jQuery UI, we find some of the current themes to look a little dated. Our hope is that this theme provides a decent alternative for others that feel the same.

To clarify, this project doesn’t aim or intend to replace Twitter Bootstrap. It merely provides a jQuery UI-compatible theme inspired by Bootstrap’s design. It also provides a version of Bootstrap CSS with a few (minor) sections commented out which enable the theme to work alongside it.

We welcome any and all feedback as we would very much like this theme to be as solid as possible.

Browser support

All modern browsers are targeted by this theme with ‘lo-res’ experiences (i.e no gradients, border-radius etc.) provided for users using older browsers.

There are some minor known issues lingering that we’re working on, but the hope is that in time those will all get ironed out.

jQuery UI support

This theme targets jQuery UI 1.10.3 (stable) and 1.9.2 (legacy), along with the default version of jQuery included in the (current) jQuery UI builds (jQuery 1.6+).

Project status

This project is under active, but slow development. There has been a great deal of work done in branches to introduce compatibility with jQuery UI 1.9 and further work done to move us towards using LESS and improved parity with Bootstrap 3.x.

At this time, we are seeking contributors interested in helping us to finally complete the work needed to be Bootstrap 3.x compatible. This would involve helping in your spare time across a few weeks and you would be given credit in the project README.

As one of the (currently) more popular open-source jQuery UI themes we would love to get out more frequent releases and your help with this would be greatly appreciated.

Synchronize your fork

cd your_fork

git remote add your_fork git@github.com:addyosmani/jquery-ui-bootstrap.git
git fetch jquery-ui-bootstrap

#Merge your local copy with the original project
git checkout gh-pages
git merge jquery-ui-bootstrap/gh-pages

#Commit your changes
git commit -a -m "Synchronization with the original"

#Send your changes to github
git push

rock on node.js bandwagon!

<<install node>>
cd your_fork

# install modules (or globally with -g switch)
npm install

# run local webserver to see the pages.
node server.js

# compile your LESS changes to create a new css file
cd less
lessc -x style.less > style.min.css
lessc -x style2.less > style2.min.css

jQuery UI Bootstrap : Bootstrap-themed kickstart for jQuery UI widgets