Добавить открытый / закрытый текст в расширяющееся объявление в зависимости от его состояния - PullRequest
Новая
       6

Добавить открытый / закрытый текст в расширяющееся объявление в зависимости от его состояния

0 голосов
/ 09 ноября 2011

Я получил javascript, отображающий расширяющееся объявление, сначала показав его в формате 960x30, подождите 3 секунды, увеличьте его до 960x300, подождите 3 секунды, а затем уменьшите его до 960x30. После завершения этого процесса пользователь может щелкнуть его, чтобы переключиться между двумя размерами. Мы показываем рекламу через Менеджер объявлений Google, поэтому я определяю, есть ли реклама для показа, и, если она есть, я помещаю класс слайдера в div, в который Google автоматически оборачивает объявление.

Мне нужно иметь текст или изображение, которые переключаются между «Развернуть» (когда он находится в состоянии 960x30) и «Свернуть» (когда он находится в состоянии 960x300) в углу объявления, но при этом позволяют Остальная часть объявления будет нажата как обычное объявление. Я надеюсь, что все это имеет смысл, и я очень надеюсь, что кто-то может взять этот дом для меня !!! Вот код, который у меня есть: 

<head>

<!-- load jquery -->
<script type="text/javascript" src="../js/jquery1_7.js"></script>
<!-- load jquery : end -->

<!-- load google DFP -->
<script type='text/javascript' src='http://partner.googleadservices.com/gampad/google_service.js'></script>
<script type='text/javascript'>
    GS_googleAddAdSenseService("ca-pub-XXX");
    GS_googleEnableAllServices();
</script>
<script type='text/javascript'>
    GA_googleAddSlot("ca-pub-XXX", "TEST_960x300");
</script>
<script type='text/javascript'>
    GA_googleFetchAds();
</script>
<!-- load google DFP : end -->

<!-- intial load as open and click toggle -->
<script type="text/javascript">
$(window).load(function(){
$('.slider').delay(3000).animate({height:300}).delay(3000).animate({height:30}, function() {
    $(this).click(function() {
        if ($(this).height()==30) {
            $(this).animate({height:300});
        } else {
            $(this).animate({height:30});
        }
    });
});
});
</script>
<!-- intial load as open and click toggle : end -->


<!-- slider class -->
<style type='text/css'>
.slider {
    width:960px;
    height:30px;
    cursor: pointer;
    overflow: hidden;
    margin-left: 0px;
    position: relative;
}
</style>
<!-- slider class : end -->

</head>

<body>

<p>stuff above the slider</p>

<!-- TEST_960x300 -->
<script type='text/javascript'>
GA_googleFillSlot("TEST_960x300");
</script>
<!-- TEST_960x300 : end -->

<p>stuff below the slider</p>



<!-- detect if DFP has an ad in the ad slot -->
<script type='text/javascript'>

if(document.getElementById('google_ads_div_TEST_960x300_ad_container')){
    document.getElementById('google_ads_div_TEST_960x300_ad_container').setAttribute("class", "slider");
}

//For IE since it seems DFP outputs a different div for IE.
if(document.getElementById('google_ads_div_TEST_960x300')){
    document.getElementById('google_ads_div_TEST_960x300').setAttribute("class", "slider");
}

</script>
<!-- detect if DFP has an ad in the ad slot : end -->


</body>

1 Ответ

0 голосов
/ 09 ноября 2011

Вы, вероятно, захотите немного реорганизовать JS, чтобы упростить эту задачу: 

function openAd() {
    // stop any current animation
    // slide the ad open
}
function closeAd() {
    // stop any current animation
    // slide the ad closed
}

Если я правильно понимаю ваш вопрос, остальное довольно просто:

  • Создайте кнопки «Развернуть» и «Свернуть» и добавьте их в DOM. Это могут быть обычные <a> элементы, кнопки или что-то еще.Ничего страшного.
  • Управление показом каждой кнопки на основе текущего состояния объявления. Когда объявление свернуто, показывается только кнопка расширения.Когда объявление развернуто, показывайте только свернутую кнопку.
  • Добавьте прослушиватели событий для кнопок. Поскольку вы используете jQuery, это не должно быть проблемой.Что-то вроде $(yourExpandButton).on('click', openAd); (обратите внимание, что используется функция 1.7 on.)
...