Scriptaculous Appear effect shifts Google Map outside visible iframe area -


first, using wordpress project don't think issue wp-related.

i using wp plugin called local market explorer inserts iframe google map , local amenity information, i.e. restaurants. iframe , content served walkscore.com via api.

i fade page's container div in using scriptaculous appear effect. effect requires setting "display: none" container div using inline css on page. however, iframe containing map faded in, map contained in iframe moves outside of iframe display. removing "display: none" or setting "display: inline" returns iframe correct map display renders appear effect unfunctional.

i suspect map moved outside iframe's display boundaries rather not displaying because horizontal scrollbar appears. when map displayed correctly, has vertical scrollbar no horizontal one.

what confuses me scriptaculous fade works fine implemented in tabbed content script called stereotabs. tab content fades in without affecting map display. note, however, stereotabs code doesn't use inline css appear effect. stereotabs js code available via preceding link. using scriptaculous appear inline css makes map move regardless of whether stereotabs active or not.

my question is: why setting display property 'none' using inline css cause scriptaculous disturb iframed google map contents? other iframed, ummapped contents (i.e. yelp, schools, zillow stats, etc, appears correctly.

the code below, don't know how useful because of wp-shortcode. please pardon me not being able present complete code...that 1 of many drawbacks , annoyances of working 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 help.

van

this issue experienced on multiple ajax frameworks (i doing same with jquery) on multiple browsers.

i conclude issue google maps.


Comments

Popular posts from this blog

linux - Mailx and Gmail nss config dir -

c# - Is it possible to remove an existing registration from Autofac container builder? -

php - Mysql PK and FK char(36) vs int(10) -