Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
React Answers

How to set inline style of background color with React?

Labrador retriever puppy walking on green grass

Sometimes, we want to set inline style of background color with React.

In this article, we’ll look at how to set inline style of background color with React.

How to set inline style of background color with React?

To set inline style of background color with React, we set the backgroundColor style.

For instance, we write

<a style={{ backgroundColor: "yellow" }}>yellow</a>

to set the backgroundColor of the link to 'yellow' inline with the style prop.

Conclusion

To set inline style of background color with React, we set the backgroundColor style.

Categories
JavaScript Answers

How to zoom with HTML5 Canvas and JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to zoom with HTML5 Canvas and JavaScript.

In this article, we’ll look at how to zoom with HTML5 Canvas and JavaScript.

How to zoom with HTML5 Canvas and JavaScript?

To zoom with HTML5 Canvas and JavaScript, we call drawImage with different image dimensions.

For instance, we draw the initial image with

ctx.drawImage(
  img,
  0,
  0,
  img.width,
  img.height,
  0,
  0,
  canvas.width,
  canvas.height
);

where img is the image element with the image.

The 2nd and 3rd arguments are the x and y coordinates of the top left corner.

The next 2 arguments are the image width and height.

Then when we zoom, we call drawImage by writing

ctx.drawImage(
  img,
  img.width / 4,
  img.height / 4,
  img.width / 2,
  img.height / 2,
  0,
  0,
  canvas.width,
  canvas.height
);

to change the top left corner coordinate values and the image’s size.

Conclusion

To zoom with HTML5 Canvas and JavaScript, we call drawImage with different image dimensions.

Categories
JavaScript Answers

How to pass JavaScript variable to link?

Labrador retriever puppy walking on green grass

Sometimes, we want to pass JavaScript variable to link.

In this article, we’ll look at how to pass JavaScript variable to link.

How to pass JavaScript variable to link?

To pass JavaScript variable to link, we use the setAttribute method.

For instance, we write

<a id="link2"> ... </a>

to add a link.

Then we write

const strLink = "2.html";
document.getElementById("link2").setAttribute("href", strLink);

to select the link with getElementById.

And then we call setAttribute with 'href' and the value of the href attribute to set the value of the href attribute.

Conclusion

To pass JavaScript variable to link, we use the setAttribute method.

Categories
CSS

How to make scrollbar visible in mobile browsers with CSS?

Labrador retriever puppy walking on green grass

Sometimes, we want to make scrollbar visible in mobile browsers with CSS.

In this article, we’ll look at how to make scrollbar visible in mobile browsers with CSS.

How to make scrollbar visible in mobile browsers with CSS?

To make scrollbar visible in mobile browsers with CSS, we set the scrollbar’s width.

For instance, we write

::-webkit-scrollbar {
  -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
  width: 12px;
}

::-webkit-scrollbar:horizontal {
  height: 12px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ffffff;
}

to set the vertical width of the scrollbar with

::-webkit-scrollbar:vertical {
  width: 12px;
}

We set the horizontal width of the scrollbar with

::-webkit-scrollbar:horizontal {
  height: 12px;
}

Then we set the background color and border radius of the handle with

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ffffff;
}

Conclusion

To make scrollbar visible in mobile browsers with CSS, we set the scrollbar’s width.

Categories
React Answers

How to scroll a div to be visible in React?

Labrador retriever puppy walking on green grass

Sometimes, we want to scroll a div to be visible in React.

In this article, we’ll look at how to scroll a div to be visible in React.

How to scroll a div to be visible in React?

To scroll a div to be visible in React, we use the scrollIntoView method.

For instance, we write

import ReactDOM from "react-dom";
import React, { useRef } from "react";

const Comp = () => {
  const divRef = useRef(null);

  const scrollToDivRef = () => {
    const node = ReactDOM.findDOMNode(divRef.current);
    node.scrollIntoView({ block: "start", behavior: "smooth" });
  };

  return (
    <div>
      ...
      <div ref={divRef} />
    </div>
  );
};

to define the divRef and assign it to the div we want to scroll to.

Then we define the scrollToDivRef function that gets the node that’s assigned to the ref.

And then we call node.scrollIntoView to scroll to the div.

We set behavior to 'smooth' to do smooth scrolling.

Conclusion

To scroll a div to be visible in React, we use the scrollIntoView method.