Home/ Questions/Q 9317015
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-19T02:46:17+00:00

I was looking and trying an entire day but couldn’t find one right solution

  • 0

I was looking and trying an entire day but couldn’t find one right solution for this problem. The part I need to be centered is always top left in FF and IE, Safari seems to be more bottom left…

this is all code you need to try, copy, paste and click…

big screen is good to see the problem doesnt looks to bad on small screens

thanks for help

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.4" media="screen" />
<script type="text/javascript">
    $(document).ready(function() {
        $(".google_iframe").fancybox({
            'width'             : '75%',
            'height'            : '75%',
            'autoScale'         : false,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
        });
    });
</script>
</head>
<body>
<a class="google_iframe" href="https://maps.google.com/maps/ms?ie=UTF8&amp;msa=0&amp;msid=202414688179067925321.0004d62815a849d23c081&amp;t=h&amp;ll=43.36373,16.508332&amp;spn=1.617251,3.364563&amp;output=embed">
    click here for fancy
</a>
</body>
</html>

jsFiddle

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The issue seems to be created when you try to pre-load the fancybox iframe (default value is true). As a workaround just disable iframe pre-loading within your fancybox custom script like :

    $(document).ready(function () {
    $('.google_iframe').fancybox({
        // 'autoScale'    : false, // not valid in v2.x, use autoSize instead
        // 'transitionIn' : 'none', // not valid in v2.x, use openEffect instead
        // 'transitionOut': 'none', // not valid in v2.x, use closeEffect instead
        width      : '75%',
        height     : '75%',
        autoSize   : false,
        openEffect : 'none',
        closeEffect: 'none',
        type       : "iframe",
        iframe     : {
           preload : false // this will prevent to place map off center
        }
    });
});

    … notice that I commented out some API options for v1.3.4 that are not valid in v2.x

    See JSFIDDLE … or full page see http://jsfiddle.net/Sy8F8/show/lite/, then you can compare it with your full page (not centered) jsfiddle

    • 0