Grow your CSS skills. Land your dream job.

How is this javascript box called ?

  • # May 26, 2013 at 7:37 pm

    [Example](http://beta.eune.leagueoflegends.com/ “Example.”)

    So when you visit the site for the first time on the certain IP this “pop up” box comesout that can be exited. What is this called ? I want to learn how to do it with some tutorial but cant find it since i dont know whats it called.

    # May 26, 2013 at 7:51 pm

    @markomarkogame, it is done by setting a cookie in the browser. It then tests to see if the cookie is there and if it is, doesnt display the overlay #id

    # May 27, 2013 at 3:19 pm

    Yes i understand that but how is this effect pop up done ? What is this box called ? Pop up ? I like how it can be exited.

    # May 27, 2013 at 5:09 pm

    You can make that element anything you want. You can create an overlay and then center an intro message with a crazy z-index so nothing else can be done until the user closes the box.

    # May 27, 2013 at 5:17 pm

    Thanks so now I need to find out what is it called that ability to close off a div and that cookie tracker ..

    # May 27, 2013 at 7:39 pm

    @markomarkogame Hey, if you look on that site’s resources (Chrome F12 / ‘Inspect Element’) you will see something called jquery.cookie.js, i am sure that is what is being used to set/get the cookie.

    This is the link that shows the code to test the cookie.

    (function ($) {
    Drupal.behaviors.LolSneakPeekPrestitialOverlay = {
    attach: function (context) {
    // Get the value that stores whether user has visited the site.
    var visited = $.cookie('Drupal.LoLSneakPeekVisited');
    // If this is the user's first visit, invoke an overlay.
    if (visited != 1) {
    // Although this module depends on the Colorbox, we can't guarantee that
    // the library will exist.
    if ($.colorbox != undefined) {
    $.colorbox({
    href: Drupal.settings.basePath + Drupal.settings.pathPrefix + "sneak-peek/overlay",
    iframe: true,
    width: "750px",
    height: "350px",
    innerWidth: "750px",
    innerHeight: "350px",
    opacity: 0.7,
    scrolling: false,
    className: 'beta-interstitial-colorbox'

    });
    }
    // Set a cookie so the user only views this overlay once.
    $.cookie('Drupal.LoLSneakPeekVisited',
    1, {
    path: Drupal.settings.basePath,
    expires: 36500
    });
    }
    }
    };
    })(jQuery);

    If you want me to create a pen with a demo let me know.

    # May 27, 2013 at 8:30 pm

    I am interested in seeing a CodePen for this. I would like to do something similar.

    # May 27, 2013 at 9:15 pm

    @markomarkogame && @mintertweed

    Here is a simple CodePen use case in which i have an element with a greeting, i test to see if the cookie is set, than i display the greeting and call a one liner function to set the cookie. Refresh all you want but the cookie is set for a year and the message wont pop up until then.

    There are tons of things you can do with this as far as ui, etc.. but this pen is very simple and not even elegant ( it would be better to create the message box with javascript so you dont have an unused element in your page).

    Any questions or comments lemme know.

    References:

    jquery.cookie.js on GitHub

    Official jQuery Repository with jquery.cookie.js

    Info for jQuery.cookie.js

    # May 27, 2013 at 9:27 pm

    @markomarkogame && @mintertweed

    This also works with localStorage…
    http://codepen.io/johnmotyljr/pen/crCJG

    This pen has a more dynamic approach: http://codepen.io/johnmotyljr/full/vGEFL

    ^ view in chrome, for some reason FireFox doesnt like this pen?!?!

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".