0

How to add a div at the top of the overlay page?

I need to create a div that stays over all the elements of the page at the top when the internet connection is not active according to the image below, in what way using CSS I can create this div with * ngIf as an example below.

    <div *ngIf="connection_refused" class="connection-status-wrap">
<span class="connection-status-text">No connection to server</span>
</div>

I am verifying if there is internet connection, when not having internet connection should display the above div on all elements of the page at the top.

Image Example: Div on top page elements

Luiz Ricardo Cardoso
  • 163
  • 1
  • 3
  • 13
  • Refer to [CSS `position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) – showdev Feb 09 '18 at 00:47
  • You can do it using css. Apply a css class to the div with {position: absolute; top: 0px; left 0px;} you may have to also use z-index so it shows over other content – Andres M Feb 09 '18 at 00:48
  • Look at [this](https://stackoverflow.com/questions/2384167/check-if-internet-connection-exists-with-javascript) post, please. – Anonymous Feb 09 '18 at 00:50
  • @AndresM I do not have much knowledge in front-end development, thanks for the collaboration (y) – Luiz Ricardo Cardoso Feb 09 '18 at 01:28

2 Answers2

0

For keeping the element at the top of the page, a fixed position should work just fine

position:fixed;
top:0%;

However, if there is a stable connection and you wish to hide the element from the viewer, you could either set the visibility of the element in css

visibility: hidden;

Hope this helped!

0

You can do something like this

window.setInterval(function(){
if (navigator.onLine) {
    //if its offline, show div.
} else {
    //else (when the connection return) hide div.
}}, 5000); // every 5 seconds, function check if has connection

And use Position: fixed, top: 0, and define width and height;

Gabriel Lopes
  • 183
  • 3
  • 12