Plugins

Responsive jQuery plugins with customisable settings, methods, events and listeners.

Anchor Nav

Automatically generate a list of anchored links.

Examples

Sub Title Nav

Creates a navigation which anchor links to all Sub Titles found on a page. This plugin works best with the ScrollTo plugin, simply chain both plugins on the required element.

<ul class="sidebar">
</ul>

<script>
$('.sidebar').AnchorNav({
  items:'h2',
});
</script>

View Example

Settings

NameTypeDefaultDescription
itemsstring768The breakpoint for when tabs and collapse switch
attributestringidThe attribute to add to the item. This will need to be set to data-id if used with scrollTo plugin.
li_classstringAdd a class to the automatically added <li>'s
a_classstringAdd a class to the automatically added <a>'s
add_li_active_classbooleanfalseAdd an active class to the <li> currently in view.
add_a_active_classbooleantrueAdd an active class to the <a> currently in view.

Class Switcher

Easily toggle classes applied to elements.

Examples

Grid/List Switcher

Switch between a grid and list layout.

<ul data-toggle="class-switcher" data-target=".switcher">
  <li class="btn btn-default active" data-class='col-sm-3 grid'>Grid View</li>
  <li class="btn btn-default" data-class='col-sm-12 list'>List View</li>
</ul>

<div class='row switcher'>
  <div></div>
  <div></div>
  ...
</div>

<script>
$('.switcher').ClassSwitcher({
  selector:'div'
});
</script>

View Example

Settings
NameTypeDefaultDescription
selectorstringdivThe selector to apply classes to
Events
$('#selector').on('change.sa.class-switcher',function(event,settings){
// Triggered every time classes are changed
});

Colousel

A responsive carousel plugin that works within BS's column layouts.

Examples

Continuous Scroll

A continuous looping carousel with autoplay.

<div class='colousel' id='colousel'>
  <span class='colousel-prev'></span>
  <span class='colousel-next'></span>
  <div class='colousel-inner'>
    <div></div>
    <div></div>
    ...
  </div>
</div>

<script>
$('#colousel').Colousel({
  selector_class:'col-xs-6 col-sm-4 col-md-3 col-lg-2',
  autoplay:true,
  autoplay_delay:3000
});
</script>

View Example

Non Continuous Scroll

A none continuous looping carousel.

<div class='colousel' id='colousel'>
  <span class='colousel-prev'></span>
  <span class='colousel-next'></span>
  <div class='colousel-inner'>
    <div class='col-xs-12 col-sm-6'></div>
    <div class='col-xs-12 col-sm-6'></div>
    ...
  </div>
</div>

<script>
$('#colousel').Colousel({
  continuous:false
});
</script>

View Example

Settings
NameTypeDefaultDescription
typestringnormalnormal Colousel slides left to right and stops at end
continuous Colousel slides left to right in an infinite loop
fade Colousel fades between transitions
selectorstringdivThe selectors that will be moving
selector_classstringClass names to add to all selectors
transition_speedinteger300The speed at which the colousel moves
autoplaybooleanfalseIf true the colousel will auto scroll
autoplay_delayinteger5000The delay between auto scrolls
break_autoplay_on_clickbooleantrueIf true once a user has clicked the prev/next buttons any autoplay will be stopped
max_in_viewinteger0Only needs to be set for continuous or fade colousels.
scroll_amountobject{ xs:1, sm:1, md:1, lg:1 }The number of columns to move on a per device basis. If a device is set to 0 the colousel turns in to a scrollable area (works well on mobile devices).
Methods
$('#selector').Colousel('next'); // Invokes the next method
$('#selector').Colousel('prev'); // Invokes the prev method
$('#selector').Colousel('set_index',index); // Set current index
Events
$('#selector').on('next.sa.colousel',function(event,settings){
  // Triggered every time the colousel moves next
});

$('#selector').on('prev.sa.colousel',function(event,settings){
  // Triggered every time the colousel moves prev
});
Listeners
<a href='javascript:;' data-toggle='colousel.next' data-target='#selector'>Move Next</a>
<a href='javascript:;' data-toggle='colousel.prev' data-target='#selector'>Move Prev</a>
Helpers

When in none continous mode the classes start and end are added to the main colousel when at the start and end respectivly.

DOMovr

Move content between selectors depending on current device.

Examples

XS, SM, MD & LG

The content is in a different holder for all devices.

<div id='xs-holder'><div class='domovr'></div></div>
<div id='sm-holder'></div>
<div id='md-holder'></div>
<div id='lg-holder'></div>

<script>
$('.domovr').DOMovr({
  xs:'#xs-holder',
  sm:'#sm-holder',
  md:'#md-holder',
  lg:'#lg-holder'
});
</script>

View Example

XS/SM & MD/LG

The content is split between xs/sm and md/lg devices.

<div id='xssm-holder'><div class='domovr'></div></div>
<div id='mdlg-holder'></div>

<script>
$('.domovr').DOMovr({
  sm:'#xssm-holder',
  md:'#mdlg-holder'
});
</script>

View Example

Settings
NameTypeDefaultDescription
xsstringThe selector to hold the content on XS devices
smstringThe selector to hold the content on SM devices
mdstringThe selector to hold the content on MD devices
lgstringThe selector to hold the content on LG devices
Events
$('#selector').on('moved.sa.domovr',function(event,settings){
  // Triggered every time content moves selector
});

Filter

Examples

Standard layout

<ul class="filternav">
  <li data-tag="red">Red <span></span></li>
  <li data-tag="blue">Blue <span></span></li>
  <li data-tag="green">Green <span></span></li>
</ul>

<div class="sa-filter">

  <div data-tags="red"></div>
  <div data-tags="blue"></div>
  <div data-tags="green"></div>
  <div data-tags="red"></div>

  <button class="sa-load">Load More</button>

</div>

<script>
$(".sa-filter").Filter({
  selector:'[data-tags]'
});
</script>

View Example

Filter with Card UI layout

<ul class="filternav"></ul>

<div class="sa-filter">

  <div class="sa-cards">
    <div class="card" data-tags="red"></div>
    <div class="card" data-tags="blue"></div>
    <div class="card" data-tags="green"></div>
    <div class="card" data-tags="red"></div>
  </div>

  <button class="sa-load">Load More</button>

</div>

<script>
$(".sa-filter").Filter({
  selector:'[data-tags]',
  setNav:true
});

$(".sa-filter").on("post.sa.filter",function(){

  $(".sa-cards").trigger("position.sa.cards");

});
</script>

View Example

Settings
NameTypeDefaultDescription
selectorstringdivThe selector to filter
activeClassstringactiveThe class name applied to matched elements
inactiveClassstringinactiveThe class name applied to un-matched elements
setNavbooleanfalseIf true the navHolder will be auto populated with navHTML
navHolderstring.filternavA jQuery selector to append the nav to if setNav is true
navHTMLstring<li data-tag="{tag}">
{tag}
<span></span>
<i class="sa-on fa fa-times"></i>
<i class="sa-off fa fa-check"></i>
</li>
The HTML to produce for each navigation element
{tag} will be replaced by the tag name
the span will hold the number of matches
sa-on and sa-off will swicth display depending on if the tag is active
resultsPerPagestring{ xs: 4, sm: 6, md: 8, lg: 10 }The number of filter matches to show per page on each device
Methods
$('#selector').Filter('filter'); // Refreshes selector matches
Events
$('#selector').on('pre.sa.filter',function(event,settings){
  // Triggered before the filter happens
});

$('#selector').on('post.sa.filter',function(event,settings){
  // Triggered after the filter has happened
});

Fixed Size

Make elements always be the same height

Examples

Responsive Columns

Fix the heights of columns when inside a responsive column structure.

<div class='row'>
  <div class='col-sm-6 col-md-4 col-lg-3'></div>
  <div class='col-sm-6 col-md-4 col-lg-3'></div>
  <div class='col-sm-6 col-md-4 col-lg-3'></div>
  <div class='col-sm-6 col-md-4 col-lg-3'></div>
</div>

<script>
$('.row').FixedSize({
  selector:'.col>div',
  devices:{ xs:false, sm:2, md:3, lg:4 }
});
</script>

View Example

Settings
NameTypeDefaultDescription
selectorstringdivThe selectors to fix the size of
devicesobject{ xs:0, sm:0, md:0, lg:0 }How many selectors to group together when fixing the size. Set to 0 for all, or set to a number. ie setting to 3 will make the first 3 selectors the same height, then the next 3 and so on. Devices based on Bootstrap spec.
Methods
$('#selector').FixedSize('fix'); // Invokes the fix method
Events
$('#selector').on('resize.sa.fixedsize',function(event,settings){
  // Triggered every time selectors are resized
});

Popup

A responsive popup module that can be controlled on a per device basis.

Examples

iFrame Popup

A responsive youtube popup that loads youtube direct if on mobile, works great on phones with the youtube app installed.

<div class='popup' id='iframe'>
  <i class='fa fa-times popup-close'></i>
  <div class='popup-display'></div>
</div>
<a href='http://www.youtube.com/watch?v=kJuwVuP4ezc' data-toggle='popup.toggle' data-target='#iframe' data-src='http://www.youtube.com/embed/kJuwVuP4ezc'>Load Video</a>

<script>
$('#iframe').PopUp({
  type:'iframe',
  width:1600,
  height:900,
  gutter:30,
  scroll:false,
  devices:{ xs:false, sm:true, md:true, lg:true }
});
</script>

View Example

HTML Popup

A responsive html block popup that scales dynamically in the window.

<div class='popup' id='html'>
  <i class='fa fa-times popup-close'></i>
  <div class='popup-display'></div>
</div>
<a href='javascript:;' data-toggle='popup.show' data-target='#html'>Load Popup</a>

<script>
$('#html').PopUp({
  type:'html',
  width:500,
  height:600,
  lock_aspect_ratio:false
});
</script>

View Example

Settings
NameTypeDefaultDescription
typestringhtmlhtml - Popup contains standard html code
iframe - Popup loads an external webpage via iframe.
srcstringabout:blankThe source of the iFrame. This can be overwritten by setting click listeners.
widthinteger200The maximum width of the popup in pixels.
heightinteger300The maximum height of the popup in pixels.
gutterinteger15If popup dimensions are bigger than window set gutter spacing around edge of popup in pixels.
openbooleanfalseOpen popup on page load.
auto_reopenbooleantrueWhether to automatically reopen the popup if window size changes.
lock_aspect_ratiobooleantrueLock the aspect ratio of the popup as it resizes.
scrollbooleantrueShow scroll bars if content doesn't fit the popup.
devicesobject{ xs:true, sm:true, md:true, lg:true }Which devices the popup actions for, if set to false the default action will be taken. Devices based on Bootstrap spec.
Methods
$('#selector').Popup('show'); // Shows the popup
$('#selector').Popup('hide'); // Hides the popup
$('#selector').Popup('toggle'); // Shows/Hides the popup
Events
$('#selector').on('show.sa.popup',function(event,settings){
  // Triggered every time view popup is shown
});

$('#selector').on('hide.sa.popup',function(event,settings){
  // Triggered every time view popup is hidden
});
Listeners
<a href='javascript:;' data-toggle='popup.show' data-target='#selector'>Show Popup</a>
<a href='javascript:;' data-toggle='popup.hide' data-target='#selector'>Hide Popup</a>
<a href='javascript:;' data-toggle='popup.toggle' data-target='#selector'>Toggle Popup</a>

If popup is an iFrame set data-src='http://www...com' to load a new URL.

Predinput

A simple predictive input module.

Examples

Simple Predictive Search

Return search results that match passed string

<div class='predinput'>
  <input type='text' class='form-control' />
  <div class='results'></div>
  <i class='clear fa fa-times'></i>
</div>

<script>
$('.predinput').Predinput({
  search_url:'http://127.0.0.1:9001/predinput-results.html',
  data: { results_limit:10 }
});
</script>

View Example

Settings
NameTypeDefaultDescription
search_urlstringThe selector to hold the content on XS devices
http_requeststringGETThe type of HTTP request to make to the search url
dataobjectAn object of data to pass to the search URL - passed as JSON
Events
$('#selector').on('search.sa.predinput',function(event,settings){
  // Triggered every time search happens
});

$('#selector').on('selected.sa.predinput',function(event,settings){
  // Triggered every time a predicted result is selected
});

Scroll To

Animate window scrolling to inpage elements.

Examples

Simple Scroll Navigation 1

Scrolling using <a> tags with the attribute href='selector'.

<p>
  <a class="scrollto" href='#link1'>Link 1</a>
  <a class="scrollto" href='#link2' data-offset='30'>Link 2 with offset override</a>
</p>

<script>
$('body').ScrollTo({
  offset:70,
  selector:'a.scrollto'
});
</script>

View Example

Simple Scroll Navigation 2

Scrolling using <li> tags with the attribute data-target='selector'.

<ul class="scrollto">
  <li data-target='#link1'>Link 1</li>
  <li data-target='#link2' data-offset='30'>Link 2 with offset override</a>
</ul>

<script>
$('.scrollto').ScrollTo({
  selector:'li',
  offset:70
});
</script>

View Example

Settings
NameTypeDefaultDescription
selectorstringaThe element to attach the click listener.
listenerstringclickThe event listener to attach to the selector.
offsetinteger0The offset from the top of the page to scroll to. Usefull when the page has a sticky header.
scroll_speedinteger300The speed to scroll.
scroll_spybooleantrueIf true, plugin listens to natural scroll and sets active classes and element scrolls in to view.
Events
$('#selector').on('scrollend.sa.scrollto',function(event,settings){
  // Triggered on scroll end
});

Slide Out

A responsive slide out module that can be controlled on a per device basis.

Examples

Left Panel

Slide out the a left panel for all devices.

<div class='slideout'></div>
<a href='javascript:;' data-toggle='slideout.toggle' data-target='.slideout'>TOGGLE</a>

<script>
$('.slideout').SlideOut({
  pos:'left',
  open:true
});
</script>

View Example

Bottom Panel

Slide out the a bottom panel for all devices except for extra small (xs).

<div class='slideout'></div>
<a href='javascript:;' data-toggle='slideout.show' data-target='.slideout'>SHOW</a>
<a href='javascript:;' data-toggle='slideout.hide' data-target='.slideout'>HIDE</a>

<script>
$('.slideout').SlideOut({
  pos:'bottom',
  auto_reopen:false,
  auto_close:5,
  devices:{ xs:false, sm:true, md:true, lg:true }
});
</script>

View Example

Settings
NameTypeDefaultDescription
posstringleftThe positioning of the panel. Allowed values are left, right, top and bottom.
openbooleanfalseOpen panel on page load.
speedinteger300The speed to open the panel.
auto_reopenbooleantrueWhether to automatically reopen the popup if window size changes.
auto_closeinteger0Delay to auto close panel. If 0 panel will remain open to manually closed.
devicesobject{ xs:true, sm:true, md:true, lg:true }Which devices the popup actions for, if set to false the default action will be taken. Devices based on Bootstrap spec.
Methods
$('#selector').SlideOut('show'); // Shows the slideout
$('#selector').SlideOut('hide'); // Hides the slideout
$('#selector').SlideOut('toggle'); // Shows/Hides the slideout
Events
$('#selector').on('show.sa.slideout',function(event,settings){
  // Triggered every time view slide-out is shown
});

$('#selector').on('hide.sa.slideout',function(event,settings){
  // Triggered every time view slide-out is hidden
});
Listeners
<a href='javascript:;' data-toggle='slideout.show' data-target='#selector'>Show Slideout</a>
<a href='javascript:;' data-toggle='slideout.hide' data-target='#selector'>Hide Slideout</a>
<a href='javascript:;' data-toggle='slideout.toggle' data-target='#selector'>Toggle Slideout</a>

Slider

Slider

Settings
Methods
Events
Listeners

Sticky Fix

Create responsive sticky elements that can be controlled on a per device basis.

Examples

Sticky Header

A full width sticky header

<header></header>

<script>
$('header').StickyFix({
  top:0,
  sticky_class:'stuck'
});
</script>

View Example

Sticky Right Panel

A sticky right panel with top and maxtop values set.

<div id='stickyfix'></div>

<script>
$('#stickyfix').StickyFix({
  top:50,
  maxtop:500,
  stick_to:'parent',
  devices:{ xs:false, sm:true, md:true, lg:true }
});
</script>

View Example

Settings
NameTypeDefaultDescription
topinteger0The scroll amount at which the element becomes sticky
maxtopinteger0The maximum scroll amount the element is sticky for. Leave as 0 for no maximum.
zindexinteger1000The Z-Index level to apply to the selector when sticky.
sticky_classstringApply a class to the element when its stuck
stick_tostringwindowwindow Element is fixed to the window
parent Element is fixed to its parent
devicesobject{ xs:true, sm:true, md:true, lg:true }Which devices the stickyfix actions for, if set to false the default action will be taken. Devices based on Bootstrap spec.
Events
$('#selector').on('stuck.sa.stickyfix',function(event,settings){
  // Triggered every time element is stuck
});

$('#selector').on('unstuck.sa.stickyfix',function(event,settings){
  // Triggered every time element is unstuck
});

Swiper

Create responsive sticky elements that can be controlled on a per device basis.

STAN v0.0.40   -   Download   -   View Github Project