I am trying to create a game board for Barricade but I am failing with the first step, creating a simple grid of circles before specifying which circles are visible.
Should I draw it with a canvas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Boardgame</title>
<style type="text/css">
.circleBase {
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
behavior: url(PIE.htc);
}
.type1 {
width: 30px;
height: 30px;
background: yellow;
border: 3px solid red
}
</style>
<script type="text/javascript">
function genDivs(){
var v = 10;
var e = document.body;
for(var i = 0; i < v; i++)
{
var row = document.createElement("circleBase type1");
for(var x = 1; x <= v; x++)
{
var cell = document.createElement("circleBase type1");
//cell.innerText = (i * v) + x;
row.appendChild(cell);
}
e.appendChild(row);
}
document.getElementById("code").innerText = e.innerHTML;
}
</script>
</head>
<body>
<input type="button" onclick="genDivs()" value="click me">
</body>
</html>
Properly create an element:
var element= document.createElement('div');
element.className = 'circleBase type1';
Also, you only need to set border-radius to 50%:
.circleBase {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
behavior: url(PIE.htc);
}
document.createElement() expects the tag name like "p", "div" etc. You may create a <div/> with
var row = document.createElement("div");
As far as I understand, you don't need to add the classes to the rows, just to the cells:
var row = document.createElement("div");
for(var x = 1; x <= v; x++)
{
var cell = document.createElement("div");
cell.setAttribute("class", "circleBase type1");
row.appendChild(cell);
}
To keep the rows while floating the cells use
body > div:after {
display: block;
content: '';
clear: both;
}
.type1 {
float: left;
width: 30px;
height: 30px;
background: yellow;
border: 3px solid red
}
Here is a demo.
Related
This question already has answers here:
What is the difference between "let" and "var"?
(39 answers)
Closed 12 months ago.
This is a simple javascript code. I'm creating 5 divs in script and populate an 'onclick' event for each. However, all of them give me the id of the last one. Any idea why this behavior occurring? Many thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<style type="text/css">
.divImgPoint {
float: left;
border-radius: 50%;
width: 15px;
height: 15px;
margin-left: 5px;
margin-right: 5px;
border: ridge 2px #c73756;
}
.divTest {
position: absolute;
width: 100px;
height: 100px;
top: 200px;
left: 100px;
border: 1px solid red;
}
</style>
<script type="text/javascript">
function createNewDivs() {
var divFixed = document.getElementById('divFixed');
var newDiv;
for (xI = 0; xI < 5; xI++) {
newDiv = document.createElement('div');
newDiv.id = "newDiv_" + xI;
newDiv.className = "divImgPoint";
newDiv.onclick = () => { alert(newDiv.id + " | " + xI); }
divFixed.appendChild(newDiv);
}
}
</script>
</head>
<body>
<div id="divFixed">
</div>
</body>
</html>
<script type="text/javascript">
window.addEventListener('load', () => { createNewDivs(); });
</script>
Put let newDiv; inside loop.
Like
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<style type="text/css">
.divImgPoint {
float: left;
border-radius: 50%;
width: 15px;
height: 15px;
margin-left: 5px;
margin-right: 5px;
border: ridge 2px #c73756;
}
.divTest {
position: absolute;
width: 100px;
height: 100px;
top: 200px;
left: 100px;
border: 1px solid red;
}
</style>
<script type="text/javascript">
function createNewDivs() {
var divFixed = document.getElementById('divFixed');
for (xI = 0; xI < 5; xI++) {
let newDiv;
newDiv = document.createElement('div');
newDiv.id = "newDiv_" + xI;
newDiv.className = "divImgPoint";
newDiv.onclick = () => { alert(newDiv.id + " | " + xI); }
divFixed.appendChild(newDiv);
}
}
</script>
</head>
<body>
<div id="divFixed">
</div>
</body>
</html>
<script type="text/javascript">
window.addEventListener('load', () => { createNewDivs(); });
</script>
I wrote a js code to make the table and the tds and trs but there are these weird white lines between and I'm pretty sure that's a problem with one of the CSS properties but I just can't find the thing I need to change.
I am kind of a beginner programmer. Help will be welcome and if you have improvements to the code or maybe just a suggestion or something on how to continue my programing journey I will be very glad :)
const board = document.getElementById("board");
let black = true;
for(let i = 1; i <= 8; i++){
let row = document.createElement("tr");
if(black){
row.classList.add("black");
}
else{
row.classList.add("black");
}
black = !black;
board.appendChild(row);
for(let j = 1; j <= 8; j++){
let column = document.createElement("td");
if(black){
row.classList.add("black");
}
else{
row.classList.add("white");
}
black = !black;
board.appendChild(column);
}
}
.black {
background: black;
}
.white {
background: white;
}
table {
height: 900px;
width: 900px;
border: 2px solid black;
display: inline-block;
margin: -1px;
border-collapse: collapse;
}
td, tr {
border: 2px solid black;
height: 112.5px;
width: 112.5px;
}
td::after {
content: ' ';
display: block;
margin-top: 100%;
}
.sqr {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="chessContainer">
<table id="board">
</table>
</div>
<script src="chess.js"></script>
</body>
</html>
Your issue is in the javascript, you want to append the columns (td) to the row (tr) then append the row to the board.
board.appendChild(row); this is your issue. Change it to row.appendChild(column);
NOTE: If you right click browser when you run it and look at the way your table is built, you will see that you are creating a tr and there is nothing inside the row, then you have 8 td tags and the html continues in that manner. This should be the clue to look at.
const board = document.getElementById("board");
let black = true;
for(let i = 1; i <= 8; i++){
let row = document.createElement("tr");
// let sqr = document.createElement("div");
//sqr.classList.add("sqr");
if(black){
row.classList.add("black");
}
else{
row.classList.add("black");
}
black = !black;
//row.appendChild(sqr);
board.appendChild(row);
for(let j = 1; j <= 8; j++){
let column = document.createElement("td");
//let sqr2 = document.createElement("div");
//sqr2.classList.add("sqr");
if(black){
row.classList.add("black");
}
else{
row.classList.add("white");
}
black = !black;
// column.appendChild(sqr2);
row.appendChild(column);
}
}
.black {
background: black;
}
.white {
background: white;
}
table {
height: 900px;
width: 900px;
border: 2px solid black;
display: inline-block;
margin: -1px;
border-collapse: collapse;
}
td, tr {
border: 2px solid black;
height: 112.5px;
width: 112.5px;
}
td::after {
content: ' ';
display: block;
margin-top: 100%;
}
.sqr {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="chessContainer">
<table id="board">
</table>
</div>
<script src="chess.js"></script>
</body>
</html>
the svg id = "map"
the normal path class = "T"
Selected class ="Tactive"
Tcurrent is a active shave by Default
var oMap= document.getElementById("map");
var oRng= document.getElementsByClassName("T");
var Tcurrent
for (var j = 0; j < oRng.length; j++) {
oRng[j].addEventListener("click", function () {
Tcurrent = document.getElementsByClassName("T Tactive");
Tcurrent[0].classList ="T"
this.classList = "T Tactive";
});
}
Hopefully this may help...
$('.svg').click(function() {
$('.svg').removeClass('selected'); // removes initial selected classes.
this.classList.add('selected'); // adds selected class for clicked svg.
});
.svg {
margin: 15px;
padding: 8px;
height: 100px;
width: 100px;
display: inline-block;
background: #eee;
border-radius: 4px;
}
.svg:hover {
cursor: pointer;
}
.selected {
border: 2px solid #333;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Selected</title>
</head>
<body>
<main>
<div class="svg">a.</div>
<div class="svg">b.</div>
</main>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
After discovering the difficulties of styling inputs of type range, I though it best to simply create one using css and hiding the original. I'm trying to Make a volume slider, but I don't think I fully understand how to connect onmousemove and onmousedown. I tried following the following post
How to connect onmousemove with onmousedown?
but my volumeSlider function - the javascript code that is commented out - still isn't working;
What I want is that onmousemove is only activated on onmousedown and not by simply moving the mouse.
const volume_div = document.querySelector('.volume');
const volumeBtn_div = document.querySelector('.volume-button');
function volumeClick(event) {
let x = event.offsetX;
volume_div.style.width = (Math.floor(x) + 10) + 'px';
}
/*
volumeBtn_div.onmousedown = function() {
volumeBtn_div.onmousemove = volumeSlide;
};
function volumeSlide(event) {
let x = event.offsetX;
volume_div.style.width = Math.floor(x) + 'px';
}*/
body {
background-color: #2a2a2a;
}
.volume-range {
margin-top: 80px;
height: 5px;
width: 250px;
background: #555;
border-radius: 15px;
}
.volume-range>.volume {
height: 5px;
width: 50px;
background: #2ecc71;
border: none;
border-radius: 10px;
outline: none;
position: relative;
}
.volume-range>.volume>.volume-button {
width: 20px;
height: 20px;
border-radius: 20px;
background: #FFF;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
outline: none;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Volume</title <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<div class="volume-range" onclick="volumeClick(event)">
<div class="volume">
<div class="volume-button"></div>
</div>
</div>
If I understand your question correctly, I think you could just set a flag onmousedown and reset it onmouseup. Something like:
let mouseIsDown = false;
volumeBtn_div.onmousedown = function() { mouseIsDown = true };
volumeBtn_div.onmouseup = function() { mouseIsDown = false };
volumeBtn_div.onmousemove = volumeSlide;
function volumeSlide(event) {
if(mouseIsDown){
let x = event.offsetX;
volume_div.style.width = Math.floor(x) + 'px';
}
}
...
In response to your comment, this similar example works in Chrome. I changed the EventListener syntax. It should get you on the right track.
<!DOCTYPE html>
<html>
<head>
<style>
div { width: 200px; height: 100px; border: 1px solid black; }
</style>
</head>
<body>
<div id="input"></div>
<p id="output"></p>
<script>
const input = document.getElementById("input");
const output = document.getElementById("output");
let mouseIsDown = false;
input.addEventListener("mouseup", up);
input.addEventListener("mousedown", down);
input.addEventListener("mousemove", slide);
function down(){ mouseIsDown = true; }
function up(){ mouseIsDown = false; }
function slide(e) {
if(mouseIsDown){
var x = e.clientX;
var pos = "pos: " + x;
output.innerHTML = pos;
}
}
</script>
</body>
</html>
I found some js on github that did what I needed it to do with the exception of being able to have multiple hand/glove animations on different pages of the site. The original js called the div ID and I assumed that the var needed an array of the existing div IDs. I tried that and it did not work. I am not a js or jquery guru at all but I can implement and tweak most of the time.
I have set up a fiddle so you can see how the original js is working with my code. I just need both div containers to animate the corresponding PNG that is called in the css for the separate div IDs.
http://jsfiddle.net/haagmeister/38LB2/14/
The code pulled from the CMS and the second div is not animating.. I assume it is because the calling of the var is not set up properly to pull from the array?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#new-headers-container{
width: 1024px;
height: 430px;
border: none;
margin: 0;
padding: 0;
}
#sports-gloves-container{
width: 411px;
height: 430px;
overflow: hidden;
float: left;
background: url('http://popticals.com/template/sportHeaders/circle-animation.gif') no-repeat 0 0;
border: none;
margin: 0;
padding: 0;
}
#golf-glove{
width: 284px;
height: 430px;
overflow: hidden;
float: left;
background: url('http://popticals.com/template/sportHeaders/gloves/golf-glove.png') no-repeat 0 0;
border: none;
margin: 0px 0px 0px 86px;
padding: 0;
}
#bike-glove{
width: 284px;
height: 430px;
overflow: hidden;
float: left;
background: url('http://popticals.com/template/sportHeaders/gloves/bike-glove.png') no-repeat 0 0;
border: none;
margin: 0px 0px 0px 86px;
padding: 0;
}
</style>
<script type='text/javascript'>
(function($) {
// you should change these variables
var numberOfSteps = 5;
var heightOfOneStep = 430;
var idOfAnimatedDiv = ["golf-glove","bike-glove"];
var timeBetweenSteps = 60;
// you probably won't have to change these
var index = -1;
var direction = "+";
var steps = [];
var timeOutDuration;
// instantiate steps with the correct heights of the PNG
for (var i = 0; i <= numberOfSteps - 1; i++) {
steps.push( heightOfOneStep * i );
}
var interval = setTimeout(function() {
// reset timeOutDuration
if ( timeOutDuration != timeBetweenSteps ) {
timeOutDuration = timeBetweenSteps;
}
// increment or decrement index
if ( direction == "+" ) {
index++;
} else {
index--;
}
// reverse direction if we are at the beginning or end of the animation
if (index == numberOfSteps) {
direction = "-";
timeOutDuration = 10000;
} else if ( index == -1 ) {
direction = "+";
timeOutDuration = 750;
}
$('#' + idOfAnimatedDiv ).css('backgroundPosition', '0px -' + steps[index] + 'px');
setTimeout(arguments.callee, timeOutDuration);
}, 1000);
})(jQuery);
</script>
</head>
<body>
<div id="sports-gloves-container">
<div id="golf-glove"></div>
</div>
<div id="sports-gloves-container">
<div id="bike-glove"></div>
</div>
</body>
</html>
Well, you are trying to use an array of ids there, so you need to make the transition for both ids. Change this:
for(var j=0;j<idOfAnimatedDiv.length;j++){
$('#' + idOfAnimatedDiv[j] ).css('backgroundPosition', '0px -' + steps[index] + 'px');
}