I am trying to create a 16x16 grid using jquery. I have a main div, and then I'm trying to create the grid within it. I am using for loops, but when the code below runs, I get a 16x32 grid.
Could anyone explain what is going on and why that is happening?
<html>
<head>
<title>etch-a-sketch</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id=main>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type='text/javascript' src='app.js'></script>
</body>
#main {
height: 192px;
width: 192px;
background-color: antiquewhite;
}
.squares {
height: 10px;
width: 10px;
margin: 1px;
background-color: aquamarine;
display: inline-block;
}
$(document).ready(function() {
for(var x = 0; x < 16; x++) {
for(var y=0; y<16; y++) {
$("<div class='squares'></div>").appendTo('#main');
}
}
});
You get a 16x16 grid. When you're using "inline", spaces take place. Just change the CSS code to this:
#main {
height: 192px;
width: 192px;
background-color: antiquewhite;
}
.squares {
height: 10px;
width: 10px;
margin: 1px;
background-color: aquamarine;
display: block;
float: left;
}
Note:
display: block;
float: left;
I think your thought process was off.. I think the best way to make a 16x16 grid (256 boxes total) would be the way I went below and use css to style them.
The HTML
<div id="main">
</div>
The CSS
#main {
width: 100%;
}
.squares {
width:6%;
height: 50px;
border: 1px solid red;
display:inline-block;
}
The Javascript
for(var x = 0; x < 256; x++) {
$("<div class='squares'>hi</div>").appendTo('#main');
}
Related
This is my first leap on trying to implement a HTML/CSS website, so please take this into consideration.
I have multiple .html pages that implement the navbar from a nav.html, using a jQuery function( i guess?). The other html's are similar to index.
Any idea of what's wrong?
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
The code i used for adding active class is pure JS.
Here is index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/9a39db93cf.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
let count = 0;
function counter()
{
count++;
document.querySelector('#pageContent').innerHTML = count;
}
</script>
<script>
$(function(){
$("#nav-placeholder").load("nav.html");
});
</script>
<script type="text/javascript">
const currentLocation = location.href;
const menuItem = document.querySelectorAll('a');
const menuLength = menuItem.length
for( let i=0; i<menuLength; i++){
if(menuItem[i].href === currentLocation){
menuItem[i].className = "active";
}
}
</script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>My Webpage</title>
</head>
<body>
<div id="nav-placeholder" class="sticky-top">
</div>
<div class="firstPage">
<h4>The title of this paragraph</h4>
<img onclick="counter(); return false;" src="images/mirciun.jpg" alt="mirciun" height=auto max-width=auto class="center">
<p id='pageContent'>0</p>
</div>
</body>
</html>
CSS:
body{
display: block;
margin: 0;
}
.menu li{
display: inline-block;
margin: 0;
}
ul.topnav{
background-color: #333;
margin: 0;
padding: 0;
text-align:center;
overflow: hidden;
}
ul.topnav li a{
display: block;
font-size: 20px;
padding: 10px;
color: whitesmoke;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #222;}
ul.topnav li a.active {background-color: #4CAF50;}
#media screen and (max-width: "600px") {
ul.topnav li {float: none;}
}
#brand{
display: table-cell;
vertical-align: middle;
line-height:50px;
}
#topText{
max-width: 500px;
margin: auto;
text-align: center;
border: 5px solid green;
color: red;
background-color: #0f0f0f;
margin-top: 10px;
}
.firstPage
{
margin-top: -20px;
background-color:grey;
max-width: 100%;
height: auto;
}
h4{
padding: 20px;
text-align: center;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
#pageContent{
text-align:center;
width: 75%;
margin: auto;
color: blue;
}
wrap your code with jquery on ready function and move to the bottom of the page.
$(function () {
const currentLocation = location.href;
const menuItem = document.querySelectorAll('a');
const menuLength = menuItem.length
for (let i = 0; i < menuLength; i++) {
if (menuItem[i].href === currentLocation) {
menuItem[i].className = "active";
}
}
})
Nevermind, i solved it using $( window ).on( "load", function(){, instead of $( document ).ready(function () { . The short explanation is that code will run once the entire page (images or iframes), not just the DOM, is ready. - > https://learn.jquery.com/using-jquery-core/document-ready/
I am generating a grid on page load. When you generate a grid below 16 the grid gets stretched like this:
https://imgur.com/a/1IPnXn0
I have tried to adjust the width of the row with css. I have also made changes to the container with css. I believe this has something to do specifically with the width of the .row css which is set to 25.25%
working codepen
https://codepen.io/dhuang6/pen/ZVKWGe
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="Btns">
<button id="recreate"
onclick="resizeGrid(this.value)">remake
grid</button>
</div>
<br />
</div>
<script src="script.js"></script>
</body>
</html>
window.onload = function(){
var createGrid = prompt("How many rows do you want?");
for(i = 0; i <= createGrid; i++){
var row = document.createElement('div');
row.className = "row";
row.id = "row" + i;
for(k= 0; k <= createGrid; k++ ){
var box = document.createElement('div');
box.className = "box";
row.appendChild(box);
}
container.appendChild(row);
}
return container;
}
#container {
width: 50%;
height: 50%;
margin-top:50px;
margin-left: auto;
margin-right: auto;
background: "white";
overflow:hidden;
box-sizing: border-box;
}
.row{
border:1px solid red;
height:1em;
width:25.25%;
overflow:hidden;
box-sizing: border-box;
}
.box{
display: inline-block;
width: 8.25%;
height: 1em;
border: 1px solid red;
border-bottom: 0px;
border-left: 0px;
float:right;
overflow:hidden;
box-sizing: border-box;
margin: auto;
}
When you inspect the element of the .row of the html the width is usually set to 265px or something really long like that. I believe that is part of the problem. When you generate a grid larger than 16 this issue doesn't occur.
Thank you for helping me.
You need to dynamically set the box width: https://codepen.io/brien-givens/pen/wRdGJa
Here is a working version using a table instead of divs.
There are alot of css changes so make sure to look over the code carefully or copy it verbatim. Also because of the way tables work the grid is basically turned 90deg so keep that in mind.
//try flexbox
/*
adding a button and having the submit grab the value for the backend function
*/
//trying to make a function for creating divs
window.onload = function(){
var createGrid = prompt("How many rows do you want?"),
table = document.getElementById('table');
console.log(createGrid);
for(i = 0; i <= createGrid; i++){
var row = document.createElement('tr'); //changed from div
row.className = "row";
row.id = "row" + i;
for(k= 0; k <= createGrid; k++ ){
var box = document.createElement('td'); //changed from div
box.className = "box";
row.appendChild(box);
}
table.appendChild(row); //changed from container.
}
return container;
}
//create a grid
//generates a grid with the original div container already on index.html you need to start messing with the code you work with to gain a better understanding of what it's doing
function grid() {
var container = document.getElementById("container");
for (i = 0; i <= 16; i++){
for(k = 0; k <= 16; k ++){
var box = document.createElement("div");
box.className = "box";
// row.appendChild(box);
}
container.appendChild(row);
}
return container;
}
// grid(document.body);
function resizeGrid(){
clearGrid();
//missing a clear grid function!
}
//right now the resizing is adding to the bottom of the old grid.
function clearGrid(){
}
document.addEventListener("mouseover",(e)=>{
if(!e.target.classList.contains("box")){
return;
}
e.target.style.background = "#3d3d3d";
})
/*
added the container that holds the grid to manipulate the css.
made it appear more like the etch-a-sketch board.
width: 25.25%;
*/
#container {
width: 50%;
height: 50%;
margin-top:50px;
margin-left: auto;
margin-right: auto;
background: "white";
overflow:hidden;
box-sizing: border-box;
}
#table {
width: 100%;
border-collapse: collapse;
}
/*
there is a bit of extra space being generated on the right side of the grid.
row seems to be causing the issue will need to review.
Checked the grid creation which seems to be fine.
*/
.row{
border:1px solid red;
height:1em;
width:25.25%;
overflow:hidden;
box-sizing: border-box;
}
.box{
width: 8.25%;
height: 1em;
border: 1px solid red;
overflow:hidden;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="container">
<div id="Btns">
<button id="recreate" onclick="resizeGrid(this.value)">remake grid</button>
</div>
<br />
</div>
<table id="table"></table>
<script src="script.js"></script>
</body>
</html>
Move the button to end of the page to make the first child selector work and apply this CSS
#container {
width: 50%;
height: 50%;
margin-top:50px;
margin-left: auto;
margin-right: auto;
background: "white";
overflow:hidden;
box-sizing: border-box;
}
.row{
line-height: 0;
}
.row:first-child .box{
border-top: 1px solid red;
}
.box{
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid red;
box-sizing: border-box;
border-left: none;
border-top: none;
margin: 0;
}
.box:first-child{
border-left: 1px solid red;
}
[EDIT] I tried to dynamically create 6 horizontal lines every 1 second using setTimeout method. So it should shows every 6 horizontal lines as a group for every 1 second. Here, I call 6 horizontal lines as group. However, I want to append each group horizontally rather than vertically. When trying to append a group and the width of the border is not long enough to hold a new group, append the new group to next lines. And also I want a "pilar" between each grounp of 6 horizontal lines, and I only want to create 8 group of horizontal lines. The first picture below is what I get after running my code. The second one is what I need. The code below is my html, css, and js code. Hope someone could help me out. Thank you in advance.
html:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="code.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="code_js.js"></script>
</head>
<body>
<div id = "output">
</div>
</body>
</html>
css:
.deco {
border-bottom: 1px solid black;
width: 120px;
margin-left:0px;
margin-bottom:10px;
z-index: 2;
position: relative;
/*display: inline-block;*/
margin-right: 20px;
}
#output {
background: #ffe6e6;
width: 600px;
height: 800px;
position:absolute;
}
js:
$(document).ready(function() {
makeItHappen(0);
});
function makeItHappen(order) {
for (var i = 0; i < 7; i++) {
var hr = document.createElement('hr');
hr.className = "deco"
hr.id = "hr" + i;
$('#output').append(hr);
}
makeTable(function() {
if(++order < 7) {
makeItHappen(order);
}
});
}
function makeTable(callback) {
setTimeout(function() {
callback();
}, 1000);
}
You can use display:flex to get the output you are expecting
$(document).ready(function() {
makeItHappen(0);
});
function makeItHappen(order) {
var output = $("#output");
var div = $("<div></div>");
div.attr('id', order);
for (var i = 0; i < 7; i++) {
var hr = document.createElement('hr');
hr.className = "deco"
hr.id = "hr" + i;
$(div).append(hr);
}
output.append(div);
makeTable(function() {
if (++order < 7) {
makeItHappen(order);
}
});
}
function makeTable(callback) {
setTimeout(function() {
callback();
}, 1000);
}
.deco {
border-bottom: 1px solid black;
width: 120px;
margin-left: 0px;
margin-bottom: 10px;
z-index: 2;
position: relative;
/*display: inline-block;*/
margin-left: 10px;
}
#output div:nth-child(2n+1) {
border-right: 5px solid green;
margin-top: 5px;
}
#output div:nth-child(2n) {
border-right: 5px solid green;
margin-top: 5px;
height: auto;
}
#output {
display: flex;
flex-wrap: wrap;
}
#output {
background: #ffe6e6;
width: 500px;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">
</div>
Hope it helps
I have created a 16x16 grid. I'm trying to put a button above the grid, which when the user clicks, will prompt them for new grid dimensions (between 1 and 64). For example, if you click the button and input 25, the dimensions of the grid will change from 16x16 to 25x25.
I'm having trouble in figuring out how to get the user's input into a javascript function, so it outputs the updated grid. Code here:
HTML:
<!doctype html>
<html>
<head>
<title>SketchPad</title>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>
<body>
<h1> SketchPad </h1>
<div id="container">
</div>
<button class="button" type="button" onclick="myFunction()">Choose Your Grid</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.js"></script>
</body>
</html>
CSS:
h1 {
text-align: center;
color: black;
}
tr, td, table {
border-style: solid;
border-width: 1px;
background-color: gray;
margin: auto;
height: 25px;
width: 525px;
margin-top: 20px;
}
td {
transition: .3s background-color;
}
td:hover {
background-color: red;
}
button {
height: 25px;
width: 225px;
margin: 0 auto;
position: relative;
top: 50%;
left: 40%;
margin-top: -40px;
}
Javascript:
var rows=16;
var cols=16;
document.write("<table>");
for (i=0; i<rows; i++) {
document.write("<tr>");
for (j=0; j<cols; j++) {
document.write("<td>"+"</td>");
}
document.write("</tr>");
}
document.write("</table>");
$( "td").css("color", "red");
$(".button").click(function() {
prompt("Please select your grid size");
});
function grid(rows, cols) {
//function goes here//
}
Try something like the following.
Write a function which empties your container and redraws your grid inside it.
Initialize your grid in a document.ready() hander.
Define an event handler for your button click, which prompts to redraw the grid at a user-defined size.
$(document).ready(function() {
grid(16,16);
});
$(".button").click(function() {
var size = prompt("Please select your grid size");
grid(size, size);
});
function grid(rows, cols) {
var table = "<table>";
var size = (1 / rows * 525) + "px";
for (i=0; i<rows; i++) {
table += "<tr>";
for (j=0; j<cols; j++) {
table += "<td>"+"</td>";
}
table += "</tr>";
}
table += "</table>";
$("#container").empty().append(table);
$("tr").css("height", size);
$("td").css("color", "red").css("width", size);
}
h1 {
text-align: center;
color: black;
}
table {
height: 525px;
width: 525px;
}
tr, td, table {
border-style: solid;
border-width: 1px;
background-color: gray;
margin: auto;
margin-top: 20px;
}
td {
transition: .3s background-color;
}
td:hover {
background-color: red;
}
button {
height: 25px;
width: 225px;
margin: 0 auto;
position: relative;
top: 50%;
left: 40%;
margin-top: -40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1> SketchPad </h1>
<div id="container">
</div>
<button class="button" type="button">Choose Your Grid</button>
Referring various sources, I've written a code to minimize and maximize a div tag in my JSP code which goes as follows,
<style type="text/css" media="screen" > #editor {
position: absolute;
top: 0;
right: 20%;
bottom: 0;
left: 0;
}
#widnow {
position: absolute;
top: 72.5%;
right: 0;
bottom: 0;
left: 0;
width: auto;
border: solid 1px;
}
#title_bar {
background: #FEFEFE;
height: 25px;
width: 100%;
}
#button {
border: solid 1px;
width: 25px;
height: 23px;
float: right;
cursor: pointer;
}
#box {
height: 250px;
background: #DFDFDF;
}
</style >
=============================
<div id="widnow">
<div id="title_bar">
<div id="button">-</div>
</div>
<div id="box">
</div>
</div>
============================
<script type="text/javascript">
$("#button").click(function(){
if($(this).html() == "-"){
$(this).html("+");
}
else{
$(this).html("-");
}
$("#box").slideToggle();
});
</script>
This gives me a div tag something like this,
But when I click the minimize button (i.e - on the top right) nothing happens.
The code works fine as shown in this demo but does not work in my jsp.
what to do? where is my mistake?
Did you Check for JavaScript conflicts? I had such issues before.
Removed
<script src="js/jquery.autocomplete.js"></script>
from head in JSP and added
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
This worked fine.