Detect when an image fails to load in Javascript

function testImage(URL) {
    var tester=new Image();

function imageFound() {
    alert('That image is found and loaded');

function imageNotFound() {
    alert('That image was not found.');



Detect scroll to bottom of html element in Angular

@HostListener('window:scroll', ['$event'])
onWindowScroll() {
  // In chrome and some browser scroll is given to body tag
  const pos = (document.documentElement.scrollTop || document.body.scrollTop) + document.documentElement.offsetHeight;
  const max = document.documentElement.scrollHeight;
  const fixedPos = pos + 10;
  console.log(max, fixedPos);
  // pos/max will give you the distance between scroll bottom and and bottom of screen in percentage.
  if (fixedPos >= max) {
    if (!this.isFetching) {


How to make a div 100% height of the browser window

div {

These units are vh (viewport height), vw (viewport width), vmin (viewport minimum length) and vmax (viewport maximum length).

How is 100vh different to 100%?

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>

The p tag here is set to 100% height, but because its containing div has 200px height, 100% of 200px becomes 200px, not 100% of the body height. Using 100vh instead means that the p tag will be 100% height of the body regardless of the div height


Detect DOM changes with Mutation Observers

            let target = document.getElementById(Post.ViewModel.postURLId);
            let observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
            let config = {
                attributes: true, childList: true, characterData: true, subtree: true,
                attributeOldValue: true, characterDataOldValue: true
            observer.observe(target, config);
            // later, you can stop observing
if (target.addEventListener) {
                target.addEventListener('input', function(e) {
                }, false);

So with the help of above two tricks and browser breakpoints and stacktrace we can detect exact source of error.


How to overlay one div over another div in HTML

use position: relative on the parent and child element with position: absolute.

<div id="container">
  <div id="navi">a</div>
  <div id="infoi">
    <img src="" height="20" width="32" />b
#container {
  width: 100px;
  height: 100px;
  position: relative;
#infoi {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
#infoi {
  z-index: 10;


Sample layout for a website


<!DOCTYPE html>
    <meta charset="utf-8"/>
    <style type="text/css">
        body {
            margin-left: 0px;
            margin-top: 0px;
            margin-right: 0px;
            margin-bottom: 0px;

        #Container {
            width: 800px;
            height: auto;
            margin-left: auto;
            margin-right: auto;
            margin-top: 11px;
            margin-bottom: 21px;

        #Header {
            height: 150px;
            background-color: blue;


        #Menu {
            height: 60px;
            background-color: darkcyan;

        #Sidebar {
            width: 150px;
            height: 400px;
            background-color: chartreuse;
            float: left;

        #MainBody {
            width: 650px;
            height: 400px;
            background-color: coral;
            float: right;

        #Footer {
            height: 100px;
            clear: both;
            background-color: cornflowerblue;

<div id="Container">
    <div id="Header"></div>
    <div id="Menu"></div>
    <div id="Sidebar"></div>
    <div id="MainBody"></div>
    <div id="Footer"></div>


HTML5 Custom Data Attributes

Prefixing the custom attributes with data- ensures that they will be completely ignored by the user agent. As far as the browser and indeed the website’s end user are concerned, this data does not exist.

<ul id="vegetable-seeds">
  <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>
  <li data-spacing="30cm" data-sowing-time="February to March">Celery</li>
  <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li>

Set Attributes

    $("#w3s").attr("data-sowing-time", "March to June");

Get Attributes


References :

Keywords :

HTML , Attribute , User