Fancybox runtime height change

20 Nov 2009

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

Tags: , , , , ,

· · · ◊ ◊ ◊ · · ·

Just a second with Iframe

12 Nov 2009

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)

Tags: , , ,

· · · ◊ ◊ ◊ · · ·

Fancy box

08 Nov 2009

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.

Tags: , , , , , , ,

· · · ◊ ◊ ◊ · · ·
What’s New

وظائف 2011 تحويل العملات برامج برنامج تسريع التحميل برنامج الفلاش برنامج محول الصوتيات عربي hotel 2011 زيادة رواتب العساكر 1431