With jQuery Cookies: UI hints/notes - hide them after the user continued

Question

The starting point:

I have a tricky web app interface (shouldn't be so, but that's another topic). To be understood by the user, i have built in hints. For Example: An arrow shows direction to swipe over the screen to show menu.

The problem:

Every time a user reloads the page or go to another (sub-)page, the hints appear again. Nonsense - and annoying for the user.

The solution:

Show the hints only when needed. When user triggers an event the hint for this event disappears. If the user reloads or visit the page some days later he already understand how it works and he don't need to see the hints.

The implementation:

jQuery Cookies. Something like:

if event is triggered -> set cookie. Cookie says -> don't show hint (for example with .css("display", "none") would be enough)

Where i need your help:

I don't find a good tutorial or documentation for jQuery cookies. Im a jQuery beginner. Easy functions are no problem. But this is a bit to big yet.

Thank you for any help or useful links!

score 0 · Accepted Answer · answered Apr 11 '14 at 18:16

JSFIDDLE: http://jsfiddle.net/wrxsti85/9nUBF/

This is a basic old cookie setup I used to use. It requires no other libraries so its small and lightweight.

The first time you load the fiddle you will see the tooltip. Click run again, and it will not be there.

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

function setCookie(c_name, value, exdays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

function checkCookie() {
    var status = getCookie("showToolTip");
    if (status != null && status == 1) {
        $('.TT').hide();
    } else {
        setCookie("showToolTip", "1", 365);
    }
}

$(function() {
    checkCookie();
});

Hope this helps! Let me know if you have questions.

With jQuery Cookies: UI hints/notes - hide them after the user continued

1 Answers1