Skip to content

Instantly share code, notes, and snippets.

@risingsunomi

risingsunomi/index.html

Last active August 29, 2015 14:12
Show Gist options
  • Save risingsunomi/767ca9126742d077fc7f to your computer and use it in GitHub Desktop.
Save risingsunomi/767ca9126742d077fc7f to your computer and use it in GitHub Desktop.
Download ZIP
Slide Form
Raw
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>
Raw
ogboRj.markdown
Raw
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);
}
});
});
Raw
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;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment