I've made a page to add data into a table (MySQL). Everything works fine on my computer and on the server when I'm connected to the local network. But when I'm trying to access the application from home, it seems that the path to CSS and JS files is not right!
Here is how I use the link from office:
http://server.domain.eu/moni/call_ans.html
And here is what link I use from home:
https://server.domain.eu/moni/call_ans.html
Here is a part of my HTML code and how I include the JS and CSS file. I also use a PHP file, which is also linked wrong!
<head>
<script src="jquery/jquery-ui-timepicker-addon.js"></script>
<script src="jquery/jquery-ui-sliderAccess.js"></script>
<head>
<link rel="stylesheet" href="jquery/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" href="jquery/jquery-ui-timepicker-addon.min.css">
</head>
<script>
....
$(document).ready(function() {
$("#techForm").submit(function(e) {
var url = "call_ans.php";
});
});
....
</script>
</head>
I don't know the full path of your JS/CSS but assuming that https://server.domain.eu/moni is the site root, I'd suggest adding the following under <head> tags:
<base href="https://server.domain.eu/moni">
There's typo in your file it should be like:
<!DOCTYPE html>
<html>
<head>
<base href="https://server.domain.eu/moni">
<script src="jquery/jquery-ui-timepicker-addon.js"></script>
<script src="jquery/jquery-ui-sliderAccess.js"></script>
<link rel="stylesheet" href="jquery/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" href="jquery/jquery-ui-timepicker-addon.min.css">
</head>
<body>
<script>
$(document).ready(function()
{
$("#techForm").submit(function(e)
{
var url = "call_ans.php";
});
});
</script>
</body>
</html>
Best solution is to add direct href to specific scripts or add ./ to location of files. Adding base should help but I/m not using that solution usually:
<script src="./jquery/jquery-ui-timepicker-addon.js"></script>
<script src="./jquery/jquery-ui-sliderAccess.js"></script>
<link rel="stylesheet" href="./jquery/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" href="./jquery/jquery-ui-timepicker-addon.min.css">
Remember use dot slash to specific localization on server...
Related
I'm having problems in using mathquill on my website.
I'm new to this.
I'm stuck in this part
<link rel="stylesheet" type="text/css" href="/path/to/mathquill.css">`
<script src="/path/to/mathquill.min.js"></script>
I dont know what to put on the hrefs because I'm not seeing those files from mathquill file i got from github..
i downloaded the latest mathquill files and its inside htdocs(xampp) or www(wamp) together with my index.php.
Do i have to place my index.php inside mqthquill-0.10.1 folder?
Here is my
<link rel="stylesheet" href="/path/to/mathquill.css"/>
<script src="jquery-3.2.1.min.js"></script>
<script src="/path/to/mathquill.js"></script>
I appreciate if someone could give me the steps on how to use mathquill.
thanks in advance
Option 1
You can either download the mathquill.css and mathquill.js files from github and use them from your directory.
If you have your folder (directory) structure as below:
appFolder
.. scripts
.... mathquill.js
.... index.js
.. css
.... mathquill.css
myPage.html
Here's how you would reference the CSS and JS files:
<link rel="stylesheet" type="text/css" href="/css/mathquill.css">`
<script src="/scripts/mathquill.min.js"></script>
An easy way to check if your paths are correct is to put the entire URL in the browser's address bar. For example, if you are browsing the page as:
www.mydomain.com/mypage.html
The links to css and js files in the example folder structure I mentioned above would be:
www.mydomain.com/scripts/mathquill.js
www.mydomain.com/css/mathquill.css
Option 2
You could use the CDN to get the JS and CSS files on your page. Just copy the below two lines on to your html page, and you are ready to go.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.css">`
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.js" type="text/javascript"></script>
<!-- COPY AND PAST THIS CODE HTML IN SOME EDITOR FOR BETTER VISUALIZATION, AFTER RUN-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Run Mathquill</title>
<!-- YOU NEED mathquill.css , jquery and mathquill.js SEARCH AND PICK IT SOMEWHERE, SEARCH ON THE WEB IF THIS DOWN NOT RUN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.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/mathquill/0.10.1/mathquill.js"></script>
<!-- INFORM THE LATEST AVERSION INTERFACE WITH THIS CODE -->
<script>
var MQ = MathQuill.getInterface(2);
</script>
</head>
<body>
<!--EXAMPLE COMMON TEXT TRANSFORMED WITH MATHQUILL -->
<p>Solve <span id="problem">f(x) = ax^2 + bx + c + = 0</span>.</p>
<script>
var problemSpan = document.getElementById('problem');
MQ.StaticMath(problemSpan);
</script>
<!-- EXAMPLE TO CREATE AN EDITABLE MATH FIELD -->
<p><span id="answer">x=</span></p>
<script>
var answerSpan = document.getElementById('answer');
var answerMathField = MQ.MathField(answerSpan, {
handlers: {
edit: function() {
var enteredMath = answerMathField.latex(); // Get entered math in LaTeX format
checkAnswer(enteredMath);
}
}
});
</script>
</body>
</html>
I cant understand the error where $ is unidentified when using onload on my page. This is just as sample page I created where I need to call a function after loading the page.
Jquery Code
$(document).ready(function(){
alert("loaded");
});
<html>
<head>
</head>
<body>
</body>
<script src="../Jquery/contact.js"></script>
<script src="../Jquery/jquery-1.12.0.min.js"></script>
<script src="../Jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="../Jquery/jquery.SPServices-2014.01.min.js"></script>
<link rel="stylesheet" type="text/css" href="../CSS/default.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>
</html>
Two issues here:
It's invalid to put script or link tags as direct children of html, so it doesn't surprise me that it doesn't work correctly on at least some browsers. You need to put them in the body or head. The only valid content of the html element is a single head element followed by a single body element.
Standard guidance, for instance in the YUI Best Practices for Speeding Up your Website is:
Put the link tags in head
Put the script tags at the bottom of body, just prior to the closing </body> tag
It looks like your contact.js file calls $() immediately (not in response to an event). If so, then contact.js must be after jQuery in the list of scripts, so that jQuery has been loaded when your code runs.
So:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/default.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>
</head>
<body>
<script src="../Jquery/jquery-1.12.0.min.js"></script>
<script src="../Jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="../Jquery/jquery.SPServices-2014.01.min.js"></script>
<script src="../Jquery/contact.js"></script>
</body>
</html>
Side notes:
You might look at script and CSS combining and minifying, to avoid having a lot of HTTP requests.
Consider adding <!doctype html> at the very top to ensure the browser is in standards mode (not quirks mode).
Consider adding <meta charset="UTF-8"> at the top of head (ensuring that the file is indeed in UTF-8, or changing the "UTF-8" in that to whatever encoding you're actually using in the file).
thanks for the input. so basically I had 2 problems on this. I solved the first one by moving the contact.js to the bottom and removing the migrate plugin.
I would need help on attaching my .js document to my html document so that jQuery works on it, at the moment only normal JS is working.
This is the html document header (called "3i.html"):
<!PROCTYPE <!DOCTYPE html>
<html>
<head>
<title>3i.com</title>
<link rel="stylesheet" type="text/css" href="3i.css">
<script type="text/javascript" src="3i.js"></script>
</head>
The javascript file is called "3i.js".
Javascript commands like "alert" or "prompt" work fine, I just can't find a way to make jQuery code work.
Help is very much appreciated
Include the jQuery library and your .js file just before closing the body.
<!DOCTYPE html>
<html>
<head>
<title>3i.com</title>
<link rel="stylesheet" type="text/css" href="3i.css">
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script type="text/javascript" src="3i.js"></script>
</body>
</html>
I was originally just using JSFiddle, but I wanted to move my project over to Notepad++ so I could have the files on my computer. The problem is, my Javascript on my page is not going into effect.
Heading Code:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
Any reason why? It links to my style sheet just fine, but my app.js does not seem to be working.
Three things:
app.js uses jQuery so the jQuery file needs to be included first
Also, you said you're running this on your PC. You could be using localhost, but if you're running from file://, src="//... won't work because your browser will be looking for file://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js instead of http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js so all you need to do is add the http:
But did you mean jQuery not jQuery UI? (Thanks #ahren)
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> -->
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
Jquery comes first, like so:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
I am trying to use a tooltip jQuery plugin. This is what I have in <head> of index.html:
<head>
<title>Index</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/simpletip-1.3.1.min.js" type="text/javascript"></script>
<script src="js/homepage.js" type="text/javascript"></script>
</head>
And this is in js/homepage.js:
$(document).ready(function() {
// meaningless functions
$('.supported_hosts').simpletip({
fixed: true,
position: 'right',
content: 'test content.'
});
});
But for some reason, the tooltip doesn't show. But it does show if I include the tooltip function on the index page. Is there any way to get this working without having the tooltip function on the index page, but in an external file? Thanks.
I have never use the simplest plug in but i copy and pasted your header and your js code and everything seemed to work just fine.
I linked to the latest version of jquery and downloaded a fresh copy of simpletip.js and it worked with on the first try.
The only differences are/maybe:
- I don't know what your code looks like where you call 'supported_hosts' class in the html.
- The name of the simpletip.js file I didn't change it upon download, so I would check your file names and relative location.
Sorry there wasn't something more but what you have worked for me, here is the code I used in full incase this helps you:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Index</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.simpletip-1.3.1.min.js" type="text/javascript"></script>
<script src="homepage.js" type="text/javascript"></script>
</head>
<body>
<span class="supported_hosts">Tool Tips here</span>
</body>
</html>
Javascript you gave:
$(document).ready(function() {
// meaningless functions
$('.supported_hosts').simpletip({
fixed: true,
position: 'right',
content: 'test content.'
});
});
I downloaded the simpletip.js here:
http://code.google.com/p/jquery-simpletip/downloads/detail?name=jquery.simpletip-1.3.1.min.js&can=2&q=
I would just double check your relative paths and class naming. Your code looks good.
Moving
<script src="homepage.js" type="text/javascript"></script>
to the end of the body seemed to solve the problem:
<body>
[code...]
<script src="homepage.js" type="text/javascript"></script>
</body>