Question

首先，我在这个项目中使用Wordpress，但我不认为这个问题与WP有关。

我正在使用一个名为Local Market Explorer的WP插件，它插入带有Google地图和本地便利设施信息的iFrame，即餐馆。 iFrame和内容由Walkscore.com通过其API提供。

我想使用Scriptaculous Appear效果淡化页面的容器div。此效果需要使用页面上的内联CSS为容器div设置“display：none”。但是，只要包含地图的iFrame淡入，iframe中包含的地图就会移动到iFrame显示之外。删除“display：none”或设置“display：inline”会将iFrame返回到正确的地图显示，但会使“显示”效果无效。

我怀疑地图移动到iframe的显示边界之外，而不是简单地不显示，因为出现了水平滚动条。正确显示地图时，它具有垂直滚动条但没有水平滚动条。

让我感到困惑的是，Scriptaculous fade在名为Stereotabs的标签内容脚本中实现的效果很好。选项卡内容淡入而不影响地图显示。但是，我注意到Stereotabs代码不使用内联CSS来显示出现效果。 Stereotabs js代码可通过上述链接获得。使用带有内联CSS的Scriptaculous Appear可以使地图移动，无论Stereotabs是否处于活动状态。

我的问题是：为什么使用内联CSS将display属性设置为'none'会导致Scriptaculous干扰iFramed Google地图内容？所有其他iFramed，ummapped内容（即Yelp，Schools，Zillow统计数据等）显示正确。

代码如下，但由于WP-shortcode，我不知道它会有多大用处。请原谅我无法提供完整的代码......这是使用Wordpress的许多缺点和烦恼之一。

<html>
<head>
<script src="http://www.mysite.com/wp-includes/js/prototype.js"></script>
<script src="http://www.mysite.com/wp-includes/js/scriptaculous/scriptaculous.js"></script>
</head>
<body>
<script type="text/javascript">
   window.onload = function () {
        new Effect.Appear('content-wrap', {delay:1.0});  
   }
</script>
<div id="content-wrap" style="display: none">

<?php echo do_shortcode('[lme-module module="walk-score" zip="30312"]'); ?>

</div>      
</body>
</html>

感谢您的帮助。

范

Answer 1

在多个浏览器上，多个ajax框架（我使用jquery也是如此）都遇到过这个问题。

我认为这是谷歌地图的一个问题。

Scriptaculous出现效果将谷歌地图转移到可见的iframe区域之外

1 个答案: