Tags

, , , ,

On Page Scroll Floating Form

floatingform

*: for easing effect you need jquery easing
https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js

Detail:

  • data-skipheader: if you want to show form after user scroll header or banner section add class name here
  • data-easing: add easing name here to implement easing effect *

<ul class="floatingSection" data-skipheader=".docHeight header">
  <li data-easing="easeInOutElastic">
    <span>&lt; Call</span>
    <div>
      <a href="tel:+123456789">+123 456 789</a>
    </div>
  </li>
  <li data-easing="easeInOutBounce">
    <span>&lt; Chat </span>
    <div>
      <a href="javascript:;" onclick="livechat();">Live Chat</a>
    </div>
  </li>
  <li class="onclick">
    <span>&lt; Form </span>
    <div>
      <form>
        <div class="form-group">
          <label>First Name</label>
          <input type="text" class="form-control" placeholder="First Name">
        </div>
        <div class="form-group">
          <label>Email address</label>
          <input type="email" class="form-control" placeholder="Email">
        </div>
        <div class="form-group">
          <label>Message</label>
          <textarea class="form-control"></textarea>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox"> All Done
          </label>
        </div>
        <button type="submit" class="btn btn-default">Send</button>
      </form>
    </div>
  </li>
</ul>

<div class="overlay"></div>

add code in css

.overlay { width: 100%; height: 100%; position: fixed; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQImWNguAkAANwA2ohRxm8AAAAASUVORK5CYII=) repeat; top: 0; left: 0; z-index: 998; display: none; cursor: pointer; }
.floatingSection { list-style: none; position: fixed; right: 0; top: 15%; z-index: 999; display: none; }
.floatingSection li { position: relative; background: #dcdcdc; margin-bottom: 10px; }
.floatingSection li > span { padding: 15px; font-size: 14px; cursor: pointer; display: block; background: green; color: #ffffff; border-radius: 4px 0 0 4px; text-align: center; position: absolute; width: 80px; }
.floatingSection li > div { background: #e8e7e7; padding: 17px 17px 16px; }
.floatingSection li { width: 150px; }
.floatingSection li+li { width: 180px; }
.floatingSection li+li+li { width: auto; }

add in js

$(function() {
  floatingform();
});

function floatingform() {
  var getwidth = $('.floatingSection').outerWidth();
  var skipheader = $('.floatingSection').data('skipheader');
  var easing = 'linear';

  $('.floatingSection').css({
    'right': -getwidth
  });

  var tapButton = $('.floatingSection li > span').outerWidth();
  $('.floatingSection li > span').css({
    'left': -tapButton
  });

  $('.floatingSection li').hover(function() {
    var $this = $(this);
    var eleWidth = $this.width();

    if ($this.data('easing')) {
      $this.stop(true, true).animate({
        right: eleWidth
      }, 500, easing);
    }
  }, function() {
    var $this = $(this);
    if ($this.data('easing')) {
      $this.animate({
        right: '0'
      }, 500, $this.data('easing'));
    }
  });

  $('.floatingSection li.onclick > span').on('click', this, function() {
    $this = $(this).closest('li');
    if ($this.hasClass('opened')) {
      $this.animate({
        'left': '0'
      }).removeClass('opened');
      $('.overlay').fadeOut(300);
    } else {
      $this.animate({
        'left': -getwidth
      }).addClass('opened');
      $('.overlay').fadeIn(300);
    }
  });

  /* Black Overlay */
  $('.overlay').on('click', this, function() {
    $('.floatingSection li.onclick').animate({
      'left': '0'
    }).removeClass('opened');
    $('.overlay').fadeOut(300);
  });

  /* Close Form On Click  */
  $('.closesideform').click(function() {
    $('.overlay').trigger('click');
  });

  /* Open Form On Click  */
  $('.opensideform').click(function() {
    $('.floatingSection li.onclick > span').trigger('click');
  });

  $(window).scroll(function(e) {

    if ($(window).width() >= 767) {

      if ($('.floatingSection')[0]) {
        var skipHeight = $(skipheader).outerHeight();
        if (($(window).scrollTop() >= skipHeight)) {
          $('.floatingSection').fadeIn(300);
        } else {
          $('.floatingSection').fadeOut(300);
        }
      }

    }

    if ($(window).width() <= 767) {
      $('.opensideform').click(function() {
        $('.overlay').hide();
        $('html, body').stop(0, 0).animate({
          scrollTop: $('body').offset().top
        });
      });
    }

  });

}

Working Example

Advertisements