Slide Form

index.html

<div class="container owlnav-container">
  <div class="row">
    <div class="controls-container col-md-8">
      <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
          <i class="fa fa-cog"></i>
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Edit</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Delete</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Clone</a></li>
          <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Print</a></li>
        </ul>
      </div>
    </div>
    <div class="owlnav col-md-4">
      <a class="btn btn-primary prev"><i class="fa fa-arrow-left"></i></a>
      <a class="btn btn-primary next"><i class="fa fa-arrow-right"></i></a>
    </div>
  </div>
</div>

<div id="clients-container" class="owl-carousel">
  
  <div class="single-view container">
    <!-- Client Name Row -->
    <div class="row">
      <div class="col-md-12">  
        <div class="name"><h1>Person One</h1></div>
      </div>
    </div>
    <!-- End Client Name Row -->
    
    <!-- Client Entry Created Row -->
    <div class="row">
      <div class="col-md-12">
        <div class="client-created-details">
          Created 12/8/2014 at 11:38AM 
        </div>
      </div>
    </div><br>
    <!-- End Client Entry Created Row -->
    
    <!-- Prospect Details Row -->
    <div class="row">
      <div class="col-md-12">
        <h3> Prospect Information </h3>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="table-responsive">
          <table class="prospect-information table table-hover">
            <tbody>
              <tr>
                <td>Prospect Name:</td>
                <td>Security Title Guarantee Corp</td>
              </tr>
              <tr>
                <td>Modified By:</td>
                <td><a href="#">Person</a> Mon, 4 Aug 2014 05:34 PM</td>
              </tr>
              <tr>
                <td>Est Renewal Date:</td>
                <td></td>
              </tr>
              <tr>
                <td>Phone Number:</td>
                <td>(333) 867-5309&nbsp;<i class="fa fa-phone-square"></i></td>
              </tr>
              <tr>
                <td>Prospect Street:</td>
                <td>555 W Fake Street</td>
              </tr>
              <tr>
                <td>Prospect State:</td>
                <td>New City</td>
              </tr>
              <tr>
                <td>Prospect County:</td>
                <td>New City City</td>
              </tr>
              <tr>
                <td>Prospect Owner:</td>
                <td><a href="#" class="prospect-owner">Person</a></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="col-md-6">
        <div class="table-responsive">
          <table class="prospect-information table table-hover">
            <tbody>
              <tr>
                <td>Call Result:</td>
                <td><a class="callresult"></a></td>
              </tr>
              <tr>
                <td>Prospect Business Class:</td>
                <td>Title Companies</td>
              </tr>
              <tr>
                <td>Prospect Title:</td>
                <td>Vice President</td>
              </tr>
              <tr>
                <td>First Name:</td>
                <td>John</td>
              </tr>
              <tr>
                <td>Last Name:</td>
                <td>Doe</td>
              </tr>
              <tr>
                <td>Prospect City:</td>
                <td>New City City</td>
              </tr>
              <tr>
                <td>Prospect Zip:</td>
                <td>010010</td>
              </tr>
              <tr>
                <td>Email:</td>
                <td></td>
              </tr>
              <tr>
                <td>Created By:</td>
                <td><a href="#">Person</a> Mon, 4 Aug 2014 05:34 PM</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    
  </div>
  <div class="single-view container">
    <!-- Client Name Row -->
    <div class="row">
      <div class="col-md-12">  
        <div class="name"><h1>Person One</h1></div>
      </div>
    </div>
    <!-- End Client Name Row -->
    
    <!-- Client Entry Created Row -->
    <div class="row">
      <div class="col-md-12">
        <div class="client-created-details">
          Created 12/8/2014 at 11:38AM 
        </div>
      </div>
    </div><br>
    <!-- End Client Entry Created Row -->
    
    <!-- Prospect Details Row -->
    <div class="row">
      <div class="col-md-12">
        <h3> Prospect Information </h3>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="table-responsive">
          <table class="prospect-information table table-hover">
            <tbody>
              <tr>
                <td>Prospect Name:</td>
                <td>Security Title Guarantee Corp</td>
              </tr>
              <tr>
                <td>Modified By:</td>
                <td><a href="#">Person</a> Mon, 4 Aug 2014 05:34 PM</td>
              </tr>
              <tr>
                <td>Est Renewal Date:</td>
                <td></td>
              </tr>
              <tr>
                <td>Phone Number:</td>
                <td>(333) 867-5309&nbsp;<i class="fa fa-phone-square"></i></td>
              </tr>
              <tr>
                <td>Prospect Street:</td>
                <td>555 W Fake Street</td>
              </tr>
              <tr>
                <td>Prospect State:</td>
                <td>New City</td>
              </tr>
              <tr>
                <td>Prospect County:</td>
                <td>New City City</td>
              </tr>
              <tr>
                <td>Prospect Owner:</td>
                <td><a href="#" class="prospect-owner">Person</a></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="col-md-6">
        <div class="table-responsive">
          <table class="prospect-information table table-hover">
            <tbody>
              <tr>
                <td>Call Result:</td>
                <td><a class="callresult"></a></td>
              </tr>
              <tr>
                <td>Prospect Business Class:</td>
                <td>Title Companies</td>
              </tr>
              <tr>
                <td>Prospect Title:</td>
                <td>Vice President</td>
              </tr>
              <tr>
                <td>First Name:</td>
                <td>John</td>
              </tr>
              <tr>
                <td>Last Name:</td>
                <td>Doe</td>
              </tr>
              <tr>
                <td>Prospect City:</td>
                <td>New City City</td>
              </tr>
              <tr>
                <td>Prospect Zip:</td>
                <td>010010</td>
              </tr>
              <tr>
                <td>Email:</td>
                <td></td>
              </tr>
              <tr>
                <td>Created By:</td>
                <td><a href="#">Person</a> Mon, 4 Aug 2014 05:34 PM</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    
  </div>
  <div class="single-view container">
    <!-- Client Name Row -->
    <div class="row">
      <div class="col-md-12">  
        <div class="name"><h1>Person One</h1></div>
      </div>
    </div>
    <!-- End Client Name Row -->
    
    <!-- Client Entry Created Row -->
    <div class="row">
      <div class="col-md-12">
        <div class="client-created-details">
          Created 12/8/2014 at 11:38AM 
        </div>
      </div>
    </div><br>
    <!-- End Client Entry Created Row -->
    
    <!-- Prospect Details Row -->
    <div class="row">
      <div class="col-md-12">
        <h3> Prospect Information </h3>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="table-responsive">
          <table class="prospect-information table table-hover">
            <tbody>
              <tr>
                <td>Prospect Name:</td>
                <td>Security Title Guarantee Corp</td>
              </tr>
              <tr>
                <td>Modified By:</td>
                <td><a href="#">Person</a> Mon, 4 Aug 2014 05:34 PM</td>
              </tr>
              <tr>
                <td>Est Renewal Date:</td>
                <td></td>
              </tr>
              <tr>
                <td>Phone Number:</td>
                <td>(333) 867-5309&nbsp;<i class="fa fa-phone-square"></i></td>
              </tr>
              <tr>
                <td>Prospect Street:</td>
                <td>555 W Fake Street</td>
              </tr>
              <tr>
                <td>Prospect State:</td>
                <td>New City</td>
              </tr>
              <tr>
                <td>Prospect County:</td>
                <td>New City City</td>
              </tr>
              <tr>
                <td>Prospect Owner:</td>
                <td><a href="#" class="prospect-owner">Person</a></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div class="col-md-6">
        <div class="table-responsive">
          <table class="prospect-information table table-hover">
            <tbody>
              <tr>
                <td>Call Result:</td>
                <td><a class="callresult"></a></td>
              </tr>
              <tr>
                <td>Prospect Business Class:</td>
                <td>Title Companies</td>
              </tr>
              <tr>
                <td>Prospect Title:</td>
                <td>Vice President</td>
              </tr>
              <tr>
                <td>First Name:</td>
                <td>John</td>
              </tr>
              <tr>
                <td>Last Name:</td>
                <td>Doe</td>
              </tr>
              <tr>
                <td>Prospect City:</td>
                <td>New City City</td>
              </tr>
              <tr>
                <td>Prospect Zip:</td>
                <td>010010</td>
              </tr>
              <tr>
                <td>Email:</td>
                <td></td>
              </tr>
              <tr>
                <td>Created By:</td>
                <td><a href="#">Person</a> Mon, 4 Aug 2014 05:34 PM</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    
  </div>
</div>
<br>
<br>
<br>
<br>
<div id='console'></div>
  

ogboRj.markdown

Slide Form

A form created with owl carousel

A Pen by risingsunomi on CodePen.

License.

script.js

var c = function() {
    return({
        log: function(msg) {
          consoleDiv = document.getElementById('console');
          para = document.createElement('p');
          text = document.createTextNode(msg);
          para.appendChild(text);
          consoleDiv.appendChild(para);
        }
    });
}();

var owl = $("#clients-container");
owl.owlCarousel({
     singleItem:true,
  	   afterAction : syncPosition,
});

function syncPosition(el){
    var current = this.currentItem;
    $("#clients-container")
      .find(".owl-item")
      .removeClass("synced")
      .eq(current)
      .addClass("synced")
    if($("#sync2").data("owlCarousel") !== undefined){
      center(current)
    }
  }

$(".next").click(function(){
  var crslt = $("#clients-container > div.owl-wrapper-outer > div > div.owl-item.synced > div > div > div > div > table > tbody > tr > td > a.callresult");
  if(crslt.text() != "Empty"){
    owl.trigger('owl.next');
  	  c.log(owl.currentItem.toString());
  }else{
    bootbox.alert("You must fill out call result before going to next prospect");
  }
  
})
$(".prev").click(function(){
  var crslt = $("#clients-container > div.owl-wrapper-outer > div > div.owl-item.synced > div > div > div > div > table > tbody > tr > td > a.callresult");
  if(crslt.text() != "Empty"){
    owl.trigger('owl.prev');
  }else{
    bootbox.alert("You must fill out call result before going to previous prospect");
  }
  
})

$.fn.editable.defaults.mode = 'inline';
var cr_data = [
  {value: 1, text: 'Unavailable'},
  {value: 2, text: 'Bad Number'},
  {value: 3, text: 'Decision Maker Not Yet Interested'},
  {value: 4, text: 'Skip'},
  {value: 5, text: 'Do Not Call List'},
  {value: 6, text: 'Renewal Date Added'},
  {value: 7, text: 'Call Back Scheduled'},
  {value: 8, text: 'Nationwide'},
  {value: 9, text: 'Erie'},
  {value: 10, text: 'Set Appointment'}
];
$('.callresult').each(function(){
  
  $(this).editable({
  	  type: 'select',
    title: 'Call Result',
    mode: 'popup',
    source: cr_data,
    success: function(response, newValue) {
      $(this).text(newValue);
      owl.trigger('owl.next');
    }
  });
});

$(".callresult-edit").each(function(){
  	
});

$(".prospect-owner").each(function(){
  $(this).editable({
    type: 'text',
    title: 'Change Prospect Owner',
    mode: 'popup',
    success: function(res, nv){
      $(this).text(nv);
    }
  });
});

style.css

ul{ list-style-type: none; }
.single-view { text-align: left; }
.owl-pagination { display: none; visibility: hidden; }
.owlnav { text-align: right; padding-bottom: 10px; padding-top: 10px}
.owlnav-container { background-color: #ccc; }
.controls-container { text-align: left; padding-bottom: 10px; padding-top: 10px; }
.name-container { text-align: center; padding-bottom: 10px; padding-top: 10px; }

.call-result-label, .call-result-details, .client-created-details, .mod-label, .mod-details, .phone-details, .phone-label { font-size: 12pt; }

.prospect-information > tbody > tr > td { padding-right: 12px; padding-top: 10px; padding-bottom: 10px; font-size: 12pt;}