Images

with respontent
without respontent

YouTube videos

with respontent
without respontent

Tables

with respontent
Population Food source Shelter Socialized
Pedigree Fed by guardian Human guardian Yes
Pet Fed by guardian Human homes Yes
Semi-feral General feeding Buildings Yes
Feral General feeding/foraging Buildings No
without respontent
Population Food source Shelter Socialized
Pedigree Fed by guardian Human guardian Yes
Pet Fed by guardian Human homes Yes
Semi-feral General feeding Buildings Yes
Feral General feeding/foraging Buildings No

Usage

First, include jQuery and the jQuery.respontent-plugin files in your webpage:

<head>
   <link type="text/css" rel="stylesheet" href="jquery.respontent.css" />
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="jquery.respontent.min.js"></script>
</head>

Second (and last), fire the plugin targeting the HTML node that contains the user generated content:

$(document).ready(function() {
   $("#wrapper").respontent({
      //  configuration goes here
   });
});

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.

About

What's the biggest issue with responsive design? It's not the HTML, CSS or JavaScript, it's the "User Generated Content". The client uses the WYSIWYG-editor in his CMS to create and edit pages; he adds images, video's, tables and other non-responsive content. All designed to fit the desktop version of his website, he never even realizes the same content goes into the mobile version of the website. Fortunately, this no longer is an issue; the respontent jQuery plugin will make it fit.

Images

The classname respontent-image is added to the image. This sets the max-width of the image to 100% and the height to auto.

YouTube videos

A YouTube video is wrapped in a DIV that has the classname respontent-youtube. This wrapper DIV has its width set to 100% so it will fill up the available space. It will also automatically resize its height to 56% of its width. This creates a 19/6 ratio.

Tables

The respontent jQuery plugin distinguishes two types of tables:

  1. Tables with a THEAD, a TFOOT or a TH;
  2. Tables without a THEAD, a TFOOT and a TH.
Tables with a THEAD, a TFOOT or a TH

If the table contains either a THEAD, a TFOOT or a TH the plugin will assume it contains tabular content. The table is wrapped in a DIV that has the classname respontent-table-scroll which applies some styling and makes the table scrollable.

Tables without a THEAD, a TFOOT and a TH

If the table does not contain a THEAD, a TFOOT or a TH, the plugin will assume it is used for layout purposes (e.g. dividing the content into two columns). The table is wrapped in a DIV that has the classname respontent-table. This will stack all TDs below each other by setting the display for all TDs to block and the width to 100%.

Google Maps

All Google Maps are wrapped in a DIV that has the classname respontent-googlemaps. This wrapper DIV has its width set to 100% so it will fill up the available space. It will also automatically resize its height to 100% of its width. This creates a square map.