Traveler

Best template for your booking weboste


Thank you

Hi there! Thank you for buying my template. Hope it will help to impove your business or impress your clients. The whole template based on Boostrap 3 framework. They done great job. You should definately check them out for additional documentation.

Traveler template contains 100+ html pages. I will add additional pages on future updates. Here is basic sitemap desciption for all page templates.

Homepages

Custom pages

Features

Hotels

Flights

Rentals

Cars

Activities

All scheme files located in css/schemes directory. You can setup scheme globally by importning it to the top of the mystyles.css file. Just add line:

@import  'css/schemes/brik-red.css' (use scheme name)

Alternative way is to put css link before closing <head> tag:

<link rel="stylesheet" href="css/schemes/brik-red.css"/> </head>

This is a fork of Stefan Petre's original code; thanks go to him for getting this thing started!

Please note that this fork is not used on Stefan's page, nor is it maintained or contributed to by him.

Versions are incremented according to semver.

Links

A general purpose library for building credit card forms, validating inputs and formatting numbers.

For example, you can make a input act like a credit card field (with number formatting and length restriction):

$('input.cc-num').payment('formatCardNumber');

Then, when the payment form is submitted, you can validate the card number on the client-side:

var valid = $.payment.validateCardNumber($('input.cc-num').val());

if (!valid) {
  alert('Your card is not valid!');
  return false;
}

You can find a full demo here.

Supported card types are:

API

$.fn.payment('formatCardNumber')

Formats card numbers:

Example:

$('input.cc-num').payment('formatCardNumber');

$.fn.payment('formatCardExpiry')

Formats card expiry:

Example:

$('input.cc-exp').payment('formatCardExpiry');

$.fn.payment('formatCardCVC')

Formats card CVC:

Example:

$('input.cc-cvc').payment('formatCardCVC');

$.fn.payment('restrictNumeric')

General numeric input restriction.

Example:

$('[data-numeric]').payment('restrictNumeric');

$.payment.validateCardNumber(number)

Validates a card number:

Example:

$.payment.validateCardNumber('4242 4242 4242 4242'); //=> true

$.payment.validateCardExpiry(month, year)

Validates a card expiry:

Example:

$.payment.validateCardExpiry('05', '20'); //=> true
$.payment.validateCardExpiry('05', '2015'); //=> true
$.payment.validateCardExpiry('05', '05'); //=> false

$.payment.validateCardCVC(cvc, type)

Validates a card CVC:

Example:

$.payment.validateCardCVC('123'); //=> true
$.payment.validateCardCVC('123', 'amex'); //=> true
$.payment.validateCardCVC('1234', 'amex'); //=> true
$.payment.validateCardCVC('12344'); //=> false

$.payment.cardType(number)

Returns a card type. Either:

The function will return null if the card type can't be determined.

Example:

$.payment.cardType('4242 4242 4242 4242'); //=> 'visa'

$.payment.cardExpiryVal(string) and $.fn.payment('cardExpiryVal')

Parses a credit card expiry in the form of MM/YYYY, returning an object containing the month andyear. Shorthand years, such as 13 are also supported (and converted into the longhand, e.g. 2013).

$.payment.cardExpiryVal('03 / 2025'); //=> {month: 3: year: 2025}
$.payment.cardExpiryVal('05 / 04'); //=> {month: 5, year: 2004}
$('input.cc-exp').payment('cardExpiryVal') //=> {month: 4, year: 2020}

This function doesn't perform any validation of the month or year; use$.payment.validateCardExpiry(month, year) for that.

Example

Look in ./example/index.html

Building

Run cake build

Running tests

Run cake test

Autocomplete recommendations

We recommend you turn autocomplete on for credit card forms, except for the CVC field (which should never be stored). You can do this by setting the autocomplete attribute:

<form autocomplete="on">
  <input class="cc-number">
  <input class="cc-cvc" autocomplete="off">
</form>

You should also mark up your fields using the Autocomplete Types spec. These are respected by a number of browsers, including Chrome.

<input type="text" class="cc-number" pattern="\d*" autocomplete="cc-number" placeholder="Card number" required>

Set autocomplete to cc-number for credit card numbers and cc-exp for credit card expiry.

Mobile recommendations

We recommend you set the pattern attribute which will cause the numeric keyboard to be displayed on mobiles:

<input class="cc-number" pattern="\d*">

You may have to turn off HTML5 validation (using the novalidate form attribute) when using thispattern, as it won't match space formatting.

Usage

Include the required files.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="dropit.js"></script>
<link rel="stylesheet" href="dropit.css" type="text/css" />

Add some markup.

<ul class="menu">
    <li>
        <a href="#">Dropdown</a>
        <ul>
            <li><a href="#">Some Action 1</a></li>
            <li><a href="#">Some Action 2</a></li>
            <li><a href="#">Some Action 3</a></li>
            <li><a href="#">Some Action 4</a></li>
        </ul>
    </li>
</ul>

Hook up the jQuery.

$(document).ready(function() {
    $('.menu').dropit();
});

API Documentation

Available options.

action: 'click', // The open action for the trigger
submenuEl: 'ul', // The submenu element
triggerEl: 'a', // The trigger element
triggerParentEl: 'li', // The trigger parent element
afterLoad: function(){}, // Triggers when plugin has loaded
beforeShow: function(){}, // Triggers before submenu is shown
afterShow: function(){}, // Triggers after submenu is shown
beforeHide: function(){}, // Triggers before submenu is hidden
afterHide: function(){} // Triggers before submenu is hidden

After the plugin has loaded there are certain classes that get added to the dropdown elements. Below is a style guide of the classes that get added. Note that .dropit-open only exists when the submenu is open.

<ul class="dropit">
    <li class="dropit-trigger dropit-open">
        <a href="#">Dropdown</a>
        <ul class="dropit-submenu">
            <li><a href="#">Some Action 1</a></li>
            <li><a href="#">Some Action 2</a></li>
            <li><a href="#">Some Action 3</a></li>
            <li><a href="#">Some Action 4</a></li>
        </ul>
    </li>
</ul>

Styling the Dropdown

Dropit.css only provides the essential styles required for Dropit to work. See the sample-styles.css stylesheet we've created to get an idea of how to style the dropdown.

Credits & License

Dropit was created by Gilbert Pellegrom from Dev7studios and released under the MIT license.

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.

How Do I Use It?

Include jQuery 1.7+ and FitVids.js in your layout and target your videos container with fitVids().

<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script>
<script>
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>

This will wrap each video in a div.fluid-width-video-wrapper and apply the necessary CSS. After the initial Javascript call, it's all percentage-based CSS magic.

Currently Supported Players

YouTube Y
Vimeo Y
Blip.tv Y*
Viddler Y*
Kickstarter Y*

* means native support for these may be deprecated. If your video platform is not currently supported, try adding it via a customSelector...

Add Your Own Video Vendor

Have a custom video player? We now have a customSelector option where you can add your own specific video vendor selector (mileage may vary depending on vendor and fluidity of player):

  $("#thing-with-videos").fitVids({ customSelector: "iframe[src^='http://mycoolvideosite.com'], iframe[src^='http://myviiids.com']"});
  // Selectors are comma separated, just like CSS

Note: This will be the quickest way to add your own custom vendor as well as test your player's compatibility with FitVids.

Ignore With Class

Have a video you want FitVids to ignore? You can slap a class of fitvidsignore on your object or container and your video will be displayed as it is defined.

If you'd like to add a custom block to ignore FitVids, use the ignore option.

  $("#thing-with-videos").fitVids({ ignore: '.mycooldiv, #myviiid'});
  // Selectors are comma separated, just like CSS

Known issues

There is nothing for non-coders. Take the latest and ready-to-use Fotorama on its website:

http://fotorama.io/set-up

How to build

First, ensure that you have the latest Node.js and npm installed.

Test that Grunt’s CLI is installed by running grunt --version. If the command isn’t found, run npm install -g grunt-cli. For more information about installing Grunt, see the getting started guide.

  1. Fork and clone the repo.
  2. Run npm install to install all dependencies (including Grunt).
  3. Run grunt to grunt this project.

Hack on by running grunt watch and editing files in the src/ subdirectory.

The built version of Fotorama will be put in the out/.

Submitting pull requests

  1. Create a new branch, please don’t work in your master branch directly.
  2. Add stuff.
  3. Push to your fork and submit a pull request to Fotorama’s develop branch.

Regarding code style like indentation and whitespace, follow the conventions you see used in the source already.

Set up

 

<!-- 1. Link to jQuery (1.8 or later), -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB -->

<!-- fotorama.css & fotorama.js. -->
<link  href="http://fotorama.s3.amazonaws.com/4.6.0/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://fotorama.s3.amazonaws.com/4.6.0/fotorama.js"></script> <!-- 16 KB -->

<!-- 2. Add images to <div class="fotorama"></div>. -->
<div class="fotorama">
  <img src="http://s.fotorama.io/1.jpg">
  <img src="http://s.fotorama.io/2.jpg">
</div>

<!-- 3. Enjoy! -->

Example: Basic

The HTML structure is simply an unordered list with anchors and images:

1
2
3
4
5
6
7
<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
    <ul>
        <li><a href="#"><img src="images/medium/1.jpg" alt="Whatever works"/></a></li>
        <li><a href="#"><img src="images/medium/2.jpg" alt="Anything else"/></a></li>
        <!-- ... -->
    </ul>
</div>

To call the plugin, simply do:

1
2
3
4
5
$(function() {
            
    $( '#ri-grid' ).gridrotator();
 
});

Don’t forget to include the other scripts that are needed.

 

OPTIONS

The following options are available:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// number of rows
rows            : 4,
 
// number of columns
columns         : 10,
 
// rows/columns for different screen widths
// i.e. w768 is for screens smaller than 768 pixels
w1024           : {
    rows    : 3,
    columns : 8
},
 
w768            : {
    rows    : 3,
    columns : 7
},
 
w480            : {
    rows    : 3,
    columns : 5
},
 
w320            : {
    rows    : 2,
    columns : 4
},
 
w240            : {
    rows    : 2,
    columns : 3
},
 
// step: number of items that are replaced at the same time
// random || [some number]
// note: for performance issues, the number should not be > options.maxStep
step            : 'random',
maxStep         : 3,
 
// prevent user to click the items
preventClick    : true,
 
// animation type
// showHide || fadeInOut || slideLeft ||
// slideRight || slideTop || slideBottom ||
// rotateLeft || rotateRight || rotateTop ||
// rotateBottom || scale || rotate3d ||
// rotateLeftScale || rotateRightScale ||
// rotateTopScale || rotateBottomScale || random
animType        : 'random',
 
// animation speed
animSpeed       : 500,
 
// animation easings
animEasingOut   : 'linear',
animEasingIn    : 'linear',
 
// the item(s) will be replaced every 3 seconds
// note: for performance issues, the time "can't" be < 300 ms
interval        : 3000,
// if false the animations will not start
// use false if onhover is true for example
slideshow       : true,
// if true the items will switch when hovered
onhover     : false,
// ids of elements that shouldn't change
nochange        : []

When defining the size of the grid, you should keep in mind that you will want to have less images in the grid than what you actually put in the list. Let's say you have a list of 50 images and define 5 columns and 4 rows. This will create a grid of 20 images with 30 left to be switched.

Highly customizable checkboxes and radio buttons for jQuery and Zepto.

 

Features


How it works

iCheck works with checkboxes and radio buttons like a constructor. It wraps each input with a div, which may be customized by you or using one of the available skins. You may also place inside that div some HTML code or text using insert option.

For this HTML:

<label>
  <input type="checkbox" name="quux[1]" disabled>
  Foo
</label>

<label for="baz[1]">Bar</label>
<input type="radio" name="quux[2]" id="baz[1]" checked>

<label for="baz[2]">Bar</label>
<input type="radio" name="quux[2]" id="baz[2]">

With default options you'll get nearly this:

<label>
  <div class="icheckbox disabled">
    <input type="checkbox" name="quux[1]" disabled>
  </div>
  Foo
</label>

<label for="baz[1]">Bar</label>
<div class="iradio checked">
  <input type="radio" name="quux[2]" id="baz[1]" checked>
</div>

<label for="baz[2]">Bar</label>
<div class="iradio">
  <input type="radio" name="quux[2]" id="baz[2]">
</div>

By default, iCheck doesn't provide any CSS styles for wrapper divs (if you don't use skins).

Options

These options are default:

{
  // 'checkbox' or 'radio' to style only checkboxes or radio buttons, both by default
  handle: '',

  // base class added to customized checkboxes
  checkboxClass: 'icheckbox',

  // base class added to customized radio buttons
  radioClass: 'iradio',

  // class added on checked state (input.checked = true)
  checkedClass: 'checked',

    // if not empty, used instead of 'checkedClass' option (input type specific)
    checkedCheckboxClass: '',
    checkedRadioClass: '',

  // if not empty, added as class name on unchecked state (input.checked = false)
  uncheckedClass: '',

    // if not empty, used instead of 'uncheckedClass' option (input type specific)
    uncheckedCheckboxClass: '',
    uncheckedRadioClass: '',

  // class added on disabled state (input.disabled = true)
  disabledClass: 'disabled',

    // if not empty, used instead of 'disabledClass' option (input type specific)
    disabledCheckboxClass: '',
    disabledRadioClass: '',

  // if not empty, added as class name on enabled state (input.disabled = false)
  enabledClass: '',

    // if not empty, used instead of 'enabledClass' option (input type specific)
    enabledCheckboxClass: '',
    enabledRadioClass: '',

  // class added on indeterminate state (input.indeterminate = true)
  indeterminateClass: 'indeterminate',

    // if not empty, used instead of 'indeterminateClass' option (input type specific)
    indeterminateCheckboxClass: '',
    indeterminateRadioClass: '',

  // if not empty, added as class name on determinate state (input.indeterminate = false)
  determinateClass: '',

    // if not empty, used instead of 'determinateClass' option (input type specific)
    determinateCheckboxClass: '',
    determinateRadioClass: '',

  // class added on hover state (pointer is moved onto input)
  hoverClass: 'hover',

  // class added on focus state (input has gained focus)
  focusClass: 'focus',

  // class added on active state (mouse button is pressed on input)
  activeClass: 'active',

  // adds hoverClass to customized input on label hover and labelHoverClass to label on input hover
  labelHover: true,

    // class added to label if labelHover set to true
    labelHoverClass: 'hover',

  // increase clickable area by given % (negative number to decrease)
  increaseArea: '',

  // true to set 'pointer' CSS cursor over enabled inputs and 'default' over disabled
  cursor: false,

  // set true to inherit original input's class name
  inheritClass: false,

  // if set to true, input's id is prefixed with 'iCheck-' and attached
  inheritID: false,

  // set true to activate ARIA support
  aria: false,

  // add HTML code or text inside customized input
  insert: ''
}

There's no need to copy and paste all of them, you can just mention the ones you need:

$('input').iCheck({
  labelHover: false,
  cursor: true
});

You can choose any class names and style them as you want.

Initialize

Just include icheck.js after jQuery v1.7+ (or Zepto [polyfill, event, data]).

iCheck supports any selectors, but handles only checkboxes and radio buttons:

// customize all inputs (will search for checkboxes and radio buttons)
$('input').iCheck();

// handle inputs only inside $('.block')
$('.block input').iCheck();

// handle only checkboxes inside $('.test')
$('.test input').iCheck({
  handle: 'checkbox'
});

// handle .vote class elements (will search inside the element, if it's not an input)
$('.vote').iCheck();

// you can also change options after inputs are customized
$('input.some').iCheck({
  // different options
});

Indeterminate

HTML5 allows specifying indeterminate ("partially" checked) state for checkboxes. iCheck supports this for both checkboxes and radio buttons.

You can make an input indeterminate through HTML using additional attributes (supported by iCheck). Both do the same job, but indeterminate="true" may not work in some browsers (like IE7):

indeterminate="true"
<input type="checkbox" indeterminate="true">
<input type="radio" indeterminate="true">

determinate="false"
<input type="checkbox" determinate="false">
<input type="radio" determinate="false">

indeterminate and determinate methods can be used to toggle indeterminate state.

Callbacks

iCheck provides plenty callbacks, which may be used to handle changes.

Callback name When used
ifClicked user clicked on a customized input or an assigned label
ifChanged input's "checked", "disabled" or "indeterminate" state is changed
ifChecked input's state is changed to "checked"
ifUnchecked "checked" state is removed
ifToggled input's "checked" state is changed
ifDisabled input's state is changed to "disabled"
ifEnabled "disabled" state is removed
ifIndeterminate input's state is changed to "indeterminate"
ifDeterminate "indeterminate" state is removed
ifCreated input is just customized
ifDestroyed customization is just removed

Use on() method to bind them to inputs:

$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
});

ifCreated callback should be binded before plugin init.

Methods

These methods can be used to make changes programmatically (any selectors can be used):

// change input's state to 'checked'
$('input').iCheck('check');

// remove 'checked' state
$('input').iCheck('uncheck');

// toggle 'checked' state
$('input').iCheck('toggle');

// change input's state to 'disabled'
$('input').iCheck('disable');

// remove 'disabled' state
$('input').iCheck('enable');

// change input's state to 'indeterminate'
$('input').iCheck('indeterminate');

// remove 'indeterminate' state
$('input').iCheck('determinate');

// apply input changes, which were done outside the plugin
$('input').iCheck('update');

// remove all traces of iCheck
$('input').iCheck('destroy');

You may also specify some function, that will be executed on each method call:

$('input').iCheck('check', function(){
  alert('Well done, Sir');
});

Feel free to fork and submit pull-request or submit an issue if you find something not working.

Comparison

iCheck is created to avoid routine of reinventing the wheel when working with checkboxes and radio buttons. It provides an expected identical result for the huge number of browsers, devices and their versions. Callbacks and methods can be used to easily handle and make changes at customized inputs.

There are some CSS3 ways available to style checkboxes and radio buttons, like this one. You have to know about some of the disadvantages of similar methods:

While CSS3 method is quite limited solution, iCheck is made to be an everyday replacement covering most of the tasks.

Browser support

iCheck is verified to work in Internet Explorer 6+, Firefox 2+, Opera 9+, Google Chrome and Safari browsers. Should also work in many others.

Mobile browsers (like Opera mini, Chrome mobile, Safari mobile, Android browser, Silk and others) are also supported. Tested on iOS (iPad, iPhone, iPod), Android, BlackBerry and Windows Phone devices.

Description

Key features

Dependencies

Usage

Add the following libraries to the page:

Add the following stylesheets to the page:

Plus, a skin for the slider. Two skins are included:

Don't forget about skin image sprite:

Install with bower

Initialisation

The slider overrides a native text input element.

<input type="text" id="example_id" name="example_name" value="" />

To initialise the slider, call ionRangeSlider on the element:

$("#example_id").ionRangeSlider();

Settings

Property Default Description
type "single" Optional property, will select slider type from two options: single - for single range slider, or double - for double range slider
min 10 Optional property, automatically set from the value attribute of base input. For example: if value="10;100", it will be 10
max 100 Optional property, automatically set from the value attribute of base input. For example: if value="10;100", it will be 100
from min Optional property, on default has the same value as min. overwrite default FROM setting
to max Optional property, on default has the same value as max. overwrite default TO setting
step 1 Optional property, set slider step value
prefix - Optional property, set prefix text to all values. For example: "$" will convert "100" in to "$100"
postfix - Optional property, set postfix text to all values. For example: " €" will convert "100" in to "100 €"
maxPostfix - Optional property, set postfix text to maximum value. For example: maxPostfix - "+" will convert "100" to "100+"
hasGrid false Optional property, enables grid at the bottom of the slider (it adds 20px height and this can be customised through CSS)
gridMargin 0 Optional property, enables margin between slider corner and grid
hideMinMax false Optional property, disables Min and Max fields.
hideFromTo false Optional property, disables From an To fields.
prettify true Optional property, allow to separate large numbers with spaces, eg. 10 000 than 10000
disable false Disables the slider
values null Array of custom values: [a, b, c] etc.

Callbacks

Property Default Description
onLoad - Triggered once, after slider loaded and each time after slider updated via method Update.
onChange - Triggered live as the slider value is changed. Returns object with all slider values
onFinish - Triggered once, after slider work is done. Returns object with all slider values

Description of data passed to callbacks

Each callback have object with slider data as a first argument:

Obj: {
    "input": object,    // jQuery-link to input
    "slider": object,   // jQuery-link to slider container
    "min": 10,          // MIN value
    "max": 20,          // MAX value
    "fromNumber": 10,   // FROM value
    "toNumber": 20,     // TO value
    "fromPers": 25,     // FROM value in percents
    "toPers": 75,       // TO value in percents
    "fromX": 100,       // x-coordinate of FROM-slider in pixels
    "toX": 200          // x-coordinate of TO-slider in pixels
}

Creating slider (all params)

An example of a customised slider:

$("#someID").ionRangeSlider({
    min: 10,                        // min value
    max: 100,                       // max value
    from: 30,                       // overwrite default FROM setting
    to: 80,                         // overwrite default TO setting
    type: "single",                 // slider type
    step: 10,                       // slider step
    prefix: "$",                    // prefix value
    postfix: " €",                  // postfix value
    maxPostfix: "+",                // postfix to maximum value
    hasGrid: true,                  // enable grid
    gridMargin: 7,                  // margin between slider corner and grid
    hideMinMax: true,               // hide Min and Max fields
    hideFromTo: true,               // hide From and To fields
    prettify: true,                 // separate large numbers with space, eg. 10 000
    disable: false,                 // disable slider
    values: ["a", "b", "c"],        // array of custom values
    onLoad: function (obj) {        // callback is called after slider load and update
        console.log(obj);
    },
    onChange: function (obj) {      // callback is called on every slider change
        console.log(obj);
    },
    onFinish: function (obj) {      // callback is called on slider action is finished
        console.log(obj);
    }
});

You can also initialise slider with data-* attributes of input tag:

data-from="30"                      // default FROM setting
data-to="70"                        // default TO setting
data-type="double"                  // slider type
data-step="10"                      // slider step
data-prefix="$"                     // prefix value
data-postfix=" €"                   // postfix value
data-maxpostfix="+"                 // postfix to maximum value
data-hasgrid="true"                 // enable grid
data-gridmargin="7"                 // set grid margin
data-hideminmax="true"              // hide Min and Max fields
data-hidefromto="true"              // hide From and To fields
data-prettify="false"               // don't use spaces in large numbers, eg. 10000 than 10 000
data-values="a,b,c"                 // comma separated predefined slider values

Public methods

Slider update, method update:

$("#someID").ionRangeSlider("update", {
    min: 20,                        // change min value
    max: 90,                        // change max value
    from: 40,                       // change default FROM setting
    to: 70,                         // change default TO setting
    step: 5                         // change slider step
});

Slider remove, method remove:

$("#someID").ionRangeSlider("remove");

 

Fast, light and responsive lightbox plugin, for jQuery and Zepto.js.

Optionally, install via Bower: bower install magnific-popupRuby gemgem install magnific-popup-rails.

Extensions

If you created an extension for some CMS, email me and I'll add it to this list.

Location of stuff

Using Magnific Popup?

If you used Magnific Popup in some interesting way, or on site of popular brand, I'd be very grateful if you shoot me a link to it.

Build

To compile Magnific Popup by yourself, first of make sure that you have Node.jsGrunt.jsRuby andJekyll installed, then:

1) Copy repository

git clone https://github.com/dimsemenov/Magnific-Popup.git

2) Go inside Magnific Popup folder that you fetched and install Node dependencies

cd Magnific-Popup && npm install

3) Now simply run grunt to generate JS and CSS in folder dist and site in folder _site/.

grunt

Optionally:

v. 3.5.4 11-13-2013

Nicescroll as a Greasemonkey plugin: http://userscripts.org/scripts/show/119910 (freezed)

Nicescroll is a jquery plugin, for nice scrollbars with a very similar ios/mobile style.

So you have scrollable divs with momentum for iPad 4+ and you have consistent scrollable areas for all desktop and mobile platforms.

Sexy zoom feature, you can "zoom-in" the content of any nicescroll'ed div. Nice to use and nice to see, all the content of the div in fullscreen mode. It works on desktop (double click on div) either in mobile/touch devices using pinch gesture.

On modern browsers hardware accelerated scrolling has implemented. Using animationFrame for a smoothest and cpu-saving scrolling. (when browser supports)

Warning for IE6 users (why do you uses IE6 yet? Please updgrade to a more stable and modern browser), some feature can't work for limitation of the browser. Document (body) scrollbars can't appears, old (native browser) one is used. Some issues with IFrame scrolling.

FEATURES

DEPENDENCIES

It's a plugin for the jquery framework, you need to include jquery in your scripts. From 1.5.x version and on. (you can try with 1.4.2+ also)

Copy image "zoomico.png" in the same folder of jquery.nicescroll.js.

Initialize nicescroll ALWAYS in (document) ready statement.

  1. Simple mode, it styles document scrollbar:
  $(document).ready(
    function() {  
      $("html").niceScroll();
    }
  );

  2. Instance with object returned:

  var nice = false;
  $(document).ready(
    function() {  
      nice = $("html").niceScroll();
    }
  );

  3. Style a DIV and chage cursor color:

  $(document).ready(
    function() {  
      $("#thisdiv").niceScroll({cursorcolor:"#00F"});
    }
  );

  4. DIV with "wrapper", formed by two divs, the first is the vieport, the latter is the content:

  $(document).ready(
    function() {
      $("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
    }
  );

  5. Get nicescroll object:

  var nice = $("#mydiv").getNiceScroll();

  6. Hide scrollbars:

  $("#mydiv").getNiceScroll().hide();

  7. Check for scrollbars resize (when content or position have changed):

  $("#mydiv").getNiceScroll().resize();

  8. Scrolling to a position:

  Scroll X Axis - $("#mydiv").getNiceScroll().doScrollLeft(x, duration);
  Scroll Y Axis - $("#mydiv").getNiceScroll().doScrollTop(y, duration);

CONFIGURATION PARAMETERS

When you call "niceScroll" you can pass some parameters to custom visual aspects:

slimMenu is a lightweight jQuery plugin, which is made to create responsive and multi-level navigation menus on the fly.

With slimMenu, you'll no longer struggle with media queries to create responsive menus, or any other heavy plugins to create multi-level nested menus. slimMenu does both job for you and it's only 5KB(2.5KB minified)!

Features:

Browser Support:

(Tested on following browsers and confirmed that the slimMenu is working.)

Note About IE Support: I don't have time to deal with lower versions of that ancient piece of work. You can fork the project and make it compatible with lower versions of IE if you want. I'll pull it if you send a request.

Installation:

Add slimmenu.css to the head of your document:

<link rel="stylesheet" href="slimmenu.css" type="text/css">

Add jquery.slimmenu.js after jQuery plugin and before closing body tag.

<script src="jquery.slimmenu.min.js"></script>

Create your navigation menu using an ordered list and add slimmenu class:

<ul class="slimmenu">...</ul>

Initilalize the plugin:

$('ul.slimmenu').slimmenu(
{
    resizeWidth: '800', /* Navigation menu will be collapsed when document width is below this size or equal to it. */
    collapserTitle: 'Main Menu', /* Collapsed menu title. */
    animSpeed: 'medium', /* Speed of the submenu expand and collapse animation. */
    easingEffect: null, /* Easing effect that will be used when expanding and collapsing menu and submenus. */
    indentChildren: false, /* Indentation option for the responsive collapsed submenus. If set to true, all submenus will be indented with the value of the option below. */
    childrenIndenter: '&nbsp;' /* Responsive submenus will be indented with this character according to their level. */
});

Optional Add easing plugin after jQuery plugin and before closing body tag if you want to use easing effects.

<script src="**PATH_TO_PLUGIN**/jquery.easing.min.js"></script>

Inspired by twitter.com's autocomplete search functionality, typeahead.js is a flexible JavaScript library that provides a strong foundation for building robust typeaheads.

The typeahead.js library consists of 2 components: the suggestion engine, Bloodhound, and the UI view, Typeahead. The suggestion engine is responsible for computing suggestions for a given query. The UI view is responsible for rendering suggestions and handling DOM interactions. Both components can be used separately, but when used together, they can provided a rich typeahead experience.

Getting Started

How you acquire typeahead.js is up to you.

Preferred method:

Other methods:

Note: both bloodhound.js and typeahead.jquery.js have a dependency on jQuery 1.9+.

Documentation

Examples

For some working examples of typeahead.js, visit the examples page.

Browser Support

NOTE: typeahead.js is not tested on mobile browers.

Customer Support

For general questions about typeahead.js, tweet at @typeahead.

For technical questions, you should post a question on Stack Overflow and tag it with typeahead.js.

Issues

Discovered a bug? Please create an issue here on GitHub!

https://github.com/twitter/typeahead.js/issues

Versioning

For transparency and insight into our release cycle, releases will be numbered with the follow format:

<major>.<minor>.<patch>

And constructed with the following guidelines:

For more information on semantic versioning, please visit http://semver.org/.

Testing

Tests are written using Jasmine and ran with Karma. To run the test suite with PhantomJS, run $ npm test.

Developers

If you plan on contributing to typeahead.js, be sure to read the contributing guidelines. A good starting place for new contributors are issues labeled with entry-level. Entry-level issues tend to require minor changes and provide developers a chance to get more familiar with typeahead.js before taking on more challenging work.

In order to build and test typeahead.js, you'll need to install its dev dependencies ($ npm install) and have grunt-cli installed ($ npm install -g grunt-cli). Below is an overview of the available Grunt tasks that'll be useful in development.

Maintainers

Authors