Posts

Showing posts with the label dom

When new image is created, image.width returns 0

When new image is created, image.width returns 0 The code below says that spike.image.width = 0 . Why is this? I'm probably missing something that is obvious. spike.image.width = 0 class Spike { constructor(x = 200, y = 200) { this.x = x; this.y = y; this.image = new Image(); this.image.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSIBO-v6hQoEBhzmZ05mKzgYqrsZ0svgsED7IDR4dIVNxc78uc2"; } } const ctx = document.getElementById("canvas").getContext("2d"); const spike = new Spike; console.log(spike.image.width); <!DOCTYPE html> <html> <head> <link href="css/default.css" rel="stylesheet" /> </head> <body> <canvas id="canvas" width="400" height="600"></canvas> <script src="js/main.js"></script> </body> </html> 1 Answer ...
-
Read more

HTML page consuming lots of RAM

HTML page consuming lots of RAM Memory usage is high, but nothing is shown. The page keeps loading. <html> <title>Array</title> <body onload="myFunction()"> <center> <p id="demo">This is an array</p> </center> <script> var globe; var i = 0; function myFunction() { var sl = ["a", "b", "c", "d", "d", "e", "f"]; for (i = 0; i < 7; i) { globe = sl[i]; setTimeout(pk, 50); } } function pk() { document.write(globe); i++; myFunction(); } </script> </body> </html> Can someone please explain to me, what's really happening in this script? for (i = 0; i < 7; i) will run forever – CertainPerformance Jul 1 at 4:39 ...
-
Read more

Angular2, what is the correct way to disable an anchor element?

Angular2, what is the correct way to disable an anchor element? I'm working on an Angular2 application, and I need to display -- but disable an <a> HTML element. What is the correct way to do this? disable <a> Updated Please note the *ngFor , this would prevent the option of using *ngIf and not rendering the <a> altogether. *ngFor *ngIf <a> <a *ngFor="let link of links" href="#" [class.disabled]="isDisabled(link)" (click)="onClick(link)"> {{ link.name }} </a> The TypeScript component has a method that looks like this: onClick(link: LinkObj) { // Do something relevant with the object... return false; } I need to actually prevent the element from being clickable, not just appear that it is with the CSS . I was assuming that I needed to potentially bind to the [disabled] attribute at first, but this is incorrect as the anchor element doesn't have a disabled property. [disabled]...
-
Read more

Keep element with a percentage as a position fixed

Keep element with a percentage as a position fixed I have a container of variable height, and would like to put an element at the middle of it. So I've set these styles: #parent { position: relative; } #child { position: absolute; top: 50%; transform: translateY(-50%); } Which work in most cases. However, the container's height is not only variable, but it also changes constantly. Because of this, that code won't work. An example: @keyframes changeSize { 0% { height: 100px; } 50% { height: 150px; } 100% { height: 100px; } } #parent { position: relative; width: 400px; height: 300px; background: red; animation-name: changeSize; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } #child { position: absolute; margin-block-start: 0; margin-block-end: 0; right: 0; top: 50%; transform: translateY(-50%); } <div id="parent"> <p id="ch...
-
Read more