Resize iframe height based on its content
This is a small experiment to showcase the possibility of resizing iframe based on its loaded content.
All you need is just add the below JavaScript function in your html.
JavaScript code:
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
};
Call the JS function like this
window.onload = function(){
setIframeHeight(document.getElementById('iframe_id'));
}
I quickly did a small demo based on this. This is how it looks
Warning: This works only for content in the same domain. Browser will throw error for cross-domain content.
Experiment with Google Swiffy
Google just released a experimental project called “Google Swiffy” for converting Flash animation to HTML5. Check out their labs http://swiffy.googlelabs.com/
I did a small experiment to understand what it offers. Take a look at the below comparison
Output from Adobe Flash
Output from Google Swiffy
I have used simple effects like Fade and Move. The output from Google Swiffy doesn’t look good at all. Also I do not know how they call the output as HTML5, since the output is a SVG.
I am not impressed!
Let me know if this works for you.
Inner glow in CSS
This is an excellent trick that i across recently. This CSS trick will allow you to add an inner glow to any container eg. DIV, IMG.
All you need is just 2 HTML elements and 3 lines of CSS code.
HTML code:
<div id="box1" class="innerGlow"> <div id="e1" class="innerElement"></div> </div>
CSS code:
.innerElement{
position: relative;
z-index: -1;
}
.innerGlow{
box-shadow: inset 0px 0px 120px rgba(0, 0, 0, 0.9);
}
I quickly did a small demo based on this. This is how it looks
This is a good trick to have it in your bag. Try various options and see how it works.