Programming Ideas, Logics, Tips and Tricks » iframe http://www.sajithmr.me Mon, 23 Jan 2012 15:44:09 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Fancybox runtime height change http://www.sajithmr.me/fancybox-runtime-height-change http://www.sajithmr.me/fancybox-runtime-height-change#comments Fri, 20 Nov 2009 16:05:51 +0000 Mr Me http://www.sajithmr.me/?p=522 For those who use fancy box and iframe inside fancy box might face the issue of changing the height. Once fancybox is loaded with a particular height and width, it does not change when you change the content inside iframe dynamically. Auto height change is only possible for images.

Use the below code to change the dimensions of an iframe in runtime.

<script type=”text/javascript”>

parent.$(“#fancy_outer”).width(100); parent.$(“#fancy_outer”).height(120);

</script>

Cheers

Sajith

]]> http://www.sajithmr.me/fancybox-runtime-height-change/feed 10 Just a second with Iframe http://www.sajithmr.me/just-a-second-with-iframe http://www.sajithmr.me/just-a-second-with-iframe#comments Wed, 11 Nov 2009 20:07:59 +0000 Mr Me http://www.sajithmr.me/?p=490 IF you are facing problem with layout issues inside iframe (which is normally not there in normal pages) just test these things.

flex-iframe-logo-128

  • Iframe is considered as a separate html page. So it needs all the basic tags, from html, head, body.
  • It does not get styles from parent, so you need to add manually in the header
  • Take care of javascript calls  separated with parent and local (if anything related with parent , use parent. , for example, to access a jQuery script from parent use, parent.$.function_name)
  • Avoid define styles inside body tag with <style> tags, place them in <head> tag
  • To solve the layout issues, you must use the DOCTYPE tag at the beginning
  • If you are using any autoheight scripts to control iframe height dynamically, remember, it may not work as expected in all browser. (jQuery autoheight plugin sometimes fails in OPERA)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

There is a saying that using iframe is a bad practise. I don’t know the fact, anyway gmail uses more than 5 iframes to implement all the features and works well. (See Gmail Architecture)

]]> http://www.sajithmr.me/just-a-second-with-iframe/feed 1 Fancy box http://www.sajithmr.me/fancy-box http://www.sajithmr.me/fancy-box#comments Sun, 08 Nov 2009 16:58:16 +0000 Mr Me http://www.sajithmr.me/?p=471 Finally I found a good light-box which really matches the name “Light box” in FancyBox.  It is a jQuery based light window. It has very less features while compare with any other light box, but simple to use. Compatible with all browsers.

bg_logo

Go here to find it : http://fancybox.net/

You need to add the below javascript in addition to the jquery js file.

<script type="text/javascript" src="path-to-file/jquery.fancybox.js"></script>

To create a link to open in fancybox, call the function fancybox. For example, if you have a link pointing an image <a href=”myimage.gif” id=”imglink” />

Call

<script>

$(“#imglink”).fancybox();

</script>

The window automatically resize with image. If you put title attribute, it shows the title below with the light window.

Instead of image, you can point a file. If you need to open that file in iframe, use class=“iframe”

Visit http://fancybox.net/howto for more usability.

]]> http://www.sajithmr.me/fancy-box/feed 0