Download
User Rating: 3.7/5 ( 2 votes)
Respontent is a jQuery plugin that automagically makes your user generated content responsive.
Supported content
-
Images
-
YouTube videos
-
Tables
-
Google Maps
Source: github.com
1. INCLUDE CSS AND JS FILES
<link type="text/css" media="all" rel="stylesheet" href="src/css/jquery.respontent.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" language="javascript" src="src/js/jquery.respontent.min.js"></script>
2. HTML
<div id="examples">
<em>Images</em>
<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>
<em>Tables</em>
<table>
<thead>
<tr>
<th>Population</th>
<th>Food source</th>
<th>Shelter</th>
<th>Socialized</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pedigree</td>
<td>Fed by guardian</td>
<td>Human guardian</td>
<td>Yes</td>
</tr>
<tr>
<td>Pet</td>
<td>Fed by guardian</td>
<td>Human homes</td>
<td>Yes</td>
</tr>
<tr>
<td>Semi-feral</td>
<td>General feeding</td>
<td>Buildings</td>
<td>Yes</td>
</tr>
<tr>
<td>Feral</td>
<td>General feeding/foraging</td>
<td>Buildings</td>
<td>No</td>
</tr>
</tbody>
</table>
<em>Google Maps</em>
<iframe width="400" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&geocode=&q=Catskill,+New+York,+Verenigde+Staten&aq=0&oq=cats&sll=37.0625,-95.677068&sspn=46.27475,79.716797&ie=UTF8&hq=&hnear=Catskill,+Greene+County,+New+York&t=m&z=14&ll=42.21731,-73.864573&output=embed"></iframe>
</div>
3. JAVASCRIPT
$(function() {
$('#examples').respontent();
});
4. OPTIONS
The options that can be passed in the configuration-object:
-
images
-
Whether or not to make images responsive.
Default value: true.
-
youtube
-
Whether or not to make YouTube videos responsive.
Default value: true.
-
tables
-
Whether or not to make tables responsive.
Default value: true.
-
googlemaps
-
Whether or not to make Google Maps responsive.
Default value: true.