Currently my price output gets calculated based on the chosen quantity of an input field. I have been trying to add a checkbox to this calculation that, if checked, adds $5 to the total price. That being said, I haven't been very successful. In my understanding, there are two calculations going on:
I hit the increase/decrease button and it checks if the checkbox has been selected
I select the checkbox and it calculates the total price
This is the code I have so far:
function IncludePrice()
{
var IncludePrice=0;
var include = theForm.elements["include"];
if(include.checked==true)
{
IncludePrice=5;
}
return IncludePrice;
}
$(".incr-btn_mobile").on("click", function(e) {
var $button = $(this);
var oldValue = $button.parent().find('.quantity').val();
$button.parent().find('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');
if ($button.data('action') == "increase") {
var newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below 1
if (oldValue > 1) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 1;
$button.addClass('inactive');
}
}
$button.parent().find('.quantity').val(newVal);
var cakePrice = newVal;
var includep = IncludePrice();
var divobj = document.getElementById($button.attr('data-target'));
divobj.style.display = 'block';
divobj.innerHTML = "= $" + (cakePrice) * 7.99 + (includep);
e.preventDefault();
});
.bg {
width: 100%;
}
.column {
float: left;
width: 50%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.count-input_mobile {
position: relative;
max-width: 1000%;
max-width: 400px;
margin-top: 10px;
text-align: center;
}
.count-input_mobile input {
width: 100%;
height: 42px;
border: 1px solid #000
border-radius: 2px;
background: none;
text-align: center;
}
.count-input_mobile input:focus {
outline: none;
}
.count-input_mobile .incr-btn_mobile {
display: block;
position: absolute;
width: 30px;
height: 30px;
font-size: 26px;
font-weight: 300;
text-align: center;
line-height: 30px;
top: 50%;
right: 0;
margin-top: -15px;
text-decoration:none;
}
.count-input_mobile .incr-btn_mobile:first-child {
right: auto;
left: 0;
top: 46%;
}
.count-input_mobile.count-input-sm {
max-width: 125px;
}
.count-input_mobile.count-input-sm input {
height: 36px;
}
.count-input_mobile.count-input-lg {
max-width: 200px;
}
.count-input_mobile.count-input-lg input {
height: 70px;
border-radius: 3px;
}
.button_mobile {
border: 1px solid #000;
border-radius: 2px;
background: none;
padding: 10.5px;
width:100%;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top:10px;
}
.sum_output {
background: none;
padding: 9.5px;
width:100%;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top:10px;
}
.accordion_img {
width:200%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="count-input_mobile space-bottom">
<a class="incr-btn_mobile" data-action="decrease" data-target="cleanse_drop_1" href="#">–</a>
<input class="quantity" id="ShowButton_value_1" type="text" name="quantity" value="1"/>
<a class="incr-btn_mobile" data-action="increase" data-target="cleanse_drop_1" href="#">+</a>
</div>
<label for='include' class="inlinelabel">Include Extra? ($5)</label>
<input type="checkbox" id="include" name='include' data-target="cleanse_drop_1" />
<div id="cleanse_drop_1" class="sum_output">= $7.99</div>
UPDATE:
I changed made some changes based on the feedback here, but this seems to break the increase/decrease field. Here is the code as is:
$(".incr-btn_mobile").on("click", function(e) {
var $button = $(this);
var oldValue = $button.parent().find('.quantity').val();
$button.parent().find('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');
if ($button.data('action') == "increase") {
var newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below 1
if (oldValue > 1) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 1;
$button.addClass('inactive');
}
}
$button.parent().find('.quantity').val(newVal);
var cakePrice = newVal;
var includep = theForm.elements.include.checked * 5;
var divobj = document.getElementById($button.attr('data-target'));
divobj.style.display = 'block';
divobj.innerHTML = "= $" + (cakePrice) * 7.99 + (includep);
e.preventDefault();
});
.bg {
width: 100%;
}
.column {
float: left;
width: 50%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.count-input_mobile {
position: relative;
max-width: 1000%;
max-width: 400px;
margin-top: 10px;
text-align: center;
}
.count-input_mobile input {
width: 100%;
height: 42px;
border: 1px solid #000
border-radius: 2px;
background: none;
text-align: center;
}
.count-input_mobile input:focus {
outline: none;
}
.count-input_mobile .incr-btn_mobile {
display: block;
position: absolute;
width: 30px;
height: 30px;
font-size: 26px;
font-weight: 300;
text-align: center;
line-height: 30px;
top: 50%;
right: 0;
margin-top: -15px;
text-decoration:none;
}
.count-input_mobile .incr-btn_mobile:first-child {
right: auto;
left: 0;
top: 46%;
}
.count-input_mobile.count-input-sm {
max-width: 125px;
}
.count-input_mobile.count-input-sm input {
height: 36px;
}
.count-input_mobile.count-input-lg {
max-width: 200px;
}
.count-input_mobile.count-input-lg input {
height: 70px;
border-radius: 3px;
}
.button_mobile {
border: 1px solid #000;
border-radius: 2px;
background: none;
padding: 10.5px;
width:100%;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top:10px;
}
.sum_output {
background: none;
padding: 9.5px;
width:100%;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top:10px;
}
.accordion_img {
width:200%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="count-input_mobile space-bottom">
<a class="incr-btn_mobile" data-action="decrease" data-target="cleanse_drop_1" href="#">–</a>
<input class="quantity" id="ShowButton_value_1" type="text" name="quantity" value="1"/>
<a class="incr-btn_mobile" data-action="increase" data-target="cleanse_drop_1" href="#">+</a>
</div>
<label for='include' class="inlinelabel">Include Extra? ($5)</label>
<input type="checkbox" id="include" name='include' data-target="cleanse_drop_1" />
<div id="cleanse_drop_1" class="sum_output">= $7.99</div>
There you go my friend. I only change your js code. There is all the change I made:
Deleted your IncludePrice function since you could do it in only one row. And do never user function name for a variable. It could possibly break your code.
All switched for jQuery use instead of half jQuery and native JS.
Created a function for checkbox onclick to change the prince dynamicly.
I changed the names of your variables to make them more specific.
Added some comments to make the code clearer.
var _EXTRAVAL = 5;
$(".incr-btn_mobile").on("click", function(e) {
// Prevent default action
e.preventDefault();
// Set variable for the method
var button = $(this);
var labelNb = button.parent().find('.quantity');
var labelPrice = $("#" + button.attr('data-target'));
var currentNb = button.parent().find('.quantity').val();
var newNb = 0;
// Remove 'inactive' class
$('.incr-btn_mobile[data-action="decrease"]').removeClass('inactive');
// Increase or decrease
if (button.attr('data-action') == "increase") {
newNb = parseFloat(currentNb) + 1;
} else {
// Don't allow decrementing below 1
if (currentNb > 1) {
newNb = parseFloat(currentNb) - 1;
} else {
newNb = 1;
button.addClass('inactive');
}
}
var isExtra = $("#include").prop('checked') ? _EXTRAVAL : 0;
$(labelNb).val(newNb);
$(labelPrice).css('display', 'block').html("= $" + String((((newNb) * 7.99) + (isExtra)).toFixed(2)));
});
$("#include").on('click', function(){
// Set variable for method
var checkbox = $(this);
var labelPrice = $("#" + $(".incr-btn_mobile").attr('data-target'));
var labelPriceFloat = parseFloat(labelPrice.html().substring(4));
// If checkbox is check, increse price
if (checkbox.prop('checked')) {
labelPrice.html("= $" + String((labelPriceFloat + _EXTRAVAL).toFixed(2)));
} else {
labelPrice.html("= $" + String((labelPriceFloat - _EXTRAVAL).toFixed(2)));
}
});
.bg {
width: 100%;
}
.column {
float: left;
width: 50%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.count-input_mobile {
position: relative;
max-width: 1000%;
max-width: 400px;
margin-top: 10px;
text-align: center;
}
.count-input_mobile input {
width: 100%;
height: 42px;
border: 1px solid #000
border-radius: 2px;
background: none;
text-align: center;
}
.count-input_mobile input:focus {
outline: none;
}
.count-input_mobile .incr-btn_mobile {
display: block;
position: absolute;
width: 30px;
height: 30px;
font-size: 26px;
font-weight: 300;
text-align: center;
line-height: 30px;
top: 50%;
right: 0;
margin-top: -15px;
text-decoration:none;
}
.count-input_mobile .incr-btn_mobile:first-child {
right: auto;
left: 0;
top: 46%;
}
.count-input_mobile.count-input-sm {
max-width: 125px;
}
.count-input_mobile.count-input-sm input {
height: 36px;
}
.count-input_mobile.count-input-lg {
max-width: 200px;
}
.count-input_mobile.count-input-lg input {
height: 70px;
border-radius: 3px;
}
.button_mobile {
border: 1px solid #000;
border-radius: 2px;
background: none;
padding: 10.5px;
width:100%;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top:10px;
}
.sum_output {
background: none;
padding: 9.5px;
width:100%;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
margin-top:10px;
}
.accordion_img {
width:200%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="count-input_mobile space-bottom">
<a class="incr-btn_mobile" data-action="decrease" data-target="cleanse_drop_1" href="#">–</a>
<input class="quantity" id="ShowButton_value_1" type="text" name="quantity" value="1"/>
<a class="incr-btn_mobile" data-action="increase" data-target="cleanse_drop_1" href="#">+</a>
</div>
<label for='include' class="inlinelabel">Include Extra? ($5)</label>
<input type="checkbox" id="include" name='include' data-target="cleanse_drop_1" />
<div id="cleanse_drop_1" class="sum_output">= $7.99</div>
Related
Currently making a quick journal entry app in HTML, CSS, and JS. User inputs and submits text data along with the time and date. I'm trying to take that data from the localStorage to put inside an existing div class. Any advice?
This is the HTML code.
<div class="background-journal">
<button class="button-journal" onclick="openPopup()" id="entrybtn">New Entry</button>
<br><br><br><br><br><br><br>
<button class="show-journal" onclick="recallEntries()" id="showbtn">View Previous Entries</button>
<div class="journal-visual" id="data-viz">
</div>
<div id="popup" class="popup">
<form id="form" class="form">
<br>
<label for="journal-entry">何を勉強していますか？</label><br><br>
<textarea class="add-entry" id="journal-entry" rows="6" cols="150"></textarea><br>
<button type="submit" onclick="submitJournalEntry()">Submit</button>
<button type="button" onclick="closePopup()">Close</button>
</form>
</div>
This is the CSS code.
.background-journal{
position:absolute;
top: 35%;
left: 9.6%;
background-color:rgba(255,255,255,0);
z-index:1001;
width: 80%;
height: 600px;
overflow-y: auto;
overflow-x: hidden;
}
.button-journal {
background-color: #fff;
border: none;
color: #000;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
width: 90%;
height: 100px;
left: 4.5%;
position: absolute;
box-shadow: 3px 5px #888888;
}
.show-journal{
background-color: #fff;
border: none;
color: #000;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
width: 90%;
height: 100px;
left: 4.5%;
position: absolute;
box-shadow: 3px 5px #888888;
}
.journal-visual{
background-color: #fff;
z-index:1003;
width: 70%;
height: 450px;
overflow-y: auto;
overflow-x: hidden;
margin-left: auto;
margin-right: auto;
display: none;
position: relative;
color: #000;
text-align: center;
}
.button-popup-journal{
position: relative;
}
.popup {
display: none;
position: absolute;
z-index: 1;
width: 100%;
height: 200px;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
text-align: center;
box-shadow: 3px 5px #000;
}
.popup form{
margin: auto;
}
.add-entry{
margin: auto;
overflow: auto;
position:inherit;
left: 5%;
}
.background-journal label{
color: white;
opacity: 70%;
}
and this is the JS code.
// Journal Function
function openPopup() {
document.getElementById("popup").style.display = "block";
document.getElementById("entrybtn").style.display = "none";
document.getElementById("showbtn").style.display = "none";
}
function closePopup() {
document.getElementById("popup").style.display = "none";
document.getElementById("entrybtn").style.display = "block";
document.getElementById("showbtn").style.display = "block";
}
function submitJournalEntry() {
var journalEntry = document.getElementById("journal-entry").value;
var date = new Date();
var timestamp = date.toString();
localStorage.setItem(timestamp, journalEntry);
closePopup();
}
function recallEntries() {
document.getElementById("entrybtn").style.display = "none";
document.getElementById("showbtn").style.display = "none";
document.getElementById("data-viz").style.display = "block";
var keys = Object.keys(localStorage);
for (var i = 0; i < keys.length; i++) {
var key = keys[i];
var journalEntry = localStorage.getItem(key);
var viz = document.getElementById('data-viz');
div.innerHTML = '<p><strong>' + key + '</strong>: ' + journalEntry + '</p>';
document.body.appendChild(viz);
}
}
I was expecting the text to show up in the div class="journal-entry" id="data-viz" but nothing is there. Any ideas?
i work with li and i have issues.
I have input field, which add dynamically values to list, after adding some values, i have function to edite, this value, but this func work not correct, after editing li, it's delete all classes and span button.
HTML:
<form class="qa-form">
<input type="text" class="qa-input" placeholder="Enter text">
<button class="qa-button" id="btn-add">+</button>
<button class="qa-button hidden" id="btn-save">Save</button>
</form>
<div class="item-list"></div>
CSS:
.qa-form {
position: relative;
display: table;
width: 100%;
}
.qa-input {
text-align: left;
width: 100%;
box-sizing: border-box;
background: #fff;
max-width: 100%;
padding: 0.7rem 115px 0.7rem 0.7rem;
border: 1px solid #cbcbce;
border-radius: 6px;
color: #3a3d4b;
}
.qa-button {
position: absolute;
background: #31353D;
padding: 0.6rem 1rem;
border: none;
color: #fff;
border-radius: 5px;
right: 4px;
transform: translateY(2.5px);
}
.list-view ul {
list-style: none;
margin: 0;
padding: 0;
}
.list-view li {
margin-top: 5px;
list-style: none;
cursor: pointer;
background: #efefef;
height: auto;
line-height: 40px;
color: #666;
border-radius: 5px;
padding: 10px;
}
.list-view li:nth-child(2n) {
background: #f7f7f7;
}
.completed {
text-decoration: line-through;
color: gray;
}
.slide {
display: none;
}
.list-view li span {
color: white;
height: 40px;
display: inline-block;
margin-right: 4px;
width: 0;
transition: all .5s;
text-align: center;
opacity: 0;
}
.delete-item {
float: right;
background-color: #dc3545;
}
.edite-item {
float: right;
background-color: #fe6d00;
}
.correct-answ {
float: left;
background-color: #28a745;
}
.list-view li:hover span {
width: 40px;
opacity: 1;
}
.hidden {
display: none;
}
.correct-answer-active {
background-color: rgba(42, 176, 49, 0.45);
}
JQUERY:
$(".item-list").append("<ul id='item-data' class='list-view col-12'></ul>")
$("#btn-add").click(function () {
var inputVal = $(".qa-input").val()
if (inputVal != "") {
$("#item-data").append("<li><span class='delete-item'><i class='fa fa-trash-o'></i></span> <span class='edite-item'><i class='fa fa-edit'></i></span><span class='correct-answ'><i class='fa fa-check-circle-o'></i></span>" + inputVal + "</li>");
$(".qa-input").val(null)
} else {
alert("Add answer to input field")
}
});
$(document).on("click", ".delete-item", function () {
$(this).parent().fadeOut(function () {
$(this).remove();
});
})
$(document).on("click", ".edite-item", function () {
var listValues = $(this).parent();
$("#btn-add").hide()
$("#btn-save").show();
$(".qa-input").val(listValues.text())
editeData(listValues)
});
function editeData(val) {
$("#btn-save").click(function () {
var inputValue = $(".qa-input").val()
if (val === inputValue) {
alert("You are not make changes")
} else {
val.text(inputValue)
$("#btn-add").show()
$("#btn-save").hide();
$(".qa-input").val(null)
}
});
}
$(document).on("click", ".correct-answ", function () {
$(this).parent().css("background-color", "rgba(42, 176, 49, 0.45)")
$(this).parent().attr('active', true);
});
So, i try to find mistake, during all day, and i can't
The main problem is that .text() will also alter your html as you already experienced.
You could replace val.text(inputValue) with $(val).contents().last()[0].textContent = inputValue;
There is also a problem with this line if (val === inputValue) { your val represents the <li> object, and inputValue is ofc the text from the input field, so those will never be the same.
Working demo
$(".item-list").append("<ul id='item-data' class='list-view col-12'></ul>")
$("#btn-add").click(function() {
var inputVal = $(".qa-input").val()
if (inputVal != "") {
$("#item-data").append("<li><span class='delete-item'><i class='fa fa-trash-o'></i></span> <span class='edite-item'><i class='fa fa-edit'></i></span><span class='correct-answ'><i class='fa fa-check-circle-o'></i></span><span class='val'>" + inputVal + "</span></li>");
$(".qa-input").val(null)
} else {
alert("Add answer to input field")
}
});
$(document).on("click", ".delete-item", function() {
$(this).parent().fadeOut(function() {
$(this).remove();
});
})
var edited = null
$(document).on("click", ".edite-item", function() {
var listValues = $(this).closest("li");
$("#btn-add").hide()
$("#btn-save").show();
$(".qa-input").val(listValues.find(".val").text())
edited = listValues
});
$("#btn-save").click(function() {
var pretext = edited.find(".val").text();
var inputValue = $(".qa-input").val()
if (pretext === inputValue) {
alert("You are not make changes")
} else {
edited.find(".val").text(inputValue)
$("#btn-add").show()
$("#btn-save").hide();
$(".qa-input").val("")
}
});
$(document).on("click", ".correct-answ", function() {
$(this).parent().css("background-color", "rgba(42, 176, 49, 0.45)")
$(this).parent().attr('active', true);
});
.qa-form {
position: relative;
display: table;
width: 100%;
margin-top: 50px;
}
.qa-input {
text-align: left;
width: 100%;
box-sizing: border-box;
background: #fff;
max-width: 100%;
padding: 0.7rem 115px 0.7rem 0.7rem;
border: 1px solid #cbcbce;
border-radius: 6px;
color: #3a3d4b;
}
.qa-button {
position: absolute;
background: #31353D;
padding: 0.6rem 1rem;
border: none;
color: #fff;
border-radius: 5px;
right: 4px;
transform: translateY(2.5px);
}
.list-view ul {
list-style: none;
margin: 0;
padding: 0;
}
.list-view li {
margin-top: 5px;
list-style: none;
cursor: pointer;
background: #efefef;
height: auto;
line-height: 40px;
color: #666;
border-radius: 5px;
padding: 10px;
}
.list-view li:nth-child(2n) {
background: #f7f7f7;
}
.completed {
text-decoration: line-through;
color: gray;
}
.slide {
display: none;
}
.list-view li span:not(.val) {
color: white;
height: 40px;
display: inline-block;
margin-right: 4px;
width: 0;
transition: all .5s;
text-align: center;
opacity: 0;
}
.delete-item {
float: right;
background-color: #dc3545;
}
.edite-item {
float: right;
background-color: #fe6d00;
}
.correct-answ {
float: left;
background-color: #28a745;
}
.list-view li:hover span {
width: 40px;
opacity: 1;
}
.hidden {
display: none;
}
.correct-answer-active {
background-color: rgba(42, 176, 49, 0.45);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="qa-form">
<input type="text" class="qa-input" placeholder="Enter text">
<button type="button" class="qa-button" id="btn-add">+</button>
<button type="button" class="qa-button hidden" id="btn-save">Save</button>
</form>
<div class="item-list"></div>
I'm trying to build a multi step selector which has multiple combinations in every slide. for example hou have btn1, btn2 and btn3. Every button will display other content in the next slide.
It's an inpage multistep slider so I can't use onClick, submit input or something like that.
as you can see in the code below, I'm trying to get an echo on the name or value of the button who has been clicked in the slide before.
var currentSlide = 0,
$slideContainer = $('.slide-container'),
$slide = $('.slide'),
slideCount = $slide.length,
animationTime = 300;
function setSlideDimensions () {
var windowWidth = $(window).width();
$slideContainer.width(windowWidth * slideCount);
$slide.width(windowWidth);
}
function generatePagination () {
var $pagination = $('.pagination');
for(var i = 0; i < slideCount; i ++){
var $indicator = $('<div>').addClass('indicator'),
$progressBarContainer = $('<div>').addClass('progress-bar-container'),
$progressBar = $('<div>').addClass('progress-bar'),
indicatorTagText = $slide.eq(i).attr('data-tag'),
$tag = $('<div>').addClass('tag').text(indicatorTagText);
$indicator.append($tag);
$progressBarContainer.append($progressBar);
$pagination.append($indicator).append($progressBarContainer);
}
$pagination.find('.indicator').eq(0).addClass('active');
}
function goToNextSlide () {
if(currentSlide >= slideCount - 1) return;
var windowWidth = $(window).width();
currentSlide++;
$slideContainer.animate({
left: -(windowWidth * currentSlide)
});
setActiveIndicator();
$('.progress-bar').eq(currentSlide - 1).animate({
width: '100%'
}, animationTime);
}
function goToPreviousSlide () {
if(currentSlide <= 0) return;
var windowWidth = $(window).width();
currentSlide--;
$slideContainer.animate({
left: -(windowWidth * currentSlide)
}, animationTime);
setActiveIndicator();
$('.progress-bar').eq(currentSlide).animate({
width: '0%'
}, animationTime);
}
function postitionSlides () {
var windowWidth = $(window).width();
setSlideDimensions();
$slideContainer.css({
left: -(windowWidth * currentSlide)
}, animationTime);
}
function setActiveIndicator () {
var $indicator = $('.indicator');
$indicator.removeClass('active').removeClass('complete');
$indicator.eq(currentSlide).addClass('active');
for(var i = 0; i < currentSlide; i++){
$indicator.eq(i).addClass('complete');
}
}
setSlideDimensions();
generatePagination();
$(window).resize(postitionSlides);
$('.next').on('click', goToNextSlide);
$('.previous').on('click', goToPreviousSlide);
#charset "UTF-8";
*, html, body {
font-family: "TrebuchetMS", trebuchet, sans-serif;
}
* {
box-sizing: border-box;
}
h1, h2 {
text-align: center;
}
h1 {
font-size: 24px;
line-height: 30px;
font-weight: bold;
}
h2 {
font-size: 18px;
line-height: 25px;
margin-top: 20px;
}
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
padding: 14px 50px;
border-radius: 4px;
background-color: #37B595;
color: #FFFFFF;
text-transform: capitalize;
font-size: 18px;
line-height: 22px;
outline: none;
cursor: pointer;
transition: all 0.2s;
}
button:hover {
background-color: #1A7F75;
}
button.previous {
background-color: #A2ACAF;
}
button.previous:hover {
background-color: #5A5F61;
}
.full-width-container {
width: 100%;
min-width: 320px;
}
.sized-container {
max-width: 900px;
width: 100%;
margin: 0 auto;
}
.slide-container {
position: relative;
left: 0;
overflow: hidden;
}
.slide {
float: left;
}
.slide .sized-container {
padding: 75px 25px;
}
.button-container {
border-top: 1px solid black;
overflow: hidden;
padding-top: 30px;
}
.button-container button {
float: right;
margin-left: 30px;
}
.pagination-container {
margin-top: 120px;
}
.pagination {
width: 100%;
text-align: center;
padding: 0 25px;
}
.indicator {
width: 25px;
height: 25px;
border: 4px solid lightgray;
border-radius: 50%;
display: inline-block;
transition: all 0.3s;
position: relative;
}
.indicator .tag {
position: absolute;
top: -30px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
color: lightgray;
white-space: nowrap;
}
.indicator.active, .indicator.complete {
border-color: #37B595;
}
.indicator.active .tag, .indicator.complete .tag {
color: #37B595;
}
.indicator.complete:after {
content: "✓";
position: absolute;
color: #37B595;
left: 4px;
top: 3px;
font-size: 14px;
}
.progress-bar-container {
width: 10%;
height: 4px;
display: inline-block;
background-color: lightgray;
position: relative;
top: -10px;
}
.progress-bar-container:last-of-type {
display: none;
}
.progress-bar-container .progress-bar {
width: 0;
height: 100%;
background-color: #37B595;
}
<div class="pagination-container full-width-container">
<div class="sized-container">
<div class="pagination"></div>
</div>
</div>
<div class="viewport full-width-container">
<ul class="slide-container">
<li class="slide" data-tag="Basic Info">
<div class="sized-container">
<h1>Slide1.</h1>
<input class="next" name="next" type="button" value="next" />
</div>
</li>
<li class="slide" data-tag="Expertise">
<div class="sized-container">
<h1>Slide2.</h1>
</div>
</li>
</ul>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
Can someone please help me out!
I am writing a generator for improving my knowledge of PHP programming and handling as I am weak and I already know that I would like to ask how I can make this.
Generate input data in javascript and I want to dynamically capture their value in PHP. I do not know how many of them, because they are generated after clicking the button in, hence the problem.
At the same moment I succeeded in JS up using this name: name_0, name_1 and so on.
Is it feasible? Below I do not
var tytul = document.getElementById("k-title");
var opis = document.getElementById("k-description");
var popup = document.getElementById("info_box");
var overlay = document.getElementById("overlay");
var podsumowanie = document.getElementById("summary");
$("#add").on("click", function () {
var id = $(".wiersz").length;
$('#tabela').append('<tr class="wiersz"><td class="komorka-lewa"> <input class="cecha" name="cecha_'+ id + '" type="text" placeholder="Cecha produktu"> </td><td class="komorka-prawa"><input class="cecha-opis" name="cecha-opis_'+ id + '" type="text" placeholder="Opis cechy produktu"></td></tr>');
document.getElementById("default-table").style = "display: none";
});
$("#add_square").on("click", function() {
var szerokosc = prompt("Podaj szerokość obrazka");
var wysokosc = prompt("Podaj wysokość obrazka");
var sciezka = prompt("Podaj link do zdjęcia");
$("#other-photos").append('<div class="other-img" style="width: '+szerokosc+'px;"><img class="img-present" style="height: '+ wysokosc +'px;" src="'+sciezka+'" /></div>');
if (szerokosc < 1050) {
$(".other-img").css("float", "left");
}
});
$("#add_photo").on("click", function () {
var sciezka = prompt("Podaj link do zdjęcia");
var opis = prompt("Podaj opis zdjęcia dla wyszukiwarek");
$("#gallery").append('<div class="photo-container"><button class="del">Usuń zdjęcie</button><img src="' + sciezka + '" class="photo" alt="' + opis + '"/></div>');
if ($(".photo").length > 0) {
document.getElementById("default-gallery").style = "display: none";
}
$(".del").on("click", function () {
$(this).parent().css("display", "none");
document.getElementById("default-gallery").style = "display: block";
});
});
$("#gen").on("click", function () {
if (opis.value.length < 1 || tytul.value.length < 1) {
popup.style = "display: block";
overlay.style = "display: block";
document.getElementById("infobox-content").innerHTML = "Uzupełnij wszystkie potrzebne dane, zanim wygenerujesz kartę produktu.";
} else {
popup.style = "display: block";
overlay.style = "display: block";
document.getElementById("infobox-content").innerHTML = "Karta została wygenerowana, plik z kodem znajduje się w katalogu generate.";
podsumowanie.innerHTML = "Tytuł: " + tytul.value + "<br>" + "Opis produktu: " + opis.value + "<br>" + "Cecha produktu: " + cecha + "<br>" + "Opis cechy produktu: " + cechaopis;
}
});
$("#close").on("click", function() {
popup.style = "display: none";
overlay.style = "display: none";
});
$("#add_section").on("click", function() {
var szerokosc = prompt("Określ szerokość sekcji");
var wysokosc = prompt("Określ wysokosć sekcji");
var tlo = prompt("Określ kolor tła sekcji (paleta RGB - np. FFFFFF)");
var kolor = prompt("Określ kolor tekstu w sekcji (paleta RGB - np. FFFFFF)");
$("#new_section").append('<div class="sekcja" style="width: '+ szerokosc +'px; height: '+ wysokosc +'px; background: #'+ tlo +'; color: #'+ kolor +';"><button type="button" class="check_btn">Checklista</button><button type="button" class="txt_btn">Sekcja tekstowa</button></div>');
if ($(".sekcja").length > 0) {
$("#default-section").css("display","none");
}
if(szerokosc < 1050) {
$(".sekcja").css("float","left");
}
});
body {
margin: 0;
font-family: 'open sans',sans-serif;
font-size: 15px;
}
.wiersz {
background-color: #eee;
margin: 0;
}
.komorka-lewa {
padding: 3px 10px;
text-align: right;
border-right: 1px solid #dbdbdb;
}
.komorka-prawa {
padding: 3px 10px;
text-align: left;
}
#tabela {
font-size: 14px;
border: none;
border-top: 1px solid #dbdbdb;
border-bottom: 1px solid #dbdbdb;
width: 100%;
}
.cecha, .cecha-opis {
border: 0;
margin: 0;
background: 0;
}
#gen {
display: block;
width: 100%;
margin-top: 10px;
}
#add, #gen, #add_photo, #add_section {
border: 0;
padding: 10px;
background: #222;
color: #fff;
border-radius: 3px;
font-family: 'open sans',sans-serif;
font-size: 15px;
}
#add:hover, #gen:hover, #add_photo:hover, #add_section:hover, .check_btn:hover, .txt_btn:hover {
background: green;
cursor: pointer;
transition-duration: 1s;
}
#add_section {
margin-top: 25px;
margin-bottom: 25px;
}
#container {
max-width: 1050px;
margin-left: auto;
margin-right: auto;
}
#overlay {
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
z-index: 2;
position: absolute;
}
#info_box {
background: #fff;
position: absolute;
z-index: 3;
width: 500px;
top: 50%;
transform: translateY(-50%);
padding: 10px;
padding-top: 0;
left: 50%;
margin-left: -250px;
}
#info_box p:first-child {
font-size: 20px;
border-bottom: 1px solid #eaeaea;
padding-bottom: 10px;
}
#info_box, #overlay {
display: none;
}
#info_box > p span {
cursor: pointer;
color: red;
}
.photo {
display: block;
width: 100%;
}
.photo:first-child {
margin-top: 25px;
}
.photo:last-child {
margin-bottom: 25px;
}
#default-gallery, #default-section {
font-size: 14px;
border-bottom: 1px solid #dbdbdb;
padding: 5px;
}
.photo-container {
position: relative;
overflow: hidden;
margin-bottom: 25px;
}
.photo-container:first-child {
margin-top: 25px;
}
.photo-container:last-child {
margin-bottom: 25px;
}
.del {
position: absolute;
bottom: 50px;
right: 25px;
background: transparent;
border: 3px solid #fff;
padding: 10px;
font-family: 'open sans',sans-serif;
font-size: 15px;
color: #fff;
border-radius: 3px;
}
.del:hover {
background: #fff;
cursor: pointer;
transition-duration: 0.5s;
color: #222;
}
#add_square {
width: 150px;
height: 150px;
background: #eaeaea;
margin-bottom: 25px;
padding: 20px;
border: 1px solid #c0c0c0;
}
#add_square:hover {
background: #222;
cursor: pointer;
transition-duration: 0.5s;
color: #fff;
}
.img-present {
max-width: 100%;
}
.other-img:last-child {
margin-bottom: 25px;
}
.sekcja {
position: relative;
}
.check_btn, .txt_btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding-top: 10px;
padding-bottom: 10px;
border: 0;
background: #000;
font-size: 15px;
font-family: 'open sans',sans-serif;
color: #fff;
}
.check_btn {
left: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.txt_btn {
right: 0;
b
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="info_box">
<p>Informacja <span id="close" style="float: right;">x</span></p>
<p id="infobox-content"></p>
</div>
<div id="overlay"></div>
<div id="container">
<form method="post" action="">
<div style="padding-top: 50px; padding-bottom: 50px;">
<input type="text" value="" id="k-title" name="k-title" placeholder="Tytuł karty" style="display: block; width: 100%; font-size: 30px; border: 0; background: 0; margin-bottom: 25px; text-align: center;">
<input type="text" value="" id="k-description" name="k-desc" placeholder="Krótki opis" style="display: block; width: 100%; border: 0; background: 0; text-align: justify; padding: 10px;">
</div>
<div style="width: 100%; text-align: center; background-color: #eee; font-weight: 200; line-height: 0.92em; padding: 23px 0; font-size: 30px;">Specyfikacja techniczna</div>
<table id="tabela" border="0" cellspacing="0" cellpadding="5px">
<tbody>
<tr>
<td colspan="2" id="default-table">Brak dodanej specyfikacji</td>
<tr>
</tbody>
</table>
<button style="margin-top: 25px; margin-bottom: 25px;" id="add" type="button">Dodaj wiersz</button>
<div id="other-photos">
<div id="add_square" style="position: relative;">
<p style="text-align: center; position: absolute; width: 150px; top: 40px; font-size: 60px; margin: 0;">+</p>
<p style="text-align: center; position: absolute; width: 150px; bottom: 40px; margin: 0;">Dodaj obrazek prezentacji</p>
</div>
</div>
<div style="clear: both;"></div>
<div style="width: 100%; text-align: center; background-color: #eee; font-weight: 200; line-height: 0.92em; padding: 23px 0; font-size: 30px;">Dodaj nową sekcję</div>
<div id="new_section">
<div id="default-section">Brak dodanych sekcji</div>
</div>
<div style="clear: both;"></div>
<button type="button" id="add_section">Dodaj sekcję</button>
<div style="width: 100%; text-align: center; background-color: #eee; font-weight: 200; line-height: 0.92em; padding: 23px 0; font-size: 30px;">Galeria zdjęć</div>
<div id="default-gallery">Brak dodanych zdjęć</div>
<div id="gallery">
</div>
<button style="margin-top: 25px; margin-bottom: 25px;" id="add_photo" type="button">Dodaj zdjęcia</button>
<input id="gen" type="submit" value="Generuj kartę" />
</div>
<div id="summary">
</div>
</form>
Simplest Solution:
Name your generated Inputfields like:
<input ... name="field[]"> // see the []-Brackets
<input ... name="field[]">
<input ... name="field[]">
The Brackets will cause, that there will be sent an Array named "field" when submitting the Form. Of course you can also give them a Key like field[0], field[1] or what ever.
After you submitted the Form you can handle it like any other PHP-Array.
For Example:
foreach($_POST['field'] as $fieldno => $fieldvar){
echo 'field '.$fieldno.': '.$fieldvar.'<br>';
}
Tip: Using the same Keys for the same Section is quite helpful for processing trough the Data:
<input name="givenname[0]"><input name="lastname[0]"><input name="age[0]">
<input name="givenname[1]"><input name="lastname[1]"><input name="age[1]">
<input name="givenname[2]"><input name="lastname[2]"><input name="age[2]">
You can catch these Data after submitting this way:
foreach($_POST['givenname'] as $id => $givenname){
echo 'person #'.$id.': '.$_POST['lastname'][$id].', '.$givenname.', '.$_POST['age'][$id].'<br>';
}
Here is some pastebin (don't want to put my code in the internet for ever) to build a cool calendar :
var today = new Date(); // The current server date
var displayedMonth = new Date(today.getTime())
var mois = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Decembre"];
var jour = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
function initialSetup(date){
addEventListener();
buildCalendar(date);
}
function buildCalendar(date){
$(".currentMonth").text(mois[date.getMonth()]);
$(".currentYear").text(date.getFullYear());
if($(".itemsCalendar").length == 0){
$(".calendar:first").append('<table class="itemsCalendar"><thead><tr></tr></thead>');
for(var cpt = 1; cpt <= jour.length-1;cpt++)
$(".calendar > table > thead > tr").append('<th>'+jour[cpt].substring(0,3)+'</th>');
$(".calendar > table > thead > tr").append('<th>'+jour[0].substring(0,3)+'</th>');
}
// Set the days in the calendar
return populateCalendar(date);
}
function populateCalendar(date){
var itsToday = null;
var appendLocation = null;
var sendResult = false;
if($(".itemsCalendar > tbody").length == 0){
$(".itemsCalendar").append('<tbody class="dates"></tbody>');
appendLocation = ".dates";
}else{
$(".calendar").append('<tbody class="tempCalendar"></tbody>');
appendLocation = ".tempCalendar";
sendResult = true;
}
if(date.getMonth() == today.getMonth() && date.getYear() == today.getYear() ){ // If is it the same day than today, buid as follow
itsToday = 'class="today"'
// date = today;
date.setDate(today.getDate()); // copy the date of today
}
$(appendLocation).append("<tr><td><span "+itsToday+">"+date.getDate()+"</span></td></tr>");
var currentDay = date.getDay();
for(var cpt = date.getDate()-1; cpt>=1;cpt--){ // For each day before
currentDay > 0 ? currentDay-- : currentDay = 6; // Negate 1 day
currentDay == 0 ? $(appendLocation).prepend("<tr></tr>"):null; // Add a line in needed
$(appendLocation+" > tr:first").prepend("<td><span>"+cpt+"</span></td>");
}
fillCalendar(date, currentDay, true, appendLocation);
currentDay = date.getDay();
for(var cpt = date.getDate()+1; cpt<=dayInMonth(date);cpt++){ // For each day after
currentDay < 6 ? currentDay++ : currentDay = 0;// Increase 1 day
currentDay == 1 ? $(appendLocation).append("<tr></tr>"):null; // Add a line if needed
$(appendLocation+" > tr:last").append("<td><span>"+cpt+"</span></td>");
}
fillCalendar(date, currentDay, false, appendLocation);
if(sendResult){
var ret = $(".tempCalendar").html();
$(".tempCalendar").remove();
return ret;
}
}
function dayInMonth(date){
if(date.getMonth() == 1) if(isBissextile(date.getYear())) return 29; else return 28;
if(date.getMonth()%2 == 0) if(date.getMonth() <= 6) return 31; else return 30; else if(date.getMonth() <= 6) return 30; else return 31;
}
function isBissextile(year){
if(year%4 != 0) return false; else if((year%100 == 0) && (year%400 != 0)) return false; else return true;
}
function fillCalendar(date, day, isBefore, where){
var complete;
if(isBefore){
if(day == 1) return; else complete = false;
date.setMonth(date.getMonth()-1);
var cpt = dayInMonth(date);
do{
day != 0 ? day-- : day = 6; // Negate 1 day
$(where+" > tr:first").prepend("<td><span class='notInTheMonth'>"+cpt+"</span></td>");
cpt--;
day == 1 ? complete = true : null;
}while(!complete);
date.setMonth(date.getMonth()+1);
}else{
if(day == 0) return; else complete = false;
var cpt = 1;
do{
day == 6 ? day = 0 : day++; // Increase 1 day
$(where+" > tr:last").append("<td><span class='notInTheMonth'>"+cpt+"</span></td>");
cpt++;
day == 0 ? complete = true : null;
}while(!complete);
}
}
function addEventListener(){
$(".previousMonth").click(function(e){
e.stopPropagation();
displayedMonth.setMonth(displayedMonth.getMonth()-1);
displayedMonth.setDate(15);
var updated = buildCalendar(displayedMonth);
updateCalendar(updated);
});
$(".nextMonth").click(function(e){
e.stopPropagation();
displayedMonth.setMonth(displayedMonth.getMonth()+1);
displayedMonth.setDate(15);
var updated = buildCalendar(displayedMonth);
updateCalendar(updated);
});
$(".previousYear").click(function(e){
e.stopPropagation();
displayedMonth.setFullYear(displayedMonth.getFullYear()-1);
displayedMonth.setDate(15);
var updated = buildCalendar(displayedMonth);
updateCalendar(updated);
});
$(".nextYear").click(function(e){
e.stopPropagation();
displayedMonth.setFullYear(displayedMonth.getFullYear()+1);
displayedMonth.setDate(15);
var updated = buildCalendar(displayedMonth);
updateCalendar(updated);
});
}
function addDayEventListener(){
$(".dates").on('click', '.notInTheMonth', function() {
var selected = parseInt($(this).text());
if(selected > 15)
displayedMonth.setMonth(displayedMonth.getMonth()-1);
else
displayedMonth.setMonth(displayedMonth.getMonth()+1);
displayedMonth.setDate(selected);
var updated = buildCalendar(displayedMonth);
updateCalendar(updated);
$(".dates > tr > td > span:not(.notInTheMonth)").filter(function() {
return parseInt($(this).text()) === selected;
}).addClass("today")
});
/*$(".notInTheMonth").each(function(){
$(this).click(function(e){
e.stopPropagation();
});
});*/
}
function updateCalendar(updated){
$('.dates').animate({
opacity: 0,
transform: "scale(2,1)"
},250, function(){
updated = $(updated);
$(this).empty();
$(this).html(updated);
addDayEventListener();
$('.dates').animate({opacity: 100}, 250);
});
//$(".itemsCalendar > tbody").remove();
}
function colorize(colors){
/*background: #ff3232;
background: -moz-linear-gradient(-45deg, #ff3232 0%, #ff2828 21%, #2989d8 21%, #2989d8 48%, #5aa85e 48%, #5aa85e 73%, #ffac4f 73%, #ffac4f 100%);
background: -webkit-linear-gradient(-45deg, #ff3232 0%,#ff2828 20%,#2989d8 20%,#2989d8 40%,#5aa85e 40%,#5aa85e 60%,#ffac4f 60%,#ffac4f 80%, yellow 80%,yellow 100%);
background: linear-gradient(135deg, #ff3232 0%,#ff2828 21%,#2989d8 21%,#2989d8 48%,#5aa85e 48%,#5aa85e 73%,#ffac4f 73%,#ffac4f 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3232', endColorstr='#ffac4f',GradientType=1 );*/
}
initialSetup(today);
* {
font-family: 'Open Sans', sans-serif;
}
div,
ul,
li {
list-style-type: none;
}
.planner {
width: 66%;
margin: 100px auto;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
border-radius: 5px;
overflow: hidden;
min-width: 280px;
}
.calendar {
padding: 10px;
background-color: #333333;
min-width: 260px;
transition: 250ms;
}
.calendar-header {
color: #a7a7a7;
margin: 0;
padding: 0;
text-align: justify;
line-height: 0px;
font-size: 0px;
}
.calendar-header span,
.calendar-header a {
display: inline-block;
font-size: 36px;
font-weight: 200;
text-align: center;
line-height: 36px;
}
.calendar-header a:hover {
color: #98cd60;
cursor: pointer;
}
.calendar-header::after {
content: '';
display: inline-block;
width: 100%;
}
table {
width: 100%;
padding: 10px;
color: #9d9d9d;
min-width: 240px;
}
tbody{
overflow: hidden;
max-height: 180px;
}
th {
font-weight: normal;
font-size: 14px;
color: #5b5b5b;
}
td {
font-weight: normal;
font-size: 12px;
text-align: center;
}
td > span {
display: inline-block;
text-align: center;
padding: 3px;
margin: 0px;
width: 20px;
height: 20px;
line-height: 20px;
}
td > span:hover {
font-weight: bold;
}
td > span.active {
border: 2px solid #98cd60;
border-radius: 30px;
}
.schedule {
margin: 0;
}
.tabs {
margin: 0;
padding: 0;
text-align: justify;
line-height: 0px;
font-size: 0px;
background-color: #6b6b6b;
}
.tabs .tab {
display: inline-block;
width: 33.3333%;
background-color: #6b6b6b;
text-align: center;
color: #333333;
margin: 0;
padding: 0;
border: 0px none;
line-height: 38px;
font-size: 14px;
transition: background 0.2s;
}
.tabs .tab.active {
background-color: #999999;
color: #ffffff;
font-weight: 600;
}
.tabs .tab.active:hover {
background-color: #999999;
}
.tabs .tab:hover {
background-color: #777777;
}
.tabs .tab a {
color: inherit;
text-decoration: none;
}
.tabs::after {
content: '';
width: 100%;
display: inline-block;
}
.schedule-list {
padding: 20px;
margin-left: 37px;
border-left: 2px solid #cccccc;
display: block;
}
.schedule-item {
display: block;
margin-bottom: 50px;
padding: 0;
clear: both;
min-height: 100px;
overflow: visible;
}
.schedule-item:last-child {
margin-bottom: 10px;
min-height: 30px;
}
.schedule-item .time {
display: block;
float: left;
margin-left: -41px;
width: 36px;
height: 36px;
border: 2px solid #cccccc;
background-color: #ffffff;
color: #cccccc;
border-radius: 40px;
text-align: center;
padding: 0px;
line-height: 25px;
}
.schedule-item .time span {
font-size: 12px;
height: 10px;
margin: auto;
display: block;
}
.schedule-item .description {
display: block;
float: left;
width: 305px;
margin-top: 10px;
margin-left: 10px;
color: #fd9a4a;
font-size: 14px;
overflow: visible;
}
.schedule-item .description .description-content {
margin-top: 5px;
}
.schedule-item .description .description-content p {
font-size: 12px;
margin: 0;
color: #c5c5c5;
}
.schedule-item .description .description-content .contact-list {
margin: 0;
margin-top: 10px;
padding: 0;
}
.schedule-item .description .description-content .contact-list .contact {
overflow: hidden;
display: block;
float: left;
margin: 0;
padding: 0;
border: 2px solid rgba(152, 205, 96, 0.25);
border-radius: 60px;
width: 56px;
height: 56px;
text-decoration: none;
text-align: center;
margin-right: 10px;
transition: all 0.2s;
}
.schedule-item .description .description-content .contact-list .contact img {
width: 60px;
height: 60px;
}
.schedule-item .description .description-content .contact-list .contact:hover {
border: 2px solid #98cd60;
}
.schedule-item .description .description-content .contact-list .contact.add-contact {
color: #98cd60;
font-size: 20px;
line-height: 60px;
}
.schedule-item .description .description-content .contact-list .contact.add-contact a {
color: inherit;
text-decoration: none;
}
.schedule-item .description .description-content .contact-list .contact.add-contact:hover {
background-color: rgba(152, 205, 96, 0.25);
}
.schedule-item.free .time {
border: 2px solid #98cd60;
}
.schedule-item.free .description .description-header {
background-color: #ffffff;
color: #c5c5c5;
display: block;
float: left;
}
.schedule-item.free .description .description-content {
margin-left: 5px;
margin-top: 0;
content: '';
width: 215px;
display: block;
float: right;
background-image: url(https://dl.dropboxusercontent.com/u/2915418/filler.png);
background-repeat: no-repeat;
background-position: right center;
}
footer {
margin-top: 30px;
color: #c5c5c5;
display: block;
text-align: center;
}
footer a {
color: #98cd60;
text-decoration: none;
}
.today{
background-color: #7D7D7D;
color: #98CD60;
border-radius: 30px;
width: 20px;
height: 20px;
}
.notInTheMonth{
background-color: #272727;
border-radius: 30px;
color: #444444;
}
.headerWrapper{
color: #a7a7a7;
border-bottom: 1px solid #484848;
margin: 0;
padding: 0;
text-align: justify;
line-height: 0px;
font-size: 0px;
padding: 10px 0px;
}
.headerWrapper::after {
content: '';
display: inline-block;
width: 100%;
}
.itemsCalendar{
display: block;
max-height: 225px;
}
.itemsCalendar thead, .dates tr, .tempCalendar tr{
display: table;
width: 100%;
table-layout: fixed;
}
.tempCalendar{
display: none;
}
<html>
<head>
<title>Calendrier</title>
<meta charset="utf-8" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<div class="planner">
<div class="calendar">
<div class="calendar-header">
<div class="headerWrapper">
<a class="btn btn-prev previousYear">
<i class="icon-angle-left"></i>
</a>
<span class="currentYear">July</span>
<a class="btn btn-next nextYear">
<i class="icon-angle-right"></i>
</a>
</div>
<div class="headerWrapper">
<a class="btn btn-prev previousMonth">
<i class="icon-angle-left"></i>
</a>
<span class="currentMonth"></span>
<a class="btn btn-next nextMonth">
<i class="icon-angle-right"></i>
</a>
</div>
</div>
</div>
</div>
</body>
</html>
js/calendar.js
index.html
css/style.css
When clicking on notInTheMonth classed elements, there will be problems (too much day in the output, more than one month passed etc...)
To trigger the first time the click event listener, you have to pass one month or one year before. After that, it will enable the click event on the notInTheMonth day (element with background dark grey and text grey, who refer to a non-in-month day.
Frequently, the problem occurs on the second or third time we click in a notInTheMonth element.
I can't correct my trouble, so can you please help me ?