Category: HTML

Sometimes, we want to add a div that stays at the top while a web page scrolls

In this article, we’ll look at how to add a div that stays at the top while a web page scrolls

How to add a div that stays at the top while a web page scrolls?

To add a div that stays at the top while a web page scrolls, we set the position CSS property of the div to fixed.

For instance, we write:

<div>
  fixed
</div>

to add a div.

Then we make it fixed by writing:

div {
  top: 0;
  position: fixed
}

We set the top position of the div and the position to fixed to make the div stay at the top of the screen.

Conclusion

To add a div that stays at the top while a web page scrolls, we set the position CSS property of the div to fixed.

Sometimes, we want to align a div with fixed position on the right side.

In this article, we’ll look at how to align a div with fixed position on the right side.

Align a Div with Fixed Position on the Right Side

To align a div with fixed position on the right side, we set the right CSS property of the div we want to align to the right side.

For instance, we write:

<div class='test'>
  hello world
</div>

and

.test {
  position: fixed;
  right: 20px;
}

to add a div with the class test.

Then in the CSS code, we select the elements with class test, and set the right property on it.

We set it to 20px so that the div is displayed 20px from the right edge of the screen.

Conclusion

To align a div with fixed position on the right side, we set the right CSS property of the div we want to align to the right side.

Sometimes, we want to add the equivalent of the “alt” attribute for div elements to let users know about the content of the div for people that have impaired vision.

In this article, we’ll look at how to add the equivalent of the “alt” attribute for div elements to let users know about the content of the div for people that have impaired vision.

Equivalent of the “alt” Attribute for div Elements

To add the equivalent of the “alt” attribute for div elements to let users know about the content of the div for people that have impaired vision, we can set the role attribute to img, then we can add the alt attribute to the div.

So we can write:

<div role="img" alt="heart">
  ♥︎
</div>

if the div has an image as its content.

If the div has non-image content, then we can set the role to text along with the aria-label attribute with the text description of the div’s content.

To do this, we write:

<div role="text" aria-label="Rating: 100%">
  Rating: ★★★
</div>

Conclusion

To add the equivalent of the “alt” attribute for div elements to let users know about the content of the div for people that have impaired vision, we can set the role attribute to img, then we can add the alt attribute to the div.

Sometimes, we want to embed an HTML5 YouTube video without using an iframe.

In this article, we’ll look at how to embed an HTML5 YouTube video without using an iframe.

Embed an HTML5 YouTube Video without Using an Iframe

To embed an HTML5 YouTube video without using an iframe, we can use the embed tag.

For instance, we write:

<div style="width: 200px; height: 200px;">  
  <embed src="https://www.youtube.com/embed/J---aiyznGQ?autohide=1&autoplay=1" wmode="transparent" type="video/mp4" width="100%" height="100%" allow="autoplay; encrypted-media; picture-in-picture" allowfullscreen title="Keyboard Cat">  
</div>

to embed a video from YouTube within a div.

We put the YouTube video embed URL as the value of the src attribute.

Also, we set the allow attribute to allow autoplay, picture-in-picture, and full screen.

Conclusion

To embed an HTML5 YouTube video without using an iframe, we can use the embed tag.

Sometimes, we want to embed a PDF on an HTML page.

In this article, we’ll look at how to embed a PDF on an HTML page.

Embed a PDF on an HTML Page

To embed a PDF on an HTML page, we can use an iframe to embed the Google PDF widget into our page.

For instance, we can write:

<iframe src="https://docs.google.com/viewer?url=http://www.africau.edu/images/default/sample.pdf&embedded=true" style="position: absolute;width:100%; height: 100%;border: none;"></iframe>

We have a iframe with the src attribute set to:

https://docs.google.com/viewer?url=http://www.africau.edu/images/default/sample.pdf&embedded=true

http://www.africau.edu/images/default/sample.pdf is the PDF file URL.

We also set the styles to change the size of the PDF iframe.

Now, we should see the PDF file displayed.

Conclusion

To embed a PDF on an HTML page, we can use an iframe to embed the Google PDF widget into our page.