Automagically make your user generated content responsive with the respontent jQuery plugin

Images

with respontent
without respontent

YouTube videos

with respontent
without respontent

Tables

with respontent
Population Food source Shelter
Pedigree Fed by guardian Human guardian
Pet Fed by guardian Human homes
Semi-feral General feeding Buildings
without respontent
Population Food source Shelter
Pedigree Fed by guardian Human guardian
Pet Fed by guardian Human homes
Semi-feral General feeding Buildings

Tables

with respontent
Population Food source Shelter
Pedigree Fed by guardian Human guardian
Pet Fed by guardian Human homes
Semi-feral General feeding Buildings
without respontent
Population Food source Shelter
Pedigree Fed by guardian Human guardian
Pet Fed by guardian Human homes
Semi-feral General feeding Buildings

Google Maps

with respontent
without respontent

Please visit my website for some of my other projects.
If you're not trying to hack my bank-account, you may also send me an e-mail (requests for help will not be answered, unless you've asked the question on stackoverflow.com and included a link to it in your email ).

The jQuery.respontent plugin was built using the jQuery-library,
it is licensed under the MIT license.

© frebsite.nl

Usage

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

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

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

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

The options that can be passed in the options-object:

iframe
How to make iframes responsive.

Possible values:
false
The iframe will not be responsive.
"square"
The iframe will have a square ratio.
"youtube"
The iframe will have a 19/6 ratio
(should only be used for YouTube iframes).
function
A function returning either one of the above values.
This function is fired on each iframe separately and inside it, this refers to the iframe DOM element.
If it returns undefined, the default value is used.

Default value:
Either one of the above values detected by the iframe SRC attribute.
images
Whether or not to make images responsive.

Possible values:
true
The image will be responsive.
false
The image will not be responsive.
function
A function returning either one of the above values.
This function is fired on each image separately and inside it, this refers to the image DOM element.
If it returns undefined, the default value is used.

Default value:
true
tables
How to make tables responsive.

Possible values:
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.
This function is fired on each table separately and inside it, this refers to the table DOM element.
If it returns undefined, the default value is used.

Default value:
Either one of the above values detected by how the table is setup.

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.

Responsive 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.

Responsive iframes

The respontent jQuery plugin distinguishes two types of iframes:

  1. Iframes with a SRC attribute linking to a YouTube video;
  2. Other iframes.
Iframes with a SRC attribute linking to a YouTube video.

If the iframe SRC attribute links to a YouTube video, the iframe is wrapped in a DIV that has the classname respontent-iframe-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, creating a 19/6 ratio.

Other iframes (including Google Maps)

If the iframe SRC attribute does not link to a YouTube video, the iframe is wrapped in a DIV that has the classname respontent-iframe-square. 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, creating a square ratio.

Responsive 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-stack. This will stack all TDs below each other by setting the display for all TDs to block and the width to 100%.

Tables displayed like a definition list

Tables can optionally be displayed like a definition list, this needs to be configured manually by using the table option. The classname respontent-table-list is added to the table. This stacks all TDs below each other and puts the content of the corresponding TH or TD from the THEAD in front of it.