Scriptaculous Appear effect shifts Google Map outside visible iframe area
First, I am using Wordpress for this project but I don't think this issue is WP-related.
I am using a WP plu开发者_Python百科gin called Local Market Explorer that inserts an iFrame with a Google map and local amenity information, i.e. restaurants. The iFrame and content is served by Walkscore.com via its API.
I would like to fade the page's container div in using the Scriptaculous Appear effect. This effect requires setting "display: none" for the container div using inline CSS on the page. However, as soon as the iFrame containing the map is faded in, the map contained in the iframe moves outside of the iFrame display. Removing "display: none" or setting "display: inline" returns the iFrame to the correct map display but renders the Appear effect unfunctional.
I suspect the map moved outside the iframe's display boundaries rather than simply not displaying because a horizontal scrollbar appears. When the map is displayed correctly, it has a vertical scrollbar but no horizontal one.
What confuses me is that the Scriptaculous fade works fine as implemented in a tabbed content script called Stereotabs. The tab content fades in without affecting the map display. I note, however, that the Stereotabs code doesn't use inline CSS for the Appear effect. The Stereotabs js code is available via the preceding link. Using Scriptaculous Appear with inline CSS makes the map move regardless of whether Stereotabs is active or not.
My question is: why does setting the display property to 'none' using inline CSS cause Scriptaculous to disturb iFramed Google map contents? All the other iFramed, ummapped contents (i.e. Yelp, Schools, Zillow stats, etc, appears correctly.
The code is below, but I don't know how useful it will be because of the WP-shortcode. Please pardon me for not being able to present complete code...that is one of the many drawbacks and annoyances of working with 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>
Thanks for any help.
Van
This issue is experienced on multiple ajax frameworks (I am doing the same with with jquery) on multiple browsers.
I would conclude this is an issue with google maps.
加载中,请稍侯......
精彩评论