ElseIf statement is not visible for script

Question

I've a script on my page who should work if is internet connection ( i mean.. load text when click button or show less if is needed to ) and hide buttons if no connection.

I mention that I use jquery-3.3.1.slim.min.js (script src link-website) library.

I'm using tags directly to HTML head.

When is connection ( == 'true' ) there is a part with load more paragraphs / showless p . When is not internet I should hide those divs and show all text.

/*JQUERY CODE*/

var connection = "";

connection += navigator.onLine;

if (connection == 'true') {

  $(document).ready(function() {
    size_p = $("#myList p").length;
    x = 0;
    $('#myList p:lt(' + x + ')').show();

    $('#loadMore').click(function() {
      x = (x + 4 <= size_p) ? x + 4 : size_p;
      $('#myList p:lt(' + x + ')').show();
    });

    $('#showLess').click(function() {
      x = (x - 4 < 0) ? 4 : x - 4;
      $('#myList p').not(':lt(' + x + ')').hide();

    });

  });

} else
if (connection == 'false') {


  $("#loadMore").css("display", "none");

  $("#showLess").css("display", "none");

  $("#myList").css("display", "inline");

}

/*CSS CODE*/

#myList p {
  display: none;
}

#loadMore {
  color: green;
  cursor: pointer;
  padding: 5px 5px 5px 10px;
  cursor: pointer;
  background: #e8e8e8;
  font-size: 14px;
  width: 115px;
  margin: 5px;
  position: relative;
  border-radius: 15px;
}

#loadMore:hover #showLessa:hover #showLess:hover {
  color: black;
}

#showLess {
  color: red;
  cursor: pointer;
  padding: 5px 5px 5px 10px;
  cursor: pointer;
  background: #e8e8e8;
  font-size: 14px;
  width: 115px;
  margin: 5px;
  position: relative;
  border-radius: 15px;
}

#load_no_internet {
  display: none;
  color: green;
  cursor: pointer;
  padding: 5px 5px 5px 10px;
  cursor: pointer;
  background: #e8e8e8;
  font-size: 14px;
  width: 115px;
  margin: 5px;
  position: relative;
  border-radius: 15px;
}

#load_no_internet:hover #show_no_interneta:hover #show_no_internet:hover {
  color: black;
}

#show_no_internet {
  display: none;
  color: red;
  cursor: pointer;
  padding: 5px 5px 5px 10px;
  cursor: pointer;
  background: #e8e8e8;
  font-size: 14px;
  width: 115px;
  margin: 5px;
  position: relative;
  border-radius: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
<p> SOME TEXT HERE </p>
<div id="myList">
  <p> SOME TEXT HERE </p>
  <p> SOME TEXT HERE </p>
  <p> SOME TEXT HERE </p>
  <p> SOME TEXT HERE </p>
</div>
<div id="loadMore">See more text...</div>
<div id="showLess">See less text...</div>

My problem is that when I have no internet.. nothing work.

I would like to give me some advice how to make it work if no internet connection.

@ÁlvaroTouzón Concatenating a string and a bool results in a string. — user202729, Jan 08 '19 at 14:53
What should I do? I am not a pro - jquery.. i'm beginner in this language.. — PTMAndrey, Jan 08 '19 at 14:55
What is your question? What do you have an issue with? What isn't working? As your code is working even when `navigator.onLine` is `false` — George, Jan 08 '19 at 14:56
Well, how I said... If i have internet, the code is working. I want, when I have no internet, to hide the buttons and display all text. — PTMAndrey, Jan 08 '19 at 14:57
@AndreiAndrieș It looks like you're requesting jQuery via a CDN link which requires an internet connection. If you have no internet then you have no jQuery which would explain why you see nothing? — James, Jan 08 '19 at 14:58
@George If internet is OFF, navigator return false ( I've tested ) — PTMAndrey, Jan 08 '19 at 14:58
Um, if you have no internet connection I don't know how you expect your users to even get to your page, and download the script... — Robin Zigmond, Jan 08 '19 at 14:59
The thing is.. I am working to a project for final exam to 12 grade and the teacher said to me that all websites will be seeing with no internet. And I would like to do something about it. I have a lot of text to hide. — PTMAndrey, Jan 08 '19 at 15:01
@AndreiAndrieș You do not need a service worker to get a jQuery working without an internet connection. You're wasting your time reading that post, especially since you have said you are new to JS and jQuery. — James, Jan 08 '19 at 15:12
All I want is if my teacher open my HTML project into local computer without internet to show automatically all text and if his computer is connected to internet to work the loadmore part — PTMAndrey, Jan 08 '19 at 15:15

James · Accepted Answer · 2019-01-09T08:44:13.017

2

Taking your question literally as "when I have no internet..."

You're requesting jQuery via a CDN; IF you literally have no internet connection then you're not going to have access to jQuery.

You need to download jQuery so you have a LOCAL copy available. Download it form the jQuery site then save it into your project. Then change your script tag to request it locally like so:

<script src="/jquery.min.js"></script>

It's generally best practice to save your JS related files under a sub directory such as /js. So your script tag would look like this:

<script src="/js/jquery.min.js"></script>

edited Jan 09 '19 at 08:44

answered Jan 08 '19 at 15:00

James

442
2
13

1

When putting JS related files in a sub directory i would advice also to use the absolute path to load it `/js/jquery.min.js`. – Brian van Rooijen Jan 09 '19 at 08:12
1

Good spot, updated answer. – James Jan 09 '19 at 08:44

score 0 · Answer 2 · answered Jan 08 '19 at 14:59

0

you are loading the following script from an external server

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

this is not available when you do not have internet. Best thing you can do is download the script and put it in the same folder as your index.html and include it with:

<script src="/jquery.min.js"></script>

answered Jan 08 '19 at 14:59

Brian van Rooijen

1,906
1
14
10

I have tried to do that. It won't work. – PTMAndrey Jan 08 '19 at 15:01
@AndreiAndrieș Edit the code you've used into your question. – user202729 Jan 08 '19 at 15:02
Wait a minute.. If I put jquery.min.js in other folder and write this in html is correct? – PTMAndrey Jan 08 '19 at 15:02
it would work in production, but you also need to upload your the jquery.min.js to the server. – Brian van Rooijen Jan 08 '19 at 15:04
@JO3-W3B-D3V I was confused at first, when the OP means it must work offline I'm guessing they mean that their teacher will be running it locally on a computer with no internet access, not that they are deploying it to a webserver and has to work offline. – George Jan 08 '19 at 15:10
@George that's right. – PTMAndrey Jan 08 '19 at 15:11
lets be honest, this has nothing to do with service workers. its just HTML being manipulated with javascript using a jquery library for this to work you need the following on your server /index.html /jquery.min.js (or via cdn if you dont want the extra traffic on your server) /script.js file loading your script. using a service workers will allow you to proxy /jquery.min.js to the cdn, but this is next level and considering the question not relevant – Brian van Rooijen Jan 08 '19 at 15:12
1

Problem solved. I have download the script into my folder and I don't know how, this time it worked.. Probably I have missed sth. – PTMAndrey Jan 08 '19 at 15:25
1

@BrianvanRooijen thank you for this answear – PTMAndrey Jan 08 '19 at 15:27

ElseIf statement is not visible for script

2 Answers2