CODEWITHSUNDEEP
jqueryfancybox-2
forrest
forrest

Reputation: 11012

Why doesn't FancyBox window size adjust?

I am using FancyBox 2 on this page: http://encoreazalea.com/ee/botanical-gardens to display Google Maps in a popup window.

The windows come up fine but all the maps have scrollbars. I have tried resizing the display window, but it doesn't seem to respond properly to the instructions I send.

Here is the HTML:

<h3 class="state">Washington D.C.</h3>

<div class="gardens">

<p class="garden">US National Arboretum<br />
<a href="http://www.usna.usda.gov/">Website</a> | <a class="map" href="#directions5148">Directions</a></p>
</div>

<div class="gardens">
<div id="directions5148" style="display:none">
<iframe width="600" height="440" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?ie=UTF8&amp;q=US+National+Arboretum&amp;fb=1&amp;gl=us&amp;hq=US+National+Arboretum&amp;hnear=US+National+Arboretum&amp;cid=0,0,12451978746893569755&amp;t=h&amp;ll=38.912424,-76.96852&amp;spn=0.008014,0.013733&amp;z=16&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?ie=UTF8&amp;q=US+National+Arboretum&amp;fb=1&amp;gl=us&amp;hq=US+National+Arboretum&amp;hnear=US+National+Arboretum&amp;cid=0,0,12451978746893569755&amp;t=h&amp;ll=38.912424,-76.96852&amp;spn=0.008014,0.013733&amp;z=16&amp;iwloc=A&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>

</div>

</p>
</div>

Here is the jQuery:

<script type="text/javascript">
    $(".map").fancybox({
            wrapCSS    : 'fancybox-custom',
            width : 700,
            height : 600,
            closeClick : true,
            helpers : {
                title : {
                    type : 'inside'
                },
                overlay : {
                    css : {
                        'background-color' : '#eee'
                    }
                }
            }
        });
</script>

No matter what I set the width and height at the window always displays at the same size and there are scroll bars around the map.

My goal is to get rid of the scrollbars.

Thanks.

Upvotes: 1

Views: 2348

Answers (3)

forrest
forrest

Reputation: 11012

It was silly but fancybox was not responding properly because I had not included this:

$(document).ready(function() {...

After I added that the rest of the code became more responsive.

Upvotes: -1

JFK
JFK

Reputation: 41143

You may also need to set the options autoSize : false AND fitToView : false AND scrolling: "no" to get the size you want.

Upvotes: 1

veritas1
veritas1

Reputation: 9190

I would try adding dimensions direct to the div instead:

<div id="directions5148" class="map_window" style="display:none">

CSS:

.map_window{
   width: 700px;
   height: 600px;
   overflow: hidden;
}

Upvotes: 1

Related Questions