I need the final page (after going through and submitting everything) to print with the student names dragged into the team boxes, but whatever I try with the display/float/position properties, the student cards won't show when printing the page.
My code is using interact_min.js from Interact.io as well which is in the codepen project.
Codepen Project Link
Here is a screenshot of the final page when students are distributed into teams. I need the page to print out like this for teachers. (Class sizes vary so it has to work for >= 8 students which will be #ofTeams >= 2)
I have tried quite a few "fixes" from various sites, but none of them are working for me. Any help is appreciated. I am relatively new to coding, so please explain thoroughly.
This is what it looks like when I try to print.
Here I have changed the scale to 30% and you can see 7/8 of the student cards.
function isInputNumber(){
const inputNumber = parseInt($("#numberOfStudents").val());
if(isNaN(inputNumber)) {
alert('Must input a number');
return ;
} else {
return ;
}
}
function isNumberBigEnough() {
const numberS = parseInt($("#numberOfStudents").val());
if (numberS > 7 && isInputNumber) {
$('#submitTeams').removeAttr('disabled');
} else {
return ;
}
}
$('#numberOfStudents').keyup(isInputNumber).keyup(isNumberBigEnough);
//First submit function on the team form gives the user a response
$( "#submitTeams" ).click(function( event ) {
event.preventDefault();
const numberOfStudents = parseInt($("#numberOfStudents").val());
const divideByFour = numberOfStudents % 4;
let responseHTML = '<p id="numberOverall">'+numberOfStudents+'</p><p class="responseText">';
if (divideByFour === 0){
responseHTML += 'You will have ' + numberOfStudents / 4 + ' teams of 4 in your class.';
}
else if (divideByFour === 1) {
responseHTML += 'You will have ' + (numberOfStudents - 1) /4 + ' teams of 4 in your class and one team of 5.';
}
else if (divideByFour === 2) {
responseHTML += 'You will have ' + (numberOfStudents - 6) /4 + ' teams of 4 in your class and two teams of 3.';
}
else {
responseHTML += 'You will have ' + (numberOfStudents - 3) /4 + ' teams of 4 in your class and one team of 3.';
}
responseHTML += '</p>';
$('#studentNumberResponse').css('display', 'block').html(responseHTML);
//second submit function on the team form that makes the second form (studentsForm)
let responseHTMLSecond = '<div class="card-block"> <h4 class="card-title">Step 2: Enter Your Students</h4> <p class="card-text">Add your students to create each individual team.</p> <form id="studentsForm" onsubmit="return false;">';
let i = 0;
do {
i++;
responseHTMLSecond += '<h4 class="numberingStudents">Student ' + i + '</h4>';
responseHTMLSecond += '<div class="form-group"> <h4> <input type="text" class="form-control" id="studentFirstName'+i+'" aria-describedby="studentFirstName" placeholder="First Name"> </div> <div class="form-group"> <input type="text" class="form-control" id="studentLastName'+i+'" aria-describedby="studentLastName" placeholder="Last Name"> </div> <div class="form-group"> <label for="exampleSelect1">Select Student Level</label> <select class="form-control" id="exampleSelect'+i+'"> <option>High</option> <option>Mid-High</option> <option>Mid-Low</option> <option>Low</option> </select> </div>';
} while (i < numberOfStudents);
responseHTMLSecond += '<button type="submit" class="btn btn-primary" id="submitStudents" onclick="addStudentsClicked()">Submit</button> </form> <small class="text-muted">Click the Submit button when you have finished adding all students or after making any changes to student names.</small> </div>';
$('#secondsStep').show().html(responseHTMLSecond);
$('#numberOfStudents').val('');
});
//submit function on the studentsForm to show a response
function addStudentsClicked()
{
let responseHTMLThird = '<h4 class="card-title">Step 3: Review Class Roster</h4> <p class="card-text">Review your class roster before moving on to the next step. If you need to make any changes, scroll back up to Step 2 and hit submit again after changes have been made.</p>';
const numberOfStudentsTwo = parseInt($("#numberOverall").text());
let Students = [];
for (i =1; i < numberOfStudentsTwo+1; i++) {
let $firstName = $('#studentFirstName'+i+'').val();
let $lastName = $('#studentLastName'+i+'').val();
let $studentLevel = $('#exampleSelect'+i+' :selected').text();
Students[i] = new Object({$firstName, $lastName, $studentLevel});
responseHTMLThird += '<p class="studentRosterList">'+Students[i].$firstName+' '+Students[i].$lastName+' : '+Students[i].$studentLevel+'</p>';
}
responseHTMLThird += '<button type="submit" class="btn btn-primary" id="submitOverall" onclick="finalSubmit()">Submit</button>';
alert('Scroll down to review your student roster.');
$('#studentListResponse').show().html(responseHTMLThird);
}
function finalSubmit () {
if(confirm("Are you sure everything is correct?") === true){
$('.hideMe').hide();
document.location.href = "#top";
makingCards();
} else {
alert('Please make your changes before submitting again.');
}
}
function makingCards () {
let makeTeams = '<div class="card-block clearfix" id="makeTeams"><h4 class="card-title">Step 4: Make Teams</h4><p class="card-text">Use your mouse to click and drag students into team groupings. Remember, you don\'t want to have 2 Highs or 2 Lows on a team together.</p></div>';
const numberOfStudentsTwo = parseInt($("#numberOverall").text());
const numero = numberOfStudentsTwo % 4;
let fourthResponse = '';
let StudentsTwo = [];
for (i =1; i < numberOfStudentsTwo+1; i++) {
let $firstName = $('#studentFirstName'+i+'').val();
let $lastName = $('#studentLastName'+i+'').val();
let $studentLevel = $('#exampleSelect'+i+' :selected').text();
StudentsTwo[i] = new Object({$firstName, $lastName, $studentLevel});
fourthResponse += '<div class="card teamCard draggable" style="width: 10rem;"><div class="card-block teamCard-block">';
fourthResponse += '<h4 class="card-title teamCard-title">'+ StudentsTwo[i].$firstName;
fourthResponse += ' '+ StudentsTwo[i].$lastName;
fourthResponse += '</h4>';
fourthResponse += '<h6 class="card-subtitle mb-2 text-muted teamCard-subtitle">Student Level: '+ StudentsTwo[i].$studentLevel;
fourthResponse += '</h6>';
fourthResponse += '</div></div>';
}
$('#top').append(makeTeams);
teamNumber();
$('#teamDropBox').after(fourthResponse);
$('.teamCard').mousedown(handle_mousedown);
}
function teamNumber (numero) {
const numberOfStudentsTwo = parseInt($("#numberOverall").text());
let $teamDrops = '<table id="teamDropBox"><tbody>';
if (numero === 0){
let $teams = numberOfStudentsTwo / 4;
for (j=1; j < $teams; j++){
$teamDrops += '<tr><th class="teamDrops">Team ' + j +':</th><td class="dropzone"></td></tr>';
}
} else if (numero === 1) {
let $teams = (numberOfStudentsTwo - 1) / 4 + 1;
for (j=1; j < $teams; j++){
$teamDrops += '<tr><th class="teamDrops">Team ' + j +':</th><td class="dropzone"></td></tr>';
}
} else if (numero === 2) {
let $teams = (numberOfStudentsTwo - 6) / 4 + 2;
for (j=1; j < $teams; j++){
$teamDrops += '<tr><th class="teamDrops">Team ' + j +':</th><td class="dropzone"></td></tr>';
}
} else {
let $teams = (numberOfStudentsTwo - 3) / 4 + 1;
for (j=1; j < $teams; j++){
$teamDrops += '<tr><th class="teamDrops">Team ' + j +':</th><td class="dropzone"></td></tr>';
}
$teamDrops += '</tbody></table>';
}
$('#makeTeams').append($teamDrops);
}
//dragging code from online site - changed to interact.js code below
/*
function handle_mousedown(e){
window.my_dragging = {};
my_dragging.pageX0 = e.pageX;
my_dragging.pageY0 = e.pageY;
my_dragging.elem = this;
my_dragging.offset0 = $(this).offset();
function handle_dragging(e){
var left = my_dragging.offset0.left + (e.pageX - my_dragging.pageX0);
var top = my_dragging.offset0.top + (e.pageY - my_dragging.pageY0);
$(my_dragging.elem)
.offset({top: top, left: left});
}
function handle_mouseup(e){
$('body')
.off('mousemove', handle_dragging)
.off('mouseup', handle_mouseup);
}
$('body')
.on('mouseup', handle_mouseup)
.on('mousemove', handle_dragging);
}
*/
//interact.js code here:
// target elements with the "draggable" class
interact('.draggable')
.draggable({
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
restriction: ".dropzone",
endOnly: true,
elementRect: { top: 0, left: 0, bottom: 1, right: 1 }
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
});
function dragMoveListener (event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
// enable draggables to be dropped into this
interact('.dropzone').dropzone({
// only accept elements matching this CSS selector
accept: '.draggable',
// Require a 75% element overlap for a drop to be possible
overlap: 0.75,
// listen for drop related events:
ondropactivate: function (event) {
// add active dropzone feedback
event.target.classList.add('drop-active');
},
ondropdeactivate: function (event) {
// remove active dropzone feedback
event.target.classList.remove('drop-active');
}
});
* {
box-sizing: border-box;
}
#studentNumberResponse, #secondsStep, #studentListResponse {
display: none;
}
#numberOverall {
color: #fff;
}
.responseText {
font-size: 2rem;
}
.teamCard {
float: right;
margin: 2rem;
}
table {
border-collapse: collapse;
border: 1px solid grey;
margin: 3rem 0 5rem 1rem;
float: left;
}
table th {
border: 1px solid grey;
vertical-align: center;
text-align: center;
width: 18rem;
padding: 0 5rem;
text-transform: uppercase;
font-size: 2rem;
}
table td {
height: 15rem;
border: 1px solid grey;
width: 50rem;
}
#media print {
body * {
visibility: hidden;
}
#top, #top * {
visibility: visible;
}
#top {
position: absolute;
left: 0;
top: 0;
}
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>OnPoint Team Generator</title>
<meta name="description" content="OnPoint Team Generator">
<meta name="author" content="MeganRoberts">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div class="card" id="top">
<h3 class="card-header" style="text-align: center;">OnPoint Team Generator</h3>
<div class="card-block hideMe">
<h4 class="card-title">Step 1: Number of Teams</h4>
<p class="card-text">How many students do you have in your class?</p>
<form id="teamForm">
<div class="form-group">
<input type="text" class="form-control" id="numberOfStudents" aria-describedby="numberStudents" placeholder="Enter Number of Students" data-toggle="tooltip" data-placement="top" title="Please enter a number larger than 7.">
</div>
<button type="submit" class="btn btn-primary" id="submitTeams" disabled>Submit</button>
</form>
</div>
</div>
<div class="card hideMe">
<div class="card-block" id="studentNumberResponse">
</div>
</div>
<div id="secondsStep" class="card hideMe">
</div>
<div id="listResponse" class="card hideMe">
<div class="card-block" id="studentListResponse">
</div>
</div>
<script src="interact_min.js"></script>
<script src="app.js"></script>
</body>
</html>
I had to overhaul my code a bit to get it to print. I changed the drag and drop to jquery UI sortable instead.
Codepen Project
Requires jquery UI to fully function so check out the codepen link -> below is the "final" code
$('#printbtn').hide();
$('#studentNumberResponse').hide();
$('#secondsStep').hide();
$('#listResponse').hide();
//Checking to make sure the input is a number for the rest of the program to work
function isInputNumber(){
//get user input
const inputNumber = parseInt($("#numberOfStudents").val());
//check if input is a number or not
if(isNaN(inputNumber)) {
alert('Must input a number');
return ;
} else {
return ;
}
}
//Checking to make sure that the input is larger than 7 in order to create teams and remove the disabled from the submit button
function isNumberBigEnough() {
//get user input
const numberS = parseInt($("#numberOfStudents").val());
//check to make sure that the number is large enough and then remove the disabled attribute
if (numberS > 7 && isInputNumber) {
$('#submitTeams').removeAttr('disabled');
} else {
return ;
}
}
//watching user input to determine if they can submit using the above functions
$('#numberOfStudents').keyup(isInputNumber).keyup(isNumberBigEnough);
//First submit function on the team form gives the user a response of how many teams and what kind of teams depending on their input
$( "#submitTeams" ).click(function( event ) {
//prevent the window from refeshing after submit event
event.preventDefault();
//get user input
const numberOfStudents = parseInt($("#numberOfStudents").val());
//DRY for repeated calc
const divideByFour = numberOfStudents % 4;
//response to user to tell them the number of teams there will be in their class
let responseHTML = '<p id="numberOverall">'+numberOfStudents+'</p><p class="responseText">';
if (divideByFour === 0){
responseHTML += 'You will have ' + numberOfStudents / 4 + ' teams of 4 in your class.';
}
else if (divideByFour === 1) {
responseHTML += 'You will have ' + (numberOfStudents - 5) /4 + ' teams of 4 in your class and one team of 5.';
}
else if (divideByFour === 2) {
responseHTML += 'You will have ' + (numberOfStudents - 6) /4 + ' teams of 4 in your class and two teams of 3.';
}
else {
responseHTML += 'You will have ' + (numberOfStudents - 3) /4 + ' teams of 4 in your class and one team of 3.';
}
responseHTML += '</p>';
//show and add the above html to the studentNumberResponse so the user can view the response
$('#studentNumberResponse').css('display', 'block').html(responseHTML);
//second submit function on the team form that makes the second form (studentsForm) to allow the user to enter student names for sorting later
//create form to match the student numbered entered
let responseHTMLSecond = '<div class="card-block"> <h4 class="card-title"><span>Step 2:</span> Enter Your Students</h4> <p class="card-text lightText">Add your students to create each individual team.</p> <form id="studentsForm" onsubmit="return false;">';
//needed for the do while loop
let i = 0;
do {
i++;
//firstname and lastname and level input for each student
responseHTMLSecond += '<h4 class="numberingStudents">Student ' + i + '</h4>';
responseHTMLSecond += '<div class="form-group"> <input type="text" class="form-control" id="studentFirstName'+i+'" aria-describedby="studentFirstName" placeholder="First Name"> </div> <div class="form-group"> <input type="text" class="form-control" id="studentLastName'+i+'" aria-describedby="studentLastName" placeholder="Last Name"> </div> <div class="form-group"> <label for="exampleSelect1">Select Student Level</label> <select class="form-control" id="exampleSelect'+i+'"> <option>High</option> <option>Mid-High</option> <option>Mid-Low</option> <option>Low</option> </select> </div>';
} while (i < numberOfStudents);
//add submit button to end of the student info form
responseHTMLSecond += '<button type="submit" class="btn btn-primary opbtn" id="submitStudents" onclick="addStudentsClicked()">Submit</button> </form> <small class="text-muted">Click the Submit button when you have finished adding all students or after making any changes to student names.</small> </div>';
//show and add the above html for the student info form
$('#secondsStep').show().html(responseHTMLSecond);
//clear the number of students input field
$('#numberOfStudents').val('');
});
//submit function on the studentsForm to show the class roster for a final check before moving on
function addStudentsClicked() {
//html for the third response
let responseHTMLThird = '<h4 class="card-title"><span>Step 3:</span> Review Class Roster</h4> <p class="card-text lightText">Review your class roster before moving on to the next step. If you need to make any changes, scroll back up to Step 2 and hit submit again after changes have been made.</p>';
//hidden numberOfStudents to use in future functions like this one = user input from first step
const numberOfStudentsTwo = parseInt($("#numberOverall").text());
//create empty array to add students from student info form
let Students = [];
//for each student, create an object with the input information from the previous form
for (i =1; i < numberOfStudentsTwo+1; i++) {
let $firstName = $('#studentFirstName'+i+'').val();
let $lastName = $('#studentLastName'+i+'').val();
let $studentLevel = $('#exampleSelect'+i+' :selected').text();
Students[i] = new Object({$firstName, $lastName, $studentLevel});
//use the data in the array to print out a student roster for the user to review
responseHTMLThird += '<p class="studentRosterList">'+Students[i].$firstName+' '+Students[i].$lastName+' : '+Students[i].$studentLevel+'</p>';
}
//final submit button for the user to click on after reviewing the student roster
responseHTMLThird += '<button type="submit" class="btn btn-primary opbtn" id="submitOverall" onclick="finalSubmit()">Submit</button>';
//response appears below the viewport, so an alert to let them know to scroll down
alert('Scroll down to review your student roster.');
//show and add response to the page
$('#listResponse').show();
$('#studentListResponse').show().html(responseHTMLThird);
}
//asking the user if everything is correct before moving on (cant go back and change)
function finalSubmit () {
if(confirm("Are you sure everything is correct?") === true){
//hide forms that are no longer needed
$('.hideMe').hide();
//move the user back to the top of the screen
document.location.href = "#top";
//cal the function to make the team boxes
makingTeams();
} else {
alert('Please make your changes before submitting again.');
}
}
//making the teams dropzone containers
function makingTeams () {
//header for step 4
let makeTeams = '<div class="card-block clearfix printMe" id="makeTeams"><h4 class="card-title"><span>Step 4:</span> Make Teams</h4><p class="card-text lightText">Use your mouse to click and drag students into team groupings. Remember, you don\'t want to have 2 Highs or 2 Lows on a team together.</p><p id="reminderTeams" class="lightText"></p></div>';
//get the number of students for creating the correct amount of teams
const numberOfStudentsTwo = parseInt($("#numberOverall").text());
//get the remainder to split the loops depending on the number of students
const numero = numberOfStudentsTwo % 4;
//start the response string
let $teamDrops = '';
//creating the team ul for sorting ui
if (numero === 0){
//if equally divisible, then the number divided by four = the number of teams
let $teams = numberOfStudentsTwo / 4;
for (let j=1; j < $teams +1; j++){
$teamDrops += '<ul class="teamDrops connected printMe"><h4>Team ' + j +':</h4></ul>';
}
} else if (numero === 1) {
//if remainder 1, then subtract the one team of five from the total, divide by four to get the number of teams and add back the 1 team of 5
let $teams = (numberOfStudentsTwo - 5) / 4 + 1;
for (let j=1; j < $teams +1; j++){
$teamDrops += '<ul class="teamDrops connected printMe"><h4>Team ' + j +':</h4></ul>';
}
} else if (numero === 2) {
//if remainder 2, then subtract 6 for the two teams of 3 then divide by four to get the number of teams and add back the 2 teams of 3
let $teams = (numberOfStudentsTwo - 6) / 4 + 2;
for (let j=1; j < $teams+1; j++){
$teamDrops += '<ul class="teamDrops connected printMe"><h4>Team ' + j +':</h4></ul>';
}
} else {
//if remainder 3, then subtract the one team of 3 then divide by four and add back the 1 team of 3
let $teams = (numberOfStudentsTwo - 3) / 4 + 1;
for (let j=1; j < $teams+1; j++){
$teamDrops += '<ul class="teamDrops connected printMe"><h4>Team ' + j +':</h4></ul>';
}
}
//append the instructions to the top
$('#top').append(makeTeams);
//append the team ul drops to the top
$('#top').append($teamDrops);
//create empty list for student roster to fill into
let studentRoster = '<ul id="rosterDrag" class="connected printMe"><h4>Student Roster</h4></ul>';
//append the student roster to the top
$('#top').append(studentRoster);
//call the function to make the student roster list for dragging
makingCards();
}
//making the individual student cards based off of the input from step 2
function makingCards () {
//get student number info
const numberOfStudentsTwo = parseInt($("#numberOverall").text());
//start response html
let fourthResponse = '';
//start array to hold student data
let StudentsTwo = [];
//start loop to create object for each student
for (i =1; i < numberOfStudentsTwo+1; i++) {
let $firstName = $('#studentFirstName'+i+'').val();
let $lastName = $('#studentLastName'+i+'').val();
let $studentLevel = $('#exampleSelect'+i+' :selected').text();
StudentsTwo[i] = new Object({$firstName, $lastName, $studentLevel});
//add html to the response
fourthResponse += '<li class="card teamCard'+i+' draggable printMe" style="width: 10rem;">';
fourthResponse += '<h4 class="card-title teamCard-title">'+ StudentsTwo[i].$firstName;
fourthResponse += ' '+ StudentsTwo[i].$lastName;
fourthResponse += '</h4>';
fourthResponse += '<h6 class="card-subtitle mb-2 text-muted teamCard-subtitle">Student Level: '+ StudentsTwo[i].$studentLevel;
fourthResponse += '</h6>';
fourthResponse += '</li>';
}
//append the student roster to the ul
$('#rosterDrag').append(fourthResponse);
//jquery ui to sort students into teams
$( function() {
//making the individual team ul's sortable and connected to each other
$( ".teamDrops" ).sortable({
connectWith: ".connected"
}).disableSelection();
//making the student roster ul sortable and connected to the others
$( "#rosterDrag" ).sortable({
connectWith: ".connected"
}).disableSelection();
});
//get number of teams info from first response
let reminder = $('.responseText').text();
//set reminder text to last page
$('#reminderTeams').text(reminder);
//show the print button
$('#printbtn').show();
}
//print the page
function pdfPrint () {
//hide unwanted elements from the printed page
$('#printbtn').hide();
$('#rosterDrag').hide();
$('#makeTeams').hide();
//print the window
window.print();
}
* {
box-sizing: border-box;
}
body {
background-color: lightgrey;
}
#opArrows {
width: 10rem;
height: auto;
}
.opbtn {
color: #fff;
background-color: #434343;
border-color: #434343;
}
.opbtn:hover {
color: #fff;
background-color: #f5822d;
border-color: #f5822d;
}
.opbtn:disabled {
color: #fff;
background-color: #8c8c8c;
border-color: #8c8c8c;
}
#title {
background-color: #0a6c8e;
color: black;
}
h4 span {
color: #c4da59;
}
#numberOverall {
color: #fff;
display: none;
}
#studentNumberResponse {
padding-top: 2rem;
font-size: 1.5rem;
color: #8c8c8c;
}
#listResponse p:nth-child(odd) {
background-color: lightgrey;
}
.studentRosterList {
width: 25%;
padding-left: 0.5rem;
}
.lightText {
color: #8c8c8c;
}
.form-group {
width: 50%;
}
.teamDrops, #rosterDrag {
border: 1px solid #eee;
width: 75%;
min-height: 5rem;
list-style-type: none;
margin: 1rem;
padding: 1rem 0rem;
}
.teamDrops h4, #rosterDrag h4 {
margin-bottom: 1.5rem;
padding-left: 1rem;
}
.draggable {
margin: 0 5px 5px 5px;
padding: 5px;
font-size: 1.2rem;
width: 20rem;
display: inline-block;
}
#reminderTeams {
font-weight: bold;
}
#printbtn {
margin: 2rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>OnPoint Team Generator</title>
<meta name="description" content="OnPoint Team Generator">
<meta name="author" content="MeganRoberts">
<script src="scripts/jquery-3.2.1.min.js"></script>
<script src="scripts/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles/main.css" type="text/css">
</head>
<body>
<div class="card printMe" id="top">
<h3 id="title" class="card-header" style="text-align: center;"><img src="https://lh6.googleusercontent.com/N8Syzsw2aCV_qrh4pKOFgdamHSgD6gDQvGeKayDJBVfHBK2TMeQ3PnlpJ5BHD5ZVXk7YE4toSpav1co=w1920-h950-rw" alt="OnPoint Arrows" id="opArrows"> Team Generator</h3>
<div id="stepOne" class="card-block hideMe">
<h4 class="card-title"><span>Step 1:</span> Number of Teams</h4>
<p class="card-text lightText">How many students do you have in your class?</p>
<form id="teamForm">
<div class="form-group">
<input type="text" class="form-control" id="numberOfStudents" aria-describedby="numberStudents" placeholder="Enter Number of Students" data-toggle="tooltip" data-placement="top" title="Please enter a number larger than 7.">
</div>
<button type="submit" class="btn btn-primary opbtn" id="submitTeams" disabled>Submit</button>
</form>
</div>
</div>
<div class="card hideMe">
<div class="card-block" id="studentNumberResponse">
</div>
</div>
<div id="secondsStep" class="card hideMe">
</div>
<div id="listResponse" class="card hideMe listResponse">
<div class="card-block" id="studentListResponse">
</div>
</div>
<footer>
<div>
<button type="submit" id="printbtn" class="btn btn-primary btn-lg clearfix opbtn" onclick="pdfPrint()">Print</button>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
Related
So i am here wrote this simple function for searching movies and manipulating them in the dom.and the problem here is when a movie name is typed the api response back with at least 20/30 recommendations.And i want the fetched data to be distributed in 8 columns per row.So i wrote this function :
Javascript part :
db.multisearch()
.then(data=>{
var div=document.getElementById('call');
var output='';
for(let i=0;i<data.length;i++){
var poster=data[i].poster_path;
var title=data[i].title;
for(let j=0;j<=8;j++){
output +=`<div class="col-sm">
<div class="card mb-3">
<img class="card-img-top" src='https://image.tmdb.org/t/p/w342//${poster}' alt="Card image cap">
<div class="text-block"><p>${title}</p></div>
</div>
</div>`;
}
}
div.innerHTML=output;
});
HTML part that im manipulating :
<section class="movie-page">
<div class="container">
<div class="row" id="call"></div>
</div>
But Instead of the desired outcome ,it just repeats one movie 8 times.
And I am trying to get the model to be somewhat like this each row without repeating any movie:
I am a newbie so i might have missed something. Please do help .
Your loop should be like the following; you need to close the current row after every 8th item and then open a new row.
var output = '<div class="row">';
for(let j=1; j<=data.lenght; j++){
output +=`<div class="col-xs-1">
content into column
</div> \n`;
if(j !== 0 && j%8 === 0) {
output += '</div><div class="row">';
}
}
output += '</div>';
See the working example below:
var output = '<div class="row">';
for(let j = 1; j<= 50; j++){
output +=`<div class="col-xs-1">
${j}
</div> \n`;
if(j !== 0 && j%8 === 0) {
output += '</div><div class="row">';
}
}
output += '</div>';
document.getElementById('container').innerHTML = output;
.row {
margin-bottom: 10px;
overflow: hidden;
display: block;
}
.row .col-xs-1 {
float: left;
box-sizing: border-box;
color: red;
text-align: center;
display: block;
margin-bottom: 10px;
width: 8.33%;
padding: 10px;
}
<div class="container" id="container"></div>
I've been trying to build an application to submit form selections to an existing spreadsheet on a local machine. This is intended for a windows machine, but I am working on ubuntu, and don't have access to a windows development environment. With this, I'm trying to parse an excel document, find the bottom row, capture the 'ingredients' list, or other form values, then insert the value of the hash into the excel column and save the changes to the document. Any suggestions on where I should start would be great.
-- Thanks a million
//Script
$(document).ready(doInput);
function doInput(){
var ingreds = $('.ingredients');
var count = $('.count');
var runs = $('#runs');
var cb = $('.cb');
var bb = $('.bb');
var fullDate = new Date();
var twoDigitMonth = ((fullDate.getMonth().length+1) === 1)? (fullDate.getMonth()+1) : '0' + (fullDate.getMonth()+1);
var currentDate = twoDigitMonth + "/" + fullDate.getDate() + "/" + fullDate.getFullYear();
var bbDate = fullDate.getMonth() + 8;
cb.html("C&B:<br />" + currentDate);
if (bbDate > 12){
bb.html("BB:<br />" + "0" + (bbDate - 12) + "/" + fullDate.getDate() + "/" + (fullDate.getFullYear() + 1));
}else{
bb.html("Best By:<br />" + bbDate + "/" + fullDate.getDate() + "/" + fullDate.getFullYear());
}
var recipes = {
'Volvo': {
'Torq': 1231,
'Leather': 131,
'Blue': 22
},
'Jet': {
'HP': 1233,
'Leather': 121,
'Candy': 1313,
'Gas': 1313,
'Billiard': 223
},
'Mac': {
'Torq': 12111,
'Cheddar': 123
},
'Hog': {
'Torq': 475,
'Sugar': 12,
'Sheer': 11,
'Water': 2323,
'Wheels': 3
}
}
var recipe;
ingreds.html("Ingredients:<br />");
count.html("The Yield is:" + $('#yield').val() + "?<br />");
if ($("option:selected").val() == 'volv') {
recipe = recipes['Volvo'];
}else if($("option:selected").val() == 'jet') {
recipe = recipes['Jet'];
}else if($("option:selected").val() == 'mac') {
recipe = recipes['Mac'];
}else if($("option:selected").val() == 'hog') {
recipe = recipes['Hog'];
}
for (key in recipe){
if(key == 'Sugar'){
ingreds.append(key + ": " + recipe[key] * runs.val() + 'Lbs<br />');
}else{
ingreds.append(key + ": " + recipe[key] * runs.val() + 'g<br />');
}
}
return true;
}
body {
background: rgba(150,150,150,.5);
}
.container {
width: 80%;
margin: auto;
padding: 10px;
}
.ingredients {
padding: 10px;
padding-left: 20px;
}
.count {
margin-top: 25px;
font-weight: Bold;
color: #700;
}
.submit,
.ingredients,
.flavor,
.runs,
.yieldShell,
.bestBy,
.cb,
.bb {
min-width: 215px;
}
.count {
min-width: 190px;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.row:before,
.row:after {
display: table;
content: " ";
}
.row:after {
clear: both;
}
.col-sm-4{
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
#media (min-width: 540px) {
.container {
width: 750px;
}
.col-sm-4 {
float: left;
width: 33.33333333333333%;
}
}
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="container">
<form oninput="doInput()">
<div class="row">
<div class="flavor col-sm-4">
Flavor:<br />
<select name="flavors">
<option value="volv" selected="selected">Volvo</option>
<option value="jet">Jet</option>
<option value="mac">Mac</option>
<option value="hog">Hog</option>
</select>
</div>
<div class="runs col-sm-4">
Number of runs:<br />
<input type="number" id="runs" name="runs" value="1">
</div>
</div>
<div class="row">
<div class="ingredients col-sm-4"></div>
<div class="yieldShell col-sm-4">
<div class="yield">Yield:<br />
<input type="number" id="yield" name="yield" value="450">
</div>
<div class="count col-sm-4"></div>
</div>
</div>
<div class="row">
<div class="submit col-sm-4">
<input type="submit" value="Save to Production Log?">
</div>
<div class="bestBy col-sm-4">
<div class="row">
<div class="col-sm-4 cb"></div>
</div>
<div class="row">
<div class="col-sm-4 bb"></div>
</div>
</div>
</div>
</form>
</div>
Are you not looking at this from the wrong angle?
Rarely would you try to access an Excel document directly, since the quantity of 'irrelevant' data is huge (data needed by Excel to reconstruct the page itself, but not directly related to the data the user is storing - meta-data if you will; i.e. font used, size of font, etc.).
Usually you would output the data to a CSV and allow the user to import the data into any spreadsheet program, which gives you greater flexibility and is simpler to code.
In terms of adding the data, you could easily open the existing CSV and append new data, or search the file and insert the data where required. However, if others are to use the CSV then I'd save the data in a single-table database as well as in the CSV. Then you simply construct a new CSV each time, overwriting any existing file if necessary.
No code help here at present, and I might be wrong, but this is the approach I have used and seen used.
I'm trying to make it so the user cannot press a number button until the start button is pressed. I've searched w3schools and other sites, but cannot find a solution. Any help would be appreciated, even if you can point me to a website. My instructor has informed use that we would need to find any solutions to our problems online. Even suggestions for a good javascript book would be helpful as there is no text book for the class and he doesn't teach it.
<body>
<h3 style="margin-left: 15px">This is Your TARGET:</h3>
<div id="randomNum" class="display" style="margin-top: -20px; margin-bottom: 30px">0</div>
<!-- Start button -->
<button onclick="setTimeout(myFunction, 5000);">Start</button>
<!-- Total value text -->
<div id="text_total">0</div>
<!-- Number buttons -->
<div class="number_button" onclick="change_total(1)">1</div>
<div class="number_button" onclick="change_total(2)">2</div>
<div class="number_button" onclick="change_total(3)">3</div>
<div class="number_button" onclick="change_total(4)" style="clear: left">4</div>
<div class="number_button" onclick="change_total(5)">5</div>
<div class="number_button" onclick="change_total(6)">6</div>
<div class="number_button" onclick="change_total(7)" style="clear: left; margin-bottom: 30px">7</div>
<div class="number_button" onclick="change_total(8)" style="margin-bottom: 30px">8</div>
<div class="number_button" onclick="change_total(9)" style="margin-bottom: 30px">9</div>
<h3 style="clear: left; margin-left: 58px">COUNTER!</h3>
<div id="counter" class="display" style="clear: left; margin-top: -20px">0</div>
<script>
// Variables
var total = 0;
var target;
var clicks = 0;
window.onload = randomNumber();
// Functions
function change_total(arg) { // This takes button input and changes the total value
total = total + arg;
clicks = clicks + 1;
update_total();
if (total == target) {
alert("You win!"); // popup window with message
total = 0; // reset for next round
clicks = 0; // resets the click counter
randomNumber(); //gets new number for next round
update_total();
}if (total > target) {
alert("BUSTED!!");
total = 0;
clicks = 0;
randomNumber();
update_total();
}
update_clicks();
}
function myFunction() {
alert("You failed to reach the target in time!");
}
function update_total() { // Updates the text on the screen to show the current total
document.getElementById("text_total").innerHTML = total;
}
function randomNumber() { // returns a random number between 25 and 75
target = Math.floor(Math.random() * (50) + 25);
document.getElementById("randomNum").innerHTML = target;
}
function update_clicks() { // lets user know how many clicks
document.getElementById("counter").innerHTML = "You clicked the mouse " + clicks + " times.";
}
</script>
</body>
You may try for this,
I have tested it on my end, see below,
i just use isStart boolean variable to check is game start or not.
<body>
<h3 style="margin-left: 15px">This is Your TARGET:</h3>
<div id="randomNum" class="display" style="margin-top: -20px; margin-bottom: 30px">0</div>
<!-- Start button -->
<button onclick="startGame()">Start</button>
<!-- Total value text -->
<div id="text_total">0</div>
<!-- Number buttons -->
<div class="number_button" onclick="change_total(1)">1</div>
<div class="number_button" onclick="change_total(2)">2</div>
<div class="number_button" onclick="change_total(3)">3</div>
<div class="number_button" onclick="change_total(4)" style="clear: left">4</div>
<div class="number_button" onclick="change_total(5)">5</div>
<div class="number_button" onclick="change_total(6)">6</div>
<div class="number_button" onclick="change_total(7)" style="clear: left; margin-bottom: 30px">7</div>
<div class="number_button" onclick="change_total(8)" style="margin-bottom: 30px">8</div>
<div class="number_button" onclick="change_total(9)" style="margin-bottom: 30px">9</div>
<h3 style="clear: left; margin-left: 58px">COUNTER!</h3>
<div id="counter" class="display" style="clear: left; margin-top: -20px">0</div>
<script>
// Variables
var total = 0;
var target;
var clicks = 0;
window.onload = randomNumber();
var isStart=false;
// Functions
function change_total(arg) { // This takes button input and changes the total value
if(isStart){
total = total + arg;
clicks = clicks + 1;
update_total();
if (total == target) {
alert("You win!"); // popup window with message
total = 0; // reset for next round
clicks = 0; // resets the click counter
randomNumber(); //gets new number for next round
update_total();
isStart=false;
}if (total > target) {
alert("BUSTED!!");
total = 0;
clicks = 0;
randomNumber();
update_total();
isStart=false;
}
update_clicks();
}
else{
alert('please start the game');
}
}
function myFunction() {
alert("You failed to reach the target in time!");
}
function update_total() { // Updates the text on the screen to show the current total
document.getElementById("text_total").innerHTML = total;
}
function randomNumber() { // returns a random number between 25 and 75
target = Math.floor(Math.random() * (50) + 25);
document.getElementById("randomNum").innerHTML = target;
}
function update_clicks() { // lets user know how many clicks
document.getElementById("counter").innerHTML = "You clicked the mouse " + clicks + " times.";
}
function startGame(){
isStart=true;
}
</script>
</body>
I am trying to get some data from the server. I am displaying it in the form of a list. The list is getting displayed nicely. However, when the user clicks a list-item; the user should see the contents related to that particular list item in a modal. How to do I go about it?
Here is my code:
<!DOCTYPE>
<html>
<head>
<title>Pagination tutorial</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://bootswatch.com/yeti/bootstrap.min.css" type="text/css">
<style>
#pagination div { display: inline-block; margin-right: 5px; margin-top: 5px }
#pagination .cell a { border-radius: 3px; font-size: 11px; color: #333; padding: 8px; text-decoration:none; border: 1px solid #d3d3d3; background-color: #f8f8f8; }
#pagination .cell a:hover { border: 1px solid #c6c6c6; background-color: #f0f0f0; }
#pagination .cell_active span { border-radius: 3px; font-size: 11px; color: #333; padding: 8px; border: 1px solid #c6c6c6; background-color: #e9e9e9; }
#pagination .cell_disabled span { border-radius: 3px; font-size: 11px; color: #777777; padding: 8px; border: 1px solid #dddddd; background-color: #ffffff; }
</style>
</head>
<body>
<div id="articleArea"></div> <!-- Where articles appear -->
<!-- Where pagination appears -->
<div id="pagination">
<!-- Just tell the system we start with page 1 (id=1) -->
<!-- See the .js file, we trigger a click when page is loaded -->
<div></div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="tuto-pagination.js"></script>
</body>
</html>
My javascript code is as follows:
$('document').ready(function() {
$("#pagination a").trigger('click'); // When page is loaded we trigger a click
});
$('#pagination').on('click', 'a', function(e) { // When click on a 'a' element of the pagination div
var page = this.id; // Page number is the id of the 'a' element
var pagination = ''; // Init pagination
$('#articleArea').html('<img src="loader-small.gif" alt="" />'); // Display a processing icon
var data = {page: page, per_page: 4}; // Create JSON which will be sent via Ajax
// We set up the per_page var at 4. You may change to any number you need.
console.log('Ajax sent');
$.ajax({ // jQuery Ajax
type: 'POST',
url: 'tuto-pagination.php', // URL to the PHP file which will insert new value in the database
data: data, // We send the data string
dataType: 'json', // Json format
timeout: 3000,
success: function(data) {
var displayData='';
for (var i = 0; i < data.articleList.length; i++) {
var gotData = data.articleList[i];
displayData += '<div class="well well-sm">' + gotData.profile_id + '. <b>' + gotData.first_name + '</b><p>' + gotData.surname + '</p></div>';
$('body').on('click','.well well-sm',function(){
var list = gotData;
openModal(list,data);
});
function openModal(list,data){
$('#myModal .modal-title').html(list.html());
$('#myModal .modal-body').html(data);
$('.modalTrigger').trigger('click');
}
// Pagination system
if (page == 1) pagination += '<div class="cell_disabled"><span>First</span></div><div class="cell_disabled"><span>Previous</span></div>';
else pagination += '<div class="cell">First</div><div class="cell">Previous</span></div>';
for (var i=parseInt(page)-3; i<=parseInt(page)+3; i++) {
if (i >= 1 && i <= data.numPage) {
pagination += '<div';
if (i == page) pagination += ' class="cell_active"><span>' + i + '</span>';
else pagination += ' class="cell">' + i + '';
pagination += '</div>';
}
}
if (page == data.numPage) pagination += '<div class="cell_disabled"><span>Next</span></div><div class="cell_disabled"><span>Last</span></div>';
else pagination += '<div class="cell">Next</div><div class="cell">Last</span></div>';
$('#pagination').html(pagination); // We update the pagination DIV
},
error: function() {
}
});
return false;
});
When you are fetching the information from back-end, create the list as shown in the code below, show only first 4 fields, and add a class hidden to the rest of the 26 fields. Construct the list item as you want it to be. Here I have used p tags inside div.well, where first p-tag is shown and rest of the p-tags are hidden.
Now whenever a user clicks on a div-well (that is a list) I am getting the html data from within it and removing the .hidden class from the p-tags. You can also similarly try having your own html structure(have it in a way so that it is easier to manipulate it).
displayData += '<div class="well well-sm"><p>' + gotData.profile_id + '. <b>' + gotData.first_name + '</b>' + gotData.surname + '</p>';
displayData += '<p class="hidden">'+gotData.address+'</p>'+'<p class="hidden">'+gotData.gender+'</p>'+'<p class="hidden">'+gotData.dob+'</p>';
displayData += '</div>';
Then whenever a user clicks on the list item, fetch the data from the list and show it in a modal, this way you don't have to create multiple div's.
$(function(){
$('body').on('click','div.well.well-sm',function(){
var list = $(this);
var data=list.html();
$('#myModal .modal-title').html('User Information');
$('#myModal .modal-body').html(data);
$('#myModal .modal-body p').removeClass('hidden');
$('.modalTrigger').trigger('click');;
});
});
.margin-top-md{
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="well well-sm margin-top-md">
<p>1. John White</p>
<p class="hidden">Country: UK</p>
<p class="hidden">DOB: 29 July</p>
<p class="hidden">Gender:M</p>
</div>
<div class="well well-sm margin-top-md">
<p>4. Ray</p>
<p class="hidden">Country: IN</p>
<p class="hidden">DOB: 29 Aug</p>
<p class="hidden">Gender: M</p>
</div>
<div class="well well-sm margin-top-md">
<p>3. Nick Cole</p>
<p class="hidden">Country: US</p>
<p class="hidden">DOB: 29 Sep</p>
<p class="hidden">Gender:M</p>
</div>
</div>
<button type="button" class="btn btn-primary btn-lg hidden modalTrigger" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
$(function() {
$("#pagination a").trigger('click'); // When page is loaded we trigger a click
$('#pagination').on('click', 'a', function(e) { // When click on a 'a' element of the pagination div
var page = this.id; // Page number is the id of the 'a' element
var pagination = ''; // Init pagination
$('#articleArea').html('<img src="loader-small.gif" alt="" />'); // Display a processing icon
var data = {page: page, per_page: 4}; // Create JSON which will be sent via Ajax
// We set up the per_page var at 4. You may change to any number you need.
console.log('Ajax sent');
$.ajax({ // jQuery Ajax
type: 'POST',
url: 'tuto-pagination.php', // URL to the PHP file which will insert new value in the database
data: data, // We send the data string
dataType: 'json', // Json format
timeout: 3000,
success: function(data) {
var displayData='';
for (var i = 0; i < data.articleList.length; i++) {
var gotData = data.articleList[i];
displayData += '<div class="well well-sm"><p>' + gotData.profile_id + '. <b>' + gotData.first_name + '</b>' + gotData.surname + '</p>';
displayData += '<p class="hidden">'+gotData.address+'</p>'+'<p class="hidden">'+gotData.gender+'</p>'+'<p class="hidden">'+gotData.dob+'</p>';
displayData += '</div>';
// Pagination system
if (page == 1) pagination += '<div class="cell_disabled"><span>First</span></div><div class="cell_disabled"><span>Previous</span></div>';
else pagination += '<div class="cell">First</div><div class="cell">Previous</span></div>';
for (var i=parseInt(page)-3; i<=parseInt(page)+3; i++) {
if (i >= 1 && i <= data.numPage) {
pagination += '<div';
if (i == page) pagination += ' class="cell_active"><span>' + i + '</span>';
else pagination += ' class="cell">' + i + '';
pagination += '</div>';
}
}
if (page == data.numPage){
pagination += '<div class="cell_disabled"><span>Next</span></div><div class="cell_disabled"><span>Last</span></div>';
}
else {
pagination += '<div class="cell">Next</div><div class="cell">Last</span></div>';
}
$('#articleArea').html(displayData);//replacing img with data
$('#pagination').html(pagination); // We update the pagination DIV
}
},
error: function() {
//your code
}
});
return false;
});
$('body').on('click','div.well well-sm',function(){
var list = $(this);
$('#myModal .modal-title').html('User Information');
$('#myModal .modal-body').html(list.html());
$('#myModal .modal-body p').removeClass('hidden');
$('.modalTrigger').trigger('click');
});
});
I'm using bootstrap and i have text fields which will make panel larger as they're added dynamically. Now these text fields are inside of a panel element and textfield size is col-lg-9 and there's more room in the col-lg-3 right next to it.
I would like to place a button in that col-lg-3 div, which would stay always in the bottom of the panel - so if the panel height increases due to new text field the button stays still in the bottom. I've tried absolute and relative positioning but nothing has helped + some of the methods pointed out break the scalability (which i really need to keep).
I'm adding my code:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title panel-header-text">Sisesta nimed, mis pannakse tabelisse</h3>
</div>
<div class="panel-body">
<div class="col-lg-9" id="inputcontainer">
<h4>Sisestamisel tekib uus väli (TAB-iga saab vahetada rida). Tühjasid välju ei arvestata!</h4>
<div class="input-group input-group-lg pdgtop">
<span class="input-group-addon" id="basic-addon1">1.</span>
<input type="text" id="one" class="form-control text-controller" placeholder="Sisesta nimi siia">
</div>
</div>
<div class="col-lg-3 konteiner">
<button type="button" class="btn btn-success buttonel">Valmista tabel</button>
</div>
</div>
The javascript:
/*
#FN01: This function handles the creation of new text fields according to the change in the textfield.
*/
var createNew = true;
var counter = 2;
function getNewInsertion() {
var container = document.getElementById("inputcontainer");
var inputs = document.getElementsByClassName("text-controller");
var lastField = inputs[inputs.length-1];
if (document.activeElement.value.length == 0 && createNew == false){ //if new element is chosen createNew will be set true
createNew = true;
}
else if (createNew == true && lastField.value.localeCompare("") != 0 ){
createNew = false;
//Creates Input Field
var input = document.createElement("input");
input.type = "text";
input.className = "form-control text-controller";
input.placeholder = "Sisesta siia nimi";
//Creates Span to hold the count
var span = document.createElement("span");
span.textContent = counter;
span.className = "input-group-addon";
//Creates input group to put span & input field together
var inputgroup = document.createElement("div");
inputgroup.className = "input-group input-group-lg";
inputgroup.appendChild(span);
inputgroup.appendChild(input);
container.appendChild(inputgroup);
counter += 1;
}
return createNew;
}
/*
#FN02: This is the function to delete the last field (empty) in case the one before last is empty.
*/
function canWeDeleteField(){
var inputs = document.getElementsByClassName("input-group");
var lastInput = inputs[inputs.length-1];
var lastArr = lastInput.childNodes
if (inputs.length < 2){
var last = lastArr[3];
}
else{
var last = lastArr[1];
}
console.log(lastArr);
if (inputs.length >= 2){
var last_prev_Input = inputs[inputs.length-2];
var last_prev_Arr = last_prev_Input.childNodes
if (inputs.length == 2){
var last_prev = last_prev_Arr[3];
}
else{
var last_prev = last_prev_Arr[1];
}
if (last.value.localeCompare("") == 0 && last_prev.value.localeCompare("") == 0){
lastInput.parentNode.removeChild(lastInput);
counter = counter - 1;
}
}
}
/*
#FN03: The call-out function which is triggered when key is pressed while focus is on the textfield.
*/
$(function() {
$("#inputcontainer").bind("paste cut keydown",function(e) {
getNewInsertion();
canWeDeleteField();
})
});
AND THE CSS:
.konteiner {
position: relative;
}
.buttonel {
width: 95%;
padding-right: 1%;
position: absolute;
}
You can check the solution to your problem in the following link Bootstrap equal-height columns experiment.
Basically you have to wrap your columns in a div element containing the classes "row" and "row-eq-height".
Here's a snippet of the result (using your code):
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<style type="text/css">
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.buttonel {
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title panel-header-text">Sisesta nimed, mis pannakse tabelisse</h3>
</div>
<div class="panel-body">
<div class="row row-eq-height">
<div class="col-lg-9 col-md-9" id="inputcontainer">
<h4>Sisestamisel tekib uus väli (TAB-iga saab vahetada rida). Tühjasid välju ei arvestata!</h4>
<div class="input-group input-group-lg pdgtop">
<span class="input-group-addon" id="basic-addon1">1.</span>
<input type="text" id="one" class="form-control text-controller" placeholder="Sisesta nimi siia">
</div>
</div>
<div class="col-lg-3 col-md-3">
<button type="button" class="btn btn-success buttonel">Valmista tabel</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var createNew = true;
var counter = 2;
function getNewInsertion() {
var container = document.getElementById("inputcontainer");
var inputs = document.getElementsByClassName("text-controller");
var lastField = inputs[inputs.length - 1];
if (document.activeElement.value.length == 0 && createNew == false) { //if new element is chosen createNew will be set true
createNew = true;
} else if (createNew == true && lastField.value.localeCompare("") != 0) {
createNew = false;
//Creates Input Field
var input = document.createElement("input");
input.type = "text";
input.className = "form-control text-controller";
input.placeholder = "Sisesta siia nimi";
//Creates Span to hold the count
var span = document.createElement("span");
span.textContent = counter;
span.className = "input-group-addon";
//Creates input group to put span & input field together
var inputgroup = document.createElement("div");
inputgroup.className = "input-group input-group-lg";
inputgroup.appendChild(span);
inputgroup.appendChild(input);
container.appendChild(inputgroup);
counter += 1;
}
return createNew;
}
/*
#FN02: This is the function to delete the last field (empty) in case the one before last is empty.
*/
function canWeDeleteField() {
var inputs = document.getElementsByClassName("input-group");
var lastInput = inputs[inputs.length - 1];
var lastArr = lastInput.childNodes
if (inputs.length < 2) {
var last = lastArr[3];
} else {
var last = lastArr[1];
}
console.log(lastArr);
if (inputs.length >= 2) {
var last_prev_Input = inputs[inputs.length - 2];
var last_prev_Arr = last_prev_Input.childNodes
if (inputs.length == 2) {
var last_prev = last_prev_Arr[3];
} else {
var last_prev = last_prev_Arr[1];
}
if (last.value.localeCompare("") == 0 && last_prev.value.localeCompare("") == 0) {
lastInput.parentNode.removeChild(lastInput);
counter = counter - 1;
}
}
}
/*
#FN03: The call-out function which is triggered when key is pressed while focus is on the textfield.
*/
$(function() {
$("#inputcontainer").bind("paste cut keydown", function(e) {
getNewInsertion();
canWeDeleteField();
})
});
</script>
</body>
</html>
Hope it helps!