A jQuery plugin for styling responsive widgets.
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
test
widgetive
README
index.html
style.css

README

= Widgetive =

== Overview ==

A jQuery plugin for creating responsive widgets. What is a 
"responsive" widget? It's a widget that is aware of its own
width, rather than just the width of the window. A truly
autonomous "widget" should not care the layout it belongs to
and therefore should not be tied to the dimensions of the
browser but to the dimensions of itself.

== How to Use ==

=== Via data-* attributes ===

The easiest way to use the plugin to apply a class (like "widget")
to your widget objects, and add a "data-respond-at" attribute to
the parent tag. An example of this data attribute is as follows:

data-respond-at='320,480,720'

This results in the following classes being applied at the appropriate
widths:

Relative Width                    Class Applied
-----------------------------------------------
< 320px                           .lt-320
  320px to 480px                  .at-320
  480px to 720px                  .at-480
> 720px                           .at-720
-----------------------------------------------

=== Enabling it globally ===

If you would rather not add attributes to your markup in
the pursuit of keeping presentation information entirely
out of your HTML, you can set ranges globally and have it
apply to each element. This code:

$('.widget').widgetive({
  'respond': '320,480,720'
})

would apply classes as indicated in the table above for any 
element with class "widget".

=== Manually ===

@todo

If you wish to avoid the data attributes but still want fine-tuned
control of the ranges on a per-object basis, you can manually pass
in a series of element IDs with an accompanying string of ranges.

$('.widget').widgetive({
  'set': {
    'anElementID': '320,480,720',
    'anotherElementID': '100,300,500'
  }
})

== Options ==

=== watch ===

Type: boolean (default: false)
Purpose: When set to true, Widgetive will update the classes
on your widgets as they change size. Useful for styling widgets
inside of a fluid layout where the main container and columns 
are percentage-based widths.

=== parseFrom ===

Type: string (default: 'respond-at')
Purpose: If you choose to define your ranges using the data-* method,
this is the data-* suffix that Widgetive will look for (Ex: data-[parseFrom])

=== respond ===

Type: string (default: null)
Purpose: Passing anything into this option will use the provided ranges
as the global defaults. *Note*: Combining the global option with either
of the other two (data-* attribute or manually passing IDs) will result
in the manual method overriding any global ranges that have been set.

=== separator ===

Type: string (default: ',')
Purpose: The separator that Widgetive will use to parse ranges from a string. For
example, setting separator to '-' would allow you provide ranges like "320-480-720" rather than the default of "320,480,720"

=== prefix ===

Type: string (default: 'at')
Purpose: The prefix used for applying range classes to objects. The
default setting will result in classes like 'at-320' and 'at-480'.

=== lessThanPrefix ===

Type: string (default: 'lt')
Purpose: The prefix used for applying a class to the range below the
lowest number in the provided ranges. For example, if you provide the
range '320,480,720', the affected widgets will have the class, by
default, 'lt-320' at widths less than 320.

=== greaterThanPrefix ===

Type: string (default: 'gt')
Purpose: The prefix used for applying a class to the range above the
largest number in the provided ranges. For example, if you provide the
range '320,480,720', the affected widgets will have the class, by
default, 'gt-720' at widths greater than 720.