inFrame: Open Links in Iframes 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:

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.http://snipt.org/uUhh7/[embed_snipt:uUhh7]

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.

Posted in blog Tagged with: , , , ,
17 comments on “inFrame: Open Links in Iframes with jQuery
  1. Paul Datta says:

    I did something similar once on a project but didn’t think of making it a plugin -> good job ;)

  2. horia says:

    How do i make the iframe the same height as the loaded page ?

  3. Stefan says:

    @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 too well.

  4. kevin says:

    A bit long to load on my computer even though am using chrome, but pretty interesting.

  5. HullDO says:

    This is an excellent script which will definitely be very useful. Thanks.

  6. iframes ! welcome says:

    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

  7. Ken says:

    Terrific. As always.

  8. Stefan says:

    @iframes ! welcome: you’re safe as long as you can be sure that what you’re putting in the iframe is safe.

  9. Check Spelling says:

    Well I like this very much. Cool idea even with iframes.

  10. Sedat Kumcu says:

    @Nathan J. Brauer:
    It’s work fine on Chrome 3.0.195.25

  11. Fred says:

    thank you, very interesting idea

  12. Kamran says:

    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.

  13. super programmiert ;-)
    cool idea

  14. This will very helpful for me.Thanks.

  15. khaled says:

    really!!! very good
    Awesome snippet of code. It really is useful and beautiful.
    thanks for sharing this i will use it my upcoming website
    Regards

  16. Omar Trujillo says:

    This is helped me a lot developing my website

5 Pings/Trackbacks for "inFrame: Open Links in Iframes with jQuery"
  1. Inserire le demo di uno script all’interno di una pagina con inFrame « TagTagWeb says:

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

  2. [...] 5. inFrame: Keep Demos Inside the Page with jQuery [...]

  3. Embed CSS/HTML/javascript demos on blog posts using jQuery says:

    [...] 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 [...]

  4. [...] jQuery spends a lot of time impressing the shit out of me, one example of it doing it recently is with Vile Work’s inFrame [...]

  5. [...] inFrame, we can keep demos indisde the page. So that, the reader doesn’t have to go away from the [...]