This simple jquery user review box crashes after about 5 minutes

This simple jquery user review box crashes after about 5 minutes - javascript

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;};

Related

how to stop litepicker from creating multiple instances

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.

How can I increment the price using a combination of div elements and inputs?

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');
}

How to make a cross close sign in popup

I have used a popup script so that popup appear on my screen when I load my html file now I want a close sign on the top right corner on the popup screen like in the picture shown below
The code I have used is
("jsfiddle.net/sGeVT/10/")
this script code is an example of my code I have further modified it but the basic of the popup is same.
Hope you understand and can give solution.

(1) Add a span with a x inside, × the best looking one IMO.
<span class="deleteMeetingClose">×</span>
(2) Set up some styles for it.
.deleteMeetingClose {
font-size: 1.5em;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
(3) Add it to the jQuery code along with other close triggers.
$('#overlay, .deleteMeetingCancel, .deleteMeetingClose').click(function () {
//close action
});
Updated demo: http://jsfiddle.net/zj0yL9me/
$('.deleteMeeting').click(function () {
$('#overlay').fadeIn('slow');
$('#popupBox').fadeIn('slow');
$('#popupContent').fadeIn('slow');
});
// added .deleteMeetingClose into the selectors
$('#overlay, .deleteMeetingCancel, .deleteMeetingClose').click(function () {
$('#overlay').fadeOut('slow');
$('#popupBox').fadeOut('slow');
$('#popupContent').fadeOut('slow');
});
$('.deleteMeetingButton').click(function () {
$('#popupContent').fadeOut('slow');
$('#deleteMeetingConfirmDeleted').fadeIn('slow');
$('#overlay').delay(1300).fadeOut('slow');
$('#popupBox').delay(1300).fadeOut('slow');
$('#deleteMeetingConfirmDeleted').fadeOut('slow');
});
#overlay {
display:none;
opacity:0.5;
background-color:black;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index: 999;
}
#popupBox {
display:none;
position: relative;
margin-left:auto;
margin-right:auto;
margin-top:100px;
width:600px;
height: 500px;
color: #000000;
border:5px solid #4E93A2;
-moz-border-radius:8px;
-webkit-border-radius:8px;
background-color:#FFFFFF;
z-index: 1000;
}
#popupContent {
display:none;
font-family:Arial, Helvetica, sans-serif;
color: #4E93A2;
margin-top:30px;
margin-left:30px;
margin-right:30px;
}
.deleteMeetingButton {
clear:both;
cursor:pointer;
width:90px;
height:30px;
border-radius: 4px;
background-color: #5CD2D2;
border:none;
text-align:center;
line-height:10px;
color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
}
.deleteMeetingCancel {
clear:both;
cursor:pointer;
width:90px;
height:30px;
border-radius: 4px;
background-color: #5CD2D2;
border:none;
text-align:center;
line-height:10px;
color:#FFFFFF;
font-size:11px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
content:"XXXX";
}
#deleteMeetingConfirmDeleted {
display:none;
}
/* added code below */
.deleteMeetingClose {
font-size: 1.5em;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="content">Content Obscured By Overlay
<button class="deleteMeeting">Delete</button>
</div>
<div id="overlay"></div>
<div id="popupBox">
<div id="popupContent">
<i>Are you sure you want to delete this meeting?</i>
<br />
<span style="text-align:center;color:black;font-size:40px;">YO</span>
<br />
<button class="deleteMeetingButton">Delete</button>
<button class="deleteMeetingCancel">Cancel</button>
</div>
<div id="deleteMeetingConfirmDeleted">Meeting Deleted</div>
<span class="deleteMeetingClose">×</span> <!-- <= added this line -->
</div>

First, put in image element in your popup div
<img id="ClosePopup" src="insert-image-url-here"/>
Then, style it with position:absolute. Also, make sure the popup div has position:relative
#ClosePopup{
position: absolute;
right:0px;
}
Finally, attach your click handler
$('#ClosePopup').click(function(){
$('#overlay,#popupBox,#popupContent').fadeOut('slow');
});
See it working in this fiddle
If you want a pure css solution without images, see
Pure css close button

Simply create a span element containing × char for the x, put some style and bind the click event to the popup close action:
HTML
<span class="cancel-icon" >×</span>
CSS:
.cancel-icon{
float:right;
cursor:pointer;
}
JS
$('.cancel-icon').click(function () {
//Close the popup
});
Using your Fiddle: http://jsfiddle.net/sGeVT/118/

Weird CSS misplacement on a non-dynamically added element

I created a temporary snapshot of my site for the time being: http://hunpony.hu/today/
The problem is, in the right panel, the first div, div#randomTile.tile is kind of misplaced.
I don't know why. Here is some related HTML, CSS and JavaScript:
<div id="slideoutWrapper">
<div id="slideout">
<div id="slideoutTitle">
<h1 class="dyn"></h1>
</div>
<div id="slideoutInner">
<div id="randomTile" class="tile" style="">
<img class="small" src="img/small/vs.svg">
<h4>Random<br> </h4>
</div>
</div>
</div>
</div>
... in the CSS mean vendor prefixed attributes, I removed them because it makes the code block too long.
#slideoutInner .tile {
cursor: pointer;
margin:.5em;
text-align:center;
display:inline-block;
width:95px;
text-overflow: ellipsis;
...
transition-duration: 0.3s;
box-shadow:0;
height:127px;
white-space:nowrap;
...
filter: contrast(100%);
}
#slideoutInner .tile:hover { box-shadow:0px 0px 15px; ...; filter: contrast(150%) }
#slideoutInner .tile .small {
height:75px;
width:75px;
margin:5px auto;
display:block;
}
#randomTile { color:#777; background-color: #777 }
#slideoutInner .tile h4 {
line-height: 20px;
padding:0;
margin:0px auto 2px;
display:block;
text-shadow:none;
color:white;
}
Some referenced variables are too long to include here, the main js file is here, where all the code is.
$('#randomTile').on('click',function(){
changeBGImage(rndCharNumber);
}).hover(function(){
rndCharNumber = randomize(0,backImage.length-1);
$(this).css({color:colorz[rndCharNumber],backgroundColor:colorz[rndCharNumber]});
$(this).find('img.small').attr('src','img/small/'+backImage[rndCharNumber]+'.svg');
$(this).find('h4').html((longNames[rndCharNumber].indexOf(' ') != -1) ? longNames[rndCharNumber].split(' ').join('<br>') : longNames[rndCharNumber]+'<br> ');
},function(){
$(this).css({color:'',backgroundColor:''});
$(this).find('h4').html(locStr.randomTile[locale]);
$(this).find('img.small').attr('src','img/small/vs.svg');
});
$(document).ready(function(){
...
for (i=0;i<backImage.length;i++){
imgArray.push('<img class="small" src="img/small/'+backImage[i]+'.svg">');
}
for (i=0;i<longNames.length;i++){
h4Array.push('<h4>'+((longNames[i].split(' ').join('<br>').indexOf('<br>') != -1) ? longNames[i].split(' ').join('<br>') : longNames[i]+'<br> ')+'</h4>');
}
for (i=0;i < imgArray.length;i++){
htmlArray.push('<div class="tile" style="color:'+colorz[i]+';background-color:'+colorz[i]+';">'+imgArray[i]+h4Array[i]+'</div>');
}
$('#slideoutInner').append(htmlArray.join(''));
...
});

The issue is caused by white-spaces, they affect inline elements (.tile blocks). To fix it add font-size: 0 to #slideoutInner (parent container):
#slideoutInner {
overflow-x: hidden;
text-align: center;
font-size: 0;
}
and change margin of the #slideoutInner .tile rule, make it e.g. 4px. It will fix your problem.

Jquery Send To Phone click link to populate text field in form for keypad

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/

We Keep Coding

JavaScript is the programming language of the Web.

This simple jquery user review box crashes after about 5 minutes - javascript

Related

how to stop litepicker from creating multiple instances

How can I increment the price using a combination of div elements and inputs?

How to make a cross close sign in popup

Weird CSS misplacement on a non-dynamically added element

Jquery Send To Phone click link to populate text field in form for keypad

Categories

Resources