jQuery Plugin To Make User Generated Content Responsive - Respontent

Respontent is an useful jQuery plugin that automatically resizes the Html elements to make them responsive across different device sizes. It supports images, iframes, youtube videos, tables, Google maps, and any other user generated content.

How to use it:

1. Load the jQuery library and the jQuery respontent plugin's JS and Stylesheet into your website.

<link rel="stylesheet" href="jquery.respontent.all.css">
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<scriptsrc="jquery.respontent.all.min.js"></script>

2. Wrap the user generated content into a wrapper element as follows.

<div id="examples"> 

  <img src="http://lorempixel.com/g/800/500/cats/5/" /> <em>YouTube videos</em>
  <iframe width="400" height="300" src="http://www.youtube.com/embed/INscMGmhmX4" frameborder="0" allowfullscreen></iframe>
  <iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;geocode=&amp;q=Catskill,+New+York,+Verenigde+Staten&amp;aq=0&amp;oq=cats&amp;sll=37.0625,-95.677068&amp;sspn=46.27475,79.716797&amp;ie=UTF8&amp;hq=&amp;hnear=Catskill,+Greene+County,+New+York&amp;t=m&amp;z=14&amp;ll=42.21731,-73.864573&amp;output=embed"></iframe>
  ...
  
</div>

3. Initialize the plugin with default options.

$(document).ready(function() {
   $("#examples").respontent({
      //  options go here
   });
});

4. Available options.

// true: The image will be responsive.
// false: The image will not be responsive.
// function: A function returning either one of the above values.
images: true, 

// false: The iframe will not be responsive.
// "square": The iframe will have a square ratio.
// "youtube": The iframe will have a 19/6 ratio.
// function: A function returning either one of the above values.
iframe: Either one of the above values detected by the iframe SRC attribute.

// false: The table will not be responsive.
// "stack": All TDs will be stacked below each other.
// "scroll": The table will be horizontally scrollable.
// "list": The table will be displayed like a definition list.
// function: A function returning either one of the above values.
tables: Either one of the above values detected by how the table is setup.

---

This awesome jQuery plugin is developed by BeSite. For more Advanced Usages, please check the demo page or visit the official website.