Scriptaculous出現效果變化谷歌地圖外部可見iframe區域

首先，我爲這個項目使用Wordpress，但我不認爲這個問題是WP相關的。Scriptaculous出現效果變化谷歌地圖外部可見iframe區域

我正在使用名爲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淡入淡出效果正常，在標籤內容腳本Stereotabs中實施。標籤內容在不影響地圖顯示的情況下淡入。不過，我注意到，Stereotabs代碼不會使用內聯CSS來顯示出現效果。 Stereotabs js代碼可通過上述鏈接獲得。使用Scriptaculous出現與內聯CSS無論Stereotabs是否激活，都會使地圖移動。

我的問題是：爲什麼使用內聯CSS將display屬性設置爲'none'導致Scriptaculous打擾iFramed Google地圖內容？所有其他iFramed，未映射的內容（例如Yelp，Schools，Zillow stats等等，都顯示正確。

代碼在下面，但我不知道它是多麼有用，因爲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>

感謝您的幫助。

凡

來源

2011-02-23 VanAlbert

這個問題在多個Ajax框架中經驗豐富（我正在做同樣的工作ith與jquery）在多個瀏覽器上。

我會斷定這是谷歌地圖的一個問題。

來源

2011-03-22 04:44:25 verikono

謝謝......我很擔心我是唯一一個。這不是我在原型和Scriptaculous上經歷的唯一怪癖。 – VanAlbert 2011-03-24 16:52:05

Scriptaculous出現效果變化谷歌地圖外部可見iframe區域

回答

相關問題