Tag: javascript

Scroll to Top using Javascript

- by mhdr - Leave a Comment 
window.scroll({
  top: 100,
  left: 100,
  behavior: 'smooth'
});
var elmnt = document.getElementById("content");
elmnt.scrollIntoView();
var elmnt = document.getElementById("myDIV");
var x = elmnt.scrollLeft;
var y = elmnt.scrollTop;

References
https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll
https://www.w3schools.com/jsref/met_element_scrollintoview.asp
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
https://www.w3schools.com/jsref/prop_element_scrolltop.asp
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

Detecting when user stopped scrolling

- by mhdr - Leave a Comment

We want to listen for scroll events using addEventListener. We’ll set a delayed timeout function to run a few milliseconds after the event, but with each scroll event we’ll clear that timeout function so it doesn’t run.

When scrolling has stopped, the delayed function doesn’t get cleared and runs.

// Setup isScrolling variable
var isScrolling;

// Listen for scroll events
window.addEventListener('scroll', function ( event ) {

  // Clear our timeout throughout the scroll
  window.clearTimeout( isScrolling );

  // Set a timeout to run after scrolling ends
  isScrolling = setTimeout(function() {

    // Run the callback
    console.log( 'Scrolling has stopped.' );

  }, 66);

}, false);

References
https://gomakethings.com/detecting-when-a-visitor-has-stopped-scrolling-with-vanilla-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