New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/automagically-makes-your-user-generated-content-responsive/
Automagically makes your user generated content responsive
Download Demo
Respontent is a jQuery plugin that automagically makes your user generated content responsive.
Supported content
Images
YouTube videos
Tables
Google Maps
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.