Display:inline

Tous ceux qui publient régulièrement des articles techniques dans des moteurs de blog tels que WordPress savent qu’il est complexe d’inclure des exemples directement dans les articles : le risque est qu’ils interfèrent avec les CSS ou le javascript du site en général, sans parler du fait que les éditeurs on-line ré-encodent le code-source sans distinction…

L’autre solution est de créer une page séparée, hors du cadre du blog, qui inclura uniquement l’exemple, mais cela oblige l’internaute à quitter l’article le temps de visualiser l’exemple – pas glop en terme de confort de lecture.

Une tierce solution, par ailleurs très élégante, est proposé dans cet article : inFrame. Il s’agit d’un script qui crée dynamiquement une iFrame dans votre page, juste après votre lien vers la page d’exemple, et y charge la page en question. Simple (mais il fallait y penser), efficace et très léger, pourquoi s’en passer ?

Pour le mettre en œuvre, il suffit d’ajouter la classe inframe a tous les liens qu’on désire inclure dans l’article. Par exemple, voici un lien vers la démonstration de l’article sur la création d’un diaporama infini :

<a href="http://www.display-inline.fr/demo/diaporama" title="Voir la démonstration" class="inframe">http://www.display-inline.fr/demo/diaporama</a>

Qui nous donne (cliquez sur le lien pour voir le résultat) :

http://www.display-inline.fr/demo/diaporama

Plutôt efficace, non ? En outre, en cliquant à nouveau sur le lien, le bloc se referme, et la lecture peut continuer.

Pour voir l’article original (en anglais) : http://www.vileworks.com/inframe-keep-the-demos-inside-the-page-with-jquery

Edit

On me dit que le lien vers la solution est mort, voici le code-source ci-dessous :

$(document).ready(function() {
	/*
		inFrame - Keep Demos Inside the Page with jQuery
		- affects all the links with a class of 'inframe'
		- set a rel attribute like rel="height:400px" on the link for a 400px high iframe
		- if you don't set a height, default is 550px
	*/
	$('a.inframe').click(function() {
		var e=$(this);
		var iframe=e.next('iframe');

		if (!e.data('state')) {	//if state is undefined

			e.data('state','open'); //set the state to 'open'

			// Extract the frame height from the rel attribute
			var frameHeight=e.attr('rel');
			var pat1 = new RegExp('height:');
			pat1.test(frameHeight);
			frameHeight=RegExp.rightContext;
			var pat2 = new RegExp('px');
			pat2.test(frameHeight);
			frameHeight = RegExp.leftContext;
			if ( !frameHeight || (Math.ceil(frameHeight)!=Math.floor(frameHeight)) ) {
				//if it's null or not an integer
				frameHeight = '550'; //default frame height, in case none is specified
			};
			frameHeight += 'px';

			frameWidth = '100%';

			// Insert the iframe just after the link
			e.after('<iframe style="width:'+frameWidth+'; height:'+frameHeight+'; border:solid 1px #ccc; margin-bottom:1em; background:#fff;" src=' + e.attr('href') + ' frameborder="0" ></iframe>');

			iframe.css('display', 'none');
			// Insert the "loading..." text
			iframe.before(' <small class="quiet"> Loading...</small>')
			iframe.load(function(){	//once content was loaded
				iframe.slideDown(500);	//slide it down
				iframe.prev('small').remove();	//remove the 'loading...'
			});
			e.attr('title','Hide');	//set the link title to 'Hide'
		}
		else if(e.data('state')=='closed') { //if state is 'closed'
			e.data('state', 'open');
			e.next('iframe').slideDown(500);
			e.attr('title','Hide');
		}
		else if(e.data('state')=='open') { //if state is 'open'
			e.data('state', 'closed');
			e.next('iframe').slideUp(500);
			e.attr('title','Show');
		}
		return false;
	});
});

Be Sociable, Share!

•