Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
333 views
in Technique[技术] by (71.8m points)

javascript - Have div display ONLY on first time visit (cookies?)

I'm trying to have a div display on the very first time a user visits my site. I'm pretty sure I do this by using cookies, which I have limited experience with and am have a hard time understanding. Most tutorials I've found online only talk about having cookies prompt a user to input something like a name, and have it recall it later, which not what I want at all. I simply want the cookie to check if the user has been to my site before, and if not, display a div that is normally hidden.

Here's something I've tried and failed to get to work.

HTML:

<head>
   <script type="text/javascript" src="annoy.js"></script>
   <script type="text/javascript" src="scripts.js"></script>
</head>

...
<body>
    <div id="overbox3">
         <div id="infobox3">
              <p>This is the cookie box</p>
              <br />
              <p>it should only show once </p>
              <br/><br/>
         </div><!-- end infobox3 --> 
    </div> <!-- end overbox3 -->
</body>

CSS (not really relevant since this works fine):

#overbox3 {
         position: fixed;
         top: 0px;
         left: 0px;
         width: 100%;
         height: 100%; 
         background: rgba(64, 64, 64, 0.5);
         z-index: 999999;
         display: none;
    }

    #infobox3 {
        margin: auto;
        position: absolute;
        left: 35%;
        top: 20%;
        height: 300px;
         width: 400px;
        background-color: white;
        border: 1px solid red;
    }

Relevant content of scripts.js:

function popbox3() {
    $('#overbox3').toggle();
}

And what I assume is the problem, the content of annoy.js:

    function GetCookie(name) {
        var arg=name+"=";
        var alen=arg.length;
        var clen=document.cookie.length;
        var i=0;

        while (i<clen) {
            var j=i+alen;
                if (document.cookie.substring(i,j)==arg)
                    return "here";
                i=document.cookie.indexOf(" ",i)+1;
                if (i==0) 
                    break;
        }

        return null;
    }

    var visit=GetCookie("COOKIE1");

    if (visit==null){
    var expire=new Date();

    popbox3();

    expire=new Date(expire.getTime()+7776000000);
    document.cookie="COOKIE1=here; expires="+expire;
}

From my understanding, the cookie is supposed to be calling the function popbox3() only if the user has not visited, which would toggle the display of the hidden div. But as of now, nothing is working. Any clarification or help here would be greatly appreciated. Thanks in advance.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Your cookie code looks fine. You need to run it in the document ready handler, so that it waits until the document is loaded before toggling the DIV:

$(function() {
    var visit=GetCookie("COOKIE1");

    if (visit==null){
        popbox3();
    }
    var expire=new Date();
    expire=new Date(expire.getTime()+7776000000);
    document.cookie="COOKIE1=here; expires="+expire;
}

I've also made setting the cookie unconditional, so that every visit to the site will push back the expiration time.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...