Develop Reference

HTML code in Body

Hello everyone i need some help:
I have this:
A) Login.html
B) Documentation.html
C) Base.html
In the login i have a form with User and Password.
In Documentation, i have all the links to folders i include for exaple (Jquery,Bootraps, and more).
In Base I have a part of code what i need for include in all pages. The code i have is:
<div id="loading">
<div id="loading-msg" >
<img src="img/spin.png" class="rotating">
</div>
</div>
This is for do a logo rotating when a post it's waiting a answer from the server. With this (It's in Documentation.html):
<script type="">
$(document).ajaxStart(function(){
$("#loading").fadeIn( 500 );
});
$(document).ajaxStop(function(){
$("#loading").fadeOut( 100 );
});
</script>
Finally, my question it's: How i include the code in "Base.html" in "Login.html", because when i use: <link href="../incluye/base.html" rel="import"> on Head, not works

There may be a typo in your html import - instead of incluye perhaps it should be include.
You can also use the load() function in jQuery to include the file as follows:
<script type="text/javascript">
$(function(){
$("#target").load("Base.html");
});
</script>
Where #target is the id of the element into which you wish to load the content.

You can also change the file extension to PHP and easily include the other files by using <?PHP include 'yourfilename.php(extension)'

jQuery not working in html file (JS LINT errors such as '$' was used before it was defined)

I am using HTML, CSS, and JS. I am trying to use the JQuery library but it is not being recognized by my html file. I am inserting it above my external .js file, so I don't think that is the issue. Here is what is in my HTML file:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
This is what is in my JS file:
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 970) {
$('.navbar').addClass('navbar-fixed-top');
}
});
});
My code editor is throwing errors when I save this js file because of errors like:
-'$' was used before it was defined.
-Expected exactly one space between 'fucntion and '('
Anyone know what the issue might be? Thanks in advance.

This might not be the issue, but you may wish to attempt to load the jquery file by HTTPS (https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js), especially if you are running your site on an HTTPS connection.
Otherwise, it seems to work when I test it:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 970) {
$('.navbar').addClass('navbar-fixed-top');
}
});
console.log("done!")
});
</script>

The problem is in your <script> tag, as #B.Fleming said maybe the HTTPS protocol. This tag is working:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

put this in top of your code where you are using jQuery
/* global $ */
alternativ is prefixing it with window
I don't like using the global $ sign cuz other libs are using it as well. what i usably dose is getting the $ from the closure function like this
jQuery(function($){
// document is ready, You may use jquery here and now
$('body')
})
and to get away with jQuery is not defined use window.jQuery instead
ps, always load stuff from https when possible

HTML script src - Jquery library won't load from file

I'm trying to run the Socket.io example program offline. The index.html page calls the Jquery library like so:
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
However, this obviously won't load without an internet connection. I have tried using a file in the same folder as the rest of the project:
<script src="jquery-1.11.1.js"></script>
But I get a 404 error in the developer menu when running that as well. I'm not sure if I'm putting the file in the wrong spot, or if I'm using the script tag incorrectly, Any help is appreciated.
EDIT:
Here is the full index.html file:
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="jquery.js"></script>
<script>
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>
Picture of Error Message
Picture of index.js

If your Html and JS file are both in the same folder it should work definitely. Otherwise you need to put an address relative to your current file. Say your JS file is in the parent folder of your HTML file then :
<script src="../jquery-1.11.1.js"></script>

Maybe this question can help you with local local resources references How to properly reference local resources in HTML?

Don't forget you can access the jquery file by typing in the exact (local) URL into your browser.
Test by loading the URL http://localhost:[port#]/jquery-1.11.1.js
Alter this URL with the correct directory path for your dev environment until your jquery successfully loads.

Paul try followings:
Verify jquery file name and path
if socket.io.js using jQuery change the order like
<script src="jquery.js"></script>
<script src="/socket.io/socket.io.js"></script>
call javascript code after page load i.e. $(function(){}) as below:
$(function(){
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
})
Thanks

If your file is in the same directory as your html the following should make it work :
<script src="jquery-1.10.2.js"></script>
If it's in a folder that is in the same directory as your HTML use:
<script src="FOLDERNAME/jquery-1.10.2.js"></script>
If it's a level above your HTML file use:
<script src="../jquery-1.10.2.js"></script>
If none of these work be sure to double check your file's name in case there's a space in beginning or the end of the file's name.
[EDIT]
Well, if there's no spelling error and the change of placement doesn't fix it, then probably one or both of the files are corrupted. By the way, your jQuery version is outdated. Download v2.1.1 or use this script tag:
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Ok, I recommend changing your index.js to server.js, it makes more sense that is more like a server file for your app. It will serve a lot more things not just the index page. However, you can name it whatever you want. :)
Your problem is that node does not know your file system. You send the index back with __dirname +/index.html. __dirname tells node the current directory but on your index file, script src on your index.html file does not know where to start.
On your index.js file, tell node where to get all the static files, between line 3 and 5 app this.
app.use('/s', express.static(__dirname + '/static'));
the '/s' is the alias for this static directory that we're going to define. __dirname is your root dirctory and '/static' is the folder where i want all my static files to be since i don't want to expose my whole root.
For that exact line to work, you will need to add a folder name "static" on the directory where your index.js and index.html is right now.
on your index.html file, instead of
<script type="text/javascript" language="javascript" src="jquery.js">
change the src to "/s/jquery.js" since node.js now knows what alias s represents.
<script type="text/javascript" language="/s/javascript" src="jquery.js">
good luck

I had the same problem and I was looking for the solution around. I found your question but I didn`t find the answer so I posted my own question here. Someone actually knew how to make it work. So if you still want to know just check the answer I got: Raspberry Pi - Flask Server using JQuery not working Offline (Online it works)

Basic jQuery commands not working

Can anyone tell me why none of the javascript/jQuery commands I try ever work on my computer, but always work on the internet? Here is an example of basic commands:
Javascript file (test.js), css file (test.css) (don't mind the css) and html file (test.html):
var $list = $('li');
$list.click(function() {
alert("working");
});
li {
list-style-type: none;
position: relative;
margin: 1px;
padding: 0.5em 0.5em 0.5em 2em;
background: grey;
}
li.done {
background: #CCFF99;
}
li.done::before {
content: '';
position: absolute;
border-color: #009933;
border-style: solid;
border-width: 0 0.3em 0.25em 0;
height: 1em;
top: 1.3em;
left: 0.6em;
margin-top: -1em;
transform: rotate(45deg);
width: 0.5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<ul>
<li>Acheter du lait</li>
<li>Promener le chien</li>
<li>Faire de l'exercice</li>
<li>Coder</li>
<li>Jouer de la musique</li>
<li>Relax</li>
</ul>
</body>
</html>
See? It works on stack overflow. Yet, when I run the html file from my computer, the js/jq scripts never work. I know I haven't linked the js file improperly, because Safari developer tools are able to access it from the html file. What's wrong here?

If $list.click part is in test.js, then you are executing this code before li elements are constructed. Wrap your code in $(document).ready(function(){...})
Note:
It works here, because in the snippet frame source stackoverflow appended your javascript fragment below html - so that the code is executed when the DOM is fully constructed.

Try to write you code in $(document).ready() so that you DOM is ready to use, otherwise it may not work.
You have to add:
$(function(){
//Your Js code
});
In your example use:
$(function(){
var $list = $('li');
$list.click(function() {
alert("working");
});
});
Same problem:
Script tag works inside the body but doesn't work outside

Ok, I found it. I just had to wrap the code in
$(function(){
});
or
$(document).ready(function(){
//code
});
Thanks to Igor and JoanR.

The problems you are having may be related to how you are opening your web pages in the browser.
You cannot just open them as files: c:\website\index.html
Instead, you should install a stack such as WAMP, or XAMPP, or EasyPHP. I recommend XAMPP
After installation, you just type in the browser address bar:
localhost
And you will see the rendered contents of index.html from the c:\xampp\htdocs folder. That folder (c:\xampp\htdocs) becomes your website, and it works exactly like a website. Resources will load correctly (this sounds like the problem you are having).
After installation, just clear out that folder, and copy all your web site .html and .php etc files into that folder. Use the same folder structure you have on your website. A CPANEL website's public_html folder is the c:\xampp\htdocs folder on your C: drive.
If you create a folder in there, such as dev, and put a file inside it called mytest.html, then in the browser address bar you can type:
localhost/dev/mytest.html
Another great trick is to give yourself a domain by editing the Windows hosts file. For example, you can use the duchesne.com domain locally by editing this file:
c:\windows\system32\drivers\etc\hosts
Note that the file does not have an extension.
Then, inside that file, at the very very bottom, on a line of its own, type:
127.0.0.1 duchesne.com
After saving that file, when you type in the browser address bar:
http://duchesne.com
You will get the index.html file from your c:\xampp\htdocs folder. And if you type:
http://duchesne.com/dev
You will get the index.html file from your c:\xampp\htdocs\dev folder.
It is very important to NOT FORGET about that file! It will forever prevent you from accessing the online http://duchesne.com website. Of course, disabling it is as simple as commenting out that line (by putting a # in front) or by messing up the redirect, which is what I usually do:
127.0.0.1 xduchesne.com
(Deleting the leading x is easier than retyping the entire line). Coolest thing: the changes take place instantly, without rebooting -- or even bouncing the browser.
Resources:
Windows: XAMPP vs WampServer vs EasyPHP vs alternative

You might have to include the JQuery library for your website to know it is going to use JQuery. Here is one way to include it:
In the head tag of your html , paste the script below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

If You put Your html file via "drag&drop" to browser window, and You see file:// as protocol, then jQuery cant be downloaded from URL.
This is propably Your problem.
Edit:
I see Your JS code is inside test.js file which is loaded in head section.
So if this is still not working, try to replace code in Your test.js file to following:
$(document).on('click', 'li', function (){
alert('working');
});

It's times like these where CDN fallbacks are critical. Example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
if (!window.jQuery) {
document.write('<script src="//code.jquery.com/jquery-1.10.2.min.js"><\/script>');
}
</script>
<script>
if (!window.jQuery) {
document.write('<script src="/Scripts/jquery-1.10.2.min.js"><\/script>');
}
</script>
If the Google CDN fails it loads jQuery CDN. If THAT fails too then it loads the local copy.

Just try if this can help
How about using a safe jquery coding ? like the codes below ?
jQuery(document).ready(function ($) {
$('li').click(function() {
alert("working");
});
});
or
jQuery(document).ready(function () {
jQuery('li').click(function() {
alert("working");
});
});

How to see content inside div tags in apex page?

Locationbox is an external system that services like google maps. You can review an example here;
http://www.locationbox.com.tr/web/demo/displaymap.jsp
I want to deploy it to salesforce platform.
First script tag retrieves javascript code from locationbox service. After working startup(), it sets a dynamic content to div id="map"... in document. There are several png images in the dynamic content. The code below works locally as html files but it doesn't work in apex page. (the function x() works as expected in apex page.)
I am using the following code in apex page.
<apex:page>
<script language="Javascript" src="http://www.locationbox.com.tr/locationbox/services?Key=mykey&Cmd=API&Typ=JS"<script language="JavaScript">
var mapper = new IMapper();
window.addEventListener('load', function() {alert('OK1'); x();}, false);
window.addEventListener('load', function() {alert('OK1'); startup();}, false);
function startup() {
mapper.initMap(41.1, 29.1, 7);
mapper.addNavigationPanel();
MVGlobalVariables();
return;
}
function x() {
document.getElementById("map").innerHTML = 2;
}
</script>
<div id="map" style="border: 1px solid black; width:100%; height:100%; z-index: 0; position:relative; -moz-user-select:none; background-color: lightgrey;" tabindex="0">1</div>
</apex:page>

Try to use apex:includeScript right after your apex:page definition and not including the locationbox-script as html-tag:
<apex:page>
<apex:includeScript value="http://www.locationbox.com.tr/locationbox/services?Key=mykey&Cmd=API&Typ=JS" />
...
</apex:page>
And for the best way try to use https link