Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How is this javascript box called ?

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #45001
    apart
    Participant

    [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.

    #136576
    JohnMotylJr
    Participant

    @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

    #136643
    apart
    Participant

    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.

    #136655
    JohnMotylJr
    Participant

    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.

    #136656
    apart
    Participant

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

    #136665
    JohnMotylJr
    Participant

    @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.

    #136668
    JohnMotylJr
    Participant

    @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

    #136669
    JohnMotylJr
    Participant

    @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 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.