2013-07-04 65 views
0

我有這個隱藏/顯示div的代碼,取決於用戶是否點擊按鈕來做到這一點。它還會設置一個cookie來記住狀態,這樣如果用戶刷新頁面,div狀態保持不變。所有工作都正常,直到我添加代碼以展示DFP廣告,並且由於某種原因,當頁面刷新時,它使用的iframe覆蓋了隱藏狀態 - 即使隱藏了包含的div,它仍會顯示廣告?jquery slide切換iframe覆蓋隱藏或顯示

這裏是我的代碼,我希望得到任何幫助到您答疑解惑:-)

感謝

像現在http://jsfiddle.net/jamesisapayne/xhzes/

<style> 
#billboardButton { 
    background-color:#f1f1f1; 
    color:#666; 
    padding:3px; 
    width:100px; 
    cursor:pointer; 
    text-align:center; 
    margin:0 auto; 
} 
</style> 

<!-- Load the latest version of jQuery --> 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<!-- Load the jquery.cookie.js plugin --> 
<script src="https://googledrive.com/host/0B7ZDS1Dob8_8WXhpUVdtNjVNdWc/"></script> 

<script type='text/javascript'> 
var googletag = googletag || {}; 
googletag.cmd = googletag.cmd || []; 
(function() { 
    var gads = document.createElement('script'); 
    gads.async = true; 
    gads.type = 'text/javascript'; 
    var useSSL = 'https:' == document.location.protocol; 
    gads.src = (useSSL ? 'https:' : 'http:') + 
    '//www.googletagservices.com/tag/js/gpt.js'; 
    var node = document.getElementsByTagName('script')[0]; 
    node.parentNode.insertBefore(gads, node); 
})(); 
</script> 
<script type='text/javascript'> 
googletag.cmd.push(function() { 
    googletag.defineSlot('/4856165/Forum_Billboard_970x250', [970, 250], 'billboard').addService(googletag.pubads()); 
    googletag.pubads().setTargeting('SiteType', 'giraffetest'); 
    googletag.enableServices(); 
}); 
</script> 

<script> 
$(document).ready(function(){ 
    // Check to see if the billboardStatus cookie has been set 
    if($.cookie('billboardStatus')) { 
     // If yes, define the variable 
     var cook = $.cookie('billboardStatus'); 
    } else { 
     // Else set it as true by default and with an expiry date of 1 day = 24 hours 
     var cook = $.cookie('billboardStatus', 'true', {expires: 1}); 
    } 
    // On refresh, if the cookie value is false i.e. the ad spot is closed 
    if(cook=='false') { 
     // hide the billboard ad spot  
     $('#billboard').hide(); 
     // Change the open/close button settings 
     $("#billboardButton").css("backgroundColor", "#e1e1e1").text('Open Ad');   
    } else { // Else if the value is set as true i.e. open 
    // Show the ad spot 
    $('#billboard').show(); 
     // Change the open/close button settings 
     $("#billboardButton").text('Close Ad'); 
    } 
    // When the user clciks on the open/close button… 
    $('#billboardButton').on('click', function() { 
     // Toggle the opening/closing of the ad spot 
     $('#billboard').stop().slideToggle('slow', function(){ 
      // Set the background colour and the text value of the button depending on what state the button is currently in 
      $("#billboardButton").css("backgroundColor", $(this).is(':not(:visible)') ? "#e1e1e1" : "").text($(this).is(':visible') ? 'Close Ad' : 'Open Ad'); 
      // Set the cookie value to false i.e. closed 
      $.cookie('billboardStatus', $(this).is(':visible'), {expires:1}); 
     }); // End slideToggle 
    }); // End on click 
}); // End document ready 
</script> 
<div style="width:970px;margin:20px auto;"> 
    <div id="billboardButton">Close Ad</div> 
    <div id='billboard' style='width:970px; height:250px; background-color:#0C9;'> 
     <script type='text/javascript'> 
      //googletag.cmd.push(function() { googletag.display('billboard'); }); 
     </script> 
    </div> 
</div> 

回答

0

設法找到了答案通過增加dfp代碼通過jQuery而不是直接進入html。將調用代碼放在兩行(59和73)中並對其進行測試。這裏是完成的代碼...

<style> 
#billboardButton { 
    background-color:#f1f1f1; 
    color:#666; 
    padding:3px; 
    width:100px; 
    cursor:pointer; 
    text-align:center; 
    margin:0 auto; 
} 
</style> 

<!-- Load the latest version of jQuery --> 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<!-- Load the jquery.cookie.js plugin --> 
<script src="https://googledrive.com/host/0B7ZDS1Dob8_8WXhpUVdtNjVNdWc/"></script> 

<script type='text/javascript'> 
var googletag = googletag || {}; 
googletag.cmd = googletag.cmd || []; 
(function() { 
    var gads = document.createElement('script'); 
    gads.async = true; 
    gads.type = 'text/javascript'; 
    var useSSL = 'https:' == document.location.protocol; 
    gads.src = (useSSL ? 'https:' : 'http:') + 
    '//www.googletagservices.com/tag/js/gpt.js'; 
    var node = document.getElementsByTagName('script')[0]; 
    node.parentNode.insertBefore(gads, node); 
})(); 
</script> 
<script type='text/javascript'> 
googletag.cmd.push(function() { 
    googletag.defineSlot('/4856165/Forum_Billboard_970x250', [970, 250], 'billboard').addService(googletag.pubads()); 
    googletag.pubads().setTargeting('SiteType', 'giraffetest'); 
    googletag.enableServices(); 
}); 
</script> 

<script> 
$(document).ready(function(){ 
    // Check to see if the billboardStatus cookie has been set 
    if($.cookie('billboardStatus')) { 
     // If yes, define the variable 
     var cook = $.cookie('billboardStatus'); 
    } else { 
     // Else set it as true by default and with an expiry date of 1 day = 24 hours 
     var cook = $.cookie('billboardStatus', 'true', {expires: 1}); 
    } 
    // On refresh, if the cookie value is false i.e. the ad spot is closed 
    if(cook=='false') { 
     // hide the billboard ad spot  
     $('#billboard').hide(); 
     //$('iframe,#google_ads_iframe_/4856165/Forum_Billboard_970x250_0').css('display','none'); 
     // Change the open/close button settings 
     $("#billboardButton").css("backgroundColor", "#e1e1e1").text('Open Ad');   
    } else { // Else if the value is set as true i.e. open 
    // Show the ad spot 
    $('#billboard').show().html("<script type='text/javascript'>googletag.cmd.push(function() { googletag.display('billboard'); });<\/script>"); 
     // Change the open/close button settings 
     $("#billboardButton").text('Close Ad'); 
    } 


    // When the user clicks on the open/close button… 
    $('#billboardButton').on('click', function() { 
     // Toggle the opening/closing of the ad spot 
     $('#billboard').stop().slideToggle('slow', function(){ 
      // Set the background colour and the text value of the button depending on what state the button is currently in 
      $("#billboardButton").css("backgroundColor", $(this).is(':not(:visible)') ? "#e1e1e1" : "").text($(this).is(':visible') ? 'Close Ad' : 'Open Ad'); 
      // Set the cookie value to false i.e. closed 
      $.cookie('billboardStatus', $(this).is(':visible'), {expires:1}); 
      $("#billboard").is(':visible') ? $("#billboard").html("<script type='text/javascript'>googletag.cmd.push(function() { googletag.display('billboard'); });<\/script>") : "";  
     }); // End slideToggle 
     return false; 
    }); // End on click 
}); // End document ready 
</script> 
<div style="width:970px;margin:20px auto;"> 
    <div id="billboardButton">Close Ad</div> 
    <div id='billboard' style='width:970px; height:250px; background-color:#0C9;'></div> 
</div>