Hide/Remove Div if cookie is set

Question

I am working to add a transparent flash video to a site of a person walking out. The problem is that I don't want the video to play every time the home page is loaded, so I set a 24hr cookie that if detected the div containing the video is set to hide. This works perfectly in Google Chrome and FF, the problem is in IE the div is apparently hidden because you cannot see the video but the audio of the video is still heard. Perhaps there is a different way to do this then the way I am going about it and maybe even a way to do a remove instead of hide? If anyone has any suggestions it would be very much appreciated.

//div that holds the video
<style type="text/css">
#apDiv1 {
position: fixed;
width:560px;
height:314px;
z-index:100;
left: 452px;
top: 316px;
}
</style>

    <script type="text/javascript">
function createCookie(name,value,days) {
if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}

function setTheDivStyle() {
if(!readCookie('wroteIt')) {
// if cookie not found display the div and create the cookie
document.getElementById("apDiv1").style.display="block";
createCookie('wroteIt', 'wroteIt', 1);  // 1 day = 24 hours persistence
}
else {
// if cookie found hide the div
document.getElementById("apDiv1").style.display="none";
}
}
</script>

</head>
<body onload = "setTheDivStyle()">

<div id="apDiv1"> 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="560" height="314" id="FLVPlayer">
    <param name="movie" value="FLVPlayer_Progressive.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <param name="scale" value="noscale" />
    <param name="salign" value="lt" />
    <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&amp;streamName=FL_Spot&amp;autoPlay=true&amp;autoRewind=false" />
    <param name="swfversion" value="8,0,0,0" />
  </object>
</div>

Surely you can remove the DIV completely via JavaScript using removeChild function, yet you need to check if this works with IE. Or better write your div dynamically in the first place, as Byron suggested in his answer. — Eugene Mayevski 'Callback, Aug 29 '11 at 18:52

score 3 · Accepted Answer · answered Aug 29 '11 at 18:21

Just write to the div dynamically.

Change the div to be empty

<div id="apDiv1"> </div>

Write the flash from the IF statement. (You could do this using dom)

...
if(!readCookie('wroteIt')) {
// if cookie not found display the div and create the cookie

document.getElementById('apDiv1').innerHTML = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="560" height="314" id="FLVPlayer">
    <param name="movie" value="FLVPlayer_Progressive.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="transparent" />
    <param name="scale" value="noscale" />
    <param name="salign" value="lt" />
    <param name="FlashVars" value="&amp;MM_ComponentVersion=1&amp;skinName=Clear_Skin_1&amp;streamName=FL_Spot&amp;autoPlay=true&amp;autoRewind=false" />
    <param name="swfversion" value="8,0,0,0" />
  </object>';

...

I did that exactly but I get a syntax error in dreamweaver on line 58 which is this line document.getElementById('apDiv1').innerHTML = ' — Dan, Aug 29 '11 at 21:36
Also, try putting the flash string on one line. that might make dw shut up. — Byron Whitlock, Aug 29 '11 at 23:03

Hide/Remove Div if cookie is set

1 Answers1