LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code





CSS
#comment-display {
  position: relative;
  width: 200px;
  height: 200px;
  perspective: 200px;
  overflow: hidden;
}

.t-card {
  position: absolute;
  top: 0;
  left: 0;
  width: 178px;
  height: 178px;
  padding: 10px;
  border: solid 1px navy;
  background-color: cornflowerblue;
  color: white;
  transition: transform 2s ease;
  transform: rotateX(-90deg);
  transform-origin: 100% 0%;
}

.t-card.active {
  transform: rotateX(0deg);
  transform-origin: 100% 0%;
  transition-duration: 4s;
  z-index: 2;
}

.t-card.inactive {
  transform: rotateX(90deg);
  transform-origin: 0% 100%;
}
JS
function Testimonials(displayId, commentFormId) {
  var $display = $("#" + displayId);
  var $form = $("#" + commentFormId);

  function displayRandomComment() {
    $.getJSON("http://pseudorandombits.com/jccc/testimonials.php", function(data) {
      updateCommentCard(data);
      setTimeout(displayRandomComment, 5000);
    });
  }

  function initTestimonials() {
    $form.hide();
    $form.submit(submitCommentForm);

    $display.click(function() {
      $form[0].reset();
      $form.slideToggle();
    });
    displayRandomComment();
  }

  function submitCommentForm(event) {
    event.preventDefault();

    if (validateCommentForm()) {
      $.ajax({
        type: "POST",
        url: "http://pseudorandombits.com/jccc/testimonials.php",
        crossDomain: true,
        data: $form.serialize(),
        success: function() {
          $display.click();
        },
        error: function() {

        },
        complete: function(xhr, status) {
          xhr;
          status;
        }
      });
    }
  }

  function updateCommentCard(data) {
    var $active = $display.find(".t-card.active:first");
    $active.removeClass("active");

    var $inactive = $display.find(".t-card.inactive:first");
    $inactive.find(".comments").text(data.comments);
    $inactive.find(".name").text(data.name);
    $inactive.find(".location").text(data.location);
    $inactive.removeClass("inactive")

    $active.addClass("inactive");
    $inactive.addClass("active");
  }

  function validateCommentForm() {
    $form.find("input[type=text]").each(function() {
      if ($(this).val().length == 0) {
        $(this).addClass("input-error");
        $(this).focus();
      }
      $(this).removeClass("input-error");
    });
    return $form.find(".input-error").length == 0;
  }

  initTestimonials();
}

var testimonials = new Testimonials("comment-display", "comment-submission");
Host Instantly Drag and Drop Website Builder

 

Description

Cycle through random customer testimonials.
Tue, 12/26/2017 - 23:27

Related Codes

Pen ID
Pen ID
Pen ID