Author: John Au-Yeung

Sometimes, we want to get and set the current web page scroll position with JavaScript.

In this article, we’ll look at how to get and set the current web page scroll position with JavaScript.

How to get and set the current web page scroll position with JavaScript?

To get and set the current web page scroll position with JavaScript, we can use the scrollTop property.

For instance, we write

document.documentElement.scrollTop || document.body.scrollTop

to get the scroll position with either property.

And we can set the scroll position with

document.documentElement.scrollTop = document.body.scrollTop = 1000;

where 1000 is in pixels to scroll the page 1000 pixels down.

Conclusion

To get and set the current web page scroll position with JavaScript, we can use the scrollTop property.

Sometimes, we want to convert object string to JSON with JavaScript.

In this article, we’ll look at how to convert object string to JSON with JavaScript.

How to convert object string to JSON with JavaScript?

To convert object string to JSON with JavaScript, we can use eval to convert the object string to valid JSON if the string is trusted for sure.

For instance, we write

const str =
  "{ hello: 'world', places: ['Africa', 'America', 'Asia', 'Australia'] }";
const json = JSON.stringify(eval("(" + str + ")"));

to call eval on the str string to convert it to a valid JavaScript object.

Then we call JSON.stringify on the returned object to convert it to a valid JSON string.

Conclusion

To convert object string to JSON with JavaScript, we can use eval to convert the object string to valid JSON if the string is trusted for sure.

Sometimes, we want to fix useState not triggering re-render with React.

In this article, we’ll look at how to fix useState not triggering re-render with React.

How to fix useState not triggering re-render with React?

To fix useState not triggering re-render with React, we should make a copy of objects or arrays before we update them.

For instance, we write

import React, { useState, useEffect } from "react";

const Comp = () => {
  //...
  const [state, setState] = {};

  const f = () => {
    setState({ ...state });
  };
  //...
};

to call setState with a copy of state in the function f to trigger re-rendering of the Comp component.

Conclusion

To fix useState not triggering re-render with React, we should make a copy of objects or arrays before we update them.

Sometimes, we want to remove slide down effect with Twitter Bootstrap modal with CSS.

In this article, we’ll look at how to remove slide down effect with Twitter Bootstrap modal with CSS.

How to remove slide down effect with Twitter Bootstrap modal with CSS?

To remove slide down effect with Twitter Bootstrap modal with CSS, we can set the transition and transform styles to none.

For instance, we write

.modal.fade .modal-dialog {
  -moz-transition: none !important;
  -o-transition: none !important;
  -webkit-transition: none !important;
  transition: none !important;

  -moz-transform: none !important;
  -ms-transform: none !important;
  -o-transform: none !important;
  -webkit-transform: none !important;
  transform: none !important;
}

to select the elements with the modal-dialog class in the elements with the modal-fade class and set their transition and transform styles to none for each kind of browser.

We use !important to override the existing styles.

Conclusion

To remove slide down effect with Twitter Bootstrap modal with CSS, we can set the transition and transform styles to none.