0

I would like to reuse the same selector class for multiple fancybox iframes. I have looked at different posts here on SO regarding sizing iframe content into fancybox. While all the ones I looked at seemed that they would work (I am currenty using JFK's solution here), I an unable to get it, or some of the others to work on my pages. I looked up "fancybox-iframe" class in firebug, it reads as "fancybox-type-iframe" class. Could someone let me know what is wrong with the code I'm using below, why it is wrong and how to fix it. Linked answers, jsfiddles, etc. are fine too. Used inline for fancyboxes containing a small amount of content, but I'd like to use the iframe for pages. Thanks!

Here is the complete code.

This link to open fancybox is on a different page within domain

 <a href="thm12.html" class="openfb"></a>

HTML page to show in fancybox

    <!DOCTYPE html >
    <html style="width:550px;height:350px;" >
    <head>
    <title>THM - Twelve</title>
    <script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    <script src="../js/ui/jquery.ui.core.js"></script>
    <script src="../js/ui/jquery.ui.widget.js"></script>
    <script src="../js/ui/jquery.ui.mouse.js"></script>
    </script>    
    </head>    
    <body>

    <div class="thm-set">
       <p class="thm-set-title" >Start Settings</p>
  <form id="" class="default-set-thm" >


    <div class="thm-content" ><p>Lorem ipsum aenean tempus lacus vitae orci 
                        posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet.</p><input type="text" value="" placeholder="" /></div>


           <span class="buttons">
                <input type="submit" class="close-fancybox"  value=""/>
                    <input type="submit" class="save-fancybox" value=""  />           
                </span> 
           </form>   
       </div>
    </body>
    </html>

fancybox js script

$(".openfb").fancybox({
    hideOnContentClick: false,
    type:'iframe',
    scrolling: 'no', 
    beforeShow: function(){
        this.width = ($('.fancybox-iframe').contents().find('html').width());
             alert("the width of this div is " + this.width);
        this.height = ($('.fancybox-iframe').contents().find('html').height());
    }
});

Chrome alert results

javascript alert

Firefox alert results

enter image description here

IE 9 alert result:

enter image description here

Community
  • 1
  • 1
Chris22
  • 1,973
  • 8
  • 37
  • 55

1 Answers1

0

Could be a typo in your page to show in fancybox ... this line : 

<html style="width:550px;height:350px; >

... is missing the closing quote in style="..." so no way to get the dimensions from that tag.

My DEMO for further code analysis.

JFK
  • 40,963
  • 31
  • 133
  • 306
  • Thanks JFK. I have revised my code (added the closing quote) but that wasn't the problem as I had the closing quote in my html. I tried to debug using alert for value of the div. I have posted the images of the alerts returned. What am I missing here? Thank you. – Chris22 Dec 17 '12 at 21:23
  • @Chris22 : the code works, but yours seems to be a specific case. Can you share a link? otherwise we can keep guessing for a month. BTW, `hideOnContentClick` is not a valid option for v2.x, check this for proper options http://stackoverflow.com/a/8404587/1055987 – JFK Dec 17 '12 at 22:14
  • Thanks JFK. I don't have a public URL at the moment. I'm having trouble understanding why only Firefox gets it right, but Chrome doesn't appear to. IE returns fancybox w/contents, just at the wrong size. I could post more screenshots, but I guess it wouldnt do any good to help reproduce what I am seeing -- even though the alerts confirm. Thanks, again for your time. – Chris22 Dec 18 '12 at 14:08