We Keep Coding

how to stop litepicker from creating multiple instances - javascript

I am creating a simple scheduler and am using litepicker for the date picker. I successfully have the litepicker loading. However having issues when trying to update the dates from an external source causing multiple instances of the litepicker to appear.
General Functionality:
There is a location to select a department
some of these departments have an open-date connected to it.(department 2 for testing purposes)
when selecting a department with open date the litepicker updates the start date to the open date however its been added to a new litepicker instead of the current one showing 2 litepickers in total.
How can I pass the date to litepicker without creating a new litepicker?
I have dropped where I am at in a codepen for code review at https://codepen.io/DigitalDesigner/pen/VwBqRBb
/* Ready Function */
$(function(){
$('.scheduler').each(function(){
let bn = new Scheduler($(this));
});
});
const Scheduler = function(this$obj){
this.$obj = this$obj;
this.init();
};
Scheduler.prototype.init = function init(){
this.location_check();
this.modal_onclick();
this.dept_picker();
//this.createToday();
this.litepicker_modal();
};
Scheduler.prototype.location_check = function location_check(){
let $scheduler_form = this.$obj.find('.scheduler-form');
let $location_field = this.$obj.find('.scheduler-input-department');
let $error_text = this.$obj.find('.submission-error');
$scheduler_form.submit(function(){
if($location_field.val().length == 0){
$error_text.text('Please select a location before submitting');
return false;
}
});
};
Scheduler.prototype.modal_onclick = function modal_onclick(){
let _this = this;
$('.modal-trigger').each(function(){
let target = $(this);
target.on('click',function(){
_this.modal_target(target.attr('rel'));
});
});
this.$obj.find('.close-modal').each(function() {
$(this).on('click', function() {
_this.close_modal();
});
});
};
Scheduler.prototype.modal_target = function modal_target(target){
let _this = this;
let modal_el = this.$obj.find('.scheduler__modal[data-modal="'+target+'"]');
let modal_el_height = this.$obj.find('.scheduler__height',modal_el);
let open_modal = !modal_el.hasClass('scheduler__modal--active');
this.close_modal();
if (open_modal) {
setTimeout(function() {
let extra = 10;
modal_el.show().height(modal_el_height.outerHeight()+ extra);
modal_el.addClass('scheduler__modal--active').height('auto').find('.close-modal').focus();
}, 10);
}
};
Scheduler.prototype.close_modal = function closeModal() {
this.$obj.find('.scheduler__modal--active').each(function () {
$(this).height(0).removeClass('scheduler__modal--active').hide();
});
};
Scheduler.prototype.createToday = function createToday(){
let _this = this;
let today= '';
let checkDateValue = _this.$obj.find('.scheduler-arrival');
checkDateValue.on('change', function(){
if (checkDateValue !== ''){
console.log('date found');
today = checkDateValue.val();
}else {
console.log('no date found');
today = new Date();
}
_this.litepicker_modal(today);
});
};
Scheduler.prototype.litepicker_modal = function litepicker_modal(today) {
let _this = this;
let toDate = new Date();
toDate.setDate(toDate.getDate() + 2);
let nextDay = new Date();
nextDay.setDate(nextDay.getDate() + 2);
let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
const pickerTriggers = document.getElementsByClassName('scheduler__litepicker');
for (let i = 0; i < pickerTriggers.length; i++) {
let months = 2;
let columns = 2;
//modalpicker.destroy();
//modalpicker.hide();
let modalpicker = new Litepicker({
element: pickerTriggers[i],
inlineMode: true,
format: 'YYYY MM DD',
singleMode: false,
numberOfMonths: months,
numberOfColumns: columns,
showTooltip: true,
scrollToDate: true,
minDate: today,
startDate: (!today ? new Date():today),
endDate: toDate,
tooltipText: {
one: 'night',
other: 'nights'
},
tooltipNumber: (totalDays) => {
return totalDays - 1;
},
setup: (modalpicker) => {
// modalpicker.on('before:render', (ui) => {
// destroy(ui);
// show(ui);
// });
modalpicker.on('selected', (startDate, endDate) => {
// Update form fields
let startDateValue = _this.$obj.find('.scheduler-arrival')[0];
let endDateValue = _this.$obj.find('.scheduler-depart')[0];
startDateValue.setAttribute('value', startDate.format('YYYY-MM-DD'));
endDateValue.setAttribute('value', endDate.format('YYYY-MM-DD'));
_this.$obj.find('.checkin').text(startDate.format('MM/DD/YYYY'));
_this.$obj.find('.checkout').text(endDate.format('MM/DD/YYYY'));
// Hide Litepicker
_this.close_modal();
});
}
});
}
};
Scheduler.prototype.dept_picker = function dept_picker(){
let _this = this;
$('.dept').each(function(){
let dept = $(this);
dept.on('click',function(){
// Department Data
let date = $(this).find('.open-date').text();
let name = $(this).find('.dept-name').text();
// Form Fields
let dept_value = $('.department-value');
let arrival_input = $('.scheduler-arrival');
// Update Form & Fields, Close Modal
dept_value.text(name);
if (date != ''){
_this.$obj.find('.checkin').text(date);
_this.$obj.find('.checkout').text('');
_this.createToday();
arrival_input.val(date).change();
} else {
let $error_text = _this.$obj.find('.submission-error');
_this.$obj.find('.checkin').text('Add start date');
arrival_input.val('');
_this.$obj.find('.datepicker').attr('rel','date-modal');
$error_text.text('');
}
if(this.closest('.modal-accordion__item')){
$(".modal-accordion__item").hide();
}
if(this.closest('.department-modal')){
_this.close_modal();
}
});
});
};
/* Layout Styling */
/* Hero Widget */
.scheduler{
box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.15);
margin:0 auto;
padding:24px 40px;
position:relative;
visibility:visible;
padding-top:300px;
}
.submission-error{
text-align:center;
color:#aa0000;
font-family: "Gotham Bold", sans serif;
padding-bottom:24px;
}
.scheduler__fields{
display:grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 20px;
grid-row-gap:28px;
position:relative;
}
.field-block{
display:flex;
gap:20px;
flex:1;
}
.field-block:nth-child(2){
grid-column: span 2;
}
.field-block__inner{
width:100%;
border-bottom:1px solid #000;
}
/* Element Styling */
.bw-mobile-toggle{
background-color: #000;
border:none;
color:#fff;
font-family: "Gotham Bold", sans serif;
font-size: 18px;
letter-spacing:0.06em;
padding:26px 40px;
position:fixed;
bottom:0;
left:0;
text-transform: uppercase;
width:100%;
}
.field-block__title, .modal-accordion__title{
font-family:"Gotham Bold";
font-size:14px;
font-weight:400;
line-height:17px;
letter-spacing: 0.02em;
margin-bottom:8px;
text-transform:uppercase;
}
.bw-icon{
margin-top:-4px;
margin-right:12px;
}
/* promo code styling */
.modal-accordion__value input[type=text]{
border:none;
background:none;
height:unset!important;
padding:0;
width:calc(100% - 42px);
}
.field-block__value, .modal-accordion__value{
font-family:"Gotham Book Regular";
font-weight:500;
font-size:14px;
line-height:15px;
}
.field-block__value input[type=text], .promo-value input[type=text]{
font-family:"Gotham Book Regular";
font-weight:500;
font-size:14px;
line-height:15px;
border: none;
background: none;
height: unset!important;
padding: 0;
width: calc(100% - 42px);
}
.field-block__value input:-webkit-autofill,
.field-block__value input:-webkit-autofill:hover,
.field-block__value input:-webkit-autofill:focus,
.promo-value input:-webkit-autofill,
.promo-value input:-webkit-autofill:hover,
.promo-value input:-webkit-autofill:focus
{
-webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}
.scheduler__submit{
background:#000;
border:none;
color:#fff;
font-family:"Gotham Bold", serif;
font-size: 14px;
font-weight:400;
line-height: 17px;
letter-spacing: -0.01em;
height:51px;
text-transform: uppercase;
width:100%;
}
.submit-container .scheduler__submit{
position:absolute;
bottom:25px;
left:32px;
width:calc(100% - 64px);
}
/* Menu Widget */
/* Modal Styling */
.scheduler__modal {
box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.15);
height: 0;
display: none;
opacity: 0;
transition: opacity 0.35s linear;
padding: 16px 28px;
position: relative;
overflow: visible;
}
.scheduler__modal--active {
position:absolute;
bottom: 100px;
background: #fff;
height: 368px;
opacity: 1;
z-index: 9999999;
}
.close-modal{
background:#fff;
box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.15);
border:none;
border-radius:50% / 50%;
height:26px;
width:26px;
font-size:17px;
font-family: "Gotham Book", sans-serif;
position:absolute;
right:-11px;
text-transform: uppercase;
top:-11px;
z-index:2;
}
.close-icon{
height:22px;
width:22px;
}
.accordion-container{
display:flex;
flex-direction: column;
gap:45px;
}
.checkin-accordion{
margin-bottom:45px;
}
.modal-accordion{
border-bottom:1px solid #000;
background:#fff;
}
.modal-accordion .dept, .modal-accordion .department-selection{
width:100%;
}
/* Modal Positions */
.header-modal{
height:100vh !important;
position:fixed;
padding: 86px 28px 16px 28px;
left:0;
top:0;
visibility: visible !important;
width:100%;
}
.header-modal__container{
overflow-y: auto;
height:90%;
}
.department-modal{
bottom:176px;
left: 36px;
}
#media screen and (min-width:768px) {
}
#media screen and (min-width:1920px) {
}
.department-selection{
max-height:350px;
width:230px;
overflow-y: scroll;
}
.department-selection::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.department-selection::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}
.department-selection::-webkit-scrollbar-thumb
{
background-color: #000000;
}
.dept > .open-date{
display:none;
}
.date-modal{
left: calc(50% - 304px);
bottom:176px;
}
#media screen and (min-width:1280px) {
.department-modal{
bottom:102px;
left: 36px;
}
.date-modal{
left:234px;
bottom:102px;
}
}
.dept{
border:0;
border-bottom:1px solid #000;
background:none;
display:block;
padding:12px 8px;
width:214px;
}
.dept:hover, .dept:focus{
background:#000;
color:#fff;
}.dept:last-of-type{
border-bottom:none;
}
/* Litepicker Styling */
.scheduler__litepicker{
display:none;
visibility:hidden;
}
.litepicker-center {
text-align:center;
}
.litepicker .container__months{
border-radius:0;
box-shadow:none;
}
.litepicker .container__months .month-item-header .button-next-month>svg{
fill:#000;
}
.month-item:nth-of-type(odd) .month-item-header .button-previous-month{
width:22px;
height:22px;
background-image:url('../images/chevron.svg');
visibility:visible;
cursor: pointer;
}
.litepicker .container__days .day-item:hover{
color:#000;
box-shadow: inset 0 0 0 1px #000;
}
.litepicker .container__days .day-item.is-start-date{
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
.litepicker .container__days .day-item.is-end-date{
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
.litepicker .container__days .day-item.is-start-date, .litepicker .container__days .day-item.is-end-date, .litepicker .container__days .day-item.is-in-range{
background-color: #000;
color:#fff;
}
#media screen and (min-width:768px) {
.scheduler{
visibility:visible;
}
}
#media screen and (min-width:1280px) {
.scheduler__fields{
grid-template-columns: repeat(4, 1fr)!important;
}
}
#media screen and (min-width:1920px) {
}
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="scheduler">
<div class="scheduler__inner">
<div class="scheduler__form">
<form action="" method="GET" target="_blank" class="scheduler-form" name="scheduler">
<div class="submission-error"></div>
<input type="hidden" class="scheduler-input-department" name="department" value=""/>
<input type="hidden" class="scheduler-arrival" id="arrivalDate" name="arrive" value="" />
<input type="hidden" class="scheduler-depart" id="departDate" name="depart" value="" />
<div class="scheduler__fields">
<div class="field-block modal-trigger" rel="department-modal">
<div class="field-block__inner">
<div class="field-block__title">
Select A Department
</div>
<div class="field-block__value">
<span class="department-value">Pick a department</span>
</div>
</div>
</div>
<div class="field-block datepicker modal-trigger" rel="date-modal">
<div class="field-block__inner">
<div class="field-block__title">
Start Date
</div>
<div class="field-block__value">
<span class="checkin">Add start date</span>
</div>
</div>
<div class="field-block__inner">
<div class="field-block__title">
End Date
</div>
<div class="field-block__value">
<span class="checkout">Add end date</span>
</div>
</div>
</div>
<div class="field-block">
<div class="field-block__inner">
<button type="submit" class="scheduler__submit">Submit Schedule</button>
</div>
</div>
</div>
</form>
</div>
<!-- Modals -->
<div class="scheduler__modal department-modal" data-modal="department-modal">
<button class="close-modal">X</button>
<div class="department-selection" name="department"></div>
<button class="dept" type="button">
<span class="dept-name">Department 1</span>
<span class="open-date"></span>
</button>
<button class="dept" type="button">
<span class="dept-name">Department 2</span>
<span class="open-date">March 31, 2023</span>
</button>
<button class="dept" type="button">
<span class="dept-name">Department 3</span>
<span class="open-date"></span>
</button>
</div>
<div class="scheduler__modal date-modal" data-modal="date-modal">
<button class="close-modal">X</button>
<div class="scheduler__height">
<input class="scheduler__litepicker">
</div>
</div>
</div>
</section>

So after a tonne of tweaks and researching the various methods and events for litepicker, not to mention a lot of console logs. I have figured out a solution.
First thing I had to do was move the createToday function inside the litepicker function, specifically within the on render event.
From there I was no longer repeatedly calling the litepicker function and as a result was not creating multiple instances.
within the on change function I added the values for the new start and end date and passed them to the litepicker using the setDateRange method
Finally within the dept_picker function I added a .change() within the else statement to update the fields when selecting a department which does not have a date connected to it.
The result is a dynamically populated litepicker datepicker which updates the date range dynamically based on a users selection.
Here is the revised js
/* Ready Function */
$(function(){
$('.scheduler').each(function(){
let bn = new Scheduler($(this));
});
});
const Scheduler = function(this$obj){
this.$obj = this$obj;
this.init();
};
Scheduler.prototype.init = function init(){
this.location_check();
this.modal_onclick();
this.dept_picker();
//this.createToday();
this.litepicker_modal();
};
Scheduler.prototype.location_check = function location_check(){
let $scheduler_form = this.$obj.find('.scheduler-form');
let $location_field = this.$obj.find('.scheduler-input-department');
let $error_text = this.$obj.find('.submission-error');
$scheduler_form.submit(function(){
if($location_field.val().length == 0){
$error_text.text('Please select a location before submitting');
return false;
}
});
};
Scheduler.prototype.modal_onclick = function modal_onclick(){
let _this = this;
$('.modal-trigger').each(function(){
let target = $(this);
target.on('click',function(){
_this.modal_target(target.attr('rel'));
});
});
this.$obj.find('.close-modal').each(function() {
$(this).on('click', function() {
_this.close_modal();
});
});
};
Scheduler.prototype.modal_target = function modal_target(target){
let _this = this;
let modal_el = this.$obj.find('.scheduler__modal[data-modal="'+target+'"]');
let modal_el_height = this.$obj.find('.scheduler__height',modal_el);
let open_modal = !modal_el.hasClass('scheduler__modal--active');
this.close_modal();
if (open_modal) {
setTimeout(function() {
let extra = 10;
modal_el.show().height(modal_el_height.outerHeight()+ extra);
modal_el.addClass('scheduler__modal--active').height('auto').find('.close-modal').focus();
}, 10);
}
};
Scheduler.prototype.close_modal = function closeModal() {
this.$obj.find('.scheduler__modal--active').each(function () {
$(this).height(0).removeClass('scheduler__modal--active').hide();
});
};
Scheduler.prototype.litepicker_modal = function litepicker_modal(today) {
let _this = this;
let toDate = new Date();
toDate.setDate(toDate.getDate() + 2);
let nextDay = new Date();
nextDay.setDate(nextDay.getDate() + 2);
let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
const pickerTriggers = document.getElementsByClassName('scheduler__litepicker');
for (let i = 0; i < pickerTriggers.length; i++) {
let months = 2;
let columns = 2;
let modalpicker = new Litepicker({
element: pickerTriggers[i],
inlineMode: true,
format: 'YYYY MM DD',
singleMode: false,
numberOfMonths: months,
numberOfColumns: columns,
showTooltip: true,
scrollToDate: true,
minDate: today,
startDate: (!today ? new Date():today),
endDate: toDate,
tooltipText: {
one: 'night',
other: 'nights'
},
tooltipNumber: (totalDays) => {
return totalDays - 1;
},
setup: (modalpicker) => {
modalpicker.on('before:show', (ui) => {
let checkDateValue = _this.$obj.find('.scheduler-arrival');
checkDateValue.on('change', function(){
if (checkDateValue !== '' || checkDateValue !== null && checkDateValue !== undefined){
today = checkDateValue.val();
tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 3);
modalpicker.setDateRange(today, tomorrow);
}else {
today = new Date();
tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 3);
modalpicker.setDateRange(today, tomorrow);
}
});
});
modalpicker.on('selected', (startDate, endDate) => {
// Update form fields
let startDateValue = _this.$obj.find('.scheduler-arrival')[0];
let endDateValue = _this.$obj.find('.scheduler-depart')[0];
startDateValue.setAttribute('value', startDate.format('YYYY-MM-DD'));
endDateValue.setAttribute('value', endDate.format('YYYY-MM-DD'));
_this.$obj.find('.checkin').text(startDate.format('MM/DD/YYYY'));
_this.$obj.find('.checkout').text(endDate.format('MM/DD/YYYY'));
// Hide Litepicker
_this.close_modal();
});
}
});
}
};
Scheduler.prototype.dept_picker = function dept_picker(){
let _this = this;
$('.dept').each(function(){
let dept = $(this);
dept.on('click',function(){
// Dept Data
let date = $(this).find('.open-date').text();
let name = $(this).find('.dept-name').text();
// Form Fields
let dept_value = $('.department-value');
let arrival_input = $('.scheduler-arrival');
// Update Form & Fields, Close Modal
dept_value.text(name);
if (date !== ''){
_this.$obj.find('.checkin').text(date);
_this.$obj.find('.checkout').text('');
arrival_input.val(date).change();
} else {
date = new Date();
let $error_text = _this.$obj.find('.submission-error');
_this.$obj.find('.checkin').text('Add start date');
arrival_input.val(date).change();
_this.$obj.find('.datepicker').attr('rel','date-modal');
$error_text.text('');
}
if(this.closest('.modal-accordion__item')){
$(".modal-accordion__item").hide();
}
if(this.closest('.department-modal')){
_this.close_modal();
}
});
});
};
/* Layout Styling */
/* Hero Widget */
.scheduler{
box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.15);
margin:0 auto;
padding:24px 40px;
position:relative;
visibility:visible;
padding-top:300px;
height:500px;
}
.submission-error{
text-align:center;
color:#aa0000;
font-family: "Gotham Bold", sans serif;
padding-bottom:24px;
}
.scheduler__fields{
display:grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 20px;
grid-row-gap:28px;
position:relative;
}
.field-block{
display:flex;
gap:20px;
flex:1;
}
.field-block:nth-child(2){
grid-column: span 2;
}
.field-block__inner{
width:100%;
border-bottom:1px solid #000;
}
/* Element Styling */
.bw-mobile-toggle{
background-color: #000;
border:none;
color:#fff;
font-family: "Gotham Bold", sans serif;
font-size: 18px;
letter-spacing:0.06em;
padding:26px 40px;
position:fixed;
bottom:0;
left:0;
text-transform: uppercase;
width:100%;
}
.field-block__title, .modal-accordion__title{
font-family:"Gotham Bold";
font-size:14px;
font-weight:400;
line-height:17px;
letter-spacing: 0.02em;
margin-bottom:8px;
text-transform:uppercase;
}
.bw-icon{
margin-top:-4px;
margin-right:12px;
}
/* promo code styling */
.modal-accordion__value input[type=text]{
border:none;
background:none;
height:unset!important;
padding:0;
width:calc(100% - 42px);
}
.field-block__value, .modal-accordion__value{
font-family:"Gotham Book Regular";
font-weight:500;
font-size:14px;
line-height:15px;
}
.field-block__value input[type=text], .promo-value input[type=text]{
font-family:"Gotham Book Regular";
font-weight:500;
font-size:14px;
line-height:15px;
border: none;
background: none;
height: unset!important;
padding: 0;
width: calc(100% - 42px);
}
.field-block__value input:-webkit-autofill,
.field-block__value input:-webkit-autofill:hover,
.field-block__value input:-webkit-autofill:focus,
.promo-value input:-webkit-autofill,
.promo-value input:-webkit-autofill:hover,
.promo-value input:-webkit-autofill:focus
{
-webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
}
.scheduler__submit{
background:#000;
border:none;
color:#fff;
font-family:"Gotham Bold", serif;
font-size: 14px;
font-weight:400;
line-height: 17px;
letter-spacing: -0.01em;
height:51px;
text-transform: uppercase;
width:100%;
}
.submit-container .scheduler__submit{
position:absolute;
bottom:25px;
left:32px;
width:calc(100% - 64px);
}
/* Menu Widget */
/* Modal Styling */
.scheduler__modal {
box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.15);
height: 0;
display: none;
opacity: 0;
transition: opacity 0.35s linear;
padding: 16px 28px;
position: relative;
overflow: visible;
}
.scheduler__modal--active {
position:absolute;
bottom: 100px;
background: #fff;
height: 368px;
opacity: 1;
z-index: 9999999;
}
.close-modal{
background:#fff;
box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.15);
border:none;
border-radius:50% / 50%;
height:26px;
width:26px;
font-size:17px;
font-family: "Gotham Book", sans-serif;
position:absolute;
right:-11px;
text-transform: uppercase;
top:-11px;
z-index:2;
}
.close-icon{
height:22px;
width:22px;
}
.accordion-container{
display:flex;
flex-direction: column;
gap:45px;
}
.checkin-accordion{
margin-bottom:45px;
}
.modal-accordion{
border-bottom:1px solid #000;
background:#fff;
}
.modal-accordion .dept, .modal-accordion .department-selection{
width:100%;
}
/* Modal Positions */
.header-modal{
height:100vh !important;
position:fixed;
padding: 86px 28px 16px 28px;
left:0;
top:0;
visibility: visible !important;
width:100%;
}
.header-modal__container{
overflow-y: auto;
height:90%;
}
.department-modal{
bottom:176px;
left: 36px;
}
#media screen and (min-width:768px) {
}
#media screen and (min-width:1920px) {
}
.department-selection{
max-height:350px;
width:230px;
overflow-y: scroll;
}
.department-selection::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
.department-selection::-webkit-scrollbar
{
width: 6px;
background-color: #F5F5F5;
}
.department-selection::-webkit-scrollbar-thumb
{
background-color: #000000;
}
.dept > .open-date{
display:none;
}
.date-modal{
left: calc(50% - 304px);
bottom:176px;
}
#media screen and (min-width:1280px) {
.department-modal{
bottom:102px;
left: 36px;
}
.date-modal{
left:234px;
bottom:102px;
}
}
.dept{
border:0;
border-bottom:1px solid #000;
background:none;
display:block;
padding:12px 8px;
width:214px;
}
.dept:hover, .dept:focus{
background:#000;
color:#fff;
}.dept:last-of-type{
border-bottom:none;
}
/* Litepicker Styling */
.scheduler__litepicker{
display:none;
visibility:hidden;
}
.litepicker-center {
text-align:center;
}
.litepicker .container__months{
border-radius:0;
box-shadow:none;
}
.litepicker .container__months .month-item-header .button-next-month>svg{
fill:#000;
}
.month-item:nth-of-type(odd) .month-item-header .button-previous-month{
width:22px;
height:22px;
background-image:url('../images/chevron.svg');
visibility:visible;
cursor: pointer;
}
.litepicker .container__days .day-item:hover{
color:#000;
box-shadow: inset 0 0 0 1px #000;
}
.litepicker .container__days .day-item.is-start-date{
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
.litepicker .container__days .day-item.is-end-date{
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
.litepicker .container__days .day-item.is-start-date, .litepicker .container__days .day-item.is-end-date, .litepicker .container__days .day-item.is-in-range{
background-color: #000;
color:#fff;
}
#media screen and (min-width:768px) {
.scheduler{
visibility:visible;
}
}
#media screen and (min-width:1280px) {
.scheduler__fields{
grid-template-columns: repeat(4, 1fr)!important;
}
}
#media screen and (min-width:1920px) {
}
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="scheduler">
<div class="scheduler__inner">
<div class="scheduler__form">
<form action="" method="GET" target="_blank" class="scheduler-form" name="scheduler">
<div class="submission-error"></div>
<input type="hidden" class="scheduler-input-department" name="department" value=""/>
<input type="hidden" class="scheduler-arrival" id="arrivalDate" name="arrive" value="" />
<input type="hidden" class="scheduler-depart" id="departDate" name="depart" value="" />
<div class="scheduler__fields">
<div class="field-block modal-trigger" rel="department-modal">
<div class="field-block__inner">
<div class="field-block__title">
Select A Department
</div>
<div class="field-block__value">
<span class="department-value">Pick a department</span>
</div>
</div>
</div>
<div class="field-block datepicker modal-trigger" rel="date-modal">
<div class="field-block__inner">
<div class="field-block__title">
Start Date
</div>
<div class="field-block__value">
<span class="checkin">Add start date</span>
</div>
</div>
<div class="field-block__inner">
<div class="field-block__title">
End Date
</div>
<div class="field-block__value">
<span class="checkout">Add end date</span>
</div>
</div>
</div>
<div class="field-block">
<div class="field-block__inner">
<button type="submit" class="scheduler__submit">Submit Schedule</button>
</div>
</div>
</div>
</form>
</div>
<!-- Modals -->
<div class="scheduler__modal department-modal" data-modal="department-modal">
<button class="close-modal">X</button>
<div class="department-selection" name="department"></div>
<button class="dept" type="button">
<span class="dept-name">Department 1</span>
<span class="open-date"></span>
</button>
<button class="dept" type="button">
<span class="dept-name">Department 2</span>
<span class="open-date">March 31, 2023</span>
</button>
<button class="dept" type="button">
<span class="dept-name">Department 3</span>
<span class="open-date"></span>
</button>
</div>
<div class="scheduler__modal date-modal" data-modal="date-modal">
<button class="close-modal">X</button>
<div class="scheduler__height">
<input class="scheduler__litepicker">
</div>
</div>
</div>
</section>
UPDATE: I have changed on render to on before:show as this seems to run faster. when testing.

Related

Most of the examples I've seen on the subject have people manipulating input boxes to increment and update the total price accordingly.
My dilemma is that I am using two divs and I am trying to increment the price further when the user checks off the input related to the router option, which only appears if they have either Gigabit or Basic internet selected.
I've set up custom data-attributes data-price=val" for the three items, and I've also managed to at least update the total price when either of the two boxes are selected. I just can't figure out how best to go about incrementing the input/checkbox price onto the total (if checked).
JSFiddle for reference: https://jsfiddle.net/976dc1xd/
Any help/input is greatly appreciated.
Thanks,
-M
var raceInternet = false;
var racePhone = false;
var raceTv = false;
var $internetDiv = $('#race-internet > .itembox'),
$targetRouter = $('.router-container'),
$continueDiv = $('#int-continue');
$(function() {
$internetDiv.on('click', function(){
$(this).toggleClass('user-selected').siblings().removeClass('user-selected');
if($internetDiv.hasClass('user-selected')) {
$targetRouter.slideDown(300);
$continueDiv.text('Continue');
raceInternet = true;
} else {
$('#check1').prop('checked', false);
$targetRouter.slideUp(300);
$continueDiv.text('Continue without Internet');
raceInternet = false;
}
})
});
// Function to increment Total
$(function() {
var total = 0;
$internetDiv.on('click', function() {
if($(this).is('.user-selected')) {
total = $(this).data('price');
} else if ($(this).not('.user-selected')) {
total = 0;
}
$('.int-price').text('$' + total + '/mo');
})
})
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
p {
font-size:16px;
}
h2 {
color:#787878;
font-weight:700;
}
.divider {
background-color:#e8e8e8;
height:2px;
}
.prime-aux {
position:relative;
padding:15px;
-webkit-box-shadow: 3px 3px 2px 0px rgba(0,0,0,0.13);
-moz-box-shadow: 3px 3px 2px 0px rgba(0,0,0,0.13);
box-shadow: 3px 3px 2px 0px rgba(0,0,0,0.13);
overflow:hidden;
}
.itembox-container {
display:flex;
}
.boxes-2 {
width:calc((100% - 25px)/2);
margin:10px;
padding: 10px;
}
.itembox {
position:relative;
display:inline-block;
border:5px solid #e8e8e8;
border-radius:10px;
cursor:pointer;
}
.user-selected {
border:5px solid #E16E5B;
}
.itembox h4 {
color:#22ddc0;
font-weight:700;
}
span.price {
display:inline-block;
font-weight:700;
float:right;
color:#22ddc0;
}
.itembox > ul {
list-style: none;
}
.itembox > ul > li {
line-height:3;
}
.radial {
position:absolute;
float:right;
height:35px;
width:35px;
padding:2px;
border:5px solid #e8e8e8;
border-radius:50%;
top:43%;
right:10px;
}
.itembox .center-dot {
display:none;
position:relative;
height:21px;
width:21px;
background-color:#E16E5B;
border-radius:50%;
}
.itembox.user-selected .center-dot{
display: block;
}
/* ===(Internet) Router Item === */
#check1:not(:checked),
#check1:checked {
position:absolute;
left:-99999px;
}
#check1:not(:checked) + label,
#check1:checked + label {
position: relative;
padding-left:50px;
font-size:18px;
cursor: pointer;
}
/* checkbox aspect */
#check1:not(:checked) + label:before,
#check1:checked + label:before {
content: '';
position: absolute;
left:10px;
top:0;
width: 25px;
height: 25px;
border: 5px solid #e8e8e8;
border-radius: 5px;
}
/* checked mark aspect */
#check1:not(:checked) + label:after,
#check1:checked + label:after {
content: '■';
position: absolute;
top:-15px;
left:13px;
font-size: 35px;
color: #E16E5B;
}
/* checked mark aspect changes */
#check1:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
#check1:checked + label:after {
opacity: 1;
transform: scale(1);
}
/* disabled checkbox */
#check1:disabled:not(:checked) + label:before,
#check1:disabled:checked + label:before {
box-shadow: none;
border-color: #bbb;
background-color: #ddd;
}
#check1:disabled:checked + label:after {
color: #999;
}
#check1:disabled + label {
color: #aaa;
}
#check1:checked ~ span {
color:#22ddc0;
}
.router-container {
display:none;
height:100%;
}
.router-item {
margin:25px 0;
max-width:525px;
-webkit-animation-delay:.5s;
-moz-animation-delay:.5s;
animation-delay:.5s;
}
.router-item label {
color:#787878;
}
.router-item span {
float:right;
color:#787878;
font-size:18px;
font-weight:700;
}
/* === Price Bar === */
.price-bar:before {
content:'';
display:block;
background:#e8e8e8;
height:1px;
margin:10px;
}
.price-bar p {
position:relative;
margin:0;
top:5px;
left:10px;
float:left;
}
/* === Continue Button === */
.continue {
display:inline-block;
font-size: 18px;
color:#fff;
background-color:#E16E5B;
border:0;
border-radius:0;
float:right;
margin-right:10px;
}
.continue:hover {
color:#fff;
background-color:#E16E5B;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container main"><!-- Primary Content Container -->
<div class="prime-aux">
<h2>Internet</h2>
<hr class="divider"/>
<div id="race-internet" class="itembox-container">
<div class="itembox boxes-2 noselect" data-price="60">
<h4>Gigabit Internet <span class="price">$60/mo</span></h4>
<ul>
<li>1,000 Mbps</li>
<li> No data caps</li>
</ul>
<div class="radial">
<div class="center-dot"></div>
</div>
</div>
<div class="itembox boxes-2 noselect" data-price="25">
<h4>Basic Internet <span class="price">$25/mo</span></h4>
<ul>
<li>25 Mbps</li>
<li>No data caps</li>
</ul>
<div class="radial">
<div class="center-dot"></div>
</div>
</div>
</div>
<div class="router-container clear">
<div class="router-item animated pulse">
<input id="check1" type="checkbox" name="check" value="check1" data-price="10"/>
<label class="noselect" for="check1">Add Wi-Fi Router</label>
<span class="price">+ $10/mo</span>
</div>
</div>
<div class="price-bar">
<p>Total: <span class="int-price">$0/mo</span></p>
<div id="int-continue" class="continue btn">Continue without Internet</div>
</div>
</div><!-- First Prime Aux End -->
</section> <!-- Primary Content Container End -->

I'd suggest you to centralize logic, what I did here was to abstract the updatePrice function and bind it to the onClick method to both $routerCheck and $internetDiv selectors.
var $internetDiv = $('#race-internet > .itembox'),
$routerCheck = $('#check1'),
$targetRouter = $('.router-container'),
$continueDiv = $('#int-continue');
$(function() {
$internetDiv.on('click', updatePrice);
$routerCheck.on('click', updatePrice);
})
function updatePrice() {
var total = $('.user-selected').data('price') || 0;
if ($routerCheck.prop('checked'))
total += $routerCheck.data('price');
$('.int-price').text('$' + total + '/mo');
}

I created a rotating user review box using jquery to run the code to choose a random review, display it for 7 seconds, hide it and replace it with a new review.
I created a fiddle at https://jsfiddle.net/qe2mqx06/1/
The function essentially runs fine for about 5 minutes depending on which browser is being used.
It initiates when the div is ready. The function chooses a random review numbered 0 to 5. It checks that this review was not previous one viewed. It removes the previous review, displays the new review, waits 7 seconds and then runs the function again carrying the current review number as a variable which becomes the previous variable.
When it runs the review is displayed as well as the new number and the previous number for testing purposes.
It runs nicely and the numbers change and the review changes. Reviews are not repeated because when it chooses a new number that equals the previous, a new number is chosen. Then all of a sudden, the reviews don't show up anymore although the numbers change or the numbers change without the 7 second timing. Ultimately causing jquery to throw an error and crash.
Here is the code:
<span id="dddd"></span>
<div class="tp_box2">
<div class="tp-box horizontal" id="tp-iframe-widget" style="overflow:hidden">
<section class="reviews">
<div id="tpslides0" style="margin-top: 0px; height:100px">
<div style="position:relative;display:block;height:100px;padding:6px;overflow:hidden;width:99%">
<h1>4.5 stars</h1>
</div>
</div>
<div id="tpslides1" style="margin-top: 0px; height:100px">
<div style="position:relative;display:block;height:100px;padding:6px;overflow:hidden;width:99%">
<h1>4.0 stars</h1>
</div>
</div>
<div id="tpslides2" style="margin-top: 0px; height:100px">
<div style="position:relative;display:block;height:100px;padding:6px;overflow:hidden;width:99%">
<h1>3.5 stars</h1>
</div>
</div>
<div id="tpslides3" style="margin-top: 0px; height:100px">
<div style="position:relative;display:block;height:100px;padding:6px;overflow:hidden;width:99%">
<h1>3.0 stars</h1>
</div>
</div>
<div id="tpslides4" style="margin-top: 0px; height:100px">
<div style="position:relative;display:block;height:100px;padding:6px;overflow:hidden;width:99%">
<h1>2.5 stars</h1>
</div>
</div>
</section>
</div>
</div>
And the jquery - I am using v2.1.3 but it also crashes on 1.11 and 1.10
function rotate_tp(previousslide) {
$activeslide = Math.floor((Math.random() * 5));
$('#dddd').html($activeslide + ' ' + previousslide);
if( $activeslide == previousslide) { $activeslide = ""; rotate_tp(previousslide); };
$('#tpslides'+previousslide).hide().css('z-index','-1'); $('#tpslides'+$activeslide).css('z-index','100').fadeTo( "slow" , 1);
setTimeout(function() { rotate_tp($activeslide); }, 7000);
};
$('#tp_box2').ready(
function(){
$("[id^=tpslides]").hide().css('z-index','-1');
rotate_tp();
});
The css for those that might want to see it:
p:first-letter, h3:first-letter { text-transform: capitalize; }
.tp-box
{
font-size: 11px;
background:#F7F7F7;
display:block;
float:right;
color:#666;
position:relative;
width:100%;
border-top:1px solid transparent;
border-bottom:1px solid transparent;
background: #f1ebe8;
transition: all 4s;
-webkit-transition: all 4s;
-moz-transition: all 4s;
}
.tp-box a {
color:#666;
}
.tp-box:hover
{
border-top:1px solid #E5E2D7;
border-bottom:1px solid #E5E2D7;
background: #F7F9F8;
transition: all 4s;
-webkit-transition: all 4s;
-moz-transition: all 4s;
}
.tp-box.horizontal{
float: none ;
clear: both ;
max-height: 100px !important;
height:86px;
}
.tp-box header {
text-align:center;
padding:6px 10px 12px;
}
.tp-box.horizontal header{
float: left ;
}
.tp-box header h1 {
font:bold 2.182em/1.255em sans-serif;
margin:0;
}
.tp-box header p.review-count {
margin:5px 0 0;
}
.tp-box .review-count a {
text-decoration:none;
}
.tp-box section.reviews h1 {
background:#DDDDDD;
font-size:1.273em;
font-weight:700;
color:#444444;
padding:5px 10px;
margin-bottom: 10px ;
}
.tp-box section.reviews {
display:block;
overflow:hidden;
margin:0;
}
.tp-box.horizontal section.reviews{
height: 100px ;
overflow: hidden ;
}
.tp-box section.reviews article {
/* border:1px solid #DDDDDD;
border-radius:4px;*/
margin:0px 10px 10px 0px;
padding:3px 0px 10px 0px;
position: relative ;
/*clear: both ;*/
float:left;
/* width:180px;
( overflow:hidden;*/
}
.tp-box section.reviews article a {
color:#CE5600;
}
.tp-box section.reviews article:last-child {
border-bottom:none;
margin-bottom:0;
}
.tp-box time {
display:block;
-moz-opacity:0.6;
opacity:0.6;
position:absolute;
top:0;
right:0;
text-transform:uppercase;
}
.tp-box h3 {
clear:both;
color:#444444;
font-size:1.091em;
font-weight:700;
padding:6px 0 0;
}
.tp-box p.desc {
padding:0 0 0px;
}
.tp-box img.user-img {
float:left;
padding:0 6px 0 0;
}
.tp-box p.author {
position:relative;
font-style:italic;
top:-2px;
}
.tp-box a.footer {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size:11px;
font-weight:700;
display: block ;
margin:0px auto;
width:90px;
text-transform:uppercase;
text-decoration:none;
color:#000;
line-height: 22px ;
padding-left: 12px ;
background: #DDD url(https://github.com/trustpilot/developers/raw/master/assets/img/icon_flat_mini.png) 2px center no-repeat;
}
.tp-box a.footer span.pilot {
color:#444;
}

After you do your check to see if the active and previous slides are the same, you don't return from the method. This means that it continues execution, sets a timer for another method call, and you are getting weirdness because of it.
if( $activeslide == previousslide) { $activeslide = ""; rotate_tp(previousslide);};
Add a return statement in here:
if( $activeslide == previousslide) { $activeslide = ""; rotate_tp(previousslide); return;};

In my Application Everything Work Fine add/edit but my main Problem is IF i am on a 'agendaWeek' of Fullcalendar and try to submit or cancel the form then it is going to Month View
Updated Code:
JAVASCRIPT:
<script>
var globalEvent = null;
$(document).ready(function() {
var count=0;
var liveDate=new Date();
var dat = new Date();
var d = dat.getDate();
var m = dat.getMonth();
var y = dat.getFullYear();
var calendar = $('#calendar').fullCalendar({
selectable: true,
selectHelper: true,
select: function(startDate, endDate, allDay, jsEvent, view) {
var startDate1=$.fullCalendar.formatDate(startDate, "yyyy-MM-dd HH:mm:ss");
var endDate1=$.fullCalendar.formatDate(endDate, "yyyy-MM-dd HH:mm:ss");
document.getElementById('mode').innerHTML = "ADD :"+"<img src='<?php echo base_url();?>/assets/images/close.png' style='float:right; height:35px; width:35px; margin-top:-7px;' id='closeimg' name='closeimg'>";
document.getElementById('starting').innerHTML = startDate1;
document.getElementById('ending').innerHTML = endDate1;
$("#ginger").show();
$("#closeimg").click(function(){
$("#ginger").hide();
});
$("#eventName").focus();
$("#submit").click(function(){
var title=$("#eventName").val();
calendar.fullCalendar('renderEvent',{
title: title,
start: startDate1,
end: endDate1,
allDay: false},
true // make the event "stick"
);
var dataString={};
dataString['eventName']=title;
dataString['startTime']=startDate1;
dataString['endTime']=endDate1;
$.ajax({
type : 'POST',
dataType : 'json',
url : '<?php echo base_url(); ?>data/insert',
data: dataString,
success: function(data) {
alert("data insert SuccessFully1");// I get this alert
var currentView = calendar.fullCalendar('getView');
calendar.fullCalendar('refetchEvents');
calendar.fullCalendar('changeView', currentView.name)
calendar.fullCalendar('unselect');
calendar.fullCalendar('refetchEvents');
$("#ginger").hide();
if(data.success){
alert("Data insert suceessfully 2");// i can't get this alert
}
}
});
});
},
});
});
</script>
CSS:
body {
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 70%;
margin: 0 auto;
}
#popup{
padding-left: 0%; padding-top:17%; display: block; top: 0; left: 37%; z-index:1007; opacity: 1; transform: scale(1);
height: auto;
overflow: auto;
position: absolute;
width:auto;
}
#data{
background-color: #ffffff;
color:#585858;
width:400px;
display:block;
z-index: 100;
padding:0px;
font-family: arial;
font-weight: bold;
border-radius: 7px 7px 0px 0px;
border:1px solid #C5C5C5;
}
#popup textarea{
width:200px;
height:60px;
border-radius: 5px;
vertical-align: top;
}
#detail{
/* display: none;*/
position:fixed;
top:0;
left:0;
z-index:1;
width:100%;
height:100%;
background-color:#000;
filter:alpha(opacity=50);
opacity:.5;
}
.mode{
width:99%;
background-color: #8DB3CC;
background-image:url("<?php echo base_url();?>assets/kendou/styles/textures/highlight.png");
background-position: 0 center;
background-repeat: repeat-x;
height:30px;
padding: 5px 0px 0px 5px;
font-size: 15px;
font-weight:normal;
border-bottom:1px solid #C5C5C5;
border-radius: 7px 7px 0px 0px;
}
.dropdown{
border-style: solid;
border-width: 1px;
padding: 2px 22px 2px 2px;
display: block;
cursor: default;
position: relative;
text-align: right;
line-height:1px;
border-radius: 2px 2px 2px 2px;
color: #2E2E2E;
border-color: #C5C5C5;
}
HTML :
<div class="wrapper">
<div id='calendar'></div>
<div style="display:none;" id="ginger">
<div id="detail"> </div>
<form name="addData" id="addData" action="" method="post">
<div id="popup">
<div id="data">
<div id="mode" value="" class="mode">
<!--<img src="<?php echo base_url();?>/assets/images/close.png" style="float:right;"/>-->
<img src="<?php echo base_url();?>/assets/images/logo.png">
</div><br>
<div style="padding:10px;">
<label for="timing">Timing: <span id="starting"></span> to <span id="ending"></span></label><br><br>
<label for="eventName">Description : </label>
<textarea name="eventName" id="eventName"type="text" value=""></textarea><br><br>
<label for="AgentName"><b>Agent Name*</b></label>
<input name="AgentName" id="AgentName"/>
<label for="UserName">UserName : </label>
<select name="UserName" id="UserName" value=""></select><br><br>
<input type="button"class="k-button" name="submit" id="submit" value="submit">//Changes here
<input type="reset" name="reset" class="k-button" id="reset" value="Reset">//changes here
<input type="button"class="k-button" name="cancel" id="cancel" value="Cancel">//changes here
</div>
</div>
</div>
</form>
</div>
</div>

You can combine getView and changeView:
//remember current view
var currentView = calendar.fullCalendar('getView');
calendar.fullCalendar('refetchEvents');
//set view type
calendar.fullCalendar('changeView', currentView.name)

Have been doing a codeacademy course http://www.codecademy.com/ru/courses/javascript-lesson-951/0?curriculum_id=4fc3018f74258b0003001f0f#!/exercises/6 - making a vertical sliding pannel.
The problem is that these codeacademy guys didn't explain how to make the pannel not only slide down, but also slide back up. I tried to do it myself, but didnt achieve anything. Please help.
$(document).ready(function(){
ANIMATION_LENGTH = 400;
$panel = $("#panel");
$tab = $("#tab");
var $isShown;
$tab.click(function($isShown){
alert($isShown);
if ($isShown == false)
{$isShown = true;}
else if ($isShown == true)
{$isShown = false;}
var newTop = $isShown == false ? "-180px" : "0px";
var lit = {"top": newTop};
$panel.animate(lit, ANIMATION_LENGTH);
return $isShown
});});
CSS
#panel {
padding: 50px;
height: 100px;
width: 500px;
text-align: center;
font-size: 24px;
font-family: Arial;
font-weight: bold;
background: #EEE;
cursor: pointer;
position:absolute;
top: -180px;
-webkit-border-bottom-left-radius: 10px;
}
#tab {
position:absolute;
bottom: -25px;
right: 0px;
padding: 10px;
background: #EEE;
font-size: 16px;
text-decoration: none;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}
HTMl
<html>
<head>
<title>Result</title>
<link type="text/css" rel="stylesheet" href="panel.css" />
<script type="text/javascript" src="panel.js"></script>
</head>
<body>
<div id="panel">
Awesome hidden sliding pane
Click to show
</div>
</body>

This is how I would approach the problem:
http://jsfiddle.net/du8z8/3/
HTML
<div class="con">
<div id="tab">Click to Show</div>
<div id="panel" style="display:none;">
<p>Awesome hidden sliding pane</p>
<div id="close">Close</div>
</div>
</div>
JQUERY
$("#tab").click(function() {
$("#tab").toggle();
$("#panel").slideToggle('slow');
});
$("#close").click(function() {
$("#tab").toggle();
$("#panel").slideToggle('slow');
});
CSS
.con { position:relative; }
#tab {
position:absolute;
top:0px;
right:20px;
padding: 10px;
background: #EEE;
font-size: 16px;
text-decoration: none;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
cursor:pointer;
}
#close { padding:10px 0 0 0; font-size:0.750em; }
#panel {
padding:50px;
width:100%;
text-align:center;
font-size:1em;
font-family:Arial;
font-weight:bold;
background:#EEE;
cursor:pointer;
-webkit-border-bottom-left-radius:10px;
}
​

The click listener gets an event passed, not your boolean.
$(document).ready(function(){
var $isShown,
ANIMATION_LENGTH = 400,
$panel = $("#panel"),
$tab = $("#tab");
$tab.click(function(event){
event.preventDefault();
$isShown = !$isShown;
var newTop = $isShown == false ? "-180px" : "0px";
var lit = {"top": newTop};
$panel.animate(lit, ANIMATION_LENGTH);
});
});

I can't seem to figure this out.
I have a modal keypad that will submit to a php form that will send an EMAIL sms with information regarding the website.
I want people to be able to click on the keypad to insert value's into the text field area. Similar to like using a phone.
My HTML:
<script src="http://www.busetopizza.com/demo/phone.js" type="text/javascript"></script>
<!-- Send To Phone -->
<form action="phpmailer.php" method="post" name="theform">
<input type="hidden" name="redirect" value="message_success.php">
<div class="send-to-phone-wrapper">
<div class="send-to-phone">
<div class="phone-top">
<input type="text" id="phone" name="10digit" class="phone-enter-number" placeholder="Mobile Number"></div>
<div class="buttons-wrapper">
<div class="phone-button"><p>1<br /><span></span></p></div>
<div class="phone-button"><p>2<br /><span>ABC</span></p></div>
<div class="phone-button"><p>3<br /><span>DEF</span></p></div>
<div class="phone-button"><p>4<br /><span>GHI</span></p></div>
<div class="phone-button"><p>5<br /><span>JKL</span></p></div>
<div class="phone-button"><p>6<br /><span>MNO</span></p></div>
<div class="phone-button"><p>7<br /><span>PQR</span></p></div>
<div class="phone-button"><p>8<br /><span>STU</span></p></div>
<div class="phone-button"><p>9<br /><span>VXZ</span></p></div>
<div class="phone-button-fix"><div class="phone-star"></div></div>
<div class="phone-button"><p>0<br /><span style="font-size:23px; font-weight:100;">+</span></p></div>
<div class="phone-button-fix"><div class="phone-pound"></div></div>
</div>
<div class="choose-carrier-wrapper">
<div class="choose-carrier">
<select name="carrier" class="choose-carrier-selections">
<option value="none" class="choose-styled"></option>
<option value="att" class="choose-styled">AT&T</option>
<option value="alltel" class="choose-styled">Alltel</option>
<option value="cingular" class="choose-styled">Cingular</option>
<option value="nextel" class="choose-styled">Nextel</option>
<option value="sprint" class="choose-styled">Sprint</option>
<option value="suncom" class="choose-styled">SunCom</option>
<option value="tmobile" class="choose-styled">T-mobile</option>
<option value="voicestream" class="choose-styled">VoiceStream</option>
<option value="verizon" class="choose-styled">Verizon</option>
</select>
</div>
<div class="phone-submit"><input type="submit" value="" name="submit" class="submit-phone"></div>
</div>
</div>
</div>
</form>
<!-- End Send To Phone -->
My CSS:
/* Send To Phone
---------------------------------------------------------------------------------*/
.send-to-phone-wrapper {
width:319px;
margin:0 auto;
}
.send-to-phone {
width:322px;
padding:15px;
background-color:#000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
box-shadow: 0px 10px 30px #000;
-webkit-box-shadow: 0px 10px 30px #000;
-moz-box-shadow: 0px 10px 30px #000;
}
.phone-top {
}
.buttons-wrapper {
width:321px;
height:268px;
background-color:#fff;
border-right:1px solid #2d3136;
}
.phone-button {
float:left;
text-align:center;
border-bottom:1px solid #000;
border-left:1px solid #2d3136;
border-right:1px solid #151b22;
position:relative;
}
.phone-button-fix {
float:left;
text-align:center;
border-bottom:1px solid #000;
border-left:1px solid #2d3136;
border-right:1px solid #151b22;
position:relative;
height:66px;
width:105px;
background:url(http://www.busetopizza.com/demo/sendtophone/bg-keypad.gif) repeat-x;
}
.phone-button p {
color:#FFF;
font-size:30px;
padding-top:14px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
line-height:23px;
}
.phone-button p span {
color:#878b90;
font-size:14px;
text-shadow:0px -1px 0px #000;
}
.phone-button a:link, .phone-button a:visited {
text-decoration:none;
display:block;
height:66px;
width:105px;
background:url(http://www.busetopizza.com/demo/sendtophone/bg-keypad.gif) repeat-x;
}
.phone-button a:hover {
background:url(http://www.busetopizza.com/demo/sendtophone/bg-keypad2.gif) repeat-x;
text-decoration:none;
}
.phone-button a:active {
background-image:none;
background-color:#3559c3;
}
.phone-button a:hover span {color:#9ac2fa;}
.phone-button a:active p {text-shadow:0px 0px 5px #000;}
.phone-star {
height:24px;
width:25px;
background:url(http://www.busetopizza.com/demo/sendtophone/phone-star.gif) no-repeat;
position:absolute;
top:15px;
left:39px;
}
.phone-pound {
height:24px;
width:25px;
background:url(http://www.busetopizza.com/demo/sendtophone/phone-pound.gif) no-repeat;
position:absolute;
top:15px;
left:40px;
}
.phone-enter-number {
border:none;
text-align:center;
font-size:35px;
font-weight:bold;
text-shadow:0px 2px 0px #fff;
font-family:Arial, Helvetica, sans-serif;
height:73px;
width:322px;
background:url(http://www.busetopizza.com/demo/sendtophone/bg-top.gif) repeat-x;
}
.choose-carrier-wrapper {
height:64px;
position:relative;
width:322px;
background:url(http://www.busetopizza.com/demo/sendtophone/bg-choose.gif) repeat-x;
}
.choose-carrier {
width:215px;
overflow:hidden;
}
.choose-carrier-selections {
background:url(http://www.busetopizza.com/demo/sendtophone/phone-carrier.gif) repeat-x;
border:none;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
position:absolute;
top:0;
left:0;
width:230px;
height:63px;
padding-top:42px;
padding-left:27px;
cursor:pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size:14px;
font-weight:bold;
background-color:#000;
color:#fff;
}
.choose-styled {
}
.submit-phone {
height:64px;
width:107px;
background:url(http://www.busetopizza.com/demo/sendtophone/send.gif) repeat-x;
border:none;
position:absolute;
top:0;
right:0;
cursor:pointer;
}
I created a jfiddle
http://jsfiddle.net/muhupower/nkmXe/1/
I have tried many time with random online scripts. I am able to get the value inputting into the form from a link but all the scripts then replace the form with the other value I hit. So if I type 516 my end result is 6.. I need it to continue to populate the form.
Any help?

Here is the code to place the numbers inside the input:
var i = 0;
var num = [];
$(".buttons-wrapper a").click(function(e) {
e.preventDefault();
if($(this).attr("href") == "clear") {
num = [];
$("#phone").val(num);
i=0;
}
else if($(this).attr("href") == "delete") {
i--;
var str = $("#phone").val();
console.log(str);
if(num.length == 3) {
str = str.substring(0, str.length-3).substring(1, str.length);
}
else if(num.length == 6) {
str = str.substring(0, str.length-2);
}
else {
str = str.substring(0, str.length-1);
}
$("#phone").val(str);
num.splice(i, 1);
}
else {
if(num.length <= 9) {
num[i] = $(this).attr("href");
if(num.length == 3) {
$("#phone").val("("+$("#phone").val()+num[i]+")-");
}
else if(num.length == 6) {
$("#phone").val($("#phone").val()+num[i]+"-");
}
else {
$("#phone").val($("#phone").val()+num[i]);
}
i++;
}
}
});
And a fiddle demonstrating it: http://jsfiddle.net/nkmXe/11/