HTML DIV is not moving from right to left diagonally towards end - javascript

<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: rgb(240, 240, 231);
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
#animate1 {
width: 50px;
height: 50px;
left: 350px;
top: 2px;
position: absolute;
background-color: rgb(43, 1, 1);
}
</style>
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
<div id="animate1"></div>
</div>
<script>
function myMove() {
var elem = document.getElementById("animate");
var elem1 = document.getElementById("animate1");
var pos = 0;
var pos1 = 0;
var id = setInterval(frame, 5);
var id1 = setInterval(frame1, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
function frame1() {
if (pos1 == 350) {
clearInterval(id1);
} else {
pos1++;
elem1.style.top = pos1 + "px";
elem1.style.right = pos1 + "px";
}
}
}
</script>
In the above code I have 2 cubes(div). On click of button, the left cube should move from left to right till the end of the container diagonally and right cube should move from right to left diagonally till the end of the container. But only left cube is moving from left to right and right cube is moving from top to bottom. I want right cube to be moved from right to left diagonally till the end of the container. And this is my sandbox link. https://codesandbox.io/s/autumn-sun-uz961?file=/index.html

.animate1 class has left:350px make it to right:0 it will work.
function myMove() {
var elem = document.getElementById("animate");
var elem1 = document.getElementById("animate1");
var pos = 0;
var pos1 = 0;
var id = setInterval(frame, 5);
var id1 = setInterval(frame1, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
function frame1() {
if (pos1 == 350) {
clearInterval(id1);
} else {
pos1++;
elem1.style.top = pos1 + "px";
elem1.style.right = pos1 + "px";
}
}
}
#container {
width: 400px;
height: 400px;
position: relative;
background: rgb(240, 240, 231);
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
#animate1 {
width: 50px;
height: 50px;
right:0px;
position: absolute;
background-color: rgb(43, 1, 1);
}
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
<div id="animate1"></div>
</div>

Update your css and change left: 350px; to right: 0px; for #animate1 :
function myMove() {
var elem = document.getElementById("animate");
var elem1 = document.getElementById("animate1");
var pos = 0;
var pos1 = 0;
var id = setInterval(frame, 5);
var id1 = setInterval(frame1, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
function frame1() {
if (pos1 == 350) {
clearInterval(id1);
} else {
pos1++;
elem1.style.top = pos1 + "px";
elem1.style.right = pos1 + "px";
}
}
}
#container {
width: 400px;
height: 400px;
position: relative;
background: rgb(240, 240, 231);
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
#animate1 {
width: 50px;
height: 50px;
right: 0px; /* instead of right : 350px; */
top: 2px;
position: absolute;
background-color: rgb(43, 1, 1);
}
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
<div id="animate1"></div>
</div>

Off Topic, but are you aware of CSS transitions?
function myMove() {
document.getElementById("animate").classList.toggle("move");
document.getElementById("animate1").classList.toggle("move");
}
// try clicking the boxes themselves
for (let item of document.querySelectorAll("#animate, #animate1")) {
item.onclick = function() {
item.classList.toggle("move");
}
}
#container {
width: 400px;
height: 400px;
position: relative;
background: rgb(240, 240, 231);
}
#animate {
width: 50px;
height: 50px;
top: 0;
left: 0;
position: absolute;
background-color: red;
transition: 3s linear;
}
#animate.move {
top: 350px;
left: 350px;
}
#animate1 {
width: 50px;
height: 50px;
right: 0px;
top: 2px;
position: absolute;
background-color: rgb(43, 1, 1);
transition: 3s linear;
}
#animate1.move {
top: 350px;
right: 350px;
}
<p>
<button onclick="myMove()">Click Me</button>
</p>
<div id="container">
<div id="animate"></div>
<div id="animate1"></div>
</div>

Related

document.addEventListener blocking highlight in textarea

I did a div that is moveable but unfortunetaly the function that let user move the div also block the highlight of the text in the text area behind.
I would like to keep the possibility to move the div and to highlight the text in textarea like I want.
Ps: I already tried to put the addEventListener on varMoveButtonNotesWindow but it's really ncomfortable to use it like that (we need to keep the cursor in the little box, and I dont want the box to be bigger it wouldn't look good).
Here's the code:
var mousePosition;
var offset = [0,0];
var isDown = false;
var varMoveButtonNotesWindow = document.getElementById('moveButtonNotesWindow');
var varNotesWindow = document.getElementById('notesWindow');
varMoveButtonNotesWindow.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
varNotesWindow.offsetLeft - e.clientX,
varNotesWindow.offsetTop - e.clientY
];
}, true);
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
//The bug occurs here
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
varNotesWindow.style.left = (mousePosition.x + offset[0]) + 'px';
varNotesWindow.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
//so far
function closeNotesWindow() {
varNotesWindow.classList.remove('show');
}
function openNotesWindow() {
windowsModalContainer.classList.remove('show');
varNotesWindow.classList.add('show');
};
.firstTextarea {
height: 300px;
width: 300px;
}
#notesWindow {
display: block;
position: absolute;
width: 300px;
height: 275px;
top: 0px;
left: 0px;
border: 2px solid #313131;
z-index: 2;
resize: both;
overflow: auto;
}
#headerNotesWindow {
height: 35px;
background-color: black;
}
#moveButtonNotesWindow {
position: absolute;
background-color: blue;
color: white;
width: 20px;
height: 20px;
right: 5px;
z-index: 1;
top: 7.5px;
}
#closeButtonNotesWindow {
position: absolute;
background-color: red;
color: white;
width: 20px;
height: 20px;
right: 30px;
z-index: 1;
top: 7.5px;
}
#divTextareaNotesWindow {
text-align: center;
height: calc(100% - 6px - 35px);
}
#textareaNotesWindow {
resize: none;
width: calc(100% - 6px);
height: 100%;
outline: none;
}
<textarea class="firstTextarea">Pokemon is the best game of my childhood.</textarea>
<div class="divWindow" id="notesWindow">
<div id="headerNotesWindow">
<div id="moveButtonNotesWindow"></div>
<div id="closeButtonNotesWindow" onclick="closeNotesWindow()"></div>
</div>
<div id="divTextareaNotesWindow">
<textarea id="textareaNotesWindow"></textarea>
</div>
</div>
This can do like but not perfact:
RollBack selection when focus back it.
var mousePosition;
var offset = [0,0];
var isDown = false;
var varMoveButtonNotesWindow = document.getElementById('moveButtonNotesWindow');
var varNotesWindow = document.getElementById('notesWindow');
varMoveButtonNotesWindow.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
varNotesWindow.offsetLeft - e.clientX,
varNotesWindow.offsetTop - e.clientY
];
}, true);
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
//The bug occurs here
document.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
varNotesWindow.style.left = (mousePosition.x + offset[0]) + 'px';
varNotesWindow.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
//so far
window.addEventListener('load',function(){
var logTextSelection = function(event) {
var tgItem = event.target;
tgItem.setAttribute("lastSelectionStart",tgItem.selectionStart);
tgItem.setAttribute("lastSelectionEnd",tgItem.selectionEnd);
}
var rollBackSelection = function(event){
var tgItem = event.target;
var lastSelectionStart = tgItem.getAttribute("lastSelectionStart");
var lastSelectionEnd = tgItem.getAttribute("lastSelectionEnd");
if((lastSelectionStart !== lastSelectionEnd)){
tgItem.focus();
tgItem.setSelectionRange(lastSelectionStart,lastSelectionEnd);
}
}
var docTextareas = document.getElementsByTagName('textarea');
for (var i = 0; i < docTextareas.length; i++) {
docTextareas[i].addEventListener('select', logTextSelection, true);
docTextareas[i].addEventListener('keyup', logTextSelection, true);
docTextareas[i].addEventListener('focus', rollBackSelection, true);
}
});
function closeNotesWindow() {
varNotesWindow.classList.remove('show');
}
function openNotesWindow() {
windowsModalContainer.classList.remove('show');
varNotesWindow.classList.add('show');
};
.firstTextarea {
height: 300px;
width: 300px;
}
#notesWindow {
display: block;
position: absolute;
width: 300px;
height: 275px;
top: 0px;
left: 0px;
border: 2px solid #313131;
z-index: 2;
resize: both;
overflow: auto;
}
#headerNotesWindow {
height: 35px;
background-color: black;
}
#moveButtonNotesWindow {
position: absolute;
background-color: blue;
color: white;
width: 20px;
height: 20px;
right: 5px;
z-index: 1;
top: 7.5px;
}
#closeButtonNotesWindow {
position: absolute;
background-color: red;
color: white;
width: 20px;
height: 20px;
right: 30px;
z-index: 1;
top: 7.5px;
}
#divTextareaNotesWindow {
text-align: center;
height: calc(100% - 6px - 35px);
}
#textareaNotesWindow {
resize: none;
width: calc(100% - 6px);
height: 100%;
outline: none;
}
<textarea class="firstTextarea">Pokemon is the best game of my childhood.</textarea>
<div class="divWindow" id="notesWindow">
<div id="headerNotesWindow">
<div id="moveButtonNotesWindow"></div>
<div id="closeButtonNotesWindow" onclick="closeNotesWindow()"></div>
</div>
<div id="divTextareaNotesWindow">
<textarea id="textareaNotesWindow"></textarea>
</div>
</div>
OK I found it, i just created a div that replace document for the addeventListener.
Ps I set the color to rgba(0, 175, 0, 0.3) just for you to see how it react and work you can obviously change it to 0.
function start() {
varNotesWindow.classList.add('show');
}
var mousePosition;
var offset = [0,0];
var isDown = false;
var varMoveButtonNotesWindow = document.getElementById('moveButtonNotesWindow');
var varNotesWindow = document.getElementById('notesWindow');
const constAlternativeDocumentForMoveButtonsWindow = document.getElementById('alternativeDocumentForMoveButtonsWindowId');
//Start Move Notes Window
varMoveButtonNotesWindow.addEventListener('mousedown', function(e) {
isDown = true;
offset = [
varNotesWindow.offsetLeft - e.clientX,
varNotesWindow.offsetTop - e.clientY
];
constAlternativeDocumentForMoveButtonsWindow.classList.add('use');
}, true);
constAlternativeDocumentForMoveButtonsWindow.addEventListener('mousemove', function(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x : event.clientX,
y : event.clientY
};
varNotesWindow.style.left = (mousePosition.x + offset[0]) + 'px';
varNotesWindow.style.top = (mousePosition.y + offset[1]) + 'px';
}
}, true);
constAlternativeDocumentForMoveButtonsWindow.addEventListener('mouseup', function() {
constAlternativeDocumentForMoveButtonsWindow.classList.remove('use');
});
document.addEventListener('mouseup', function() {
isDown = false;
}, true);
//End Move Notes Window
function closeNotesWindow() {
varNotesWindow.classList.remove('show');
}
function openNotesWindow() {
windowsModalContainer.classList.remove('show');
varNotesWindow.classList.add('show');
};
.alternativeDocumentForMoveButtonsWindowClass {
display: none;
}
.alternativeDocumentForMoveButtonsWindowClass.use {
display: block;
position: absolute;
z-index: 3;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0, 175, 0, 0.3);
}
#notesWindow {
display: none;
}
#notesWindow.show {
display: block;
position: absolute;
width: 300px;
height: 275px;
top: 0px;
left: 0px;
border: 2px solid #313131;
z-index: 2;
resize: both;
overflow: auto;
}
#headerNotesWindow {
height: 35px;
background-color: black;
}
#moveButtonNotesWindow {
position: absolute;
background-color: blue;
color: white;
width: 20px;
height: 20px;
right: 5px;
z-index: 1;
top: 7.5px;
}
#closeButtonNotesWindow {
position: absolute;
background-color: red;
color: white;
width: 20px;
height: 20px;
right: 30px;
z-index: 1;
top: 7.5px;
}
#divTextareaNotesWindow {
text-align: center;
height: calc(100% - 6px - 35px);
}
#textareaNotesWindow {
resize: none;
width: calc(100% - 6px);
height: 100%;
outline: none;
}
<button onclick='start()'>Let's Go</div>
<div class="alternativeDocumentForMoveButtonsWindowClass" id="alternativeDocumentForMoveButtonsWindowId"></div>
<div class="divWindow" id="notesWindow">
<div id="headerNotesWindow">
<div id="moveButtonNotesWindow"></div>
<div id="closeButtonNotesWindow" onclick="closeNotesWindow()"></div>
</div>
<div id="divTextareaNotesWindow">
<textarea id="textareaNotesWindow"></textarea>
</div>
</div>

How to rotate a box div while dragging an element using jquery

I understand that we need to use transform: rotate(ndeg); in order to rotate a specific element in CSS. In this case, I want to do it dynamically. Using jQuery, I want to rotate the box/container div when the user drags the handle (the red background) on n degrees as the user wishes. Is it possible in jQuery?
body {
padding: 50px;
}
.box_element {
border: 1px solid black;
width: 200px;
height: 200px;
position: relative;
z-index: -1;
}
.handle {
position: absolute;
bottom: -10px;
right: -10px;
width: 10px;
height: 10px;
border: 1px solid;
background: red;
z-index: 10;
}
<body>
<div class="box_element">
THIS IS TEST
<div class="handle"></div>
</div>
</body>
Here you need to write few code to make it possible, try live code https://codepen.io/libin-prasanth/pen/xxxzbLg
var stop,
active = false,
angle = 0,
rotation = 0,
startAngle = 0,
center = {
x: 0,
y: 0
},
R2D = 180 / Math.PI;
function start(e) {
e.preventDefault();
var bb = this.getBoundingClientRect(),
t = bb.top,
l = bb.left,
h = bb.height,
w = bb.width,
x,
y;
center = {
x: l + w / 2,
y: t + h / 2
};
x = e.clientX - center.x;
y = e.clientY - center.y;
startAngle = R2D * Math.atan2(y, x);
return (active = true);
}
function rotate(e) {
e.preventDefault();
var x = e.clientX - center.x,
y = e.clientY - center.y,
d = R2D * Math.atan2(y, x);
rotation = d - startAngle;
return (rot.style.webkitTransform = "rotate(" + (angle + rotation) + "deg)");
}
function stop() {
angle += rotation;
return (active = false);
}
rot = document.getElementById("draggable");
rot.addEventListener("mousedown", start, false);
window.addEventListener("mousemove", function(event) {
if (active === true) {
event.preventDefault();
rotate(event);
}
});
window.addEventListener("mouseup", function(event) {
event.preventDefault();
stop(event);
});
#draggable {
left: 50px;
top: 50px;
width: 100px;
height: 100px;
position: relative;
border: 1px solid #000;
}
#draggable:before{
content: "";
position: absolute;
bottom: -5px;
right: -5px;
width: 10px;
height: 10px;
background: #f00;
}
<div id="draggable">
</div>
You can make use of a css-variable and then change the value of the variable when clicked.
const box_element = document.getElementById('box_element');
const handle = document.getElementById('handle');
handle.addEventListener('click', function() {
let currentVal = getComputedStyle(box_element).getPropertyValue('--rotate_deg');
box_element.style.setProperty(
'--rotate_deg', ((parseInt(currentVal.replace('deg', '')) + 90) % 360) + 'deg');
});
:root {
--rotate_deg: 0deg;
}
.box_element {
margin: 1em;
border: 1px solid black;
width: 100px;
height: 100px;
position: relative;
z-index: -1;
transform: rotate(var(--rotate_deg))
}
.handle {
position: absolute;
bottom: -10px;
right: -10px;
width: 10px;
height: 10px;
border: 1px solid;
background: red;
z-index: 10;
cursor: pointer;
}
<div class="box_element" id="box_element">
THIS IS TEST
<div class="handle" id="handle"></div>
</div>

Javascript dynamically adding divs from the left side

At the moment it is starting from the left side and adding div's to the right but how can I make it add div's from the left. So that the first card would appear in the middle and add them behind it (to the left side).
I have tried setting float: right, but it does not give the wanted results.
var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var width;
var id;
var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var lastCard;
var width;
var id;
function sortCards() {
var cards = document.getElementsByClassName("card"),
cw = parentEl.clientWidth,
sw = parentEl.scrollWidth,
diff = sw - cw,
offset = diff / (cards.length - 1 );
for (var i = 0; i < cards.length; i++) {
i != 0 && (cards[i].style.transform = "translateX(-" + offset * i + "px)");
}
}
//Move card
document.getElementById("moveCard").addEventListener("click", function () {
myMove();
});
//Start the game
document.getElementById("play").addEventListener("click", function() {
move();
});
//Stop the game
document.getElementById("stop").addEventListener("click", function() {
stop();
});
function move() {
width = 1;
id = setInterval(frame, 5);
function frame() {
if (width >= 100) {
elem.style.width = 1 + '%';
clearInterval(id);
addCard();
move();
} else {
width++;
elem.style.width = width + '%';
}
}
}
function myMove() {
var elem = lastCard;
lastCard = lastCard.previousSibling;
var pos = 0;
var id = setInterval(movie, 5);
function movie() {
if (pos == 350) {
clearInterval(id);
elem.remove();
} else {
pos = pos + 5;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
function addCard(){
var div = document.createElement("div");
div.style.position = "relative";
div.style.color = "green";
div.style.left = "auto";
div.classList.add("card");
parentEl.appendChild(div);
lastCard = div;
sortCards();
}
function stop() {
elem.style.width = 1 + '%';
clearInterval(id);
}
sortCards();
.cards {
display: flex;
max-width: 300px;
}
.card {
height: 90px;
border: 1px solid black;
border-radius: 3px;
background-color: rgba(255, 0, 0, 0.4);
flex: 0 0 50px;
background: red;
transition: transform .25s;
}
.cardGreen {
height: 90px;
border: 1px solid black;
border-radius: 3px;
background-color: rgba(255, 0, 0, 0.4);
flex: 0 0 50px;
background: green;
transition: transform .25s;
}
#myProgress {
position: relative;
width: 100%;
height: 10px;
background-color: grey;
}
#myBar {
position: absolute;
width: 1%;
height: 100%;
background-color: green;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
/*padding: 10px;*/
height: 300px; /* Should be removed. Only for demonstration */
}
.left, .right {
width: 20%;
}
.middle {
width: 60%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<header>
<h1>Simple game</h1>
</header>
<div class="row">
<div class="column left" style="background-color:#aaa;">
<div><button class="btn btn-default btn-block" id="play">Start Game</button></div>
<div><button class="btn btn-default btn-block" id="stop">Pause</button></div>
<div><button class="btn btn-default btn-block" id="moveCard">Move Card</button></div>
</div>
<div class="column middle" style="background-color:#bbb;">
<div class='cards middle' id="cards">
<!--<div class='cardGreen'></div>-->
</div>
<div id="myProgress">
<div id="myBar"></div>
</div>
</div>
<div class="column right" style="background-color:#ccc;">
<h2>Tutorial</h2>
<p>Will be here soon :)</p>
</div>
</div>
<script src="gamelogic.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Any hints or suggestions will come really in handy.
to add en element in the begining of the parent and not at the end, use prependinstead of append
parentEl.prepend(div);
The ParentNode.prepend method inserts a set of Node objects or DOMString objects >before the first child of the ParentNode.
this won't make the first card appear in the middle though, you're gonna have to rewok your positioning of the cards.
var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var width;
var id;
var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var lastCard;
var width;
var id;
function sortCards() {
var cards = document.getElementsByClassName("card"),
cw = parentEl.clientWidth,
sw = parentEl.scrollWidth,
diff = sw - cw,
offset = diff / (cards.length - 1);
for (var i = 0; i < cards.length; i++) {
i != 0 && (cards[i].style.transform = "translateX(-" + offset * i + "px)");
}
}
//Move card
document.getElementById("moveCard").addEventListener("click", function() {
myMove();
});
//Start the game
document.getElementById("play").addEventListener("click", function() {
move();
});
//Stop the game
document.getElementById("stop").addEventListener("click", function() {
stop();
});
function move() {
width = 1;
id = setInterval(frame, 5);
function frame() {
if (width >= 100) {
elem.style.width = 1 + '%';
clearInterval(id);
addCard();
move();
} else {
width++;
elem.style.width = width + '%';
}
}
}
function myMove() {
var elem = lastCard;
lastCard = lastCard.previousSibling;
var pos = 0;
var id = setInterval(movie, 5);
function movie() {
if (pos == 350) {
clearInterval(id);
elem.remove();
} else {
pos = pos + 5;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
var i = 1;
function addCard() {
var div = document.createElement("div");
div.style.left = "auto";
div.innerHTML = i++;
div.style.position = "relative";
div.style.color = "green";
div.classList.add("card");
parentEl.prepend(div);
lastCard = div;
sortCards();
}
function stop() {
elem.style.width = 1 + '%';
clearInterval(id);
}
sortCards();
.cards {
display: flex;
max-width: 300px;
}
.card {
height: 90px;
border: 1px solid black;
border-radius: 3px;
background-color: rgba(255, 0, 0, 0.4);
flex: 0 0 50px;
background: red;
transition: transform .25s;
}
.cardGreen {
height: 90px;
border: 1px solid black;
border-radius: 3px;
background-color: rgba(255, 0, 0, 0.4);
flex: 0 0 50px;
background: green;
transition: transform .25s;
}
#myProgress {
position: relative;
width: 100%;
height: 10px;
background-color: grey;
}
#myBar {
position: absolute;
width: 1%;
height: 100%;
background-color: green;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
/*padding: 10px;*/
height: 300px;
/* Should be removed. Only for demonstration */
}
.left,
.right {
width: 20%;
}
.middle {
width: 60%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<h1>Simple game</h1>
</header>
<div class="row">
<div class="column left" style="background-color:#aaa;">
<div><button class="btn btn-default btn-block" id="play">Start Game</button></div>
<div><button class="btn btn-default btn-block" id="stop">Pause</button></div>
<div><button class="btn btn-default btn-block" id="moveCard">Move Card</button></div>
</div>
<div class="column middle" style="background-color:#bbb;">
<div class='cards middle' id="cards">
<!--<div class='cardGreen'></div>-->
</div>
<div id="myProgress">
<div id="myBar"></div>
</div>
</div>
<div class="column right" style="background-color:#ccc;">
<h2>Tutorial</h2>
<p>Will be here soon :)</p>
</div>
</div>
EDIT :
to make the first car appear in the middle , make the parent's width 0% and make it grow every time you add a card until you reach 100%, and add margin:auto
var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var width;
var id;
var parentEl = document.getElementById("cards");
var elem = document.getElementById("myBar");
var lastCard;
var width;
var id;
function sortCards() {
var cards = document.getElementsByClassName("card"),
cw = parentEl.clientWidth,
sw = parentEl.scrollWidth,
diff = sw - cw,
offset = diff / (cards.length - 1);
for (var i = 0; i < cards.length; i++) {
i != 0 && (cards[i].style.transform = "translateX(-" + offset * i + "px)");
}
}
//Move card
document.getElementById("moveCard").addEventListener("click", function() {
myMove();
});
//Start the game
document.getElementById("play").addEventListener("click", function() {
move();
});
//Stop the game
document.getElementById("stop").addEventListener("click", function() {
stop();
});
function move() {
width = 1;
id = setInterval(frame, 5);
function frame() {
if (width >= 100) {
elem.style.width = 1 + '%';
clearInterval(id);
addCard();
move();
} else {
width++;
elem.style.width = width + '%';
}
}
}
function myMove() {
var elem = lastCard;
lastCard = lastCard.previousSibling;
var pos = 0;
var id = setInterval(movie, 5);
function movie() {
if (pos == 350) {
clearInterval(id);
elem.remove();
} else {
pos = pos + 5;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
var i = 1;
function addCard() {
var div = document.createElement("div");
div.style.left = "auto";
div.innerHTML = i++;
div.style.position = "relative";
div.style.color = "green";
div.classList.add("card");
if (parseInt(parentEl.style.width) < 100)
parentEl.style.width = (parseInt(parentEl.style.width) + 10) + '%';
parentEl.prepend(div);
lastCard = div;
sortCards();
}
function stop() {
elem.style.width = 1 + '%';
clearInterval(id);
}
sortCards();
.cards {
display: flex;
max-width: 300px;
}
.card {
height: 90px;
border: 1px solid black;
border-radius: 3px;
background-color: rgba(255, 0, 0, 0.4);
flex: 0 0 50px;
background: red;
transition: transform .25s;
}
.cardGreen {
height: 90px;
border: 1px solid black;
border-radius: 3px;
background-color: rgba(255, 0, 0, 0.4);
flex: 0 0 50px;
background: green;
transition: transform .25s;
}
#myProgress {
position: relative;
width: 100%;
height: 10px;
background-color: grey;
}
#myBar {
position: absolute;
width: 1%;
height: 100%;
background-color: green;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
/*padding: 10px;*/
height: 300px;
/* Should be removed. Only for demonstration */
}
.left,
.right {
width: 20%;
}
#cards {
width: 15%;
margin: auto;
}
.middle {
width: 60%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<header>
<h1>Simple game</h1>
</header>
<div class="row">
<div class="column left" style="background-color:#aaa;">
<div><button class="btn btn-default btn-block" id="play">Start Game</button></div>
<div><button class="btn btn-default btn-block" id="stop">Pause</button></div>
<div><button class="btn btn-default btn-block" id="moveCard">Move Card</button></div>
</div>
<div class="column middle" style="background-color:#bbb;">
<div class='cards middle' id="cards" style="width:0%">
<!--<div class='cardGreen'></div>-->
</div>
<div id="myProgress">
<div id="myBar"></div>
</div>
</div>
<div class="column right" style="background-color:#ccc;">
<h2>Tutorial</h2>
<p>Will be here soon :)</p>
</div>
</div>

Fixing the right button of a vanilla Javascript carousel

Against all reason, I'm trying to create a vanilla JavaScript carousel.
I am having two problems:
1. The images move left at widths of -680px as they should but when I tried to create the same function for the right button, the left value goes to 1370px making the picture off the screen.
2. I would like for it to slide left rather jump left (same for right), I managed to get it to do this but it doesn't work on the first slide, only from the second slide.
Here is the HTML code just for the carousel:
<div id = "container">
<div id = "carousel">
<div class = "slide"><img class = "slideImage" class = "active" src = "sithCover.png"></div>
<div class = "slide"><img class = "slideImage" src = "darthVader.png"></div>
<div class = "slide"><img class = "slideImage" src = "darthSidious.png"></div>
<div class = "slide"><img class = "slideImage" src = "kyloRen.png"></div>
</div>
</div>
<div id = "left" class = "button"></div>
<div id = "right" class = "button"></div>
Here is the CSS code:
#container {
position: absolute;
top: 200px;
left: 100px;
width: 680px;
height: 360px;
white-space: nowrap;
overflow:hidden;
}
#carousel {
position: absolute;
width: 2740px;
height: 360px;
white-space: nowrap;
overflow: hidden;
transition: left 300ms linear;
}
.slide {
display: inline-block;
height: 360px;
width: 680px;
padding: 0;
margin: 0;
transition: left 300ms linear;
}
.slideImage {
position:relative;
height: 360px;
width: 680px;
float: left;
}
.button {
position: absolute;
top: 340px;
height: 60px;
width: 60px;
border-bottom: 12px solid red;
}
#left {
left: 115px;
border-left: 12px solid red;
transform: rotate(45deg);
}
#right {
left: 693px;
border-right: 12px solid red;
transform: rotate(-45deg);
}
Here is the JavaScript:
var carousel = document.querySelector('#carousel');
var firstVal = 0;
document.querySelector('#left').addEventListener("click", moveLeft);
function moveLeft (){
firstVal +=685;
carousel.style.left = "-"+firstVal+"px";
};
document.querySelector('#right').addEventListener("click", moveRight);
function moveRight() {
firstVal +=685;
carousel.style.left = "+"+firstVal+"px";
};
Here is a JSFiddle so that you can see what I mean:
"https://jsfiddle.net/way81/8to1kkyj/"
I appreciate your time in reading my question and any help would be much appreciated.
Ofcourse it goes from -685px on left click and then to +1370pxthe next right click; You are always adding 685 to your firstVal variable.
firstVal = 0
//firstVal is worth 0
moveLeft()
//firstVal is now worth 685
moveRight()
//firstVal is now worth 1370.
The problem is that when you apply the firstVal to your CSS thing in the javascript, you create a string to get your negative value (where you apply the "-" sign infront of firstVal)
Instead, write them like this
function moveLeft (){
firstVal -=685; //note we now subtract, the "-" should appear when the number becomes negative
carousel.style.left = firstVal + "px";
};
function moveRight() {
firstVal +=685;
carousel.style.left = firstVal + "px";
};
var left = document.getElementById("left");
left.addEventListener("click", moveLeft, false);
var right = document.getElementById("right");
right.addEventListener("click", moveRight, false);
var carousel = document.getElementById("carousel");
var images = document.getElementsByTagName("img");
var position = 0;
var interval = 685;
var minPos = ("-" + interval) * images.length;
var maxPos = interval * images.length;
//slide image to the left side <--
function moveRight() {
if (position > (minPos + interval)) {
position -= interval;
carousel.style.left = position + "px";
}
if (position === (minPos + interval)) {
right.style.display = "none";
}
left.style.display = "block";
}
//slide image to the right side -->
function moveLeft() {
if (position < (maxPos - interval) && position < 0) {
position += interval;
carousel.style.left = position + "px";
}
if (position === 0) {
left.style.display = "none";
}
right.style.display = "block";
}
#container {
position: absolute;
top: 200px;
left: 100px;
width: 680px;
height: 360px;
white-space: nowrap;
overflow: hidden;
}
#carousel {
position: absolute;
width: 2740px;
height: 360px;
white-space: nowrap;
overflow: hidden;
transition: left 300ms linear;
}
.slide {
display: inline-block;
height: 360px;
width: 680px;
padding: 0;
margin: 0;
transition: left 300ms linear;
}
.slideImage {
position: relative;
height: 360px;
width: 680px;
float: left;
}
.button {
position: absolute;
top: 340px;
height: 60px;
width: 60px;
border-bottom: 12px solid red;
}
#left {
left: 115px;
border-left: 12px solid red;
transform: rotate(45deg);
display: none;
}
#right {
left: 693px;
border-right: 12px solid red;
transform: rotate(-45deg);
}
<div id="container">
<div id="carousel">
<div class="slide">
<img class="slideImage" class="active" src="sithCover.png" alt="slide1">
</div>
<div class="slide">
<img class="slideImage" src="darthVader.png" alt="slide2">
</div>
<div class="slide">
<img class="slideImage" src="darthSidious.png" alt="slide3">
</div>
<div class="slide">
<img class="slideImage" src="kyloRen.png" alt="slide4">
</div>
</div>
</div>
<div id="left" class="button"></div>
<div id="right" class="button"></div>

creating custom scroll bar

I want to create a custom scrollbar using just pure JavaScript and I'm having problem with making the pointer to reach the end of the scrollbar when I reach the bottom of the page. Is there any way to do that without using jQuery?
Demo on Fiddle
HTML:
<div id="scroll-bar"></div>
<div id="pointer"></div>
<div class="test">first</div>
<div class="test"></div>
<div class="test"></div>
<div class="test">middle</div>
<div class="test"></div>
<div class="test"></div>
<div class="test">final</div>
JavaScript:
var body = document.getElementsByTagName('body')[0];
var allDivs = document.getElementsByTagName('div');
var scrollBar = document.getElementById("scroll-bar");
var pointer = document.getElementById("pointer");
for (var i = 0; allDivs[i] != undefined; i++) {
var last = i;
}
var pageHeight = allDivs[last].offsetHeight + allDivs[last].offsetTop;
pointer.style.top = "7%";
function setPosition(e) {
var pos = e.screenY * 86;
var move = pos / scrollBar.offsetHeight - 10;
if (move > 7 && move < 89) {
pointer.style.top = move + "%";
}
var scrollValue = move * pageHeight / 100;
window.scrollTo(0, scrollValue);
}
function resetPosition() {
scrollBar.removeEventListener('mousemove', setPosition);
pointer.removeEventListener('mousemove', setPosition);
}
scrollBar.addEventListener('mousedown', function (event) {
pointer.addEventListener('mousemove', setPosition);
pointer.addEventListener('mouseup', resetPosition);
scrollBar.addEventListener('mousemove', setPosition);
scrollBar.addEventListener('mouseup', resetPosition);
});
scrollBar.addEventListener('click', function (event) {
setPosition(event);
});
pointer.addEventListener('mousedown', function (event) {
pointer.addEventListener('mousemove', setPosition);
pointer.addEventListener('mouseup', resetPosition);
scrollBar.addEventListener('mousemove', setPosition);
scrollBar.addEventListener('mouseup', resetPosition);
});
body.addEventListener("mousewheel", function () {
scrollBy(0, -window.event.wheelDelta);
});
body.addEventListener("DOMMouseScroll", function (e) {
scrollBy(0, e.detail * 50);
});
CSS:
html {
overflow: hidden;
}
.test {
height: 100px;
border-style: groove;
border-width: 10px;
border-color: red;
}
#scroll-bar {
position: fixed;
right: 0%;
top: 7%;
width: 3%;
height: 86%;
background-color: red;
}
#pointer {
position: fixed;
right: 0.5%;
top: 7%;
width: 2%;
height: 4%;
background-color: blue;
z-index: 3;
}

Categories