Ryan Van Etten edited this page Nov 4, 2017 · 4 revisions




  • Added elo as a compatible framework.
  • now has capability so store from any attribute.
  • Response.merge brings in all values except undefined.
  • Response.dpr() nows ensures boolean|number return.
  • Added thisArg functionality to Response.each / Response.route / Response.sift
  • Added typestring functionality to Response.sift (e.g. Response.sift(arr, "string") filters for typeof string only)
  • now delegates to native [].map when available and emulates it otherwise.


  • Allow for empty breakpoints like data-r961="" to work as expected. (See #12)


  • Added Response.noConflict()
  • Added support for non-numeric custom breakpoints.
  • Added Response.bridge(). Response.chain() is now an alias for Response.bridge(). Use Response.bridge().
  • Removed deprecated .overflowX()/.overflowY() methods.
  • Reorganized closure to better accomodate module loaders.


  • Fixed incorrect comparison operator in Response.render()


  • minor optimizations


  • Response.addTest() now can be chained like Response.addTest().addTest().addTest()
  • CSS: For styling purposes .responsejs now gets added to the html tag when Response has been successfully loaded. .no-responsejs is removed if it is present.


  • Jeesh compatibility added. 0.5.0 requires either jQuery, Zepto, or Jeesh.
  • Consistency: The 4 device dimension getters were converted from properties to methods in order to be consistent with the rest of the dimensions API. They now must be called with parenthesis, e.g. Response.deviceW()
  • Events: .ready, .resize, and .crossover event methods were added to the API.
  • Extending: Added ability to add custom props/tests via Response.addTest(prop, testFn)
  • Improved performance of .inX, .inY, and .inViewport methods.



  • Minor tweak improves performance of the .overflowX and .overflowY methods.


  • Methods: The string utilities camelize and datatize (both part of the dataset API) were added to the public API. The optimized iterators introduced in 0.3.0 were also added to the public API. (See map/each/sift/affix in the readme)
  • Lazyloading: The lazyloading module introduced in 0.3.0 is now fully available as on opt-in feature for sets. In Response.create options objects devs can specify lazy: true (or "lazy": true in the JSON setup).


Aliased prefixes: Version 0.3.1 makes it possible to alias multiple prefixes in a space-separated string. Aliasing multiple prefixes has much better performance than creating two sets for the same prop, but the latter is also supported for back compatibility. Since 0.3.1, if the prefix param is omitted it will default to "min-[prop]-" For example if the prop is "width" then the prefix would default to "min-width-" which would create functionality for data-min-width-0, data-min-width-320, etc. based on the breakpoints.

Aliasing is the recommended way to backsupport the separate prefixes previously needed for separate modes while still gaining the performance benefit of the mode autodetection It also gives devs greater flexibility in naming their prefixes because the prefix name can be changed without breaking existing code. Alias prefixes can be used interchangably. For HTML readablity, future docs will recommend the default prefixing. A JSON setup that supports the default, "r", and "src" prefixes would look like this:

<body data-responsejs='{ 
  "create": {  "prop": "width", "prefix": "min-width- r src", "breakpoints": [961, 641, 481, 0] }


  • Zepto: Response is now fully compatible with Zepto. To do this, functions that relied on jQuery methods lacking Zepto equivalents such as $.grep / $.parseJSON / $.data needed to be converted. Our code now mostly uses native methods to accomplish these tasks. This has a two-fold effect: the underlying code now is a bit longer but it runs way faster—win.
  • HTML5 dataset: In adapting more methods into native code Response.dataset was born. Using syntax just like, Response.dataset(elem, key, value) provides a blazing fast cross-browser implementation of the native dataset API and this is now used for all data attribute storage and access within Response. (See examples in the readme.)
  • Mode autodetection: In previous versions it was necessary to specify either "markup" or "src" .mode when calling Response.create. In 0.3+ the appropriate mode is autodetected according to elements that support [src]. The .mode is now ignored in favor of autodetection. This means that only one set is needed for each .prop where in prior versions 2 were needed.
    • img|input|source|embed|track always behave in src mode.
    • iframe|audio|video behave in src mode only if a src attribute is present.
    • Otherwise elements behave in markup mode.
  • OO: The code that powers the attribute sets now employs an object-based approach. Using prototypal/differential inheritance, attribute sets now inherit from an internal base object called Elemset. Each individual element within the set also inherits from the same object. Whoa—slick. This makes the code that powers the sets easier to maintain and at the same time improves their efficiency.
  • Lazyloading: Attribute sets are now capable of lazyloading. In 0.3.0 this feature is at an experimental phase and is only rolled out for Webkit browsers—where the JavaScript engine is lightning fast. The effect of this is that content stored in Response data attributes is not loaded until it is near the active viewport. This has potential for enormous performance savings. In creating this feature, three area-based methods were introduced: inX/inY/inViewport.
  • Chainable forms of Response's dataset, deletes, inX, inY, inViewport methods are optionally available. Calling Response.chain() exposes them to $.fn and makes them available in the jQuery chain.
  • Dimensions methods were added to the API.
  • Local iterators: Response now mainly uses local functions for iteration.
  • Removed features:
    • The initial version of Response.create in 0.2.5 took string parameters. These were undocumented and now removed. Response.create now only accepts either an object or an array of them.
    • The internal Response.decide method was removed.


  • Fixed issue reading data-responsejs attribute.
  • Added new boolean methods:
    • Response.wave tests viewport height ranges (vertical equivalent to
    • Response.device.wave tests device-height ranges
    • tests device-width ranges
  • Breakpoints can now be based on any of the properties. Recognized .prop values are: 'width', 'device-pixel-ratio', 'height', 'device-width', and 'device-height'.


  • Added local function for handling range comparison in preparation for new methods in 0.2.9.
  • Response.decide loop optimized.
  • Removed deprecated Response.affix method.


  • Error handling was improved. Now, most of the public methods will throw an exception to the console if the args sent to them are incorrect. The exception says the name of the method that caused the problem and when possible the name of the arg preceded by an @ sign.
  • Resolve issue with sorting device-pixel-ratio decimal values. was updated with the ability to target data keys containing decimal points. They needed to be escaped. Response.create now properly supports device-pixel-ratio based attributes.
  • Response.dpr was further optimized.


  • The default attribute setups were eliminated in favor of letting devs choose their own setup options (breakpoints etc.) either via Response.create or by passing the custom setup options in a JSON object stored in a data attribute on the body tag. The latter method is preferrable because it requires no scripting.
  • The Response.create method was reworked to accomodate the ability to pass args via an object (or an array of objects) so that devs can better understand its use and so that it would be more efficient at creating multiple attribute sets (it now only triggers the ready event once). The original string args still work, but going forward, objects will be preferred.
  • Internal usage methods .format/.send/.swap were unexposed/localized.
  • Response.mins was replaced w/ Response.mapBool to be general and better suited as a method.
  • was optimized by eliminating the check for .matchMedia. Checking the window width always works.


  • Moved default Response.create() lines outside the object.
  • Created GitHub repo.


  • Further streamlined code need to run .dpr
  • Confirmed Opera support for devicePixelRatio since presto 2.8
  • Confirmed Android support for devicePixelRatio
  • Omitted as secondary fallback.


  • Streamlined code need to run .dpr to by combinating arrays and local vars.


  • Changed .dpr to use local vars to reduce long text in media queries.


  • Added .format and .affix methods for better handling arrays
  • Modified .mins and .create methods to support multiple prop-based mins.


  • Reintroduced and optimized .dpr method
  • Changed args for .create:
    • using prefix now to produce keys
    • breakpoints arg is now optional


  • New methods include: .send .decide .swap .create .access .target .store .mins
  • Converted .decide ternary triangle into loop for better extendability/scalabilty.


  • Converted ternary triangle to use arrays rather than local vars.



  • Normalized code formatting and improved inline documentation.


  • Improved attributes: Use number-based names. Add better breakpoints. Decide via ternary triangle.
  • Removed Response.dpr but may reintroduce later if in demand.



  • Updated description to better reflect the full scope of the lib.
  • Cached $(window) and $(document) selectors.
  • Changed all uncaught global vars to local vars.
  • Honed in on better working approach to Response.action


  • Introduced concept for Response.on. Not fully working here and later renamed Response.action.


  • Changed $, value) operations to $.data(element, key, value) for speed.
  • Fixed missing ; errors by adding commas.


  • 1st working version. Includes and Response.dpr methods.
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.