Why?

The reason for creating sco.js was to improve the existing bootstrap js components and to provide specific use-cases for the projects I was working on. The bootstrap js plugins are great for general stuff but whenever you want something more in-depth or a specific behaviour, they fall short. Most of the bootstrap js plugins are not very extensible (or they were not when I created my version of the plugins) and where they are, my requirements were too different to just extend with 1-2 lines of code. This is not to say bootstrap and its js components are bad! It's a really good framework for rapid development but...1 size doesn't fit all. In my case it almost fit ;)

What you get

All plugins in sco.js can be used on a bootstrap-enabled site but they can be used separately as well. Also, sco.js contains plugins that are not available in bootstrap. Plugins are unit tested and in use on production sites. Each plugin can be enabled and configured via data-attributes data-trigger="pluginName" or programatically var $modal = $.scojs_modal({...}). Each plugin has a "reason for being" (see below) - what it tries to achieve, what it does differently from bootstrap, why I created it in the first place.

In most cases the css comes from bootstrap. I also tried to follow the bootstrap docs, formatting and conventions as much as possible so users of bootstrap would feel right at home with sco.js

When data attributes are available to trigger a specific plugin, the attribute to use is data-trigger="plugin name" to not conflict with bootstrap's data-toggle="plugin name". This way you can use both bootstrap and sco.js freely and interchangeable.

What's next?

• Like mentioned in the note above, one of the priorities is to get css transition support working wherever possible.
• Carousel is coming too, based on panes.
• Ajax support for panes (and automatically for tab and carousel) - you should be able to load remote content into a pane or more slides into a carousel.
• Add predelay to tooltip - for when you might want the tooltip to appear after a bit of delay.
• ARIA support for form validation.
• If enough interest, I will update the form validation to make use of data-* attributes and make it more extensible, otherwise this is a low priority for now.
• Other suggestions?

What?

The primary use of the modal is to load remote content (loaded via ajax) and display that in an overlay, on top of the current page. It can also be used to display something without loading it but it's not its primary use case.

Why?

Because bootstrap modals didn't allow remote content when I created this. Also, I didn't want to clutter every page where I might use a modal with the modal content / HTML markup. The Sco.js modal requires nothing more than a link on the page.

Lets say we have a site eg. a hotel, and each room has a booking form, rather than clutter up every page with the same booking form html we would put the form in a separate html file eg. "my-booking-form.html" and when calling the modal use href="my-booking-form.html" to ajax in that content and keep our main content uncluttered and seo friendly.

Dependencies

The modal does not depend on other libraries (other than jQuery, of course). However, we recommend you load spin.js. If spin.js is found, a spinning wheel is displayed during the loading of remote content.

Examples

<!-- Button to trigger modal -->
<a data-trigger="modal" href="lipsum.html" data-title="Modal title" class="btn">Launch demo modal</a>

You don't need to worry about providing any HTML structure to the modal, this is done automatically for you. The default markup is listed in the Options section and the css comes from bootstrap. All you need to provide is the modal title and the url to the remote content. However, if you need to specify your own HTML markup check the target option.

Usage

Via data attributes (data-api)

Look ma', no js code:

<button type="button" data-trigger="modal">Launch modal</button>

All plugin options are available to use as data attributes. The data-api usage is "live" - meaning that you don't have to rebind new elements. Every new element having a data-trigger="modal" attribute that is added to the dom after the initial load will work out of the box.

As a jquery plugin

$('#trigger').scojs_modal(options);

$('.modal_triggers').scojs_modal(options);

If the trigger element has data- attributes and you pass options as well, the data attributes overwrite the options with the same name.

This part is quite different from bootstrap's implementation. In bootstrap, the selected element should be the modal (meaning the modal HTML should already exist in the dom). It also means the modal HTML cannot be reused by other modals (i.e. if you want more modals on the page, each has to have its own id/html code).
In our case, the selected element is the trigger of the modal (what you click on to launch the modal) and the modal is built based on the trigger's options. You definitely have the option to use different modals but, by default, the same modal HTML is reused by every modal instance on the page. This decision was made because we found out that we never wanted more modals appearing on the page at the same time. So reusing the same modal HTML for every triggered modal seemed quite logical.

With access to the object

var modal = $.scojs_modal(options);

This gives you access to the created javascript object. Note that when you launch the modal this way, it's not shown by default. You'll have to call modal.show() at a later time to show the modal.

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-keyboard="1".

<div class="modal fade" id="modal">
  <div class="modal-header">
    <a class="close" href="#" data-dismiss="modal">×</a>
    <h3> </h3>
  </div>
  <div class="inner"></div>
</div>

$('#trigger').scojs_modal({content: 'Lorem ipsum...'});

$('#trigger').scojs_modal({content: $('#other').html()});

Methods

.scojs_modal(options)

$('#trigger').scojs_modal({
  title: 'Modals are cool',
  content: "No, they're not"
});

There are no other methods available in data-api or jQuery mode yet. The following methods are available in when you get access to the js object:

.show()

Shows the modal.

var modal = $.scojs_modal({
  keyboard: true
});
modal.show();

.close()

Closes the modal.

var modal = $.scojs_modal({
  keyboard: true
});
modal.show();
modal.close();

.destroy()

Closes and destroys the modal, removes all modal HTML and events from the DOM.

var modal = $.scojs_modal({
  keyboard: true
});
modal.show();
modal.destroy();

What?

A specialised modal that has a yes/no button in the footer. The yes is attached to some action, the no dismisses the modal without doing anything else. Basically a glorified alert().

Why?

We wanted an easy way to make the user confirm some action like deleting something from their profiles.

Dependencies

The confirm plugin depends on the modal. Make sure you load both when you want to use confirm.

Examples

<!-- Button to trigger confirm -->
<a data-trigger="confirm" href="/delete/me" class="btn">Launch demo confirm</a>

Usage

Via data attributes (data-api)

<a href="/link-to-go-to/when-user-presses-yes" data-trigger="confirm">Launch confirm</button>

All modal options are available for confirm as well though some might not make much sense (like loading remote content). There are some extra options available for confirm, see the options below.

As a jquery plugin

$('#confirm_trigger').scojs_confirm(options);

Like with the modal, you call scojs_confirm() on the trigger, not on the modal element itself. And, if data- attributes exist, they overwrite any general options you pass to the plugin.

With access to the object

var confirm = $.scojs_confirm(options);

This gives you access to the created javascript object. Note that when you launch the confirm this way, it's not shown by default. You'll have to call confirm.show() at a later time to show the confirm modal.

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-keyboard="1".

All modal options are available for confirm as well. Note, however, that the default confirm modal doesn't have a title so setting title has no effect. You can, of course, have your own confirm modal with a title in which case this option will work as expected. There are also some modal options that don't make much sense to be set for confirm like remote and cache but you're free to use them if you need them.

There are some extra options available for confirm or options that have a different default than the modal. See below:

<div class="modal fade confirm_modal" id="confirm_modal">
  <div class="modal-body inner"></div>
  <div class="modal-footer">
    <a class="btn cancel" href="#" data-dismiss="modal">cancel</a>
    <a href="#" class="btn btn-danger" data-action="1">yes</a>
  </div>
</div>

<a data-trigger="confirm" href="/delete/me" class="btn">Delete</a>
<button class="btn" data-action="/delete/me" data-trigger="confirm">Delete</button>

Methods

.scojs_confirm(options)

$('#trigger').scojs_confirm({
  content: "Ain't that cute?",
  action: "http://google.com"
});

var confirm = $.scojs_confirm({
  content: "Oh, noes, you really want to delete me?",
  action: function() {
    this.close();
  }
});
confirm.show();

All modal methods are available for the confirm as well.

What?

Accordions or show/hide togglers.

Why?

So much markup in bootstrap for their collapse component! And IDs. I hate IDs! While IDs give you a great degree of freedom in what to target (as in I want this button to collapse this far away block across the page), most of the time it's not how an accordion works. You usually want to click on a menu link and expand the block under/above that link. So I made this collapse plugin to address the said issues.

Dependencies

The collapse does not depend on other libraries (other than jQuery, of course).

Examples

In its most basic form, the collapser plugin is nothing more than a simple on/off toggler for another block element. All you need to get started is a trigger with a data-trigger="collapse" attribute and a div inmediately following the trigger with a class of .collapsible. You will probably want that div to be set to display:none (eg. via the bootstrap helper class .hide or with style="display:none").

<a href="#" data-trigger="collapse">Click for default behaviour</a>
<div class="collapsible hide">
  Lorem ipsum...
</div>

More examples:

Let's spice things up a bit: the accordion behaviour. In this mode, we need to tell each trigger what html element is the parent for the whole accordion:

<div class="sidenav">
  <a href="#" data-trigger="collapse" data-parent=".sidenav" class="active">Menu 1</a>
  <div class="collapsible">
    The quick brown fox jumps over the lazy dog.
  </div>
  <a href="#" data-trigger="collapse" data-parent=".sidenav">Menu 2</a>
  <div class="collapsible" style="display: none">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</div>

We can make this even more interesting by adding a "show more / show less" toggle:

<div>Lorem ipsum...</div>
<div class="collapsible hide">Etiam lacinia...</div>
<a href="#" class="show_more_example">show more</a>

<div>Q: What does the quick brown fox do?</div>
<div class="collapsible hide">A: The quick brown fox jumps over the lazy dog.</div>
<a href="#" class="show_more_example">show more</a>
<script>
  $(document).on('click', '.show_more_example', function(e) {
    $(this).scojs_collapse({
      triggerHtml: {on: 'show less', off: 'show more'}
      ,mode: 'prev'
    });
    return false;
  });
</script>

Usage

Via data attributes (data-api)

<button data-trigger="collapse" class="btn">Click me</button>

The data-api usage is "live" - meaning that you don't have to rebind new elements. Every new element having a data-trigger="collapse" attribute that is added to the dom after the initial load will work out of the box.

As a jquery plugin

$('#collapse_trigger').scojs_collapse(options);

If data- attributes exist, they overwrite any general options you pass to the plugin.

When you call the plugin this way, all it does is toggle the target. To toggle it back you'd call the plugin again. However, it's best used inside a click event (or hover/etc) like this:

<script>
  $(document).on('click', '.collapse_triggers', function(e) {
    $(this).scojs_collapse(options);
    return false;
  });
</script>

With access to the object

var collapse = $.scojs_collapse(options);

This gives you access to the created javascript object. Note that when you launch the collapse this way, it doesn't toggle the target by default. You'll have to call collapse.toggle() at a later time, as many times as you want, to toggle the target on/off.

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-parent=".foo".

Methods

.scojs_collapse(options)

$('#trigger').scojs_collapse({
  parent: '#sidebar',
  mode: 'prev'
});

There are no other methods available in data-api or jQuery mode yet. The following methods are available when you get access to the js object:

.toggle()

Toggles the target element.

var collapse = $.scojs_collapse();
collapse.toggle();

What?

Tab functionality for your pages.

Why?

Like with the other plugins that already exist in bootstrap that I chose to rewrite, my main problem with bootstrap tabs is the complexity of the markup required and the heavy use of IDs. Sco.js tabs are simpler, have some sane defaults but the simplicity comes with a price: it doesn't support dropdown tabs for example. If you need the extra complexity, by all means, use bootstrap tabs.

Dependencies

Panes - because it's the core of the tabs and carousel. If you want history support you should also include jQuery Address. See below for how to use it.

Examples

To start using the tab plugin you need an <ul data-trigger="tab"> for the tab headers and a <div class="pane-wrapper"> immediately following the ul for the tab content. There should be as many li's in the ul as children elements in the .pane-wrapper div. A click on the first tab header would select the first .pane-wrapper child, a click on the nth tab header would select the nth child.

The links in the tab headers don't need a specific href attribute, unless you want history support:

<ul class="nav nav-tabs" data-trigger="tab">
  <li><a href="#">Tab 1</a></li>
  <li><a href="#">Tab 2</a></li>
  <li><a href="#">Tab 3</a></li>
  <li><a href="#">Tab 4</a></li>
</ul>
<div class="pane-wrapper">
  <div>...</div>
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

Browser history support

To enable history support for tabs make sure you load jQuery Address and that the links in your tab headers have anchor hrefs (e.g <a href="#foo">Tab 1</a>).
However, the hrefs must NOT point to any element on the page (there should be no element with that ID on the page). The history support is bidirectional:

• when you click on a tab header that has an anchor href the hash gets added to the current url. This is the easy direction :)
• when you add the hash of a tab header to the url, the tab switches to that pane

If there's an element that has the same ID as one of your hrefs, the tabs will still function properly but the page will "jump" to that element, as anchors are supposed to work in browser.

Click on the tabs above and see how the hash is added to the page url (which is normal browser behaviour) and try adding #tab1 or #tab2 or #tab3 to this page url manually and see how the tabs change. You can also click on the last tab header - the proper pane will be selected but the page will jump up to modals.

Usage

Via data attributes (data-api)

See the examples above for how you can use this with the data-api. You need to add data-trigger="tab" to the element wrapping the tab headers.

The data-api usage is NOT "live", unfortunately. If you add elements to the DOM having a data-trigger="tab" attribute, you will have to also bind that new element yourself using javascript.

As a jquery plugin

$('#mytabs').scojs_tab(options);

If the #mytabs element has data- attributes and you pass options as well, the data attributes overwrite the options with the same name.

With access to the object

var tab = $.scojs_tab('#mytabs', options);

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-content="#foo".

Methods

.select(index)

Select the index-th element (0-based).

var $tab = $.scojs_tab('#foo');
$tab.select(1);

What?

Y'know...tooltips. The kind of dialog baloon that usually appears on hover over stuff.

Why?

While other tooltip plugins focus on pixel perfect positioning, the main focus of Sco.js tooltips plugin is to keep the actual tooltip in the viewport at all times. It's not so much about perfect positioning but about making sure that it's fully shown in the view area when you hover over elements with tooltips, even over those that are positioned near edges of the viewport.

Dependencies

jQuery.

Examples

<a href="#" data-trigger="tooltip" data-content="Lorem ipsum dolor">Hover me</a>

Scroll the page up till the example link above is at the very top of the page and hover over the link again - you will see the tooltip appearing below the link. Try the same with left/right/bottom - the tooltip will reposition itself to stay on page all the time.

Usage

Via data attributes (data-api)

<div data-trigger="tooltip" data-content-elem="#tooltip_element">Hover me</div>

The data-api usage is "live" - meaning that you don't have to rebind new elements. Every new element having a data-trigger="tooltip" attribute that is added to the dom after the initial load will work out of the box.

As a jquery plugin

$('.tooltips').scojs_tooltip(options);

If the trigger element has data- attributes and you pass options as well, the data attributes overwrite the options with the same name.

With access to the object

var tooltip = $.scojs_tooltip('#trigger', options);

This gives you access to the created javascript object. Note that when you launch the tooltip this way, it's not shown by default. You'll have to call tooltip.show() at a later time to show the tooltip.

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-content="my content".

Methods

.scojs_tooltip(options)

$('#trigger').scojs_tooltip({
  content: "Tooltip content"
  ,cssclass: 'pretty'
  ,delay: 1000
});

The following methods are available when you get access to the js object:

.show()

Shows the tooltip straight away.

var tooltip = $.scojs_tooltip('#trigger', {
  target: '#foo'
  ,content: 'tooltip content'
});
tooltip.show();

.hide()

Hides the tooltip straight away.

var tooltip = $.scojs_tooltip('#trigger', {
  target: '#foo'
  ,content: 'tooltip content'
});
tooltip.show();
tooltip.hide();

.do_mouseenter()

See .do_mouseleave()

.do_mouseleave()

Useful when you have the delay option set and you don't want to hide the tooltip right away but instead hide it after the set delay. Basically, this simulates the mouse leaving the trigger. Also, this gives a chance to the user to hover over the trigger again and keep the tooltip open some more.

var tooltip = $.scojs_tooltip('#trigger', {
  ,delay: 1000
});
tooltip.show();
tooltip.do_mouseleave();  // hides after 1000 seconds

What?

This is a "flash message" - a message that appears at the top of the page and disappears after a few seconds. It can be an info or an error message.

Why?

Useful after some user action (like submitting a form for example) to let them know your app processed the action ok or there was an error.

Dependencies

jQuery.

Examples

<a id="message_trigger_ok" href="#">Click to see the info message</a>
<a id="message_trigger_err" href="#">Click to see the error message</a>
<script>
  $('#message_trigger_ok').on('click', function(e) {
    e.preventDefault();
    $.scojs_message('This is an info message', $.scojs_message.TYPE_OK);
  });
  $('#message_trigger_err').on('click', function(e) {
    e.preventDefault();
    $.scojs_message('This is an error message', $.scojs_message.TYPE_ERROR);
    });
</script>

Usage

As a jquery plugin

$.scojs_message(message, type);

Where message is the message you want displayed and type should be one of $.scojs_message.TYPE_OK or $.scojs_message.TYPE_ERROR to indicate an error or success message.

Options

Since this is a "singleton" or "static" plugin, options can be changed globally by changing $.scojs_message.<option>

What?

Valid is a javascript form validation plugin. Basically, you give it a set of rules for a form's fields and it'll either submit the form if all rules pass or show error messages if not.

Valid is the most complex and most opinionated plugin of all sco.js plugins. It also makes extensive use of other plugins (from sco.js and 3rd party) so make sure you load its dependencies before using it. It is loosely based on the jQuery form validation plugin.

Why?

There are a couple of good form validators out there. I built this one because:

• I needed support for general error messages (i.e. not related to a certain field), besides field-related messages.
• I needed support for client side validation, as well as server side validation that would pass the errors to the client for display (for example when a field would pass the "must be an email" client-side rule but it won't pass the "email already exists" server-side rule).
• I wanted support for the JSend format - to pass instructions/messages from the backend to the front end in a standard format.
• Since I was using the Kohana php framework on the backend, I wanted the validation rules defined there to work transparently on the frontend as well.
• As much I would have wanted to use the browser form validation API, they were too limited, not translatable and not customizable.

Dependencies

Message to display general messages, jQuery Form Plugin to submit the form via ajax. It uses the JSend specification to receive instructions from the backend. It does not depend on Modal but it knows how to close the modal window if instructed to do so by the backend. The defaults of the plugin are based on the excellent Mosto css framework for forms but you can, of course, customize it to work with any framework.

Examples

<form action="valid.json" id="valid_form" class="form-horizontal">
  <label><div>Email</div> <input type="email" name="email"></label>
  <label><div>Password</div> <input type="password" name="pass"></label>
  <label><div>Password again</div> <input type="password" name="pass2"></label>
  <button type="submit" class="btn">Try</button>
</form>
<script>
  $(function() {
    $('#valid_form').scojs_valid({rules: {email: ['not_empty', 'email'], pass: ['not_empty', {'min_length': 4}], pass2: [{matches: 'pass'}]}});
  });
</script>

Usage

Via data attributes (data-api)

No data attributes support yet but this is something I plan on having eventually. Patches are welcome!

As a jquery plugin

$('#form').scojs_valid({rules: options, messages: options});

With access to the object

var valid = $.scojs_valid(formId, options);

This gives you access to the created javascript object. You will have to call the object's methods on your own to trigger validation. Normally, this is all wrapped in the jQuery plugin but if you want custom functionality or you don't want to depend on the jQuery form plugin, this is the way to do it. You'll probably want to call .validate() on the js object before submitting the form and handle the JSend response from the server later on.
formId can be either a string selector or a jQuery object.
options should be an object with rules and (optional) messages: {rules: {...}, messages: {...}}

Options

{email: ['not_empty', 'email'], name: ['not_empty', {equals: 'john'}]}

$('#form').scojs_valid({
   rules: {...}
  ,onSuccess: function(response, validator, $form) {...}
});

$('#form').scojs_valid({
   rules: {...}
  ,onError: function(response, validator, $form) {...}
});

$('#form').scojs_valid({
   rules: {...}
  ,onFail: function(response, validator, $form) {...}
});

$('#form').scojs_valid({
   rules: {...}
  ,onBeforeValidate: function() {...}
});

Rules

Messages

The default messages used by the plugin, when no custom message is set. Note that any occurence of the string :value in the message is replaced by the rule constraint value.

Communicate with the backend

Once the client side validation has passed, the form is submitted to the backend where you should have another round of validation. The backend can then tell the client what to do next: show some more errors, go to another page, show a Message and so on.
The instructions from backend to frontend are sent as json, in the JSend format.

Examples:
{"status":"success","data":{"next":"http://google.com"}}
{"status":"fail","data":{"errors":{"email":"This error comes from server side"}}}
{"status":"error","message":"The server made a boo boo"}

Methods

.validate()

Performs the client side validation and show the errors on the form fields, if any. Returns true if all rules pass and false otherwise.

var valid = $.scojs_valid('#signup_form', {rules: {email: ['not_empty']}});
valid.validate();

What?

Panes is the core for tabs and carousels. Not meant to be used standalone, unless you want to provide functionality not covered by Tab and Carousel.

It provides the basic functionality to switch between a collection of elements - show one of them then hide that and show some other. Its aim is to be easily extensible - add any kind of transition effect you want, add callbacks, etc.
By default it comes with 3 transitions ( xfade, slide, flip ) but you can add as many as you want.

Why?

Tabs and carousels are basically the same thing (from a functional point of view): A collection of elements of which only one is visible at a time. You switch between the elements by clicking on tab headers or on navigation pills. Carousels are a bit more advanced than this but the core functionality is the same. It made sense to have a library to provide the common functionality for both. You can even think beyond just tabs and carousels - how about a pagination module that switches between pages (e.g. « 1 2 3...10 »)? Or a side menu that shows various pages with a nice transition between the pages? This pattern is quite used on the web.

Dependencies

If you want to use transitions you need to load bootstrap-transition.js before this.

Examples

Show 1 Show 2

<div class="pane-wrapper" id="panes-example">
  <div><img src="assets/img/carousel1.jpg"></div>
  <div><img src="assets/img/carousel2.jpg"></div>
</div>
<button class="btn" id="select-pane1">Show 1</button>
<button class="btn" id="select-pane2">Show 2</button>
<script>
  $(function() {
    var $panes = $.scojs_panes('#panes-example', {easing: 'flip'});
    $('#select-pane1').on('click', function() {
      $panes.select(0);
    });
    $('#select-pane2').on('click', function() {
      $panes.select(1);
    });
  });
</script>

Usage

With access to the object

var $panes = $.scojs_panes(selector, options);

Options

Methods

.select(index)

Select the index-th element (0-based). Returns true if the element was selected or false if not (selection might be blocked by the onBeforeSelect callback).

var $panes = $.scojs_panes('#foo', {active: 1});
$panes.select(0);

.prev()

Select the previous element. If the first element is active, prev() selects the last one. Returns true if the element was selected or false if not (selection might be blocked by the onBeforeSelect callback).

var $panes = $.scojs_panes('#foo', {active: 1});
$panes.prev();

.next()

Select the next element. If the last element is active, next() selects the first one. Returns true if the element was selected or false if not (selection might be blocked by the onBeforeSelect callback).

var $panes = $.scojs_panes('#foo');
$panes.next();

What?

This is really just a convenient utility function that makes links load remote content with AJAX inside some target element on the page. This behaviour is also known as "ajaxification of links". Could be used for a side menu - all menu links would load just the page content, without a full page reload.

Note that this function doesn't parse the output to display just a part of it in page and it doesn't make use of the browser history API. If you need such a full ajaxification plugin take a look at History.js.

Why?

I needed some links to load their contents with ajax but not all. There was no need for browser history API support or anything fancy.

Dependencies

Ajax does not depend on other libraries (other than jQuery, of course). However, we recommend you load spin.js. If spin.js is found, a spinning wheel is displayed during the loading of remote content.

Examples

<!-- Button to trigger ajax -->
<a data-trigger="ajax" href="lipsum2.html" data-target="#ajax_target" class="btn">Ajax demo</a>

Usage

Via data attributes (data-api)

<a data-trigger="ajax" href="lipsum.html" data-target="#ajax_target" class="btn">Ajax demo</a>

The data-api usage is "live" - meaning that you don't have to rebind new elements. Every new element having a data-trigger="ajax" attribute that is added to the dom after the initial load will work out of the box.

Options

Options are passed with attributes.

What?

A simple countdown plugin, nothing fancy here. You tell it to countdown to a certain date/time and it starts counting while displaying the counter in the html element of your choice.

Why?

I needed this for an auction kind of app to show the remaining time. Not really related to bootstrap but could be useful to someone.

Dependencies

jQuery.

Examples

<div id="countdowner"></div>
<script>
$('#countdowner').scojs_countdown({until: 1364382956});
</script>

Usage

Via data attributes (data-api)

The plugin cannot be initiated with data-api but you can specify the options with data attributes on the target element:

<div id="countdowner" data-d="días" data-h="horas" data-m="minutos" data-s="segundos"></div>

As a jquery plugin

$('#target').scojs_countdown(options);

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-d="days".