Develop Reference

JS not working in Django Templates (Errors within Inspect Console not Django Console)

I have a javascript that works when I run it outside of Django; however, when I try to run it within my Django Project, I get an error saying "TypeError: null is not an object (evaluating 'element.parentNode')"
and an error saying "SyntaxError: Can't duplicate variable: 'Dragger'".
When I run it, it appears the Div; but doesn't use the JS; there is no error within the Django console that is running the script; I see the error when I look at the Inspect Console.
I was wondering if JS works the same within Django Templates as it does it normal html.
Please find the Github test project that isolates the issue tab https://github.com/walterrose/Django_Testing_JS
Javascript:
var PADDING = 8;
var rect;
var viewport = {
bottom: 0,
left: 0,
right: 0,
top: 0
}
let getPropertyValue = function(style, prop) {
let value = style.getPropertyValue(prop);
value = value ? value.replace(/[^0-9.]/g, '') : '0';
return parseFloat(value);
}
let getElementRect = function(element) {
let style = window.getComputedStyle(element, null);
var x = getPropertyValue(style, 'left')
var y = getPropertyValue(style, 'top')
var width = getPropertyValue(style, 'width')
var height = getPropertyValue(style, 'height')
return {
x,
y,
width,
height
}
}
class Resizer {
constructor(wrapper, element) {
this.wrapper = wrapper;
this.element = element;
this.offsetX = 0;
this.offsetY = 0;
this.handle = document.createElement('div');
this.handle.setAttribute('class', 'drag-resize-handlers');
this.handle.setAttribute('data-direction', 'br');
this.wrapper.appendChild(this.handle);
this.wrapper.style.top = this.element.style.top;
this.wrapper.style.left = this.element.style.left;
this.wrapper.style.width = this.element.style.width;
this.wrapper.style.height = this.element.style.height;
this.element.style.position = 'relative';
this.element.style.top = 0;
this.element.style.left = 0;
this.onResize = this.resizeHandler.bind(this);
this.onStop = this.stopResize.bind(this);
this.handle.addEventListener('mousedown', this.initResize.bind(this));
}
initResize(event) {
this.stopResize(event, true);
this.handle.addEventListener('mousemove', this.onResize);
this.handle.addEventListener('mouseup', this.onStop);
}
resizeHandler(event) {
this.offsetX = event.clientX - (this.wrapper.offsetLeft + this.handle.offsetLeft);
this.offsetY = event.clientY - (this.wrapper.offsetTop + this.handle.offsetTop);
let wrapperRect = getElementRect(this.wrapper);
let elementRect = getElementRect(this.element);
this.wrapper.style.width = (wrapperRect.width + this.offsetX) + 'px';
this.wrapper.style.height = (wrapperRect.height + this.offsetY) + 'px';
this.element.style.width = (elementRect.width + this.offsetX) + 'px';
this.element.style.height = (elementRect.height + this.offsetY) + 'px';
}
stopResize(event, nocb) {
this.handle.removeEventListener('mousemove', this.onResize);
this.handle.removeEventListener('mouseup', this.onStop);
}
}
class Dragger {
constructor(wrapper, element) {
this.wrapper = wrapper;
this.element = element;
this.element.draggable = true;
this.element.setAttribute('draggable', true);
this.element.addEventListener('dragstart', this.dragStart.bind(this));
}
dragStart(event) {
let wrapperRect = getElementRect(this.wrapper);
var x = wrapperRect.x - parseFloat(event.clientX);
var y = wrapperRect.y - parseFloat(event.clientY);
event.dataTransfer.setData("text/plain", this.element.id + ',' + x + ',' + y);
}
dragStop(event, prevX, prevY) {
// store the current viewport and element dimensions when a drag starts
viewport.bottom = window.innerHeight - PADDING;
viewport.left = PADDING;
viewport.right = window.innerWidth - PADDING;
viewport.top = PADDING;
let wrapperRect = getElementRect(this.wrapper);
var height = wrapperRect.height
var width = wrapperRect.width
var newLeft = parseFloat(event.clientX) + prevX;
var newTop = parseFloat(event.clientY) + prevY;
var newRight = newLeft + width
var newBottom = newTop + height
// Deal with Left and Right boundary
// If either out of bounds
if (newLeft < viewport.left || newRight > viewport.right
) {
// If left is out of bounds
if (newLeft < viewport.left){
this.wrapper.style.left = viewport.left + 'px';
}
// If right is out of bounds
if (newRight > viewport.right){
this.wrapper.style.left = viewport.right - width + 'px';
}
} else {
//If neither right or left is out of bounds
this.wrapper.style.left = newLeft + 'px';
}
// Deal with Top and Bottom boundary
// If either out of bounds
if (newTop < viewport.top || newBottom > viewport.bottom
) {
// If top is out of bounds
if (newTop < viewport.top){
this.wrapper.style.top = viewport.top + 'px';
}
// If bottom is out of bounds
if (newBottom > viewport.bottom){
this.wrapper.style.top = viewport.bottom - height + 'px';
}
} else {
//If neither right or left is out of bounds
this.wrapper.style.top = newTop + 'px';
}
}
}
class DragResize {
constructor(element) {
this.wrapper = document.createElement('div');
this.wrapper.setAttribute('class', 'tooltip drag-resize');
if (element.parentNode) {
element.parentNode.insertBefore(this.wrapper, element);
}
this.wrapper.appendChild(element);
element.resizer = new Resizer(this.wrapper, element);
element.dragger = new Dragger(this.wrapper, element);
}
}
document.body.addEventListener('dragover', function (event) {
event.preventDefault();
return false;
});
document.body.addEventListener('drop', function (event) {
event.preventDefault();
var dropData = event.dataTransfer.getData("text/plain").split(',');
var element = document.getElementById(dropData[0]);
element.dragger.dragStop(event, parseFloat(dropData[1]), parseFloat(dropData[2]));
return false;
});
new DragResize(document.getElementById('content1'))
CSS
.drag-resize {
position: absolute;
border: 1px dashed transparent;
z-index: 999;
padding: 5px;
margin-top: -5px;
margin-left: -5px;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
/*transition: all 0.1s linear;*/
}
.drag-resize:hover {
border-color: rgb(0, 150, 253);
cursor: move;
display: block;
}
.drag-resize:hover .drag-resize-handlers {
display: block;
}
.drag-resize > div.drag-window {
width: 100%;
height: 100%;
position: absolute;
}
.drag-resize-handlers {
position: absolute;
display: none;
width: 5px;
height: 5px;
font-size: 1px;
background: rgb(0, 150, 253);
-webkit-transition: all 0.1s linear;
transition: all 0.1s linear;
opacity: 0;
border: 1px solid rgb(255, 255, 255);
}
.drag-resize .drag-resize-handlers {
opacity: 1;
}
.drag-resize-handlers:hover {
transform: scale(3); /*chrome*/
-webkit-transform: scale(3); /*nodewebkit*/
}
.drag-resize-handlers[data-direction="tl"] {
top: -5px;
left: -5px;
cursor: nw-resize;
}
.drag-resize-handlers[data-direction="tm"] {
top: -5px;
left: 50%;
margin-left: -5px;
cursor: n-resize;
}
.drag-resize-handlers[data-direction="tr"] {
top: -5px;
right: -5px;
cursor: ne-resize;
}
.drag-resize-handlers[data-direction="ml"] {
top: 50%;
margin-top: -5px;
left: -5px;
cursor: w-resize;
}
.drag-resize-handlers[data-direction="mr"] {
top: 50%;
margin-top: -5px;
right: -5px;
cursor: e-resize;
}
.drag-resize-handlers[data-direction="bl"] {
bottom: -5px;
left: -5px;
cursor: sw-resize;
}
.drag-resize-handlers[data-direction="bm"] {
bottom: -5px;
left: 50%;
margin-left: -5px;
cursor: s-resize;
}
.drag-resize-handlers[data-direction="br"] {
bottom: -5px;
right: -5px;
cursor: se-resize;
}
.wrap {
background-color:#aabbbb;
text-align:center;
width:300px;
height:200px;
color:#fff;
}
HTML (when testing outside of Django)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta html-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div
style= "width:70%;
height:1000px;
/*background-color: #0000ff";*/
>
<div id="content1" class="wrap">Drag and resize me!</div>
<!-- <div id="content2" class="wrap">Drag and resize me!</div> -->
</div>
<script src="main.js"></script>
</body>
</html>
HTML for within Django is inside of a block (with this sheet being a new Django Tab) and the base.html connects to the javascript file
{% extends "blog/base.html" %}
{% block content %}
<div id="content1" class="wrap">Drag and resize me!</div>
{% endblock content %}

Replace jumping with sliding and then change modes

I was tasked with creating an animation in javascript using an existing code and altering to do two things. Switch modes, and go on until the person closes the program. The four modes are:
mode 0 - left to right
mode 1 - top to bottom
mode 2 - right to left
mode 3 - bottom to top
Switching from mode 0 - 1 is where the trouble starts. It's supposed to slide, but it jumps when I get there.
Below is my code as is.
<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>
<p><button onclick="myMove()">Click Me</button></p>
<div id ="container">
<div id ="animate"></div>
</div>
<script>
function myMove() {
var elem = document.getElementById("animate");
var pos = 350;
var id = setInterval(frame, 5);
}
function frame() {
if (pos == 0) {
pos++;
elem.style.bottom= pos + 'px';
} else {
pos--;
elem.style.left = pos + "px";
if (pos == 49.985) {
pos++;
elem.style.left = pos + "px";
}
}

I suggest you use two variables for both x and y, and replace posBottom with a variable for top style.
The issue before was that when pos was equal to 0 and thus triggered the if statement, it immediately incremented, causing it to instead trigger the else, and then decremented, going back to if, and so on. It jumped because the style.bottom = 0px was causing it to go straight down to the bottom.
function myMove() {
var elem = document.getElementById("animate");
var posLeft = 350;
var posTop = 0;
var id = setInterval(frame, 5);
function frame() {
if (posLeft == 0 && posTop != 350) {
stage=1;
posTop++;
elem.style.top= posTop + 'px';
} else if (posTop == 0) {
posLeft--;
elem.style.left = posLeft + "px";
} else if (posLeft != 350) {
posLeft++;
elem.style.left = posLeft + "px";
} else if (posTop != 0) {
posTop--;
elem.style.top= posTop + 'px';
}
}
}
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
<p><button onclick="myMove()">Click Me</button></p>
<div id ="container">
<div id ="animate"></div>
</div>

Javascript carosel animation

I'm trying to make an image carousel with center animation. I don't want to use CSS animations, instead I'd like to use jQuery.
By pressing the 'Prev' button the animation will start. One of the slides which will be central begins to grow. I've used jQuery's animate() to animate width and height. Everything works as required except I can't understand why the animation makes the central slide jump.
I have created this sample. If you push the 'Prev' button the animation will start.
var scroll_speed = 4000;
var items_cnt = $('.mg_item').length;
var container_size = $(".main_cnt").innerWidth();
var item_avg_w = container_size / 5;
var item_center_w = ((item_avg_w / 100) * 20) + item_avg_w;
var item_center_h = (item_center_w / 16) * 9 + 30;
var item_w = ((container_size - item_center_w) / 4) - 2;
var item_h = ((item_w / 16) * 9);
var gallery_content = $('.gallery_body').html();
$('.gallery_body').html(gallery_content + gallery_content + gallery_content);
var items_offset = items_cnt * item_w + 14;
$('.gallery_body').css('left', -items_offset);
$('.mg_item').css("width", item_w);
$('.mg_item').css("height", item_h);
//$('.mg_item').css("margin-bottom", (item_center_h - item_h) / 2);
//$('.mg_item').css("margin-top", (item_center_h - item_h) / 2);
//$('.mg_item_с').css("width", item_center_w);
//$('.mg_item_с').css("height", item_center_h);
//document.documentElement.style.setProperty('--center_width', item_center_w + "px");
//document.documentElement.style.setProperty('--center_height', item_center_h + "px");
$('.main_cnt').css("height", item_center_h);
check_visible();
AssignCenter(0);
function gonext() {
AssignCenter(-1);
ZoomIn();
$('.gallery_body').animate({
left: '+=' + (item_w + 2),
}, scroll_speed, "linear", function() {
LoopSlides();
});
}
function goprev() {
AssignCenter(1);
ZoomIn();
$('.gallery_body').animate({
left: '-=' + (item_w + 2),
}, scroll_speed, "linear", function() {
LoopSlides();
});
}
function ZoomIn() {
$('.center').animate({
width: item_center_w + 'px',
height: item_center_h + 'px',
}, scroll_speed, function() {});
}
function LoopSlides() {
var cur_pos = $('.gallery_body').position().left
var left_margin = Math.abs(items_offset * 2 - item_w) * -1;
var right_margin = 0 - item_w;
if (cur_pos < left_margin) {
$('.gallery_body').css('left', -items_offset);
}
if (cur_pos >= 0) {
$('.gallery_body').css('left', -items_offset);
}
check_visible();
AssignCenter(0);
}
function check_visible() {
$('.mg_item').each(function(i, obj) {
var pos = $(this).offset().left;
if (pos < 0 || pos > container_size) {
$(this).addClass("invisible");
$(this).removeClass("active");
} else {
$(this).addClass("active");
$(this).removeClass("invisible");
}
});
}
function AssignCenter(offset) {
var center_slide = $('.active')[2 + offset];
$('.center').each(function(i, obj) {
$(this).removeClass("center");
});
$(center_slide).addClass("center");
//$(center_slide).css("width", item_center_w);
//$(center_slide).css("height", item_center_h);
}
:root {
--center_width: 0px;
--center_height: 0px;
}
.main_cnt {
background-color: rgb(255, 0, 0);
padding: 0px;
overflow: hidden;
margin: 0px;
}
.gallery_body {
width: 500%;
background-color: rgb(128, 128, 128);
position: relative;
}
.mg_item {
width: 198px;
height: 150px;
background-color: blue;
display: inline-block;
position: relative;
margin: -1px;
padding: 0px;
font-size: 120px;
}
.center {
background-color: brown;
/*width: var(--center_width) !important;
height: var(--center_height) !important;*/
}
.item_c {
width: 410px;
height: 150px;
background-color: blueviolet;
display: inline-block;
position: relative;
margin: -1px;
padding: 0px;
font-size: 120px;
}
.video-js .vjs-dock-text {
text-align: right;
}
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<div class="main_cnt">
<div class="gallery_body">
<div class="mg_item">1</div>
<div class="mg_item">2</div>
<div class="mg_item">3</div>
<div class="mg_item">4</div>
<div class="mg_item">5</div>
<div class="mg_item">6</div>
<div class="mg_item">7</div>
</div>
</div>
<br><br>
<button onclick="gonext()">GONEXT</button>
<button onclick="goprev()">GOPREV</button>
<button onclick="check_visible()">CHEVIS</button>

javascript banner - close button doesn't work corectly

I made a javascript banner which expands on rollover and close on click on a button. I cannot close it when the the banner is still expanding. When i click on the close button the banner expands and only after it starts to close. I thisnk it's about clear interval but but i dont't know how to resolve the problem. Can anyone help me?
var dagContainer = document.querySelector('.dag_sideslider');
var side_btn = document.querySelector('.side_btn');
var close_btn = document.querySelector('.dag_close');
side_btn.addEventListener("mouseover", open);
close_btn.addEventListener("click", closeBanner);
function open() {
side_btn.style.display = "none";
close_btn.style.display = "block";
var pos = 300;
var id = setInterval(frame, 5);
function frame() {
if (pos == 900) {
clearInterval(id);
} else {
pos++;
dagContainer.style.width = pos + 'px';
}
}
}
function closeBanner() {
close_btn.style.display = "block";
var idd = setInterval(framee, 5);
function framee() {
var poss = dagContainer.offsetWidth;
console.log(poss);
if (poss == 300) {
clearInterval(idd);
console.log("ss");
close_btn.style.display = "none";
side_btn.style.display = "block";
} else {
poss--;
console.log(poss)
dagContainer.style.width = poss + 'px';
console.log(poss);
}
}
}
.slideSider_container{
margin:0 auto 0;
position: relative;
width: 300px;
height: 600px;
}
.dag_sideslider{
background-color:#ea7900;
width: 300px;
height: 600px;
position: absolute;
right: 0;
top:0;
}
.side_btn{
width: 300px;
height: 600px;
}
.dag_close{
position: absolute;
top:0px;
right: 0px;
z-index:9999;
display: none
}
<div class="slideSider_container">
<div class="dag_sideslider" >
<div class="dag_close"><img src="close.png"></div>
<div class="side_btn"></div>
</div>
</div>

I don't know how to loop my animation in sync with traffic lights

I have this code below I have made and I am attempting to run the animation when the traffic light is on green/index=2. i have literally tried everything i can so please any boffins out there show me how to loop these two parts of the code in sync.
<!DOCTYPE html>
<html>
<body>
<h1>The best GCSE traffic lights sequence any examiner has ever seen!</h1>
<img id="light" src="Traff 1.jpg">
<style>
#container {
width: 600px;
height: 475px;
position: absolute;
background: #000;
}
#animate {
width: 300px;
height: 170px;
position: absolute;
background: url(car.jpg);
}
</style>
<div id ="container">
<div id ="animate"></div>
</div>
<script>
var list = [
"Traff 1.jpg",
"traff 2.jpg",
"traff 3.jpg",
"traff 4.jpg"
];
var index = 0;
(function nextlight() {
setInterval(function(){ index = index + 1;
if (index == 4) index = 0;
var image = document.getElementById('light');
image.src=list[index]; }, 3000);
})()
</script>
<script>
(function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame,10);
function frame() {
if (pos == 300) {
pos = 0;
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
})()
</script>
</body>
</html>

It's simple. You just need a check in the function frame so that it moves the position only if the index is 2.
function frame() {
if (index !== 2) {
return;
}
...
}
Working example (used colors instead of images):
<!DOCTYPE html>
<html>
<body>
<h1>The best GCSE traffic lights sequence any examiner has ever seen!</h1>
<!-- <img id="light" src="Traff 1.jpg"> -->
<div id="light">Traff Light</div>
<style>
#container {
margin: 30px 0;
width: 900px;
height: 500px;
position: absolute;
background: #000;
}
#animate {
width: 300px;
height: 170px;
position: absolute;
background: blue;
/* background: url(car.jpg); */
}
#light {
background: red;
border: 5px solid cyan;
height: 50px;
width: 100px;
}
</style>
<div id="container">
<div id="animate"></div>
</div>
<script>
var list = [
"Traff 1.jpg",
"traff 2.jpg",
"traff 3.jpg",
"traff 4.jpg"
];
var tlight = ['red', 'yellow', 'green', 'grey'];
var index = 0;
(function nextlight() {
setInterval(function() {
index = index + 1;
if (index == 4) index = 0;
var image = document.getElementById('light');
//image.src = list[index];
image.style.background = tlight[index];
}, 3000);
})();
</script>
<script>
(function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (index !== 2) {
return;
}
if (pos == 300) {
pos = 0;
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
})();
</script>
</body>
</html>