Less Framework/Responsive-design-in-general JavaScript Support Idea

responsive_design_js.css

/* Less Framework/Responsive-design-in-general JavaScript Support Idea
 *
 * THE PROBLEM:
 * Ideally, all responsive design would be handled by CSS. In reality, not
 * everythingthat we need to do in the implementation of responsive design can
 * be handled by CSS.
 *
 * THE (CURRENTLY BEING INVESTIGATED) SOLUTION:
 * Provide an unseen element that contains arbitrary data that aides us in
 * determining what to do when the window changes window resizes or
 * orientation changes.
 *
 * THE NEEDS:
 * I need to figure out what attributes could be leveraged to store
 * arbitrary information. Layout width, retina display, etc
 *
 * Tests so far:
 *  - line-height: good for storing integer values
 *  - z-index: was worthless
 *  - width: got mixed results, sometimes it reported accurately and other times was unreliable
 */
 
#responsive-layout-helper { visibility: hidden; width: 0px; height: 0px; }

/* In the instance of Less Framework 4, storing the number of columns in the
 * line-height attribute */
@media only screen and (min-width: 992px) {
  #responsive-layout-helper { line-height: 10px; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  #responsive-layout-helper { line-height: 8px; }
}

@media only screen and (max-width: 767px) {
  #responsive-layout-helper { line-height: 3px; }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #responsive-layout-helper { line-height: 5px; }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {	
}

responsive_design_js.js

/* Less Framework/Responsive-design-in-general JavaScript Support Idea
 * @danott
 * 11 APRIL 2011
 *
 * THE PROBLEM:
 * Ideally, all responsive design would be handled by CSS. In reality, not
 * everythingthat we need to do in the implementation of responsive design can
 * be handled by CSS.
 *
 * THE (CURRENTLY BEING INVESTIGATED) SOLUTION:
 * Provide an unseen element that contains arbitrary data that aides us in
 * determining what to do when the window changes window resizes or
 * orientation changes.
 *
 * THE NEEDS:
 * I need to figure out what attributes could be leveraged to store
 * arbitrary information. Layout width, retina display, etc
 *
 * Tests so far:
 *  - line-height: good for storing integer values
 *  - z-index: was worthless
 *  - width: got mixed results, sometimes it reported accurately and other times was unreliable
 */

// ASSUMED: jQuery

// Provide an object for referencing any timeouts and intervals we use along the way.
var TIMEOUTS =
  { responsiveLayout: null
  };

// Need to have responsive design on resize or orientation change
$(window).bind('resize orientationchange', function(e){

  /* Use a timeout so that it doesn't fire too often and make browser sluggish.
   * This could vary depending on a specific application's needs. */
  window.clearTimeout(TIMEOUTS.responsiveLayout);
  TIMEOUTS.responsiveLayout = window.setTimeout(responsiveLayoutHelper, 500);

});

function responsiveLayoutHelper()
{
  // Our element
  var element = $("#responsive-layout-helper");

  // In this trivial example, get the number of columns as an integer
  var whichLayout = parseInt(element.css('line-height'));

  // Do stuff with whichLayout
  
}

// Actually add our JS helper element once the document is ready
$(window).ready(function(){
  
  $("body").append('<div id="responsive-layout-helper" />');
  
});

Similar ideas being pursued here: http://adactio.com/journal/5429/