Эффект Scriptaculous Appear смещает Google Map за пределы видимой области iframe - PullRequest
0 голосов
/ 23 февраля 2011

Во-первых, я использую Wordpress для этого проекта, но я не думаю, что эта проблема связана с WP.

Я использую плагин WP под названием Local Market Explorer, который вставляет iFrame с картой Google иинформация о местных достопримечательностях, то есть рестораны.IFrame и контент обслуживаются Walkscore.com через его API.

Я бы хотел добавить контейнер контейнера div, используя эффект Scriptaculous Appear.Этот эффект требует установки «display: none» для контейнера div с использованием встроенного CSS на странице.Однако, как только iFrame, содержащий карту, исчезнет, ​​карта, содержащаяся в iframe, выйдет за пределы дисплея iFrame.Удаление «display: none» или настройка «display: inline» возвращает iFrame к правильному отображению карты, но делает эффект Appear неработоспособным.

Я подозреваю, что карта переместилась за границы отображения iframe, а не просто не отображалась, потому что появилась горизонтальная полоса прокрутки.Когда карта отображается правильно, она имеет вертикальную полосу прокрутки, но не имеет горизонтальной.

Что меня смущает, так это то, что Scriptaculous fade прекрасно работает, как это реализовано в скрипте с вкладками для контента под названием Stereotabs .Содержимое вкладки исчезает, не влияя на отображение карты.Однако я отмечаю, что код Stereotabs не использует встроенный CSS для эффекта Appear.JS-код Stereotabs доступен по предыдущей ссылке.Использование Scriptaculous Appear со встроенным CSS заставляет карту двигаться независимо от того, активен Stereotabs или нет.

Мой вопрос: почему установка свойства display на «none» с помощью встроенного CSS вызывает Scriptaculous, чтобы нарушить содержание карты iFramed Google?Все остальное содержимое iFramed (т.е. Yelp, Schools, Zillow stats и т. Д.) Отображается правильно.

Код приведен ниже, но я не знаю, насколько он будет полезен из-за WP-шорткода.Прошу прощения за то, что я не могу представить полный код ... это один из многих недостатков и неприятностей работы с 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>

Спасибо за любую помощь.

Ван

1 Ответ

1 голос
/ 22 марта 2011

Эта проблема возникает в нескольких ajax-средах (я делаю то же самое с jquery) в нескольких браузерах.

Я бы пришел к выводу, что это проблема с Google Maps.

...