I am working on a very basic HTML page that has a little bit of Javascript functionalities. Nothing fancy, just some DOM manipulation. Everything was working fine and then all the scripts magically stopped working. Upon looking into firebug, it seems as though this script is working fine:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
These two references, however, don't seem to load up at all anymore:
<script src="/Bootsrap/bootstrap.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
custom.js is in the root directory and the other is in a Bootstrap folder. Everything was fine yesterday until it wasn't and I can't get it to work again.
function betterWork(this) {
if(confirm("Is this your final selection?"))
{
// document.location = '#';
$("#myModal").modal("show");
}
}
function youCantDoThat() {
alert("That isn't a Pokemon ya doof.");
}
function tooDamnBad() {
var changeText = document.getElementById("textToChange");
var newText = document.getElementById("newText");
changeText.innerHTML = "Too Damn Bad!";
newText.innerHTML = "Pick One Anyways :)";
}
.imageSize {
width: 400px;
height: 400px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS Project</title>
<link rel="stylesheet" href="Bootstrap/bootstrap.css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="col-lg-12">
<h1 class="text-center" id="textToChange">Pick A Starter Pokemon</h1>
<h3 id="newText" class="text-center"></h3>
</div>
<div class="col-lg-12">
<div id="img" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://assets19.pokemon.com/assets/cms2/img/pokedex/full//001.png" />
</div>
<div id="img" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://vignette3.wikia.nocookie.net/pokemon/images/1/13/007Squirtle_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png/revision/latest?cb=20150105230449" />
</div>
<div id="img" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://static.giantbomb.com/uploads/scale_small/0/6087/2438704-1202149925_t.png" />
</div>
<div id="img3" onmouseover="youCantDoThat()" class="imageSize col-lg-4">
<img class="imageSize" src="http://41.media.tumblr.com/c38fff03b8dd7aaf75037eb18619da57/tumblr_n436i3Falo1sndv3bo1_1280.png" />
</div>
<div id="img4" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://assets.pokemon.com/assets/cms2/img/pokedex/full/010.png" />
</div>
<div id="img5" onclick="betterWork()" class="imageSize col-lg-4">
<img class="imageSize" src="http://vignette2.wikia.nocookie.net/camphalfbloodroleplay/images/7/77/Pikachu.png/revision/latest?cb=20141004224742" />
</div>
<br />
<div class="text-center">
<button type="button" class="btn btn-info btn-lg" onclick="tooDamnBad()">I Don't Like These Pokemon</button>
</div>
</div>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/Bootsrap/bootstrap.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>
</body>
</html>
Diagnosing why a script is not loading should begin with opening your console, looking at the resources tab, and determining whether and why the browser had an error loading the script.
Alternatively you can open the script from your browser directly and your webpage will notify you. For example, if your script is located at the path /Bootstrap/bootstrap.js and your host name is localhost, navigate to localhost/Bootstrap/boostrap.js.
Interpreting the results:
if the result is a 403 error it means that your webserver is not able to open this file. You will need to grant read access to your webserver.
if the result is a 404 error it means that the file is actually not at the path you specified. You will need to debug step by step and figure out why. An additional stack overflow question may resolve this if needed.
if the result is a different error, the meaning of it can be googled and you can comment and ask for additional clarification
Related
I have a wierd situation, where my webpage used to load just fine, before I put it online with hosting and domain. Now the Modal, that's supposed to popup on click, takes so long to load (in particularly through safari, firefox and IOS) that it undermines the whole purpose of the page. And so it's a real problem. At this point it seems to load just fine in chrome though.
I have tried several things, for example thoroughly checking my FTP-client, deleting, editing code, re-uploading but at this point, nothing has worked. Can anyone offer some insight as to where I go wrong?
window.onload = function() {
const span = document.querySelectorAll(".PopUp");
span.forEach(LIelm => {
LIelm.addEventListener('click', showHideModal)
})
};
function showHideModal(e) {
const projectNode = e.target.parentNode.parentNode;
if (!projectNode.matches('.Project, .modal-content')) return;
e.preventDefault();
if (projectNode.matches('.Project')) {
document.getElementById(projectNode.dataset.modal).style.display = "block";
} else {
projectNode.parentNode.style.display = "";
}
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="ModalPopUp.js"></script>
</head>
<body>
<div class="content">
<ul style="list-style: none;">
<li class="Project" data-modal="myModal_1">
<span id="myBtn_1">
Lirma Type
</span>
<span id="year">
2019
</span>
<div class="Describtion">
<p>Typedesign</p>
<br>
<span class="PopUp">Images</id>
</div>
<div id="myModal_1" class="modal">
<div class="modal-content">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="Images/Lirma/type.jpg" alt="img" width="100%">
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
<script src="ModalHide.js"></script>
<script src="pExpand.js"></script>
What seems to take so long to load are the images so I see in Chrome it does not take so long because it is using the cache memory if you clean it and run it again it takes about 20 seconds
1.-chrome no cache
2.-chrome cache
Try using an image compressor to reduce weight and improve download time
https://compressjpeg.com/es/
I am using handlebars and it is working fine in development. When I upload to github-pages, The handlebars template still works if i open directly to the page. But if I go to a page in a link, the handlebars loop doesn't work. Here is my code:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="../bower_components/handlebars/handlebars.min.js"></script>
</head>
<div id="content-placeholder"></div>
<script id="some-template" type="text/x-handlebars-template">
{{#each this}}
<div class=" col-md-4 col-sm-6 " data-animation-type="fadeIn" data-animation-delay="0.5s" data-animation-duration="2s">
<div class="item-wrap">
<figure class="">
<div class="popup-call">
<i class="flaticon-arrows-4"></i>
</div>
<img src="{{this.picture.picture.url}}" class="img-responsive" style="height: 200px" alt="img11"/>
<figcaption>
<div class="post-header">
<h5>{{this.name}}</h5>
</div>
</figcaption>
</figure>
</div>
</div>
{{/each}}
</script>
<script>
$(document).ready(function(){
var source = $("#some-template").html();
var template = Handlebars.compile(source);
$.getJSON('https://my-url.com/teams.json', function(data){
console.log(data);
$("#content-placeholder").html(template(data));
});
});
</script>
I've tried doing it without the document.ready() but that doesn't change anything.
It's fairly clear that the handlebars.js isn't loading, because of the relative path in the script tag:
<script src="../bower_components/handlebars/handlebars.min.js"></script>
Replace src="" with your favorite CDN location:
For example
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
I don't think Handlebars works with Github pages. At least mine does not.
I am a real beginner at codding in general. I would like to create a website that people can go onto and choose a character of a play we are doing. I would then like to prompt for their full name so that I can create a file in the folder for that button, that is under their name. In that same prompt I would like to type it "/WINNER/" and have that give me back a random name (file name) from that button's folder. I hope that makes scene, and I know that I might be making this overly complicated bet this is that only way I found of doing this. Also sorry if my code looks a little wonky, like I said I am a complete noob.
My index.html
<head>
<title>Check Please | Enter</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Gafata|Metrophobic' rel='stylesheet' type='text/css' media="all">
</head>
<body>
<div id="Welcome">
<div id="WelcomeMessage">
<h5 class="redCenter">Welcome to the voting website of</h5>
<h3 class="Musical">'Check Please the Musical'</h3>
</div>
<div id="Enter-Img">
<a href="choice.html">
<img src="images/site/enter.png" width="438" height="241" class="button">
</a>
</div>
</div>
</body>
Then my choice.html
<head>
<title>Check Please | Voting</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Gafata|Metrophobic' rel='stylesheet' type='text/css' media="all">
</head>
<body>
<div id="Top">
<h3 class="Musical">Please click on one of the following characters that you believe to be the murderer, and then enter your full name.</h3>
</div>
<div id="Button 1">
<a href="Button 1/Button1.html">
<img src="images/site/Person 1.png" width="438" height="241" class="enter">
</a>
</div>
<div id="Button 2">
<a href="Button 2/Button2.html" onclick="Name = prompt('Enter your first and last name')">
<img src="images/site/Person 2.png" width="438" height="241" class="enter">
</a>
</div>
<div id="Button 3">
<a href="Button 3/Button3.html" onclick="Name = prompt('Enter your first and last name')">
<img src="images/site/Person 3.png" width="438" height="241" class="enter">
</a>
</div>
<div id="Button 4">
<a href="Button 4/Button4.html" onclick="Name = prompt('Enter your first and last name')">
<img src="images/site/Person 4.png" width="438" height="241" class="enter">
</a>
</div>
</body>
And right now I have only tried to mess around with one button (Button1.html):
<head>
<title>Check Please | Thanks and Enjoy</title>
<link href="../css/styles.css" rel="stylesheet" type="text/css" media="screen">
<link href='http://fonts.googleapis.com/css?family=Gafata|Metrophobic' rel='stylesheet' type='text/css' media="all">
</head>
<body>
<script type="text/javascript">
window.onload(Name = prompt("Enter your first and last name below"))
import java.io.PrintWriter;
if(Name == "/WINNER/") {
window.location.replace("http://stackoverflow.com");
}else{
import java.io.PrintWriter;
PrintWriter writer = new PrintWriter(Name + ".txt", "UTF-8");
writer.close();
};
</script>
<div>
<h3 class="Musical">Button 1</h3>
</div>
<div>
</div>
</body>
Thanks for ANY input!!!!!!!
You appear to be writing Java in a JavaScript context. I'll make one thing very clear: JavaScript is not related to Java. They are completely separate languages, and as such you cannot use Java libraries.
Also, you can't write out to any directories using JavaScript. JavaScript runs in the user's browser, which is separate from the server (you cannot access files within directories on the server)
When you click on print note, I am expecting another window to pop-up with the notes you took. In my case, it keeps showing up blank.
Please let me know if I should provide more details:
Page(1) with the text area
<textarea id="sermon_notes" cols="5" rows="5"></textarea>
<span>Print Notes</span>
Page(2) with javascript trying to pull the information you wrote on page(1) so it can show up on page(2)
<html>
<head>
<title>Media | New Foundation Christian Ministries </title>
<link rel="stylesheet" href="../css/popout.css" media="screen" type="text/css" />
<link rel="stylesheet" href="../css/print.css" media="print" type="text/css" />
</head>
<body class="about">
<div class="wrap">
<div class="header">
<span>Print</span>
<h1><img src="../images/logo.png" alt="New Foundation Christian Ministries" /> </h1>
</div>
<div class="content">
<div class="page_header">
<h2>Notes</h2>
</div>
<h1></h1>
<h1>some text</h1>
<small>ate</small>
<br/><br/><br/>
<h3>My Notes:</h3>
<p>
<script type="text/javascript">
// Get the notes from the parent page
var message_notes = window.opener.document.getElementById('sermon_notes').value;
// Replace out the new line character with a <br>
message_notes = message_notes.replace(new RegExp( "\\n", "g" ),"<br />");
document.write(message_notes);
</script>
</p>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
I got it, my above code work just fine, is the fact my link did not contain the http but rather files. it would not work unless you have http, so it wont work on your local server.
Thank you all for helping.
Can someone please tell me why the countdown function is not working properly (the countdown is not starting in the div with the I.D. "countdown"). Probably something real simple, but Javascript isn't my forte. This is the countdown plugin I am using: http://keith-wood.name/countdown.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="./css/web-style-second.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="chrome://mozbar/skin/css/injected.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
</head>
<body>
<a name="top"></a>
<div id="container">
<div id="content">
<div class="center">
<center>
<div></div>
</center>
</div>
<script type="text/javascript">
$(function() {
$('#countdown').countdown({
until: '14min+20sec',
format: 'MS',
layout: '{mnn}min ' + '{snn}sec ',
onExpiry: function() {
$(".hidden").css("display", "block");
}
});
});
</script>
<div class="time_box">
<h3 class="italic">When The Clock Hits Zero ... </h3>
<h4 class="hasCountdown" id="countdown">14min 20sec </h4>
</div>
<form name="signupFrm" id="signupFrm" action="#" method="post" class="hidden">
<div>
<div class="yellow_red">
<h1></h1>
</div>
<div class="center">
<a href="https://www.testing.com" class="btn_buy_now">
Get Started</a>
</div>
<input name="submit" value="submit" type="hidden">
<p class="mb_5"> </p>
</div>
</form>
<div class="fnote justify">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
You should put the $(function () ...) script into the <head> tag of your HTML page. This way, the countdown will be initiated once the DOM has fully loaded.
I think that the problem is that you are missing the reference to the "jQuery Countdown CSS". In the usage instructions of the plugin it says:
Download and include the jQuery Countdown CSS and JavaScript in the
head section of your page. #import
"jquery.countdown.css";
But you can still make it work without the "jQuery Countdown CSS" if you remove the class attribute from the <h4> element with the id "countdown", like this:
<div class="time_box">
<h3 class="italic">When The Clock Hits Zero ... </h3>
<h4 id="countdown">14min 20sec </h4>
</div>
JSFiddle Example
The countdown plugin uses the class hasCountdown to test whether the countdown has already been instantiated, so you should use a different class name.
From jquery.countdown.js:
/* Class name added to elements to indicate already configured with countdown.*/
markerClassName: 'hasCountdown'