Tag: javascript

Detect when an image fails to load in Javascript

- by mhdr - Leave a Comment 
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

- by mhdr - Leave a Comment 
@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

Write Media Queries with JavaScript Code

- by mhdr - Leave a Comment 
const mq = window.matchMedia( "(min-width: 500px)" );

if (mq.matches) {
// window width is at least 500px
} else {
// window width is less than 500px
}

You can also add an event listener which fires when a change is detected:

// media query event handler
if (matchMedia) {
const mq = window.matchMedia("(min-width: 500px)");
mq.addListener(WidthChange);
WidthChange(mq);
}

// media query change
function WidthChange(mq) {
if (mq.matches) {
// window width is at least 500px
} else {
// window width is less than 500px
}

}

References
https://www.sitepoint.com/javascript-media-queries/

How to use Promise in Typescript

- by mhdr - Leave a Comment 
let error = true;
function doAsyncTask() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (error) {
        reject('error'); // pass values
      } else {
        resolve('done'); // pass values
      }
    }, 1000);
  });
}

doAsyncTask().then(
  (val) => console.log(val),
  (err) => console.error(err)
);

Nested Promise

this.localStorage.clear().toPromise()
  .then((value1: boolean) => {
    console.log(value1);
    return this.localStorage.setItem(value.userName, value.token).toPromise();
  })
  .then((value2: boolean) => {
    console.log(value2);
  });

References
https://codecraft.tv/courses/angular/es6-typescript/promises/
https://stackoverflow.com/questions/40519484/promise-waterfall

Detect DOM changes with Mutation Observers

- by mhdr - Leave a Comment 
            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