Categories
HTML

How to Align a Div with Fixed Position on the Right Side?

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.

Categories
HTML

What is the Equivalent of the “alt” Attribute for div Elements?

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.

Categories
HTML

How to Embed an HTML5 YouTube Video Without Using an Iframe?

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.

Categories
HTML

How to Embed a PDF on an HTML Page?

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.

Categories
HTML

How to Toggle an HTML Radio Button by Clicking its Label?

Sometimes, we want to toggle an HTML radio button by clicking its label.

In this article, we’ll look at how to toggle an HTML radio button by clicking its label.

Toggle an HTML Radio Button by Clicking its Label with JavaScript

To toggle an HTML radio button by clicking its label with JavaScript, we should put the radio button and the radio button text in the label element.

For instance, we can write:

<label>  
  <input type="radio" name="mode" value="create">  
  <i>create table</i>  
</label>

We put the input and i element with the label text so that when we click on the text, the radio button will be selected.

Conclusion

To toggle an HTML radio button by clicking its label with JavaScript, we should put the radio button and the radio button text in the label element.