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. In the second Official jQuery Podcast Ralph Whitbeck, Elijah Manor and their guest Richard D. Worth go through what inFrame is and when/why it’s useful:

Audio MP3

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.

Update: Need styles?

These are the CSS styles I’m using:

.inframe + iframe {
	box-shadow: 1px 1px 6px #ccc;
	padding:5px;
	margin-right:-10px;
	bakground:#fff;
	border-radius: 0 0 10px 10px;
}
.inframe:hover {
	text-decoration: none;
}
.inframe:after {
	content:"↓";
	margin-left:3px;
	position:relative;
	top:-1px;
}
.inframe:hover:after {
	top:2px;
	text-decoration: none;
}

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 href="http://vileworks.com" class="inframe">VileWorks</a>

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

<a href="http://vileworks.com" rel="height:300px" class="inframe">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 href="http://vileworks.com" rel="nofollow height:300px" class="inframe">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.