CODEWITHSUNDEEP
javascriptjqueryhtmlcssajax
Emily
Emily

Reputation: 1151

Simple Javascript show div function isn't working

I have the following Javascript function:

function checkConnection() {
    $.ajax({
        url: 'php_scripts/checkconnection.php',
        type: "POST",
        success: function() {
            document.getElementById('openOfflineDIV').style.display = 'none';
            console.log("connected");
        },
        error: function() {
            document.getElementById('openOfflineDIV').style.display = 'block';
            //I have also tried: 
            document.getElementById('openOfflineDIV').style.display = 'inline';
            console.log("disconnected");
        }
    }).complete(function() {
        setTimeout(checkConnection, 1000);
    });
}

This function's purpose is to check the internet connectivity status every second. If the connection is active, then the div openOfflineDIV should not be visible, but if the connection is lost, then the div should be visible.

This code is partially working, meaning that if I navigate to my webpage address with "/#openOfflineDIV" added to the end of the url, then the page will load with the div showing on screen, this then disappears after a second once the function starts to run (which means the function is closing the div successfully once it realises the connection is active).

But the second part of the function isn't working, it's not displaying the div automatically when the internet connection is lost. I've tried both the inline and block methods but neither is working. I'm very confused since the function is definitely able to hide the div successfully (which I think means my syntax for defining the div is correct).

This is the code for the modal in my html:

<div id="openOfflineDIV" class="modalOfflineDIVDialog">
  <div id="mfs">
      <div id="wrapper">
          <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                       <td align="center" valign="middle" class="alerttextbig">You have been disconnected from the internet!</td>
                  </tr>
               </table>
           </div>
      </div>
</div>

And this is the CSS for the modal:

.modalOfflineDIVDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
    z-index: 11;
    opacity:1;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalOfflineDIVDialog:target {
    opacity:1;
    pointer-events: auto;
}

.modalOfflineDIVDialog > div {
    width: 760px;
    height: 545px;
    position: relative;
    margin: 1% auto;
}

As I said the function is half working, the console.logs "connected" and "disconnected" are appearing in the console correctly, and it is able to close the div successfully, but I can't figure out why it won't show the div automatically when the internet connection is lost.

Any ideas on why this isn't working fully would be really appreciated.

Upvotes: 0

Views: 310

Answers (3)

rk3024
rk3024

Reputation: 5

Can you try below code to show/hide instead of style.display:

$('#openOfflineDIV').show();
$('#openOfflineDIV').hide();

Upvotes: 0

Sunil
Sunil

Reputation: 929

Try this

$('#openOfflineDIV').hide(); to hide

and this

$('#openOfflineDIV').show(); to show!

Upvotes: 0

MysterX
MysterX

Reputation: 2368

In your CSS to hidden block added property opacity:0 so you need to change it to 1 if you want to see that division when changing display property

Upvotes: 1

Related Questions