My HTML is not connecting to my javascript. I have run it in debugger several times and no matter what I have tried my HTML has not connected to my js. I have done this small piece of coding a fair few times now and am stumped at why it is not working.
Here is where my HTML is supposed to connect to my javascript.
<head>
<meta charset="utf-8">
<title>One Down</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="termFourMajorProject.js"></script>
<link rel="stylesheet" type="text/css" href="term 4 major project.css">
<link rel="shortcut icon" href="two_decks.png"/>
</head>
Please, can you tell me why my HTML is not connect ing to my javascript? (ignore the jQuery document)
Make sure that your. js file is in the same directory where your html file is present. And also you should add html tag to your code
Related
I'm new to StackOverflow and I would like to ask if someone can help me fix my code. I can't make SmartWizard jquery 4 to work. I absolutely copied every line of code (except the sources of the css and js files) yet it still doesn't work. I'm sorry but I don't know what's wrong, I'm just a newbie in coding and I hope that you can help me understand this little problem.
I will attach my source code and images here.
Code from Jquery SmartWizard that I wish to copy is from http://techlaboratory.net/smartwizard. Download the Zip file and open the index.html file under examples folder of the zip file.
Here is the output of the code I wish to copy:
Output of the code I wish to copy
Here is my source code.
<!DOCTYPE html>
<html>
<head>
<title>Smart Wizard - a JavaScript jQuery Step Wizard plugin</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Only difference is i'm using Bootstrap 4 -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"/>
<link href="/sample2/resources/css/smart_wizard.min.css" rel="stylesheet" type="text/css" />
<link href="/sample2/resources/css/smart_wizard_theme_circles.min.css" rel="stylesheet" type="text/css" />
<link href="/sample2/resources/css/smart_wizard_theme_circles.min.css" rel="stylesheet" type="text/css" />
<link href="/sample2/resources/css/smart_wizard_theme_circles.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
//the same as the code in index
<script type="text/javascript" src="/sample2/resources/js/jquery.smartWizard.min.js"></script>
</body>
</html>
Here is my project folder architecture: project folder architecture
Here is the output of my code: My output
Once again I'm sorry I'm just a newbie in coding and thank you for replying to my question.
EDIT: I just found out that Jquery SmartWizard 4 is not compatible / does not work with Bootstrap 4 based on the comments but someone made it work with,as the commenter said, "It works after modifications. I still have small problems to solve. Thanks". Does anybody know how to make Jquery SmartWizard 4 work with Bootstrap 4? Thanks a lot!
EDIT2: I made it work with Bootstrap 4 now and here is what I did:
Changed this line of code:
From:
<script type="text/javascript" src="/sample2/resources/js/jquery.smartWizard.min.js"></script>
In this syntax it fetches this version of SmartWizard Jquery SmartWizard 4.2.2 is being fetched.
To:
<script type="text/javascript" src="/sample2/resources//js/jquery.smartWizard.min.js"></script>
In this syntax it fetches the latest version of SmartWizard Jquery SmartWizard 4.3.1 is being fetched.
Now my question is how come the extra slash made a difference on how the SmartWizard fetches its version, I would love to know why. Thanks a lot! But now I'm able to make Jquery SmartWizard 4.3.1 work with Bootstrap.
To make Jquery SmartWizard 4 work with Bootstrap 4, I had to change lines of code
From:
<script type="text/javascript" src="/sample2/resources/js/jquery.smartWizard.min.js"></script>
To:
<script type="text/javascript" src="/sample2/resources//js/jquery.smartWizard.min.js"></script>
I did the same for the css files so it looks like this now
<link href="/sample2/resources//css/smart_wizard.min.css" rel="stylesheet" type="text/css" />
to use the minified version since when I used the minified version but the syntax of the link is "/sample2/resources/css/smart_wizard.min.css" the document fetches the SmartWizard v4.x version. I absolutely don't know why this happens ,where adding an extra slash after resources changes the version that is being used, so if anyone can provide answers to it that would be great! Thanks a lot! Cheers!
I am creating a nodeJs application in which I am serving html files on request. I have started working with Html recently. I want to create multiple html files but want to include the similar header.html in those all multiple html file. I have read different articles such as:
Make header and footer files to be included in multiple html pages. Also I have tried to use Html5 import statement but nothing is working. Is there any other way to do this with Html5 or with javascript or jquery. my code is:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){ $("head").load("header.html") });
</script>
</head>
<body>
<div id="frontpage"/>
<script src="./bundle.js" type="text/javascript"></script>
</body>
</html>
whereas my header.html is:
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/mycssfile.css"/>
<title>My application</title>
But it is not working! is there any way to make it working?
The error I am getting is :
GET http://localhost:3000/header.html 404 (Not Found)
I need to inculde my JavaScript file in django. I know how to include CSS files. I'm doing it this way:
<link rel="stylesheet" href="{% static 'demo/style.css' %}"/>
How can I include my JavaScript file?
There are two ways to do this (inline scripts and external scripts):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test page</title>
</head>
<body>
Inline script (option 1):
<script>
// your js code here
</script>
External script (option 2):
<script src="your-code-file.js"></script>
</body>
</html>
You are probably interested in this one:
<script src="your-code-file.js"></script>
I know how to include files of CSS. […] How can I include my javascript file?
One obvious answer is “Manage it the same way as other static files. Then include it with a script element, the same way you'd do any JavaScript file”.
If you've tried that, or other things, please edit your question to say what you tried and what happened instead.
I've come into a wall : Basically, Javascript doesn't seem to be working in my play pages.
So I have a view main.scala.html as a template for other views.
This file looks like that :
#(page : String, title: String)(content: Html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/bootstrap.min.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/bootstrap.min.js")" type="text/javascript"></script>
</head>
<body>
<!--some stuff-->
#content
</body>
</html>
So I tried putting a simple thing in the body of the views.
-First in the main.scala.html template
-Then in a view that used this template
-Finally in a thing.html, with no links what so ever with Play! Framework, that I opened in my browser:
<html lang="en">
<head>
<title>title</title>
</head>
<body>
truc
</body>
Only the third option return the wanted result : A popup with thing in it.
My question is : Why is my javascript not handled by play? Do I have to "import" some global javascript feature in order to use it?
Thanks for your help, if you need more info, tell me.
Play produces normal HTML code - browser doesn't care what kind of soft produced it, so I suspect, that you have some mistake in path to some JS file in your head, so it avoids running other scripts, Use some kind of inspector in your browser, to validate, that all resources are downloaded properly. Also check JS console, most probably there are some errors shown.
On the other hand, placing simple JS directly in the views most often works correctly, however, keep in mind that, view's renderer may consider some JS typical syntax as a Play's tag, or something, therefore you need to control still if after rendering your JS is not 'damaged' by this process. For views where you want to use more advanced JS it's absolutely safer (and more comfortable) to include JS from static file(s) the same way as you are using for jquery.js or bootstrap.js
May be you forgot to write
#main(title = "my title") {
<h1>Other html<h1>
<p>My js here</p>
truc
}
P.S:
If it is helpfull don't forget that you shouldn't white head , html and body tags any more, it is included already. Otherwise you will have not valid html, and it will render bad in all browsers
I am displaying a webpage from a server in webview. However to handle some functionality I want to add 3-4 files from asset folder to the webpage.
How do you append these files to the webpage that also has some of its own javascript?
<head>
<script src='jquery.js'></script>
</head>
Paths that dont start with / are relative so try :
<script src='assets/jquery.js'></script>
this will work if your html files are in a directory / folder that contains an assets folder with the JavaScript library within that
if you want to specify an absolute path use
<script src='/assets/jquery.js'></script>
this will work if the assets folder is a sub folder of the document root directory
i added as you told but those javascript not working ,here you can see the html file- `
<!DOCTYPE HTML><html><head> <script
src='/assets/jquery.js'></script><script
src='/assets/rangy-core.js'></script><script
src='/assets/rangy-serializer.js'></script><script
src='/assets/android.selection.js'></script><title>Kendal Hunt -
Psychology - Brown CH, Foster JD, Gordon MS</title><meta
http-equiv="content-type" content="text/html; charset=utf-8" /><link
rel="stylesheet" type="text/css" href="style/style.css"
title="style" /><link rel="stylesheet" type="text/css"
href="style/brl.css" /><script
src="js/jquery-latest.js"></script></head>
`