Tag: html

Detect when an image fails to load in Javascript

function testImage(URL) {
    var tester=new Image();
    tester.onload=imageFound;
    tester.onerror=imageNotFound;
    tester.src=URL;
}

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

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

testImage("http://foo.com/bar.jpg");

References
https://stackoverflow.com/questions/9815762/detect-when-an-image-fails-to-load-in-javascript
https://www.w3schools.com/jsref/event_onerror.asp

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) {
      this.nextHistory().subscribe();
    }
  }
}

References
https://stackoverflow.com/questions/40664766/how-to-detect-scroll-to-bottom-of-html-element

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

div {
    height:100vh;
}

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>
    </div>
</body>

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

References
https://stackoverflow.com/questions/1575141/how-to-make-a-div-100-height-of-the-browser-window

Detect DOM changes with Mutation Observers

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

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

References
https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

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="https://appharbor.com/assets/images/stackoverflow-logo.png" height="20" width="32" />b
  </div>
</div
#container {
  width: 100px;
  height: 100px;
  position: relative;
}
#navi,
#infoi {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#infoi {
  z-index: 10;
}

References
http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div

Sample layout for a website

layout

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <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;
        }

    </style>
</head>
<body>
<div id="Container">
    <div id="Header"></div>
    <div id="Menu"></div>
    <div id="Sidebar"></div>
    <div id="MainBody"></div>
    <div id="Footer"></div>
</div>
</body>
</html>

 

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>
</ul>

Set Attributes

$("button").click(function(){
    $("#w3s").attr("data-sowing-time", "March to June");
});

Get Attributes

$("button").click(function(){
    alert($("#w3s").attr("data-sowing-time"));
});

References :
http://html5doctor.com/html5-custom-data-attributes/
http://www.w3schools.com/jquery/jquery_dom_set.asp
http://www.w3schools.com/jquery/jquery_dom_get.asp

Keywords :

HTML , Attribute , User