inFrame: Keep Demos Inside the Page with jQuery

Say I had some CSS or JavaScript techniques/effects I wanted to show in a blog post.

Obviously it would have been uncomfortable for me to actually include the thing in the post (CSS needs to be in the head, JavaScript may conflict with other JavaScript, etc), so the best option would have been to just link to the file demonstrating the effect.

Using inFrame the reader doesn’t have to go away from the blog post to view demo files… just add a class of inframe to each of these links.

Try it out: Click on the links to view/hide

Some random example from A List Apart: “CSS Sprites2″: regular link to the file

Slick animation menu (from nettuts): regular link to the file

Smooth Gallery, a mootools gallery: regular link to the file

The jQuery JavaScript

Of course, you have to include jQuery if you’re not using it already in the page.

$(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);
 
		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>');
			var iframe=e.next('iframe');
 
			// 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;
	});
});

Update: Need styles?

These are the CSS styles I’m using (some of witch CSS3):

iframe.inframe {
	box-shadow: 1px 1px 6px #ccc;
	-moz-box-shadow: 1px 1px 6px #ccc;
	-webkit-box-shadow: 1px 1px 6px #ccc;
	padding:5px;
	margin-right:-10px;
	bakground:#fff;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
}

Paste them in your style sheet to apply the same effect you see on this page.

How to Use it

Include jQuery and the inFrame script above.

Add a class of inframe to all the links you wish to apply it to. Like this:

<a class="inframe" href="http://vileworks.com">VileWorks</a>

The default height is 550px, but if you want to specify it for a link, you can do so using the rel attribute:

<a class="inframe" rel="height:300px" href="http://vileworks.com">VileWorks</a>

Please note that there’s no space between “height” and “300px” and you can’t specify the height in ems or in percents.

If you already have other rel attributes you want to use, like nofollow or external, you can include those too.

<a class="inframe" rel="nofollow height:300px" href="http://vileworks.com">Vile</a>

Features

Tested in IE6, IE7, Firefox 3, Safari 3, Google Chrome, Opera on a PC. And Safari on iPhone.
Degrades gracefully (to regular links) when JavaScript is turned off.
SEO friendly with the files you link to.

Even though they’re iframes which are usually very bad for findability, usability, accessibility and other words ending in ‘-bility’, they’re not bad in this case because the links are still there, with their hrefs and everything looking all natural — so search engines that crawl your site and people with no javascript won’t feel any difference.

Goofy useless stuff

Trippy.

Like the link below… that’s a link to this very same page. Open it, and you’ll find it again inside. And open it in there again. See how far you can go before you get lost in the scroll bars or crash your browser!

link to this page

Fascinating.

20 Comments.

20 Comments

kevin
10 months ago #

A bit long to load on my computer even though am using chrome, but pretty interesting.
Reply
Paul Datta
10 months ago #

I did something similar once on a project but didn’t think of making it a plugin -> good job ;)
Reply
horia
10 months ago #

How do i make the iframe the same height as the loaded page ?
Reply
Stefan
10 months ago #

@horia: You could try combining it with something like this: http://www.mattcutts.com/blog/iframe-height-scrollbar-example/

I tried something similar when I made the script but it didn’t turn out to well.

Reply
naj
10 months ago #

very nice
Reply
Nathan J. Brauer
10 months ago #

It doesn’t work on Google Chrome 4.0.211.7
Reply
HullDO
10 months ago #

This is an excellent script which will definitely be very useful. Thanks.
Reply
iframes ! welcome
10 months ago #

http://www.thespanner.co.uk/2007/10/24/iframes-security-summary/

Please note comment 9 and 10 on that page other than that the security risk is to high to use external pages as iframes.

Thus you might be passing exploits around!

cheers
Reply
Ken
10 months ago #

Terrific. As always.
Reply
Stefan
10 months ago #

@iframes ! welcome: I’d argue against not using iframes because of a security issue in general for the simple reason that anyone can use JavaScript to inject any iframe in ANY webpage they can open in their browser.

But I won’t be debating this… Because whatever the case, you’re safe as long as you can be sure that what you’re putting in the iframe is safe.
Reply
Check Spelling
10 months ago #

Well I like this very much. Cool idea even with iframes.
Reply
Sedat Kumcu
9 months ago #

@Nathan J. Brauer:
It’s work fine on Chrome 3.0.195.25
Reply
Inserire le demo di uno script all’interno di una pagina con inFrame « TagTagWeb, 7 months ago # :

[...] inFrame il lettore non dovrà cambiare pagina per visualizzare la demo, per fare questo basta inserire un [...]
Fred
6 months ago #

thank you, very interesting idea
Reply
5款Javascript页面美化脚本 | 帕兰映像, 6 months ago # :

[...] 5. inFrame: Keep Demos Inside the Page with jQuery [...]
Kamran
5 months ago #

Very nice idea keep it up dude !
Hi i am Kamran a freelance web developer using JQuery Codeignier CSS to create more dynamic and interactive web sites on low price.
Reply
Martin Teufel
4 months ago #

super programmiert ;-)
cool idea
Reply
cash box kings
3 months ago #

Well, the article is actually the sweetest on this notable topic. I harmonise with your conclusions and will certainly thirstily look forward to your next updates. Saying thanks definitely will not simply be enough, for the extraordinary lucidity in your writing. I will certainly directly grab your rss feed to stay abreast of any updates. Solid work and also much success in your business efforts!
Reply
Embed CSS/HTML/javascript demos on blog posts using jQuery, 1 month ago # :

[...] e.attr('title','Show'); } return false; }); }); Find the required javascript and CSS at http://www.vileworks.com/inframe-keep-the-demos-inside-the-page-with-jqueryMost Commented PostsAjax File upload – Jquery Plugin (34)Using Jquery – Check boxes and [...]
Lasantha Bandara
1 week ago #

This will very helpful for me.Thanks.
Reply

VileWorks