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:
The JavaScript
Click “Result” below for a demo.
$(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
};
// Insert the iframe just after the link
e.after('<iframe style="height:'+frameHeight+'px; " 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;
});
});See the Pen inFrame by Stefan Matei (@nonsalant) on CodePen.
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="https://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="https://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="https://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.
I did something similar once on a project but didn’t think of making it a plugin -> good job 😉
How do i make the iframe the same height as the loaded page ?
@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.
A bit long to load on my computer even though am using chrome, but pretty interesting.
very nice
This is an excellent script which will definitely be very useful. Thanks.
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
Terrific. As always.
@iframes ! welcome: you’re safe as long as you can be sure that what you’re putting in the iframe is safe.
Well I like this very much. Cool idea even with iframes.
@Nathan J. Brauer:
It’s work fine on Chrome 3.0.195.25
thank you, very interesting idea
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.
super programmiert 😉
cool idea
This will very helpful for me.Thanks.
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
This is helped me a lot developing my website