Profile picture Schedule a Meeting
c a n d l a n d . n e t

jQuery welcome mat

Dusty Candland | | javascript

Welcome mat for getting email addresses or promoting other things to recent visitors to your site. Hides the form after the first view for 14 days.

Needs jQuery before the following code.

jQuery(document).ready(function($) {
  var setCookie = function(key, value, days) {
    var expires = new Date();
    expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
    document.cookie = key + '=' + value + ';expires=' + expires.toUTCString() +';path=/';
  }

  var getCookie = function(key) {
    var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
    return keyValue ? keyValue[2] : null;
  }

  var visitedBefore = getCookie('welcome-mat-1');
  var el = $(".welcome-mat");
  el.remove();

  if (visitedBefore !== '1') {
    $("body").prepend( el );

    $("div.welcome-mat").hide().css("height", $(window).height()).slideDown(750);
    $("div.welcome-mat-content").css("margin-top", ($(window).height() - $(".welcome-mat-content").outerHeight()) / 2);

    $(window).bind("resize", function() {
      $("div.welcome-mat").css("height", $(window).height());
      $("div.welcome-mat-content").css("margin-top", ($(window).height() - $(".welcome-mat-content").outerHeight()) / 2);
    });

    $('.close-welcome-mat').on('click', function(e){
      e.preventDefault();
      $("div.welcome-mat").slideUp(500, function() {
        $(this).hide().remove();
        $("body").scrollTop(0);
      });
    });

    setCookie('welcome-mat-1', '1', 14);
  }
});

Add the following style and HTML to the page. Doesn't matter where, but I put it near the bottom of the page. It will vertically center the welcome-mat-content.

<style>
  .welcome-mat {
    height: 0px;
    z-index: 1100;
    display: none;
    position: relative;
    background: white;
  }
</style>

<div class="welcome-mat container">
  <div class="row welcome-mat-content">
    Whatever content you want here
  </div>
</div>

Webmentions

These are webmentions via the IndieWeb and webmention.io. Mention this post from your site: