Vinay M rmdort

The BBC has a server-side image service which provides developers with multiple sized versions of any image they request. It works in a similar fashion to http://placehold.it/ but it also handles the image ratios returned (where as placehold.it doesn't).

The original BBC News process (and my re-working of the script) follows roughly these steps...

Create new instance of ImageEnhancer
Change any divs within the page (which have a class of delayed-image-load) into a transparent GIF using a Base64 encoded string.
- We set the width & height HTML attributes of the image to the required size
- We know what size the image needs to be because each div has custom data-attr set server-side to the size of the image
- We then set a class of image-replace onto each newly created transparent image
We use a 250ms setTimeout to unblock the UI thread and which calls a function resizeImages which enhances the image-replace images so their source is now set to a URL whe

	// tabbed areas, global
	$(".tabs ul li a").click(function(event) {
	event.preventDefault();
	$(this).addClass('pager-active');
	$(".tabs ul li a").not(this).removeClass('pager-active');
	var scope = $(this).attr('rel');
	var target = $(scope);
	$(target).slideDown();
	$('.tabsContent li.handle').not(target).slideUp().not(target).removeClass('tabContentActive');
	});

	function percentage_complete(){

	$this->EE=& get_instance();
	$entry_id = intval($this->_get_param('entry_id'));
	$channel_id = intval($this->_get_param('channel_id'));
	$site_id = intval($this->_get_param('site_id'));
	$field_group_id = intval($this->_get_param('field_group_id'));

	$field_array = array();
	$result_array = array();

	function filter_email_in_entry(){

	$this->EE=& get_instance();
	$this->EE->load->library('typography');
	$this->EE->typography->initialize();
	$prefs = array(
	'text_format' => 'xhtml',
	'html_format' => 'all',
	'auto_links' => 'y',
	'allow_img_url' => 'y'



	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">

	<title>Simple Gauge · CodePen</title>

	<style>

	$window = $(window);

	$('section').each(function(){
	var $this = $(this); // assigning the object

	var off = $this.offset().top;
	$this.data("top", off);

	$(window).bind('resize scroll', function() {

	<!DOCTYPE html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title></title>
	<meta name="description" content="">

	$pattern = '/(?(?=<\S>)<\S>\|)\s(\[[a-z\|A-Z\|-\|\/\|\s\|\"\|\=]\])\s(?(?=<\/\S>)<\/\S*>\|)/';

	$html = '<p>
	[highlight type="note"]You and your confinement nanny are bound by the basic Work Permit conditions. For example, the nanny cannot work for other employers in an occupation other than that stated in the Work Permit.[/highlight]</p>';


	$filtered = preg_replace($pattern, '$1', $html);

	// Returns
	/*

	<blockquote>
	<p>Written with <a href="https://stackedit.io/">StackEdit</a>.</p>
	</blockquote>

	// Create transport if the browser can provide an xhr
	if ( xhrSupported ) {

	jQuery.ajaxTransport(function( options ) {
	// Cross domain only allowed if supported through XMLHttpRequest
	if ( !options.crossDomain \|\| support.cors ) {

	var callback;

	return {