I am trying to make table that consist of columns and rows. User type how many rows and columns want and on button click and table is created. My problem is to get numbers sorteed in circular way, lowest in bottom right corner and highest in the middle?
This is what i created so far
$('.submit').click(function() {
var numVal = $('.num').val();
var otherVal = $('.num2').val();
var sum = eval(numVal * otherVal);
var numbers = [];
for (var i = 1; i <= sum; i++) {
numbers.push(i)
}
for (var i = 0; i < numbers.length; i++) {
$('ul').prepend('<li>' + numbers[i] + '</li>')
}
var containerWidth = $('.container').width(numVal * 46 + 'px')
$('.container').height(otherVal * 46 + 'px')
$('.wrapper').width(containerWidth + 250 + 'px')
var middle = numbers[Math.round(($('li').length - 1) / 2)];
});
$('.clear').click(function() {
$('ul').html('');
$('.num, .num2').val('').focus();
});
* {
margin: 0;
padding: 0;
}
.container {
max-width: 230px;
}
.container:after {
content: "";
display: block;
clear: both;
}
ul {} ul:after {
content: "";
display: block;
clear: both;
}
li {
list-style: none;
width: 40px;
line-height: 40px;
margin: 3px;
background: #ccc;
border-radius: 5px;
text-align: center;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="num" />
<input type="text" class="num2" />
<input type="submit" class="submit" value="Make Table" />
<input type="button" class="clear" value="clear" />
<div class="container">
<ul>
</ul>
</div>
I need to look like this
Related
Basically I got my css file which will be under the text but when i try to open the html file that uses it in the browser it doesn't work, the css code won't run and the styling and the javascript don't work because of that. The code is supposed to be like this one: https://codepen.io/ritaD86/pen/MyOdQr but it doesn't work in my browser while it works on the codepen.io. I also don't get it why the javascript doesn't work. What is going on? What can I do?
persons = [
person = {
firstName: "Maria",
lastName: "Fernanda",
age: "mf#desk.com",
phone: "917697967"
},
];
document.getElementById('search_button').addEventListener('click', searchPerson);
document.getElementById('add_button').addEventListener('click', addPerson);
document.getElementById('show_all').addEventListener('click', showAllPersons);
function searchPerson() {
var input = document.getElementById("search").value.toLowerCase();
var result = document.getElementById('result');
for (var i = 0; i < persons.length; i++) {
if (input === persons[i].firstName.toLowerCase() || input === persons[i].lastName.toLowerCase()) {
result.innerHTML = '<h4>I found this:</h4>' + persons[i].firstName + ' ' +
persons[i].lastName + ' </br>' + persons[i].age + ' </br>' + persons[i].phone;
return persons[i];
} else if (!isNaN(input)) {
result.innerHTML = 'Tem de inserir um nome';
} else {
result.innerHTML = 'Nenhum contacto encontrado';
}
}
}
function Person(first, last, age, phone) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.phone = phone;
}
function titleCase(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
function addPerson() {
var firstName = titleCase(document.getElementById("name").value);
var lastName = titleCase(document.getElementById("lastname").value);
var age = document.getElementById("age").value;
var phone = document.getElementById("phone").value;
var newPerson = new Person(firstName, lastName, age, phone);
persons.push(newPerson);
if (newPerson.firstName != undefined) {
alert(newPerson.firstName + ' added');
} else {
alert('No person added');
}
showAllPersons();
}
function showAllPersons() {
var i;
var l;
var showButton = document.getElementById('show_all');
var list = document.getElementById('all_list');
while (list.firstChild) {
list.removeChild(list.firstChild);
}
for (var l = 0; l < persons.length; l++) {
var node = document.createElement("LI");
list.appendChild(node);
node.innerHTML =
'<p><b>Nome Completo:</b> ' + persons[l].firstName +' ' + persons[l].lastName + '</p>' +
'<p><b>Email:</b> ' + persons[l].age + '</p>' +
'<p><b>Telemovel:</b> ' + persons[l].phone + '</p>'
for (var key in person) {
var value = person[key];
}
}
showButton.disabled = true;
}
#import "bourbon";
#import "neat";
// Media queries
$desktop: new-breakpoint(min-width 960px 12);
$tablet: new-breakpoint(max-width 959px 12);
$mobile: new-breakpoint(max-width 767px 4);
// Variables
$max-width: 1200px;
form {
padding: 20px 0 40px;
.field {
#include padding(10px 0);
#include margin(5px 0);
#include display(inline-block);
#include fill-parent;
label {
#include span-columns(5);
#include padding(5px 10px);
}
input {
#include span-columns(7);
#include padding(5px 10px);
}
}
}
.container {
#include outer-container;
text-align: center;
}
.search_person {
#include span-columns(6);
}
.add_person {
#include span-columns(6);
}
.all_persons {
#include span-columns(4);
#include shift(4);
#all_list {
list-style-type: none;
margin: 20px 0;
padding: 0;
li {
margin: 0 0 30px;
text-align: left;
}
}
}
<html>
<head>
<title>Desk+ - Grupo 36</title>
<link rel="stylesheet" type="text/css" href="ab.css">
<script src="ab.js"></script>
</head>
<body>
<div class="container">
<h1>Contactos</h1>
<div class="all_persons">
<button id="show_all" type="button">Mostrar todos</button>
<ul id="all_list">
</ul>
</div>
<div class="search_person">
<h3>Insira um nome</h3>
<input type="text" id="search">
<button id="search_button" type="button">Procurar</button>
<p id="result"></p>
</div>
<div class="add_person">
<h3>Adicionar contacto</h3>
<form action="" method="post">
<div class="field">
<label for="firstname">Primeiro Nome: </label>
<input type="text" id="name">
</div>
<div class="field">
<label for="lastname">Último Nome: </label>
<input type="text" id="lastname">
</div>
<div class="field">
<label for="age">Email: </label>
<input type="text" id="age">
</div>
<div class="field">
<label for="phone">Phone: </label>
<input type="number" id="phone">
</div>
<button id="add_button" type="button">Add</button>
</form>
</div>
</div>
</body>
</html>
Here is the compiled css->
html {
box-sizing: border-box;
}
*, *::after, *::before {
box-sizing: inherit;
}
form {
padding: 20px 0 40px;
}
form .field {
padding: 10px 0;
margin: 5px 0;
display: inline-block;
width: 100%;
}
form .field label {
float: left;
display: block;
margin-right: 2.3576520234%;
width: 40.291369653%;
padding: 5px 10px;
}
form .field label:last-child {
margin-right: 0;
}
form .field input {
float: left;
display: block;
margin-right: 2.3576520234%;
width: 57.3509783236%;
padding: 5px 10px;
}
form .field input:last-child {
margin-right: 0;
}
.container {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.container::after {
clear: both;
content: "";
display: block;
}
.search_person {
float: left;
display: block;
margin-right: 2.3576520234%;
width: 48.8211739883%;
}
.search_person:last-child {
margin-right: 0;
}
.add_person {
float: left;
display: block;
margin-right: 2.3576520234%;
width: 48.8211739883%;
}
.add_person:last-child {
margin-right: 0;
}
.all_persons {
float: left;
display: block;
margin-right: 2.3576520234%;
width: 31.7615653177%;
margin-left: 34.1192173411%;
}
.all_persons:last-child {
margin-right: 0;
}
.all_persons #all_list {
list-style-type: none;
margin: 20px 0;
padding: 0;
}
.all_persons #all_list li {
margin: 0 0 30px;
text-align: left;
}
try this instead the css/scss you are using. It will work. cheers!
It is SCSS and not CSS. You need to convert it to CSS first for it to work. In addition to that, try to move your script to the end of the body tag instead of inside the head tag.
Here is just another approach for table-style layout using <ul> and <li>.
Each <ul> is a row, and each <li> is a cell.
The 1st <ul> is a header row, so it has a special styling which works fine.
For the widths of each columns, I would like to add "individual styling", using the advantage of "nth-of-child" instead of class.
Here is the HTML&CSS content:
var D, T, R;
function I() {
D = document.getElementById("D");
R = document.getElementById("R");
// To keep 1st row always visible.
D.onscroll = function() {
R.style.top = D.scrollTop + "px";
}
// This is just arbitrary content
var k = ["Va", "Vb"];
for (var i = 0; i < 500; i++) {
var e = document.createElement("ul");
D.appendChild(e);
for (var j = 0; j < 3; j++) {
var d = document.createElement("li");
e.appendChild(d);
d.innerHTML = (!j) ? i : k[j - 1];
}
}
}
I();
#D {
position: absolute;
left: 250px;
right: 50px;
top: 50px;
bottom: 50px;
background-color: #ff8;
overflow: auto;
white-space: nowrap;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul li {
display: table-cell;
}
ul:nth-child(odd) {
background: #eee;
}
ul:nth-child(even) {
background: #ddd;
}
ul:first-of-type {
background: #888;
color: #00f;
position: relative;
}
#D ul li:nth-of-type(1) {
width: 100px;
}
#D ul li:nth-of-type(2) {
width: 200px;
}
#D ul li:nth-of-type(3) {
width: 300px;
}
<div id="D">
<ul id="R">
<!-- 假行 Fake row -->
<li>请不要说谎：</li>
<li>这个不是表格 (table)！！！<br>
<div style="position:relative; left:0; right:0;"><select style="width:100%;">
<option>全部</option>
</select></div>
</li>
<li>这是2D目录(ul和li)！！！</li>
</ul>
</div>
NOTE: This is a test content and not production part, so please don't comment on the <style> to be in the <div> element or why I am not just using <table>.
NOTE: The use of "nth-of-type(1)" and not "first-of-type" here is just for convenience.
THE RESULT: columns 2 and 3 works perfect. Column one remains "auto" - not 100px wide
What I am doing wrong?
function numbersInBucket(setOfNumbers, numbersInArray) {
var numbers = [];
for (var i = numbersInArray; i > 0; i--){
numbers.push(i);
}
numbers.sort(function(){
return (Math.round(Math.random())-0.5);
}
);
return numbers.slice(0, setOfNumbers).sort(function(a, b){return a - b});
}
function print(numbers){
var html = "";
for (var i in numbers) {
html = html + '<li class="item">' + numbers[i] + '</li>';
}
document.getElementById("output").innerHTML = html;
}
function rowOfNumbers(){
for(var i = 0; i < 3; i++){
print(numbersInBucket(5, 75));
}
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
ul li {
list-style: none;
display: inline-flex;
justify-content: center;
}
.item {
border: 5px solid #E7F7F5;
color: #E7F7F5;
margin: 20px;
border-radius: 100px;
font-size: 40px;
width: 100px;
height: 100px;
text-align: center;
line-height: 220%;
justify-content: space-between;
}
<div class="container">
<ul id="output"></ul>
</div>
<input class="button" type="button" value="click " id="reload" onclick="rowOfNumbers()">
Hello there;
How can I print multiple set of numbers. For example,
3 12 23 33 44, 2 5 13 22 36, 12 23 27 29 44. With my current code I can have one set of numbers as output the way I want it. But I would like multiple sets with different numbers. I try using a for loop with no luck. The set of numbers has to be inside an li tag. Can someone please set me in the right direction, I am trying to learn interactive web development.
On this line: document.getElementById("output").innerHTML = html; you are replacing the inner HTML of the element with a new set of elements. This means that you are emptying the element before appending newly generated elements, so they never increase in number.
A quick solution will be instead of overwriting the inner HTML, you append to it using: document.getElementById("output").innerHTML += html;.
See proof-of-concept example below:
function numbersInBucket(setOfNumbers, numbersInArray) {
var numbers = [];
for (var i = numbersInArray; i > 0; i--){
numbers.push(i);
}
numbers.sort(function(){
return (Math.round(Math.random())-0.5);
}
);
return numbers.slice(0, setOfNumbers).sort(function(a, b){return a - b});
}
function print(numbers){
var html = "";
for (var i in numbers) {
html = html + '<li class="item">' + numbers[i] + '</li>';
}
document.getElementById("output").innerHTML += html;
}
function rowOfNumbers(){
for(var i = 0; i < 3; i++){
print(numbersInBucket(5, 75));
}
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
ul li {
list-style: none;
display: inline-flex;
justify-content: center;
}
.item {
border: 5px solid #E7F7F5;
color: #E7F7F5;
margin: 20px;
border-radius: 100px;
font-size: 40px;
width: 100px;
height: 100px;
text-align: center;
line-height: 220%;
justify-content: space-between;
}
<div class="container">
<ul id="output"></ul>
</div>
<input class="button" type="button" value="click " id="reload" onclick="rowOfNumbers()">
there are a bug on IE 11 when i empty the html in a DIV and I remove class in the list with JavaScriptS.
The DIV loses the syle CSS "Overflow:auto" and guard is a great height
There is no bug on another navigator.
Sample:
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
div {
margin: 5px;
}
ul {
margin: 5px;
max-height: 200px;
overflow: auto;
}
ul li.selected {
font-weight: bold;
}
.dest {
width: 500px;
min-height: 21px;
max-height: 120px;
overflow: auto;
border: 1px solid #ccc;
background-color: #f9f9f0;
padding: 3px;
}
.dest span {
display: block;
background-color: #fff;
float: left;
border-radius: 2px;
border: 1px solid #ccc;
margin: 2px;
padding: 0px 2px 0px 2px;
line-height: 21px;
height: auto;
}
</style>
<script>
window.onload = function(){
document.getElementById("btclear").onclick = function(){
document.getElementById("dest").innerHTML = "";
};
document.getElementById("btclearplus").onclick = function(){
document.getElementById("dest").innerHTML = "";
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
};
document.getElementById("btall").onclick = function(){
for(var i = 0; i < 50; i++) {
var span = document.createElement("span");
span.innerHTML = "first name " + i + " last name " + i;
document.getElementById("dest").appendChild(span);
}
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "selected";
}
};
for(var i = 0; i < 50; i++) {
for(var i = 0; i < 50; i++) {
var li = document.createElement("li");
li.innerHTML = "nom" + i + " prenom" + i;
document.getElementById("list").appendChild(li);
}
}
}
</script>
</head>
<body>
<div id="dest" class="dest"></div>
<div>
<ul id="list"></ul>
</div>
<div>
<button id="btall">Select all</button>
<button id="btclear">Clear all</button>
<button id="btclearplus">Clear all and deselect</button>
</div>
</body>
</html>
Thank you, Jean-Pierre
change the one of the loops variable i to j because you have same variable in both loops
for(var i = 0; i < 50; i++) {
for(var j = 0; j < 50; j++) {
// do you logic
}
}
I deleted the double loop, the problem was not that here.
In Internet Explorer, you must click the "Select All" button and then the button "Clear all and deselect" to reproduce the problem.
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
div {
margin: 5px;
}
ul {
margin: 5px;
max-height: 200px;
overflow: auto;
}
ul li.selected {
font-weight: bold;
}
.dest {
width: 500px;
min-height: 21px;
max-height: 120px;
overflow: auto;
border: 1px solid #ccc;
background-color: #f9f9f0;
padding: 3px;
}
.dest span {
display: block;
background-color: #fff;
float: left;
border-radius: 2px;
border: 1px solid #ccc;
margin: 2px;
padding: 0px 2px 0px 2px;
line-height: 21px;
height: auto;
}
</style>
<script>
window.onload = function(){
document.getElementById("btclear").onclick = function(){
document.getElementById("dest").innerHTML = "";
};
document.getElementById("btclearplus").onclick = function(){
document.getElementById("dest").innerHTML = "";
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
};
document.getElementById("btall").onclick = function(){
for(var i = 0; i < 50; i++) {
var span = document.createElement("span");
span.innerHTML = "first name " + i + " last name " + i;
document.getElementById("dest").appendChild(span);
}
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "selected";
}
};
for(var i = 0; i < 50; i++) {
var li = document.createElement("li");
li.innerHTML = "nom" + i + " prenom" + i;
document.getElementById("list").appendChild(li);
}
}
</script>
</head>
<body>
<div id="dest" class="dest"></div>
<div>
<ul id="list"></ul>
</div>
<div>
<button id="btall">Select all</button>
<button id="btclear">Clear all</button>
<button id="btclearplus">Clear all and deselect</button>
</div>
</body>
</html>
Thank you, Jean-Pierre
Overflow: Auto problem / bug in IE
.element { overflow-y: auto; overflow-x: visible; width: 450px; }
DEMO
I'd like to realize dynamic addition of a div block. That div block will be a square. When you click to add the horizontal will be adding a new square, and when you click on a vertical. But the question is, if I added a 5 squares horizontally, what would add the square of the vertical it must be filled with another 4 horizontally squares around.
Jsfiddle sample
Update: fiddle
function addCol() {
var rows = document.getElementsByClassName("row");
for (var i = 0; i < rows.length; i++) {
var square = rows[i].getElementsByClassName("square")[0];
var newSquare = square.cloneNode(true);
rows[i].appendChild(newSquare);
}
var delCol = document.getElementById("delCol");
var squares = rows[0].getElementsByClassName("square");
delCol.style.marginLeft = 4 + (squares.length * 52) + "px";
}
function addRow() {
var grid = document.getElementById("grid");
var rows = document.getElementsByClassName("row");
var newRow = rows[0].cloneNode(true);
grid.appendChild(newRow);
var delRow = document.getElementById("delRow");
delRow.style.marginTop = 2 + (rows.length-1) * 52 + "px";
}
function delCol() {
var rows = document.getElementsByClassName("row");
for (var i = 0; i < rows.length; i++) {
rows[i].removeChild(rows[i].lastChild);
}
var delCol = document.getElementById("delCol");
var marginLeft = parseInt(getComputedStyle(delCol).marginLeft, 10);
delCol.style.marginLeft = marginLeft - 52 + "px";
}
function delRow() {
var grid = document.getElementById("grid");
grid.removeChild(grid.lastChild);
var delRow = document.getElementById("delRow");
var marginTop = parseInt(getComputedStyle(delRow).marginTop, 10);
delRow.style.marginTop = marginTop - 52 + "px";
}
body {
margin: 0;
}
#container {
overflow: auto;
-webkit-user-select: none;
}
#delCol {
margin-left: 56px;
}
#delRow {
}
.delWrapper {
overflow: auto;
}
#delColContainer {
clear: both;
}
#delRowContainer {
display: table;
float: left;
}
#gridWrapper {
display: table;
float: left;
}
#grid {
float: left;
border: 1px solid #4dabe4;
}
.row {
overflow: auto;
}
.square {
float: left;
width: 50px;
height: 50px;
background: #4dabe4;
margin: 1px;
}
.controls {
width: 50px;
height: 50px;
margin: 2px;
cursor: pointer;
opacity: .75;
}
.controls:hover {
opacity: 1;
}
.controls.add {
background: #f1a417;
float: left;
}
.controls.del {
background: #b00100;
float: left;
}
.controls p {
color: #FFF;
font-size: 16px;
font-weight: bold;
text-align: center;
}
#addRow {
clear: both;
}
<div id="container">
<div class="delWrapper" id="delColContainer">
<div class="controls del" id="delCol" onclick="delCol()">
<p>-</p>
</div>
</div>
<div class="delWrapper" id="delRowContainer">
<div class="controls del" id="delRow" onclick="delRow()">
<p>-</p>
</div>
</div>
<div id="gridWrapper">
<div id="grid">
<div class="row">
<div class="square"> </div>
</div>
</div>
<div class="controls add" id="addCol" onclick="addCol()">
<p>+</p>
</div>
<div class="controls add" id="addRow" onclick="addRow()">
<p>+</p>
</div>
</div>
</div>
OLD (fiddle)
function addCol() {
var rows = document.getElementsByClassName("row");
for (var i = 0; i < rows.length; i++) {
var square = rows[i].getElementsByClassName("square")[0];
var copy = square.cloneNode(true);
rows[i].appendChild(copy);
}
}
function addRow() {
var main = document.getElementById("main");
var rows = document.getElementsByClassName("row");
var copy = rows[0].cloneNode(true);
main.appendChild(copy);
}
.index {
display: table;
}
#main {
float: left;
display: table;
border: 1px solid #4dabe4;
}
.square {
float: left;
width: 50px;
height: 50px;
background: #4dabe4;
margin: 1px;
}
.controls {
float: left;
width: 50px;
height: 50px;
background: #f1a417;
margin: 2px;
cursor: pointer;
opacity: .75;
}
.controls:hover {
opacity: 1;
}
.controls p {
color: #FFF;
font-size: 16px;
font-weight: bold;
text-align: center;
}
#addRow {
clear: both;
}
<div class="index">
<div id="main">
<div class="row">
<div class="square"> </div>
</div>
</div>
<div class="controls" id="addCol" onclick="addCol()">
<p>+</p>
</div>
<div class="controls" id="addRow" onclick="addRow()">
<p>+</p>
</div>
</div>