JavaScript Chess Board using DOM - javascript

Hello guys I've recently started doing a chess application and I got everything set up except for the GUI. For some reason I can't get the tiles for the board to display and I don't know why. (Speculation) I think my problem has something to do with my usage of the DOM. Unfortunately for me, I've been trying to solve it for days now with no success. Could someone please help and enlighten me on this issue might be resolved because I don't know what I am missing at this point, although I suspect it is something very simple. Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chess Game</title>
<script type="text/javascript">
function drawBoard(){
var board = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,23, 24,
25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38,
39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52,
53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63];
for(var i = 1; i <= board.length; i++){
if(i % 2 == 0){
document.getElementById("whiteSquare");
}else{
document.getElementById("blackSquare");
}
}
}
</script>
<style type="text/css">
#gameBoardBorder{
width: 480px;
height: 480px;
border: solid;
border-color: black;
border-width: 2px;
float: left;
}
h1{
text-align: center;
font-family: sans-serif;
}
#whiteSquare{
width: 60px;
height: 60px;
background-color: white;
}
#blackSquare{
width: 60px;
height: 60px;
background-color: black;
}
body{
background-color: lightblue;
}
</style>
</head>
<body onload="drawBoard()">
<h1>Chess Board</h1>
<div id="gameBoardBorder">
<!-- Noting more needed to be done here, rest will be in the css -->
</div>
<div id="whiteSquare">
<!-- Noting more needed to be done here, rest will be in the css and javaScript-->
</div>
<div id="blackSquare">
<!-- Noting more needed to be done here, rest will be in the css and javaScript-->
</div>
</body>
</html>
PS: Yes, I know the code looks bad and could be done in a better way I'll do the refactoring later.
Thanks in advance, to all who would try to help.

The reason you only get two squares:
document.getElementById returns an existing element; an element that already exists. In your HTML, you have only created 2 squares, and you never create any more.
I think every time you've used document.getElementById you are trying to create a new square.
You should use document.createElement instead of document.getElementById to create new elements.
So steps to fix your problem:
ids must be unique. Style for classes instead (to have more than 1 white square, and more than 1 black square):
.whiteSquare{
width: 60px;
height: 60px;
background-color: white;
}
.blackSquare{
width: 60px;
height: 60px;
background-color: black;
}
Remove the initial <div id="whiteSquare"> and <div id="blackSquare"> elements from your HTML. We will create them in JavaScript.
Replace
for(var i = 1; i <= board.length; i++){
if(i % 2 == 0){
document.getElementById("whiteSquare");
}else{
document.getElementById("blackSquare");
}
}
with
for (var i = 0; i < board.length; i++) {
var square = document.createElement("div");
if (i / 8 % 2 < 1) {
if (i % 2 == 0) square.classList.add("whiteSquare");
else square.classList.add("blackSquare");
} else {
if (i % 2 == 0) square.classList.add("blackSquare");
else square.classList.add("whiteSquare");
}
document.getElementById("gameBoardBorder").appendChild(square);
}
To get the squares to display in the right places, you need to add display: inline-block; to their stylings.
To get rid of a gap in-between rows of squares, set the style rule line-height: 0; on #gameBoardBorder
Note I put all the squares inside of #gameBoardBoarder.
function drawBoard() {
var board = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38,
39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52,
53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63
];
for (var i = 0; i < board.length; i++) {
var square = document.createElement("div");
if (i / 8 % 2 < 1) {
if (i % 2 == 0) square.classList.add("whiteSquare");
else square.classList.add("blackSquare");
} else {
if (i % 2 == 0) square.classList.add("blackSquare");
else square.classList.add("whiteSquare");
}
document.getElementById("gameBoardBorder").appendChild(square);
}
}
#gameBoardBorder {
width: 480px;
height: 480px;
border: solid;
border-color: black;
border-width: 2px;
float: left;
line-height: 0;
}
#gameBoardBorder > * {
margin: 0;
padding: 0;
}
h1 {
text-align: center;
font-family: sans-serif;
}
.whiteSquare {
display: inline-block;
width: 60px;
height: 60px;
background-color: white;
}
.blackSquare {
display: inline-block;
width: 60px;
height: 60px;
background-color: black;
}
body {
background-color: lightblue;
}
<body onload="drawBoard()">
<h1>Chess Board</h1>
<div id="gameBoardBorder">
<!-- Noting more needed to be done here, rest will be in the css -->
</div>
</body>

In your example, you aren't actually creating any elements.
You need to create elements with Document.createElement, and then insert them with element.appendChild
Here is a simple unformatted example.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chess Game</title>
<script type="text/javascript">
function drawBoard(){
var board = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,23, 24,
25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38,
39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52,
53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63];
const container = document.getElementById("gameBoardBorder");
for(var i = 1; i <= board.length; i++){
let el = document.createElement('div');
if(i % 2 == 0){
el.className = "whiteSquare";
}else{
el.className ="blackSquare";
}
container.appendChild(el);
}
}
</script>
<style type="text/css">
#gameBoardBorder{
width: 480px;
height: 480px;
border: solid;
border-color: black;
border-width: 2px;
display: flex;
flex-flow: row wrap;
}
h1{
text-align: center;
font-family: sans-serif;
}
.whiteSquare{
width: 60px;
height: 60px;
background-color: white;
}
.blackSquare{
width: 60px;
height: 60px;
background-color: black;
}
body{
background-color: lightblue;
}
</style>
</head>
<body onload="drawBoard()">
<h1>Chess Board</h1>
<div id="gameBoardBorder">
<!-- Noting more needed to be done here, rest will be in the css -->
</div>
<div id="whiteSquare">
<!-- Noting more needed to be done here, rest will be in the css and javaScript-->
</div>
<div id="blackSquare">
<!-- Noting more needed to be done here, rest will be in the css and javaScript-->
</div>
</body>
</html>
Now you can see that this doesn't actually create a chess board like you want - because the way the elements wrap (always left to right) means that you don't actually want every second element to be white.
It's up to you to decide how you want to handle this logic.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chess Game</title>
<script>
function drawBoard(){
let row = 1;
for(let i = 1; i <= 64; i++){
if(row % 2 == 0){ // row 2,4,6,8
var color = i % 2 == 0 ? "whiteSquare" : "blackSquare";
}else{ // row 1,3,5,7
var color = i % 2 == 0 ? "blackSquare" : "whiteSquare";
}
let square = document.createElement("div");
square.className = color;
if (i % 8 == 0){ // new row
square.style = "clear:all";
row++;
}
gameBoardBorder.appendChild(square);
}
}
</script>
<style>
#gameBoardBorder{
width: 480px;
height: 480px;
border: solid;
border-color: black;
border-width: 2px;
float: left;
}
h1{
text-align: center;
font-family: sans-serif;
}
.whiteSquare{
width: 60px;
height: 60px;
background-color: white;
float: left;
}
.blackSquare{
width: 60px;
height: 60px;
background-color: black;
float: left;
}
body{
background-color: lightblue;
}
</style>
</head>
<body onload="drawBoard()">
<h1>Chess Board</h1>
<div id="gameBoardBorder">
<!-- Noting more needed to be done here, rest will be in the css -->
</div>
</body>
</html>

Related

Can I use the same JavaScript Function on multiple Div's?

I'm new to javascript and I need to make circle progress that shows percentage with animated bar
luckily I have done it but the problem is I want to make 5 or more of the same circle with the different percentages and **I need to start on page load not by click **
So how to call the function on more than one div so that the circles appears with different percentages at the same time
Here's my JS code
let firstLayer = document.querySelector('.cardHolder'),
secondLayer = document.querySelector('.skillSecond'),
startValue = 0,
endValue = 50,
duration = 20;
let progress = setInterval(() => {
startValue++
secondLayer.textContent = `${startValue}%`
firstLayer.style.background = `conic-gradient(rgb(15, 176, 6) ${startValue * 3.6}deg, rgb(193, 193, 193) 0deg)`
if (startValue == endValue) {
clearInterval(progress)
}
}, duration);
.cardHolder {
display: flex;
justify-content: center;
align-items: center;
background: conic-gradient(rgb(15, 176, 6) 3.6deg, rgb(193, 193, 193) 0deg);
width: 100px;
height: 100px;
border-radius: 100%;
}
.skillFirst {
display: flex;
justify-content: center;
align-items: center;
background-color: #90697a;
width: 80%;
height: 80%;
border-radius: 100%;
}
.skillSecond {
font-family: 'Montserrat Subrayada', sans-serif;
font-size: 24px;
}
<div class="cardHolder">
<div class="skillFirst">
<div class="skillSecond">
<span class="skillContent"></span>
</div>
</div>
</div>
This is what i came up with. Basically it works by making an array of objects containing the specifications for each individual progressbar. Then loop over the specifications and start every Interval.
let progression = [
{
progressBarId: "first",
progressBarLabelId: "first_label",
startValue: 0,
endValue: 50,
duration: 20
},
{
progressBarId: "second",
progressBarLabelId: "second_label",
startValue: 10,
endValue: 100,
duration: 10
},
{
progressBarId: "third",
progressBarLabelId: "third_label",
startValue: 50,
endValue: 80,
duration: 20
}
];
window.onload = function() {
for(var i = 0; i < progression.length; i++) {
let firstLayer = document.getElementById(progression[i].progressBarId),
secondLayer = document.getElementById(progression[i].progressBarLabelId),
startValue = progression[i].startValue,
endValue = progression[i].endValue,
duration = progression[i].duration;
let progress = setInterval(() => {
startValue++
secondLayer.textContent = `${startValue}%`
firstLayer.style.background = `conic-gradient(rgb(15, 176, 6) ${startValue * 3.6}deg, rgb(193, 193, 193) 0deg)`
if (startValue == endValue) {
clearInterval(progress)
}
}, duration);
}
}
.cardHolder {
display: flex;
justify-content: center;
align-items: center;
background: conic-gradient(rgb(15, 176, 6) 3.6deg, rgb(193, 193, 193) 0deg);
width: 100px;
height: 100px;
border-radius: 100%;
}
.skillFirst {
display: flex;
justify-content: center;
align-items: center;
background-color: #90697a;
width: 80%;
height: 80%;
border-radius: 100%;
}
.skillSecond {
font-family: 'Montserrat Subrayada', sans-serif;
font-size: 24px;
}
<div class="cardHolder" id="first">
<div class="skillFirst">
<div class="skillSecond" id="first_label">
<span class="skillContent" ></span>
</div>
</div>
</div>
<div class="cardHolder" id="second">
<div class="skillFirst">
<div class="skillSecond" id="second_label">
<span class="skillContent" ></span>
</div>
</div>
</div>
<div class="cardHolder" id="third">
<div class="skillFirst">
<div class="skillSecond" id="third_label">
<span class="skillContent" ></span>
</div>
</div>
</div>
Hope this helps, if not, please comment!

Cannot clear input field even though tried dozens of methods

I want to clear km and persons and I tried it in different ways like
inp1 = null, inp1 = isNaN, inp1 = "" (the same with inp2) and with appending innerHTML and or .value on the end and further the same with km and persons but none of these methods worked. The clearing should happen after several seconds like I described in my sub- function "clear" which is a parameter of the setTimeOut function. The clear() function should happen when someone is inserting a number over four in the persons field
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function calci() {
const {routePrice, km, persons, output} = VarOfElements();
const condExceededPersons = persons > 4;
const condPersonsCosts = persons === 4 && km > 0;
const condNonePersonsCosts = persons < 4 || !isNaN(persons);
if (condExceededPersons) {
output.innerHTML = "Only four persons can drive with you!";
setTimeout(clear,3500);
function clear() {
output.innerHTML = "Please enter adequate informations";
km = null
persons = null
}
return; /*the above area is to considering and the function under the calci function in which the elements are declared*/
} else if (condPersonsCosts) {
var personsExpenses = 5;
} else if (condNonePersonsCosts) {
personsExpenses = 0;
}
const noInput = isNaN(km);
if (noInput) {
output.innerHTML = "Please enter a distance";
return;
}
const conditionSevenO = km <= 7 && km > 0;
const overSevenOeq = km > 7 && km > 0;
if (conditionSevenO) {
y = 3.9
var wholeExpenses = routePrice * km + y + personsExpenses;
output.innerHTML = "You have to pay " + wholeExpenses.toFixed(2) + "€";
} else if (overSevenOeq) {
y = 3.9
let sevenLess = km - 7;
let overSevenRoute = 1.65;
let overSeven = sevenLess * overSevenRoute;
let seventhExpenses = 16.10;
wholeExpenses = y + seventhExpenses + overSeven + personsExpenses;
output.innerHTML = "You have to pay " + wholeExpenses.toFixed(2) + "€";
}
}
function VarOfElements() {
var routePrice = 2.3;
const inp1 = document.getElementById('input-box1');
const inp2 = document.getElementById('input-box2');
const km = parseInt(inp1.value);
var persons = parseInt(inp2.value);
output = document.getElementById('output-box');
return {routePrice, km, persons, output, inp1,inp2};
};
</script>
</head>
<style>
.body {
display: flex;
justify-content: center;
font-family: 'Padauk', sans-serif;
}
#heading {
color: rgba(130, 195, 236, 1);
}
#boxes {
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
padding: 20vh;
align-items: center;
gap: 30px;
}
#input-box1:focus, #input-box2:focus {
border: none;
box-shadow: rgb(10, 126, 179) 0 0 10px ;
}
#boxes>*:nth-child(4) {
margin-top: 1vh;
}
#boxes>*:nth-child(5) {
margin-top:-1vh;
}
.input {
background-color: rgba(152, 187, 209, 0.386);
border: 1px solid;
border-radius: 5px;
border-color: rgba(130, 195, 236, 1);
}
.box {
width: 32vh;
height: 5vh;
text-align: center;
}
#output-box {
border: 1px solid;
border-radius: 30px;
border-color: rgb(10, 126, 179);
background-color: rgba(64, 143, 193, 0.453);
color: rgba(29, 2, 54, 0.311);
line-height:40px;
text-align: center;
box-shadow: blueviolet 0 0 10px;
}
::placeholder {
color: rgba(0, 0, 0, 0.232);
}
#button {
border: 1px solid;
border-radius: 5px;
background-color: rgba(152, 187, 209, 0.386);
border-color: rgba(130, 195, 236, 1);
color: rgba(52, 160, 228, 0.588);
box-shadow: 0 0 10px rgba(130, 195, 236, 1);
cursor: pointer;
}
#button:hover {
color: white;
}
</style>
<body>
<div id="boxes">
<h1 id="heading"> Taximeter</h1>
<label class="labels" id="km" for="input-box1">km</label>
<input oninput="this.value = Math.abs(this.value)" min="0" placeholder="How far is your target?" id="input-box1"
class="box input" type="number">
<label class="labels" id="personen" for="input-box2"> Passengers </label>
<input min="0" max="4" oninput="this.value = Math.abs(this.value)" min="0"
placeholder="How many people are driving with you?" id="input-box2" class="box input" type="number">
<label class="labels" id="Preis" for="output-box">Price</label>
<output placeholder = "Please enter informations" class="box" id="output-box"></output>
<button onclick="calci()" id="button"> calculate!</button>
</div>
</div>
</body>
</html>
Answer edit because of the question in the comment section:
You could use the variables declared in the VarOfElements(), but it's not km and persons those who represents the actual value of your inputs. Instead, they are just variables that are equal to the value of your input elements.
What you actually need is the inp1 and inp2. Those variables indeed have your HTML <input> element's value and everything else, if you need.
So you can declare them in your const that gets the variables of your VarOfElements() function, and simply use them, just add .value to actually change it.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function calci() {
const {routePrice, km, persons, output, inp1, inp2} = VarOfElements();
console.log(inp1);
const condExceededPersons = persons > 4;
const condPersonsCosts = persons === 4 && km > 0;
const condNonePersonsCosts = persons < 4 || !isNaN(persons);
if (condExceededPersons) {
output.innerHTML = "Only four persons can drive with you!";
setTimeout(clear,3500);
function clear() {
output.innerHTML = "Please enter adequate informations";
inp1.value = null;
inp2.value = null;
}
return; /*the above area is to considering and the function under the calci function in which are the elements are declared*/
} else if (condPersonsCosts) {
var personsExpenses = 5;
} else if (condNonePersonsCosts) {
personsExpenses = 0;
}
const noInput = isNaN(km);
if (noInput) {
output.innerHTML = "Please enter a distance";
return;
}
const conditionSevenO = km <= 7 && km > 0;
const overSevenOeq = km > 7 && km > 0;
if (conditionSevenO) {
y = 3.9
var wholeExpenses = routePrice * km + y + personsExpenses;
output.innerHTML = "You have to pay " + wholeExpenses.toFixed(2) + "€";
} else if (overSevenOeq) {
y = 3.9
let sevenLess = km - 7;
let overSevenRoute = 1.65;
let overSeven = sevenLess * overSevenRoute;
let seventhExpenses = 16.10;
wholeExpenses = y + seventhExpenses + overSeven + personsExpenses;
output.innerHTML = "You have to pay " + wholeExpenses.toFixed(2) + "€";
}
}
function VarOfElements() {
var routePrice = 2.3;
const inp1 = document.getElementById('input-box1');
const inp2 = document.getElementById('input-box2');
const km = parseInt(inp1.value);
var persons = parseInt(inp2.value);
output = document.getElementById('output-box');
return {routePrice, km, persons, output, inp1,inp2};
};
</script>
</head>
<style>
body, html {
overflow: hidden
}
.body {
display: flex;
justify-content: center;
font-family: 'Padauk', sans-serif;
}
#heading {
color: rgba(130, 195, 236, 1);
}
#boxes {
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
padding: 20vh;
align-items: center;
gap: 30px;
}
#input-box1:focus, #input-box2:focus {
border: none;
box-shadow: rgb(10, 126, 179) 0 0 10px ;
}
#boxes>*:nth-child(4) {
margin-top: 1vh;
}
#boxes>*:nth-child(5) {
margin-top:-1vh;
}
.input {
background-color: rgba(152, 187, 209, 0.386);
border: 1px solid;
border-radius: 5px;
border-color: rgba(130, 195, 236, 1);
}
.box {
width: 32vh;
height: 5vh;
text-align: center;
}
#output-box {
border: 1px solid;
border-radius: 30px;
border-color: rgb(10, 126, 179);
background-color: rgba(64, 143, 193, 0.453);
color: rgba(29, 2, 54, 0.311);
line-height:40px;
text-align: center;
box-shadow: blueviolet 0 0 10px;
}
::placeholder {
color: rgba(0, 0, 0, 0.232);
}
#button {
border: 1px solid;
border-radius: 5px;
background-color: rgba(152, 187, 209, 0.386);
border-color: rgba(130, 195, 236, 1);
color: rgba(52, 160, 228, 0.588);
box-shadow: 0 0 10px rgba(130, 195, 236, 1);
cursor: pointer;
}
#button:hover {
color: white;
}
</style>
<body>
<div id="boxes">
<h1 id="heading"> Taximeter</h1>
<label class="labels" id="km" for="input-box1">km</label>
<input oninput="this.value = Math.abs(this.value)" min="0" placeholder="How far is your target?" id="input-box1"
class="box input" type="number">
<label class="labels" id="personen" for="input-box2"> Passengers </label>
<input min="0" max="4" oninput="this.value = Math.abs(this.value)" min="0"
placeholder="How many people are driving with you?" id="input-box2" class="box input" type="number">
<label class="labels" id="Preis" for="output-box">Price</label>
<output placeholder = "Please enter informations" class="box" id="output-box"></output>
<button onclick="calci()" id="button"> calculate!</button>
</div>
</div>
</body>
</html>

Changing the resizable snap amount

Using gridstack, I can resize my widgets. However, when dragging on the widgets' handles, the widget's size will snap to specific sizes. This seems like a fixed amount. If I wanted to set the widget's size to one in between the specific sizes I am unable to do that since it snaps to that specific size.
Is there any way to change the scaling on this so the snapping can happen at smaller intervals?
Sorry, I'm quite new and I've been playing around using a demo I found on codepen, https://codepen.io/AKay/pen/GZXEJx, but am unable to figure out how to do so.
HTML:
<body>
<section class="darklue" id="demo">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>Tile drop</h2>
</div>
</div>
<div class="row">
<div class="col-lg-2 grid-container sidebar-scroll">
<div class="sidebar grid-stack-1"></div>
</div>
<div class="col-lg-10 grid-container">
<div class="grid-stack grid-stack-4"></div>
</div>
</div>
</div>
</section>
</body>
CSS:
body {
background: #2c3e50;
color: #fff;
}
.sidebar {
/* background: lightblue; */
height: 100%;
}
.grid-stack {
/* background: #66a3ff; */
}
.sidebar-scroll {
overflow-y: scroll;
}
.grid-container {
padding-top: 15px;
padding-bottom: 15px;
height: 542px;
background: grey;
}
.sidebar .grid-stack-item {
text-align: center;
line-height: 100px;
z-index: 10;
cursor: grab;
display: inline-block;
}
.grid-stack-item-content {
background: white;
color: #2c3e50;
font-family: 'Indie Flower';
text-align: center;
font-size: 20px;
}
.grid-stack .grid-stack-item[data-gs-width="4"] {
width: 100%
}
.grid-stack .grid-stack-item[data-gs-width="3"] {
width: 75%
}
.grid-stack .grid-stack-item[data-gs-width="2"] {
width: 50%
}
.grid-stack .grid-stack-item[data-gs-width="1"] {
width: 25%
}
.grid-stack .grid-stack-item[data-gs-x="3"] {
left: 75%
}
.grid-stack .grid-stack-item[data-gs-x="2"] {
left: 50%
}
.grid-stack .grid-stack-item[data-gs-x="1"] {
left: 25%
}
.sidebar .grid-stack-item[data-gs-width="1"] {
width: 100%
}
JS:
$(function() {
var options = {
float: true,
width: 4,
height: 4,
animate: true,
always_show_resize_handle: true,
cellHeight: 110,
verticalMargin: 18,
horizontalMargin: 9,
placeholder_class: 'grid-stack-placeholder',
acceptWidgets: '.grid-stack-item'
};
$('.grid-stack').gridstack(_.defaults(options));
var items = [{
x: 0,
y: 0,
width: 1,
height: 1
}, {
x: 1,
y: 0,
width: 1,
height: 1
}, {
x: 2,
y: 0,
width: 1,
height: 1
}, {
x: 0,
y: 1,
width: 1,
height: 1
}, {
x: 3,
y: 1,
width: 1,
height: 1
}, {
x: 1,
y: 2,
width: 1,
height: 1
}];
$('.grid-stack').each(function() {
var grid = $(this).data('gridstack');
_.each(items, function(node) {
grid.addWidget($('<div><div class="grid-stack-item-content" /><div/>'),
node.x, node.y, node.width, node.height);
}, this);
});
var sidebar_options = {
float: true,
width: 1,
cellHeight: 110,
verticalMargin: 18,
horizontalMargin: 9,
placeholder_class: 'grid-stack-placeholder',
};
$('.sidebar').gridstack(_.defaults(sidebar_options));
var droppables = [{
x: 0,
y: 0,
width: 1,
height: 1
}];
$('.sidebar').each(function() {
var sidebar = $(this).data('gridstack');
_.each(droppables, function(node) {
sidebar.addWidget($('<div><div class="grid-stack-item-content">I\'m new</div></div>'),
node.x, node.y, node.width, node.height);
}, this);
});
});

How to Create Custom Tooltips

I am extremely new to HTML, JavaScript, and any other coding-related matters. However, I have been relying on tutorials to get a website up for a school project. I managed to use the jQuery library to get my line graph up (from chart.js), but I would also like to be able to allow for tooltips over my content. (specifically, this one) I am having trouble to allow for the tooltips to show up, and I'm wondering how I may fix this, as I am unable to find any tutorials. I previously tried using chart.js together with powertip.js as well, which is another jquery plugin.
Here is my code:
<head>
<title>get1030 project</title>
<style>
#font-face {
font-family: "brandon";
src: url('Brandon_reg.otf') format('opentype');
}
body {
font-family: "brandon", helvetica, sans-serif;
background-color: #f3f3f3;
}
#container {
max-width: 900px;
margin: 0 auto;
background-color: #fff;
padding: 32px;
}
header {
background-color: #336699;
height: 150px;
padding: 4px;
}
header h1 {
text-transform: lowercase;
text-align: center;
color: #fff;
line-height: 60px;
}
header h2 {
text-transform: lowercase;
line-height: 2px;
font-size: 18px;
text-align: center;
color: #fff;
}
nav {
padding: 5px 0 5px 0;
text-align: center;
line-height: 35px;
background-color: #818181;
}
nav ul {
margin-top: 20px;
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}
nav ul li {
display: inline-block;
padding: 0 22px 0 22px;
font-size: 17px;
}
nav a {
text-decoration: none;
color: #fff;
padding: 8px;
font-variant: small-caps;
}
nav a:hover {
color: #336699;
}
nav ul li:hover ul{
display: block;
}
nav ul ul {
display: none;
position: absolute;
background-color: #333;
margin-left: -33px;
}
nav ul ul li {
display: block;
font-size: 15px;
}
#linechart1 {
position: relative;
left: 40px;
}
#legend ul {
list-style: none;
font-size: 12px;
}
#legend ul li {
display: inline;
padding: 13px;
}
#graphtitle {
position: relative;
left: 40px;
text-decoration: underline;
}
#linechart1 {
position: relative;
left: 40px;
}
#legend ul {
list-style: none;
font-size: 12px;
}
#legend ul li {
display: inline;
padding: 13px;
}
h3 {
margin-left: 40px;
}
article {
margin-left: 40px;
margin-right: 40px;
}
</style>
<script src="jquery-2.2.1.min.js"></script>
<script src="Chart.js"></script>
<script src="html5tooltips.1.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="html5tooltips.animation.css" />
<link rel="stylesheet" type="text/css" href="html5tooltips.css" />
</head>
<body>
<div id="container">
<header>
<h1>stereotypes of women in popular music lyrics</h1>
<h2>a digital humanities project</h2>
</header>
<nav>
<ul>
<li>home</li><li>
overview</li><li>
stereotypes
<ul>
<li>sex objects</li>
<li>emotional/weak</li>
<li>femme fatales</li>
<li>toxic</li>
</ul>
</li><li>
against the stereotype</li><li>
references</li>
</ul>
</nav>
<h3>methodology:</h3>
<article>
The lyrics of the top 40 songs of each year over the past decade (2007-2016) were reviewed to identify several common portrayals of women. The top 40 songs (insert tool tip or popup) was retrieved from <span data-tooltip="Refresh" data-tooltip-stickto="right" data-tooltip-color="bamboo" data-tooltip-animate-function="foldin">refresh</span> (pop up for billboard) year-end charts (charting methods) of the 'Hot 100' songs; except for the year 2016, where the chart for the week of March 26 2016 was used.
<br><br>
</article><br>
<div id="graphtitle">
<strong>top 40s over the past 10 years</strong>
</div><br>
<div style="width: 100%; height: 100%;">
<canvas id="linechart1" width="800" height "1500""></canvas>
</div>
<div id="legend"></div>
<script>
$(function () {
var data = {
labels: ["2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015",
"2016"],
datasets: [
{
label: "women as femme fatales",
fillColor: "rgba(255, 229, 229, 0.2)",
strokeColor: "#ffcccc",
pointColor: "#ffb3b3",
pointStrokeColor: "#994D4D",
pointHighlightFill: "#fff",
pointHighlightStroke: "#ffb3b3",
data: [3, 6, 5, 3, 8, 1, 1, 6, 4, 2]
},
{
label: "women as emotional and weak",
fillColor: "rgba(229, 255, 229, 0.2)",
strokeColor: "#ccffcc",
pointColor: "#b3ffb3",
pointStrokeColor: "#4D994D",
pointHighlightFill: "#fff",
pointHighlightStroke: "#b3ffb3",
data: [4, 6, 5, 6, 3, 4, 4, 4, 3, 8]
},
{
label: "women as men's possessions/sex objects",
fillColor: "rgba(255, 247, 229, 0.2)",
strokeColor: "#ffeecc",
pointColor: "#ffe6b3",
pointStrokeColor: "#99804D",
pointHighlightFill: "#fff",
pointHighlightStroke: "#ffe6b3",
data: [10, 9, 11, 8, 8, 7, 7, 8, 10, 13]
},
{
label: "women as strong and independent",
fillColor: "rgba(229, 247, 255, 0.2)",
strokeColor: "#cceeff",
pointColor: "#b3e6ff",
pointStrokeColor: "#4D8099",
pointHighlightFill: "#fff",
pointHighlightStroke: "#b3e6ff",
data: [2, 3, 2, 1, 5, 5, 2, 5, 2, 1]
},
{
label: "women as toxic",
fillColor: "rgba(238, 229, 255, 0.2)",
strokeColor: "#ddccff",
pointColor: "#ccb3ff",
pointStrokeColor: "#664D99",
pointHighlightFill: "#fff",
pointHighlightStroke: "#ccb3ff",
data: [0, 0, 0, 0, 1, 0, 1, 0, 1, 1]
}
]
};
var option = {
pointDot : true,
scaleGridLineWidth : 1,
};
var ctx = $("#linechart1").get(0).getContext("2d");
var myLineChart = new Chart(ctx).Line(data, option);
document.getElementById('legend').innerHTML = myLineChart.generateLegend();
});
html5tooltips({
animateFunction: "spin",
color: "bamboo",
contentText: "Refresh",
stickTo: "right",
targetSelector: "#refresh"
});
</script>
<br>
<article>
As seen in the graph above, the number of songs that feature the sexual objectification of women is consistently the highest in the top 40s over the past ten years.
</article>
</body>
According to the README file for html5tooltip.js,
this is what I am supposed to do, but the tooltip does not show up
Thank you in advance, and I am really sorry if this is not clear! I have been spending hours on this.
Try changing your span tag by giving a id="refresh"
<span id="refresh" data-tooltip="Refresh" data-tooltip-stickto="right" data-tooltip-color="bamboo" data-tooltip-animate-function="foldin">refresh</span>
working fiddle - https://jsfiddle.net/Lcrgohvg/

Slider Bar with Trail?

I would like there to be an orange gradient trail behind the slider bar as it moves. Here's the fiddle.
Orange Gradient Code:
background: linear-gradient(to bottom, rgba(241,194,16,1) 0%,rgba(239,192,14,1) 11%,rgba(243,186,17,1) 29%,rgba(242,181,15,1) 39%,rgba(243,172,18,1) 57%,rgba(241,168,14,1) 68%,rgba(244,164,17,1) 79%,rgba(240,158,20,1) 100%);
The finished version should look like this, and I only want it through JavaScript or jQuery and HTML/CSS.
How's this?
$(function() {
$(".vHorizon").change(function() {
var slider = $(this);
var min = slider.prop('min');
var max = slider.prop('max');
if (!min) min = 0;
if (!max) max = 100;
var percent = (slider.val() - min) / (max - min);
var cover = slider.next();
var coverWidth = cover.attr('mwidth');
cover.css('width', 'calc(' + percent + ' * ' + coverWidth + ')');
});
$(".vHorizon").change();
});
input[type=range].vHorizon,
.vHorizonCover {
-webkit-appearance: none;
background-color: #8a9398;
height: 26px;
width: 590px;
margin: 65px 0 0 5px;
border-radius: 5px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-image: url("http://i.imgur.com/ZmVoXyE.png?1");
background-repeat: no-repeat;
width: 20px;
height: 52px;
}
.vHorizonContainer {
position: relative;
}
.vHorizonCover {
position: absolute;
top: 0;
pointer-events: none;
background: linear-gradient(to bottom, rgba(241, 194, 16, 1) 0%, rgba(239, 192, 14, 1) 11%, rgba(243, 186, 17, 1) 29%, rgba(242, 181, 15, 1) 39%, rgba(243, 172, 18, 1) 57%, rgba(241, 168, 14, 1) 68%, rgba(244, 164, 17, 1) 79%, rgba(240, 158, 20, 1) 100%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='vHorizonContainer'>
<input type="range" class="vHorizon" />
<div class='vHorizonCover' mwidth='590px'></div>
</div>
It won't work as well in IE 10 or earlier (the css pointer-events property is not supported).
I created a div to cover the slider, and changed its width using jQuery based on the slider's value.

Categories

Resources