load an ad (div) just once on first load

Question

159.05K viewsSeptember 16, 2022html javascript jquery

2

Joxmar September 12, 2022 0 Comments

I wanted to know how can I have a div that has an ad to load or become visible ONLY the first time you load the page but hide it every time the page is refreshed?

I only have the code to load the div with Jquery but don’t know how to hide it after refreshing the page:

$(document).ready(function() {
  $(".referralProgram").fadeIn("slow");
});

4 Answers

score 0 · Answer 1 · 2022-09-14T04:13:24+00:00

I am not sure what your server side implementation is like, but if you are worried about cookies being turned off you could handle this on the server side using session state.

score 0 · Answer 2 · 2022-09-14T03:13:50+00:00

You can use client side persistent storage to flag the user has already seen this. Here are 3 options:

1) Cookies – Set a cookie on the visiting users machine.

2) HTML5 Storage – You can store the flag in browser (HTML5 Only) storage.

3) Server Session – If you are using middleware (PHP, ASP.NET, Java, etc.) you can track via a session variable (this is an abstraction of a cookie and is only as persistent as you create it to be).

score 1 · Answer 3 · 2022-09-13T09:23:41+00:00

You’ll need a way to keep track of when an ad has been displayed to the user. Set a cookie when the ad is created and check for it before displaying again?

score 5 · Answer 4 · 2022-09-13T03:37:23+00:00

Use a cookie:

$(document).ready(function() {
    if (!readCookie("adSeen")) {
        $(".referralProgram").fadeIn("slow");
        createCookie("adSeen", "1", 1000);
    }
});

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;
}

Cookie functions from quirksmode.org.

Edit: Since so many are discussing how to deal with this if cookies are disabled, it should be pointed out that server session implementations rely on either a cookie, or a session identifier in the url. At best, you could only prevent displaying the ad for the same user as long as the session identifier is in the url. Returning to the home page sans session id would re-display the ad. Additionally, a careless implementation (and even some careful implementations) could result in false positives for other users if a user shares a url. localStorage solutions won’t work with cookies disabled in most, if not all, browsers.