div hidden by cookie reopens in IE only

Question

javascript is not my strong point so any assistance or help in the right direction would be much appreciated!

Basically I have a div which is hidden on my page which gets revealed to a user only if they are a new visitor according to the cookie set however it seems to all function well in firefox and chrome but using IE when clicking on the close button the page jumps back to the top and shows the hidden div (which is shouldnt, it should stay hidden)

HTML

<div id="theLink">
<?php if($this->countModules('tekenin2')) : ?>
<div id="gototop">
  <div id="popup"><a href="#" onclick="parentNode.remove();return false; "><img src="/templates/marktoe/images/close.png" id="close" class="close" border="0" alt="close" /></a>
    <jdoc:include type="modules" name="tekenin2" style="xhtml" />
  </div>
</div>
<?php endif; ?>

Script 1

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() { // body on load event
    if (!readCookie('visited')) {

        // if cookie not found display the div and create the cookie
        document.getElementById("theLink").style.display = "block";
        createCookie('visited', 'visited', 1); // 1 day = 24 hours persistence
    } else {
        // if cookie found hide the div
        document.getElementById("theLink").style.display = "none";
    }
}

Script 2 - where I suspect the problem is lying but I can be sure

window.addEvent('domready',function() {
    /* smooth */
    new SmoothScroll({duration:500});
    /* link management */
    $('theLink').set('opacity','0').setStyle('display','block');

    /* scrollspy instance */
    var ss = new ScrollSpy({
        min: 10,
        onEnter: function(position,enters) {
            //if(console) { console.log('Entered [' + enters + '] at: ' + position.x + ' / ' + position.y); }
            $('theLink').fade('in');
        },
        onLeave: function(position,leaves) {
            //if(console) { console.log('Left [' + leaves + '] at: ' + position.x + ' / ' + position.y); }
            //value below was #gototop div
            $('theLink').fade('out');
        },
        onTick: function(position,state,enters,leaves) {
            //if(console) { console.log('Tick  [' + enters + ', ' + leaves + '] at: ' + position.x + ' / ' + position.y); }
        },
        container: window
    });

});

What I need is the div to be hidden, using the cookie check if the user is a new or returning one, if new show the div else hide it.

Any tips or suggestions would be greatly appreciated, like I said this is not my forte and I feel I am missing something fundamental. Ive browsed multiple other threads trying to wrap my head around it but to no avail. Thanks in advance!

Additionally, when the page is loading sometimes the div shows quickly (flashes before being hidden by the script) but I have no clue as to why. — ZADorkMan, May 06 '15 at 08:29
Concerning the flashing up issue: you could try to hide it by default and only show it if the cookie is not present. — wastl, May 06 '15 at 08:58
Indeed, thank for the reply, however shouldn't the last bit of code in the first snippet take care of that? — ZADorkMan, May 06 '15 at 09:41

score 1 · Answer 1 · answered May 06 '15 at 10:28

1

In you HTML, replace

parentNode.remove();

with

this.parentNode.parentNode.removeChild(this.parentNode);

If you want to remove the entire div, you might have to go up (add more .parentNode) - the current code removes the popup div.

answered May 06 '15 at 10:28

potatopeelings

40,709
7
95
119

Thanks very much - ok that helps alot to know to remove the divs. I implemented a version of what you suggested however if the div pops up initially I click close and then it just pops up again. It will only disappear if I navigate to another page (I guess thats when the cookie gets set) but is there no way to force it to stay closed after I click the close button without navigating to another page? – ZADorkMan May 06 '15 at 13:09
I guess that's scrollspy acting up because of the a element. Try changing the "a" tag (of the close button) to a span. – potatopeelings May 06 '15 at 13:21
If I change it to span then the 'a' element (close button) stop functioning :( – ZADorkMan May 06 '15 at 13:40
I'm so sorry - it should have been a div. span can't have an img inside it. or perhaps a button element. – potatopeelings May 06 '15 at 13:41
No problem hehe thank you - so you're saying something like this? `
` Thank you for taking the time to have a look :) But the link still wont work though. Sorry I must be missing something.. – ZADorkMan May 06 '15 at 13:44
close, just remove the href="#" too. – potatopeelings May 06 '15 at 13:50
hhmm strange I did this but still the nothing happens if I click the close button - sorry man and thank you `
` – ZADorkMan May 06 '15 at 13:56
No worries mate. Here's a jsfiddle of your code with some of the server side stuff removed - http://jsfiddle.net/k9bvy5ao/. I've not included Script2. Can you keep adding stuff from your code till it stops working and send over the Saved fiddle? Also, btw change your window.addEvent to window.addEventListener first. – potatopeelings May 06 '15 at 14:14
Going to play with it and see what I can do - I must leave the office shortly but will give it a go and revert in the morning if thats ok? Thanks very much man I really really appreciate it all! – ZADorkMan May 06 '15 at 14:30

div hidden by cookie reopens in IE only

1 Answers1