I´m trying to link jquery to an external js file, but I can´t get it to work. This is my full html. I have put jquery before the js file, as you can see. I also tryed to link both the jquery and js in the body after the div, but that didn't work either.
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css-teachers/lessons- teacher.css"/>
<script src="../jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../javascript-teachers/lessons-teacher.js"></script>
<meta charset="UTF-8">
<title>HOME</title>
</head>
<body>
<div id="box1"> <a href="page2.html"/></div>
<div id="box2"> <a href="page3.html"/></div>
<div id="box3"> <a href="#"/></div>
<div id="box4"> <a href="#"/></div>
<div id="box5"> <a href="#"/></div>
<div id="box6"> <a href="#"/></div>
</body>
</html>
My js works if I put it into the body like this
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css-teachers/lessons- teacher.css"/>
<meta charset="UTF-8">
<title>HOME</title>
</head>
<body>
<div id="box1"> <a href="page2.html"/></div>
<div id="box2"> <a href="page3.html"/></div>
<div id="box3"> <a href="#"/></div>
<div id="box4"> <a href="#"/></div>
<div id="box5"> <a href="#"/></div>
<div id="box6"> <a href="#"/></div>
<script src="../jquery-1.11.3.min.js"></script>
<script>
$("#box1").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
</script>
</body>
</html>
Any suggestions on what I should do?
Thanks in advance
Glad my comment above helped.
Just wanted to mention that, since you're using jQuery, you can also put the code in your external file in the following code block to prevent it from executing until all page elements are rendered:
$(document).ready(function() {
$("#box1").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
});
More info: https://learn.jquery.com/using-jquery-core/document-ready/
if you link your script inside the tag <head> </head> maybe you have to include the type:
<script type="text/javascript" src="../jquery-1.11.3.min.js"> </script>
like the same way you did with your home.js
Related
I am using jquery load() function to load content to a container of the index page. the page was loaded but the URI of content is not displaying in the address bar.
how can I get the URL of the content( home.html) in the address bar?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-grid.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="css/bootstrap-reboot.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/carousel.js"></script>
<script src="js/larelapa.js"></script>
<script
$(function() {
$("#home").click(function() {
$('#container').load('home.html');
});
});
$(function() {
$("#about").click(function() {
$('#container').load('about.html');
});
});
$(function() {
$("#contact").click(function() {
$('#container').load('contact.html');
});
});
$(function() {
$("#policy").click(function() {
$('#container').load('policy.html');
});
});
</script>
</head>
<body id="bg">
<a id="home" href="#" class="w3-bar-item w3-button w3-hover-white btn-block" onclick="w3_close()">Home</a>
</div>
<div style="position: absolute; bottom: 0;">
<li> <a id="about" href="#" onclick="w3_close()">About us</a></li>
<li><a id="contact" href="#" onclick="w3_close()">Contact Us</a></li>
<li> <a id="policy" href="#" onclick="w3_close()">Policy</a></li>
</div>
</nav>
<div id="container"></div>
</div>
</body>
</html>
home.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container-fluid row">
</div>
</div>
</body>
</html>
after clicking the home button the home.html loaded in the container of the index.html and URL shows http://localhost:63342/code/index.html# which I want to be http://localhost:63342/code/index.html?home that I can bookmark.
I am a newbie to javascript.
You need to use
history.pushState(stateObject, "title", URL);
it would look like this:
$(function() {
$("#home").click(function() {
$('#container').load('home.html');
window.history.pushState({url: "home.html"}, "", "home.html");
});
});
But instead of making one jquery event for every pages you should make it reusable so you only have one code to maintain.
https://jsfiddle.net/fJ9wq/
By the way, you opening script tag is not closed
I can't get this basic code to work for fancybox3. Is it not loading the js library?
Original site is here: http://fancyapps.com/fancybox/3/
<!doctype html>
<html><head>
<meta charset="UTF-8">
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
</head>
<body>
<a data-fancybox="gallery" href="big_1.jpg">
<img src="small_1.jpg">
</a>
</body>
</html>
Put the scripts before the closing body tag.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" />
</head>
<body>
<a data-fancybox="gallery" href="https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg">
<img src="https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg">
</a>
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
</body>
</html>
worked great by adding:
<link rel="stylesheet prefetch" href="jquery.fancybox.min.css">
With adding script above body close tag as recommend by others
Thanks guys.
I'm pretty new to JavaScript, I am trying to execute my external JS to html, what im trying to do is to see if the mouseover responds when my mouse hovers one img.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GWW- A Global Warming Warning...</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="gridContainer clearfix">
<div class="world">
<img src="poluicao/poluicao0001.png" alt="Mundo">
<div class="botao1">
<img src="poluicao/offbuton.png" alt="but1">
</div>
<div class="botao2">
<!--<a href="#" >//-->
<img id="readybotao" src="degelo/offbutton.gif" alt="but2">
<!-- </a> //-->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="javascript.js"</script>
</body>
</html>
And this is my JS file:
function buttonon() {
alert("If it showed up it worked!");
}
document.getElementById('readybotao').addEventListener("onmousover",buttonon());
What am I doing wrong?
change external javascript like this :
var ele = document.getElementById("readybotao");
ele.addEventListener("mouseover",buttonon);
function buttonon() {
alert("If it showed up it worked!");
}
and close tag script :
<script src="javascript.js"></script>
you have >missing on the line <script src="javascript.js"</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Practice!</title>
<link href="../_css/site.css" rel="stylesheet">
This is my source for jquery (which I got from my text book)
<script src="../_js/jquery-1.7.2.min.js">
</script>
<script src="javascript/hello.js">
</script>
<script src="javascript/fadeIn1.js">
</script>
<script src="javascript/igotit.js">
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>
Missing<br>
Manual</i></p>
</div>
<div class="content">
<div class="main">
<h1>Fading In</h1>
<p>Here I come!!!</p>
</div>
<div class="aside"> </div>
</div>
<div class="footer">
<p>JavaScript & jQuery: The Missing Manual, by David McFarland. Published by O'Reilly Media, Inc.</p>
</div>
</div>
</body>
</html>
This is what my external javascript files look like. For my external files, would they just need to be the "<script>" part of the code or the whole entire "<DOCTYPE>" to "</html>"?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fade In</title>
<link href="../_css/site.css" rel="stylesheet">
<script src="../_js/jquery-1.7.2.min.js">
</script>
<script>
$(document).ready(function() {
$('body').hide().fadeIn(3000);
});
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>
Missing<br>
Manual</i></p>
</div>
<div class="content">
<div class="main">
<h1>Fading In</h1>
<p>Here I come!!!</p>
</div>
<div class="aside"> </div>
</div>
<div class="footer">
<p>JavaScript & jQuery: The Missing Manual, by David McFarland. Published by O'Reilly Media, Inc.</p>
</div>
</div>
</body>
</html>
Sorry, I am new to this and am having troubles.
Your external files should only have JavaScript in them, so nothing that looks like
<this/>
should be in them. It looks like you just want:
$(document).ready(function() {
$('body').hide().fadeIn(3000);
});
...in your fadein1.js. Likewise for the other JS files.
When you have the document open in your browser, press F12 for some useful messages to paste here if it still isn't working.
Is Jquery file in the right location? If you are not sure just use this link for jquery:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
I apologize if you've already seen this. I'm still struggling a bit with this. I just need to modify the function to load only the colTwo div from the link selected on the menu instead of the entire page.
I see the code from the jquery website:
$('#result').load('ajax/test.html #container');
But I don't understand how to make the function do this.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Title</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src ='jquery-1.9.1.min.js'></script>
<script type="text/javascript">
$(function(){
$('#menu li a').on('click', function(e){
e.preventDefault();
var page_url=$(this).prop('href');
$('#colTwo').load(page_url);
});
});
</script>
<body>
<div id="header">
<h1>My Title</h1>
</div>
<div id="content">
<div id="colOne">
<div id="menu1">
<ul id="menu">
<li>Members</li>
<li>About</li>
</ul>
</div>
<div class="margin-news">
<h2>Recent Updates</h2>
<p><strong>None At This Time</strong> </p>
</div>
</div>
<div id="colTwo"><h2>Starting Text</h2></div>
<div style="clear: both;"> </div>
</div>
</body>
</html>
Kevin B is correct:
$('#colTwo').load(page_url + ' #colTwo');
Just add the selector as a string to the URL, and don't forget the space!