This question already has answers here:
Working with jQuery when there is no Internet connection
(6 answers)
Closed 4 years ago.
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.
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>
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>
Related
I have searched around everywhere and no answers to this have shown up.
I am trying to make a login page open up in a popup window, with a fixed size, fitting the form.
You don't need to reprimand me about keeping login info client side, it's just an experiment.
Here's my form, with JS and CSS as well, along with my home page that has a button to redirect to the login and signup pages. (The signup page isn't working yet, and I'll probably ask about how to do that too but that's another thing altogether)
The home page is nowhere near complete obviously.
I just want the page to open the login page as a window, and then people can get redirected to the success.html page with their number in it.
The success pages should also appear in the original window, not the popup.
You also don't need to tell me how awful and crude my coding is, I am new to all this.
Thanks!
(P.S.- If anyone happens to know how to use cookies to make the site remember someone's login attempts for 5 minutes even when/if they close the site that would be awsome!!)
These are my files:
LOGIN PAGE HTML:
var attempt = 3; // Variable to count number of attempts.
// Below function Executes on click of login button.
function validate() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "Formget" && password == "formget#123") {
alert("Logged in successfully. Welcome, User 1.");
window.location = "success1.html"; // Redirecting to other page.
return false;
} else if (username == "Formget2" && password == "formget#123") {
alert("Logged in successfully. Welcome, User 2.");
window.location = "success2.html"; // Redirecting to other page.
return false;
} else if (username == "Formget3" && password == "formget#123") {
alert("Logged in successfully. Welcome, User 3.");
window.location = "success3.html"; // Redirecting to other page.
return false;
} else {
attempt--; // Decrementing by one.
alert("You have left " + attempt + " attempt(s).");
// Disabling fields after 3 attempts.
if (attempt == 0) {
alert("You have run out of attempts, please try again in 5 minutes.");
document.getElementById("username").disabled = true;
document.getElementById("password").disabled = true;
document.getElementById("submit").disabled = true;
}
}
}
#import url(http://fonts.googleapis.com/css?family=Raleway);
h2 {
background-color: #FEFFED;
padding: 30px 35px;
margin: -10px -50px;
text-align: center;
border-radius: 10px 10px 0 0;
}
hr {
margin: 10px -50px;
border: 0;
border-top: 1px solid #ccc;
margin-bottom: 40px;
}
div.container {
width: 900px;
height: 610px;
margin: 35px auto;
font-family: 'Raleway', sans-serif;
}
div.main {
width: 300px;
padding: 10px 50px 25px;
border: 2px solid gray;
border-radius: 10px;
font-family: 'Audiowide', monospace;
float: left;
margin-top: 50px;
}
input[type=text],
input[type=password] {
width: 100%;
height: 40px;
padding: 5px;
margin-bottom: 25px;
margin-top: 5px;
border: 2px solid #ccc;
color: #4f4f4f;
font-size: 16px;
border-radius: 5px;
}
label {
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
center {
font-size: 32px;
}
.note {
color: red;
}
.valid {
color: green;
}
.back {
text-decoration: none;
border: 1px solid rgb(0, 143, 255);
background-color: rgb(0, 214, 255);
padding: 3px 20px;
border-radius: 2px;
color: black;
}
input[type=button] {
font-size: 16px;
background: linear-gradient(#ffbc00 5%, #ffdd7f 100%);
border: 1px solid #e5a900;
color: #4E4D4B;
font-weight: bold;
cursor: pointer;
width: 100%;
border-radius: 5px;
padding: 10px 0;
outline: none;
}
input[type=button]:hover {
background: linear-gradient(#ffdd7f 5%, #ffbc00 100%);
}
<html style="font-family: 'Audiowide', monospace;">
<head>
<title>Log In</title>
<link rel="stylesheet" href="login.css" />
<script src="login.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<h2>Log In</h2>
<form id="form_id" method="post" name="myform">
<label>User Name :</label>
<input type="text" name="username" id="username" />
<label>Password :</label>
<input type="password" name="password" id="password" />
<input type="button" value="Login" id="submit" onclick="validate()" />
</form>
<span></span>
</div>
</div>
</body>
<body onload="checkCookie()"></body>
</html>
HOME PAGE HTML (CSS INSIDE):
a {
border: 1px solid black;
background-color: lightblue;
padding: 5px;
border-radius: 25px;
text-decoration: none;
font-family: 'Audiowide', monospace;
color: black;
}
<b>Log In</b>
<b>Sign In</b>
The files above are as follows, in order:
login
login.css
login.js
home
My goal was to to make the login pop up in a new window and then redirect to each user's specific success page, but instead it opens both a window and a tab with the page, not just a window. The window also is not fixed size.
I also am looking to use cookies for the login attempts, as I said, and any tips on that would also be helpful.
I'm creating a simple webpage tool for language education that randomly selects a question from a javascript array const, but the longer questions are cut off, especially for mobile. How can I get a line break for these longer text questions? I've tried adding breaks inside the array, and I've tried adding css line breaks for the input and divs, but nothing works.
<style>
.button {
background-color: #094997;
border-radius: 12px;
border: none;
color: white;
padding: 12px 20px;
text-align: center;
text-decoration: none;
font-size: 24px;
width: 200px;
}
input
{
font-size:22px;
padding: 50px 50px;
text-align: center;
width: 200px;
height: 250px;
}
.questionsdiv {
text-align: center;
}
</style>
<div class="questionsdiv">
<input type="text" "randomquestion"="" id="randomquestion">
<br><br>
<button class="button" onclick="findquestion();" type="randomquestion">Random Question</button>
</div>
<script>
const question = ["How old are you?","Where do you go on Saturdays?","Do you have any brothers or sisters?","How many books do you own?","Who is your favorite music artist lately?","Do you like Jazz music?","Have you ever traveled outside of Japan?","Do you want to live in the countryside or in the city when you are older and have a family?",];
function findquestion() {
let randomIndex = Math.floor(Math.random() * question.length);
document.getElementById("randomquestion").setAttribute("value", question[randomIndex]);
}
</script>
In this code, the input tag is used to display the text, and the input tag in html does not support multi-line texts.
You have to replace input with textarea
And use innerHTML instead of setAttribute
<style>
.button {
background-color: #094997;
border-radius: 12px;
border: none;
color: white;
padding: 12px 20px;
text-align: center;
text-decoration: none;
font-size: 24px;
width: 200px;
}
textarea
{
font-family:arial;
font-size:22px;
padding: 50px 50px;
text-align: center;
width: 200px;
height: 250px;
}
.questionsdiv {
text-align: center;
}
</style>
<div class="questionsdiv">
<textarea type="text" randomquestion="" id="randomquestion"></textarea>
<br><br>
<button class="button" onclick="findquestion();" type="randomquestion">Random Question</button>
</div>
<script>
const question = ["How old are you?","Where do you go on Saturdays?","Do you have any brothers or sisters?","How many books do you own?","Who is your favorite music artist lately?","Do you like Jazz music?","Have you ever traveled outside of Japan?","Do you want to live in the countryside or in the city when you are older and have a family?",];
function findquestion() {
let randomIndex = Math.floor(Math.random() * question.length);
document.getElementById("randomquestion").innerHTML = question[randomIndex];
}
</script>
NOTE: textarea by default use monospace font-family property you can replace it with any font you want
Input is an element for single-line user input. For line-breaks the textarea is more suitable.
In this case as there is no user input, you can just use a div element and set the innerText.
html
<div type="text" "randomquestion"="" id="randomquestion"></div>
js
document.getElementById("randomquestion").innerText = question[randomIndex];
css
.button {
background-color: #094997;
border-radius: 12px;
border: none;
color: white;
padding: 12px 20px;
text-align: center;
text-decoration: none;
font-size: 24px;
}
.questionsdiv {
margin: auto;
width: 200px;
}
Demo here: https://jsfiddle.net/qkpmr81c/1/
I'm trying to make a website, somewhat similar to jsbin.com.
Here is a snap of how it looks in ...
Firefox -
ScreenShot
Chromium - ScreenShot
Take a look at code !
$(".toggleButton").hover(function() {
$(this).addClass("hightlightedButton");
}, function() {
$(this).removeClass("hightlightedButton");
});
$(".toggleButton").click(function() {
$(this).toggleClass("active");
$(this).removeClass("hightlightedButton");
});
$(".panel").height($(window).height() - $("#header").height() - 14);
$(".panel").width(($(window).width() / 2) - 5);
$("iframe").contents().find("html").html($("#htmlPanel").val());
body {
font-family: sans-serif;
padding: 0;
margin: 0;
}
#header {
width: 99.2%;
background: #EEEEEE;
padding: 5px;
height: 30px;
}
#logo {
float: left;
font-weight: bold;
font-size: 120%;
padding: 3px 5px;
}
#buttonContainer {
width: 244px;
margin: 0 auto;
}
.toggleButton {
float: left;
border: 1px solid grey;
padding: 6px;
border-right: none;
font-size: 90%
}
#html {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#output {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-right: 1px solid grey;
}
.active {
background-color: #E8F2FF;
}
.hightlightedButton {
background-color: grey;
}
textarea {
resize: none;
border-top: none;
border-color: grey;
}
.panel {
float: left;
}
iframe {
border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="header">
<div id="logo">
CodePlayer
</div>
<div id="buttonContainer">
<div class="toggleButton active" id="html">HTML</div>
<div class="toggleButton" id="css">CSS</div>
<div class="toggleButton" id="javascript">JavaScript</div>
<div class="toggleButton active" id="output">Output</div>
</div>
</div>
<div id="bodyContainer">
<textarea id="htmlPanel" class="panel" name="textarea">Hello World!</textarea>
<iframe id="outputPanel" class="panel"></iframe>
</div>
(Take a note that when you run the above code with build-in run function of Stack over, the 'iframe' doesn't appear.)
Check out exact code : 'Paste Bin'
Problem Description
As you can see in Screenshots of Firefox Browser the Hello World! is not visible in the second tab, but in Screenshots of Chromium Browser can see it (in the second half of screen).
Main Line of code (I think) which needs to edited is in <script type="text/javascript"></script> (Tag).
$("iframe").contents().find("html").html($("#htmlPanel").val());
How to get the output same in Firefox, like it's in other browsers (Chromium)?
Extra:
Solutions I tried, that are not working
iframe content disappears on Firefox (from stack-overflow)
Jquery contents() change html for iframe disappear in firefox (from stack-overflow)
I have this code for LoadMore Button: https://codepen.io/anon/pen/ZqzPaL
But when I put it in the site it does not work anymore. Only the more / less buttons appear but no longer displaying the text.
I need to say that I put the script in file .js and in HTML ->
Here is the HTML code where is used id's and class's.
$(document).ready(function () {
size_p = $("#myList p").size();
x=3;
$('#myList p:lt('+x+')').show();
$('#loadMore').click(function () {
x= (x+3 <= size_p) ? x+3 : size_p;
$('#myList p:lt('+x+')').show();
});
$('#showLess').click(function () {
x=(x-3<0) ? 3 : x-3;
$('#myList p').not(':lt('+x+')').hide();
});
});
#myList p{
display:none;
}
#loadMore {
color:green;
cursor:pointer;
padding: 5px 15px;
cursor: pointer;
background: #e8e8e8;
width: 75px;
margin: 5px;
position: relative;
border-radius: 15px;
}
#loadMore:hover
#showLessa:hover
#showLess:hover
{
color:black;
}
#showLess {
color:red;
cursor:pointer;
padding: 5px 15px;
cursor: pointer;
background: #e8e8e8;
position: relative;
border-radius: 15px;
width: 75px;
margin: 5px;
}
<div id="myList">
<p>
Some text here.
</p>
<p>
Second paragraph here.
</p>
</div>
<div id="loadMore">Load more</div>
<div id="showLess">Show less</div>
I need to mention that paragraphs is in others divs with another class too.
you need jquery
https://code.jquery.com/
2.
.size()
is deprecated use
.length
without braces!
3.
Working example:
https://pastebin.com/Ck7CPfzq
I have one question about using variable (time2 in my case) in data-title CSS field.
This is example what i need : http://jsfiddle.net/9oydvza0/1/
What shall i do that this variable takes value id time2?
Code from link :
CSS:
<style>
.photo4 {
display: inline-block;
position: relative;
}
.photo4:hover:after {
display: block;
content: attr(data-title-id);
position: absolute;
left: 120%;
bottom: -250%;
z-index: 1;
background: #003399;
font-family: Segoe UI;
font-weight: lighter;
font-size: 13px;
padding: 5px 10px;
color: #fff;
border: 1px solid #333;
-moz-border-radius: 5px -webkit-border-radius: 5px;
border-radius: 5px 5px 5px 5px;
}
</style>
Javascript:
<script>
document.getElementById("time2").innerHTML = "ololo";
</script>
HTML:
<p id="time2"></p>
<div style="width:10px; float:left; padding-top:20px;">
<div class="photo4" data-title-id="time2">
<img src="http://placekitten.com/g/300/300" width="22" height="22px" />
</div>
</div>
</div>
In your CSS when you are hovering on class photo4 you are showing its data-title-id contents, which you have set to time2 in your html,So definately it will show time2,
So either set it to <div class="photo4" data-title-id="ololo">
OR if you want to set it dynamically with the content of id time2
then do this
var myDiv=document.getElementById("time2")
myDiv.innerHTML = "ololo";
document.querySelector('.photo4').setAttribute("data-title-id", myDiv.innerHTML);
SEE DEMO HERE
Use like this:
document.querySelectorAll('[data-title-id]').innerHTML = "ololo";
If you are OK with jquery you can use like below.
$(document).ready(function(){
$(".photo4").attr("data-title-id","ololo");
});
DEMO