I'm having trouble setting a cookie to remember whether certain elements have been hidden or not. The script I'm using (which came from another answer on here) seems to work in terms of hiding or showing the elements I'm trying to control, but doesn't appear to be working in terms of 'remembering' the current state when reloading/changing pages.
On the site I'm currently developing, only two pages currently have this code:
http://www.emelisandetribute.com/music.php and http://www.emelisandetribute.com/videos.php
The javascript used on the pages (directly before the tag) is as follows:
<script type="text/javascript">
function setCookie (name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
}
function getCookie (name) {
var cookie = " " + document.cookie;
var search = " " + name + "=";
var setStr = null;
var offset = 0;
var end = 0;
if (cookie.length > 0) {
offset = cookie.indexOf(search);
if (offset != -1) {
offset += search.length;
end = cookie.indexOf(";", offset);
if (end == -1) {
end = cookie.length;
}
setStr = unescape(cookie.substring(offset, end));
}
}
if (setStr == 'false') {
setStr = false;
}
if (setStr == 'true') {
setStr = true;
}
if (setStr == 'null') {
setStr = null;
}
return(setStr);
}
function hideFooter() {
setCookie('footer_state', false);
document.getElementById('toggleoff').style.display = 'none';
document.getElementById('toggleon').style.display = 'block';
document.getElementById('footer1').style.display = 'none';
document.getElementById('footer2').style.display = 'none';
document.getElementById('footer3').style.display = 'none';
}
function showFooter() {
setCookie('footer_state', null);
document.getElementById('toggleoff').style.display = 'block';
document.getElementById('toggleon').style.display = 'none';
document.getElementById('footer1').style.display = 'block';
document.getElementById('footer2').style.display = 'block';
document.getElementById('footer3').style.display = 'block';
}
function checkFooter() {
if (getCookie('footer_state') == null) { // if popup was not closed
document.getElementById('toggleoff').style.display = 'block';
document.getElementById('toggleon').style.display = 'none';
document.getElementById('footer1').style.display = 'block';
document.getElementById('footer2').style.display = 'block';
document.getElementById('footer3').style.display = 'block';
}
}
</script>
The HTML for the relevant elements is:
<div class="mainfooterwrapper">
<span class="mainfootertoggle" id="toggleoff"><a href="#" onclick="hideFooter(); return false;">HIDE THIS</a></span>
<span class="mainfootertoggle" id="toggleon" style="display:none"><a href="#" onclick="showFooter(); return false;">SHOW THIS</a></span>
<div class="mainfooter1" id="footer1">
<?php include "mainfooter1.php"; ?>
</div>
<div class="mainfooter2" id="footer2">
<?php include "mainfooter4.php"; ?>
</div>
<div class="mainfooter3" id="footer3">
<?php include "mainfooter3.php"; ?>
<div style="clear:both; float:right; position:absolute; bottom:0; right:0; overflow:hidden; margin:5px 15px 5px 5px;">
<?php include "footer.php"; ?>
</div>
</div>
</div>
From reading some of the other questions and answers, I tried adding to all of the elements, both by editing the CSS and also by adding the code to the HTML, but this made the elements disappear completely.
It crossed my mind that what I actually need is a piece of code which will create a cookie when the elements are hidden by the user, but will also delete/amend the cookie if the elements are shown again. I realise that what I have at the moment (although not working properly) is code which effectively has an 'ON' switch, but no 'OFF' switch.
Any help or advice would be very greatly appreciated.