onclick needs 3 clicks to complete event - javascript

I know this question has been asked more than once, but the answers I have found don't seem to apply to my situation... I am very novice at JavaScript, and even more so at debugging it. I am trying to lean by working through an online tutorial, but when I tried the onclick event, everything appears to be null at first - the function is supposed to resize the canvas and place the image in the top left corner on the first click. What is does is resizes the canvas on the first click, then on the 3rd click, adds the image... Since I am not calling on the style or display (to my knowledge), and there are no conditional statements in the function, I'm not sure why this is happening. I also tried to link the function instead of inline as suggested by another post, but to no avail... I am using Chrome. Any input would be greatly appreciated!
HTML:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="js/main.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas id="gameCanvas" onclick="changeCanvasSize(this);" width = "400" height = "300"></canvas>
</body>
</html>
js:
function changeCanvasSize()
{
var gameCanvas = document.getElementById("gameCanvas");
var avatarImage = new Image();
gameCanvas.width = 600;
gameCanvas.height = 800;
avatarImage.src = "img/avatar.png";
gameCanvas.getContext("2d").drawImage(avatarImage, 0, 0);
}
css:
body {
background: #ffffff;
text-align: center;
padding: 20px;
color: #575757;
font: 14px/21px Arial,Helvetica,sans-serif;
}
a {
color: #B93F14;
}
a:hover {
text-decoration: none;
}
ol {
width: 600px;
text-align: left;
margin: 15px auto
}
canvas {
border: 1px solid black;
}

you have to wait for the image to load before inserting it:
function changeCanvasSize()
{
var gameCanvas = document.getElementById("gameCanvas");
var avatarImage = new Image();
gameCanvas.width = 600;
gameCanvas.height = 800;
avatarImage.src = "img/avatar.png";
avatarImage.onload = function() {
gameCanvas.getContext("2d").drawImage(avatarImage, 0, 0);
}
}

Related

Localstorage - rewrite from JS to Jquery

I'm working on a portfolio project - which should use jquery - part of the task is to set and get text via localstorage - which I can do in Javascript but I breaks when attempting to refactor in jquery.
I found an elegantly simple javascript codepen, which has all the features I want. But when I refactor into jquery it loses funtionality - I can't save the text to local storage (I get null) and I can't copy the text to a different Div.
This is the HTML:
<!DOCTYPE html>
<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">
<link rel="stylesheet" href="style.css">
<title>Local Test</title>
</head>
<body>
<div class="content-output"></div>
<textarea class="content-input" placeholder="Your text here"></textarea>
<button class="save-button">Save</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
This is simple CSS from the JS code pen:
* {
font-size: 16px;
font-family: sans-serif;
}
body {
padding: 1rem;
font-family: sans-serif;
}
.content-output {
float: left;
box-sizing: border-box;
background: #f9f9f9;
padding: 0.5rem;
width: calc(50% - 1rem);
height: 10rem;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
color: #202020;
}
.content-input {
float: left;
box-sizing: border-box;
margin-left: 2rem;
padding: 0.5rem;
width: calc(50% - 1rem);
height: 10rem;
border: 1px solid #505050;
resize: none;
}
.save-button {
/* -webkit-appearance: none; */
border: 0;
background: #0088ff;
padding: 0.5rem 1rem;
border-radius: 3px;
color: #fff;
margin-top: 1rem;
float: right;
cursor: pointer;
}
Here is the JS which works:
var input_textarea = document.querySelector(".content-input");
var output_div = document.querySelector(".content-output");
var save_button = document.querySelector(".save-button");
save_button.addEventListener("click", updateOutput);
output = localStorage.getItem("content");
input = localStorage.getItem("content");
console.log(output);
output_div.textContent = output;
function updateOutput() {
console.log("clicked button");
localStorage.setItem("content", input_textarea.value);
output_div.textContent = input_textarea.value;
}
And here is the jquery which doesn't work:
var input_textarea = $(".content-input");
var output_div = $(".content-output");
var save_button = $(".save-button");
save_button.on("click", updateOutput);
output_div.textContent = localStorage.getItem("content");
input_textarea.value = localStorage.getItem(("content"));
function updateOutput(event) {
event.preventDefault();
localStorage.setItem("content", input_textarea.value);
output_div.textContent = input_textarea.value;
}
I'm running out of ideas and searches - probably a typo but I cant find it . I've tried text() which was the advice 6 years ago. JSON.stringify and parse don't help because it's just a string.
I'm hoping someone has done some refactoring and spots the differences - I've even run this in the console but I can only add the text to localstorage manually: localstorage.setItem('content', 'help')
Thanks in advance
The problem is that you are trying to select a array, get the value of that array, and output to another array. I think jquery does that when you select a class, (because there could be more than one of them). Simple solution to this..
var input_textarea = $(".content-input")[0];
console.log(input_textarea)
var output_div = $(".content-output")[0];
var save_button = $(".save-button");
save_button.on("click", updateOutput);
output_div.textContent = localStorage.getItem("content");
input_textarea.value = localStorage.getItem(("content"));
function updateOutput(event) {
console.log('hello')
event.preventDefault();
localStorage.setItem("content", input_textarea.value);
output_div.textContent = input_textarea.value;
}
Found it: val() to set and text() to get.
var input_textarea = $(".content-input");
var output_div = $(".content-output");
var save_button = $(".save-button");
save_button.on("click", updateOutput);
// input_textarea.value = localStorage.getItem(("content"));
function updateOutput(event) {
event.preventDefault();
localStorage.setItem("content", input_textarea.val());
output_div.text(localStorage.getItem("content"));
}
this post helped: How to save the value of textarea to localstorage then display it in the same textarea

Scroll to the bottom doesn't work due to font link

Can someone please explain what's going on here?
As you can see in the example, the scroll does not go all the way down to the bottom
This is of course a problem as it does not behave according to the instructions, which is:
scrollIntoView() or target.scroll (0, target.scrollHeight - target.clientHeight);
Strangely enough, it has something to do with the "font link" in "<head>", because if I use any font other than the one that has been downloaded (Poppins), it works
var html_1 = '<div class="chat_window"><div class="messages"></div></div>';
var html_2 = '<div>hello buddy</div>';
document.body.insertAdjacentHTML('beforeend', html_1);
var target = document.querySelector('.chat_window').querySelector('.messages');
for(var i = 0; i < 9; i++) {
target.insertAdjacentHTML('beforeend', html_2);
//target.scroll(0, target.scrollHeight - target.clientHeight);
target.lastElementChild.scrollIntoView();
}
body
{
font-family: Poppins; /*here, because of this the problem arise*/
}
.chat_window
{
height: 113px;
width: 339px;
border: 1px solid black;
}
.chat_window .messages
{
height: 100%;
overflow: auto;
}
<head>
<link href="http://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700" rel="stylesheet">
</head>
<body></body>
The problem is the time needed to dynamically render the HTML and load the font. There are a few options, but might be seen as a little hacky.
Make sure you are using the same font somewhere else on the page. This will cause the browser to load the font (otherwise the browser may ignore the font until it is needed)
Delay the scroll a little after you render the HTML with JavaScript.
A minor change like this could work:
var html_1 = '<div class="chat_window"><div class="messages"></div></div>';
var html_2 = '<div>hello buddy</div>';
document.body.insertAdjacentHTML('beforeend', html_1);
var target = document.querySelector('.chat_window').querySelector('.messages');
for(var i = 0; i < 9; i++) {
target.insertAdjacentHTML('beforeend', html_2);
}
// A short delay, then jump to last item.
setTimeout(function(){
target.scroll(0, target.scrollHeight - target.clientHeight);
target.lastElementChild.scrollIntoView();
},500);
body{
font-family: Poppins;
}
.chat_window{
height: 113px;
width: 339px;
border: 1px solid black;
}
.chat_window .messages{
height: 100%;
overflow: auto;
}
<head>
<link href="http://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700" rel="stylesheet">
</head>
<body>(forcing the font to load)</body>

Use IntersectionObserver to detect div-position change

I want to observe the position of a div element that moves inside a larger container:
The page contains one div with the ID #actual which starts at a known position. Over time, the #actual div changes its position, and I need to run a function when that happens.
The #actual position can change in different ways - via CSS left/top changes, a CSS transform on a parent element, or a sibling changes size and pushes the div up/down.
My current attempt is, to add a hidden div to the page, with the ID #known which starts off at the same position as #actual. Now I try to add an IntersectionObserver that fires when the intersection between #actual and #known changes.
Here's my sample code:
const known = document.querySelector('#known');
const actual = document.querySelector('#actual');
const ioOptions = {
tolerance: 0,
root: known
};
const ioObserver = new IntersectionObserver(ioChange, ioOptions);
function ioChange(entries) {
console.log('Intersection changed:', entries[0].intersectionRect);
}
ioObserver.observe(actual);
Problem
The observer never fires. Why?
How can I get the Observer to work?
Or is there a better/different way to detect position changes of #actual?
Click below to see the full sample with the two divs:
const known = document.querySelector('#known');
const actual = document.querySelector('#actual');
// -- Intersection Observer --------
const ioOptions = {
tolerance: 0,
root: known
};
const ioObserver = new IntersectionObserver(ioChange, ioOptions);
function ioChange(entries) {
console.log('Intersection changed:', entries[0].intersectionRect);
}
ioObserver.observe(actual);
// -- Sample animation logic -----
// I expect that this animation constantly triggers the
// ioChange callback above.
// -- Sample animation logic -----
function setKnown() {
known.style.left = actual.style.left;
known.style.top = actual.style.top;
}
function moveBox() {
actual.style.left = (Math.random() * 240) + 'px';
actual.style.top = (Math.random() * 240) + 'px';
}
actual.style.left = '120px';
actual.style.top = '120px';
setKnown();
setInterval(moveBox, 1000);
#root {
position: relative;
margin: 20px auto;
background: #fff;
border: 1px solid #000;
width: 320px;
height: 320px;
box-shadow: 0 0 30px #0002;
box-sizing: border-box;
font: 14px sans-serif;
}
.box {
width: 80px;
height: 80px;
position: absolute;
text-align: center;
line-height: 80px;
white-space: nowrap;
box-sizing: border-box;
}
#known {
background: #8881;
border: 1px dashed #999;
}
#actual {
background: #0068;
color: #fff;
transition: all 0.3s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="root">
<div id="known" class="box">Known</div>
<div id="actual" class="box">Actual</div>
</div>
</body>
</html>
I know it's an old question, but if anyone happened to come across it, just make small changes to make the example work. Instead of tolerance, you should use the treshold option exactly like this:
const ioOptions = {
treshold: 0,
root: known
};
const ioObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if(entry.isIntersecting){
ioChange(entry);
}
});
});
Working example

How to stack div elements using JavaScript

I am trying to create a checker board using pure JavaScript, not jQuery.
I have created the first row, but cannot seem to "stack" the rows to create a full board. If there is a better way to go about this than the road I'm going down, please enlighten me.
<!DOCTYPE html>
<html>
<head>
<title>Checkerboard</title>
<style>
.box {
height: 50px;
width: 50px;
border: 1px solid black;
display: inline-block;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script type="text/javascript">
var row = function (node, count) {
for (var i = 1; i < count; i++) {
if (i % 2 === 0) {
copy = node.cloneNode(true);
node.parentNode.insertBefore(copy, node).style.backgroundColor = "white";
} else {
copy = node.cloneNode(true);
node.parentNode.insertBefore(copy, node).style.backgroundColor = "red";
}
}
}
row(document.querySelector('.box'), 8);
</script>
</html>
Your code works fine, you just need to actually run the function you've created:
row(document.getElementsByClassName("box")[0], 50);
JSFiddle: http://jsfiddle.net/63dcjsk4/
Edit
If you're talking about the gap that appears between rows, fix this by using float and removing the inline-block display:
.box {
border: 1px solid black;
height: 50px;
float: left;
width: 50px;
}
JSFiddle: http://jsfiddle.net/63dcjsk4/1/

Attaching an image to an overlay using javascript

I have searched several posts but cannot find something similar to what I need to do, or what I have found I cannot get to work - pretty sure that is just me though!
So, there are 3 links on a page. When a link is clicked it should display the photo (on the same page) with an overlay applied to it. I can get the image to open but for the life of me cannot figure out how to get the overlays to attach. When the image opens it should stay on the same page (with the links visible through the overlay). The user should be able to click a close button or the image itself to go back to the links display.
I know the code is a mess as I've been trying anything I can think of to try and get this to work, since I'm currently stuck on getting everything to display properly and have not even gotten to the close function yet if someone can give me a hint I would really appreciate it.
Thanks!
HTML
<!doctype html>
<html>
<head>
<title> Image preview </title>
<meta charset="utf-8">
<link rel="stylesheet" href="preview.css">
<script src="preview.js"></script>
<script>
window.onload = function() {
Preview.init();
};
</script>
</head>
<body>
<ul>
<li><a href="https://courses.oreillyschool.com/advancedjavascript
/homework/images/image1.jpg" data-preview="image1">Mt. Rainier,
1</a></li>
<li><a href="https://courses.oreillyschool.com/advancedjavascript
/homework/images/image2.jpg" data-preview="image2">Mt. Rainier,
2</a></li>
<li><a href="https://courses.oreillyschool.com/advancedjavascript
/homework/images/image3.jpg" data-preview="image3">Mt. Rainier,
3</a></li>
</ul>
</body>
</html>
CSS
.previewOverlay {
position: absolute;
display: none;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
}
.previewOverlay img {
position: relative;
border: 20px solid white;
border-radius: 10px;
top: 50px;
left: 50px;
}
.close {
position: absolute;
top: 0px;
left: 0px;
color: #fdfdfd;
font-size: 50px;
text-shadow: 0px 0px 5px black;
}
.close:after {
content: "\2717";
}
.close:hover {
color: orange;
}
JavaScript
function Preview () {
var mtnPics = document.querySelectorAll("a");
console.log(mtnPics);
mtnPics.addEventListener("click", function(event) {
event.preventDefault()
});
for (var i = 0; i < mtnPics.length; i++) {
mtnPics[i].onclick = showPicture;
}
function showPicture (pictureURL) {
var picPicked = document.getElementById("a").value;
console.log(picPicked);
//Create Div's for image display.
var ul = document.getElementById("ul");
var picDiv = document.createElement("div");
picDiv.setAttribute("class", "previewOverlay");
var imgDiv = document.createElement("div");
imgDiv.setAttribute("class", "previewOverlay img");
var imgSelected = document.getElementById("a").value;
console.log(imgSelected);
imgDiv.src = imgSelected;
var buttonClose = document.createElement("button");
//Assign divs and buttons
buttonClose = document.setAttribute("class", "close");
ul.appendChild(imgDiv);
imgDiv.appendChild(pictureURL);
imgDiv.appendChild(buttonClose);
picDiv.appendChild(imgDiv);
picDiv.insertBefore(ul, picDiv.firstChild);
//document.body.appendChild(picDiv);
buttonClose.onclick = closePicture;
}
function closePicture(targetURL) {
document.removeElement('picDiv');
}
}

Categories