I try to use fancybox plugin. I load the plugin after I load jquery. Somehow, I can't get it to work. And, for some reason, Firebug shows 2 identical errors, saying that fancybox is not a function. However, I use the function only once, so why 2 errors? I read somewhere that if jquery is loaded twice it might cause problems. Is that the reason why Firebug shows the error twice? Are my scripts loaded twice? Why? As far as I know, I only load them once, in the head section of my html.
enter code here
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" >
<title>Event List (andy)</title>
<link rel='stylesheet' href='styles.css' type='text/css' />
<link rel="SHORTCUT ICON" href="logo.ico">
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src='jquery.fancybox-1.3.4/jquery-1.4.3.min.js'></script>
<script src='floor.js'></script>
</head>
First off, why are you adding code before your opening <head> tag? That's just wrong.
jQuery might not be loaded twice, but if your code is running twice then your code is definitely loaded twice somehow.
My advice is to put a console.debug('foo'); or a breakpoint in your code where you suspect it's being loaded only once. If you see the foo in your console twice, you know your code is, in fact, loading twice. Then, I would figure out what the culprit is, perhaps by performing surgery and cutting chunks out of the page until I find out what's causing it. This is to isolate the problem.
EDIT: It's not working because you're not including the script. Your line says jquery.fancybox-1.3.4/jquery-1.4.3.min.js which is loading jquery. You need it to be like jquery.fancybox.js instead.
Related
I am trying to use the jQuery .load() function to load a partial (in this case the navbar) into a specific div (using the id I've given it as the target). While developing the site I am building I have been using Gulp, and the way I have set it up works great. The header loads and works correctly, no problem. Where I am running into an issue is if I try to load the files locally without running Gulp. Most of the elements, CSS, JS executes without issue, and the jQuery CDN is loading fine according to the developer tools network tab, but the html file that contains the Navbar partial that I am trying to pass into the .load() function is nowhere to be found. I've tried changing the placement of the specific script tags, changing the name of the file, etc, but nothing seems to work. `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>STHR | NEWS</title>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/main.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function(){
$('#header').load('../_header.html');
$('#footer').load('../_footer.html');
});
</script>
</head>
<body>
<div id="header"></div>`
I am getting these two errors in the console:
bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery(anonymous function) # bootstrap.min.js:6
jquery.min.js:4 XMLHttpRequest cannot load file:///Users/andrewpohl/personal_websites/STHR/_header.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
UPDATE: I did some further research into the error about the XMLHttpRequest, and apparently this becomes an issue if you're not running your files through a local server. I was unaware of this issue and was just opening up my files via the command line straight to the browser, without setting up a simple server. Once I started using a simple Python server I noticed that the header began to load without the use of gulp.
use ready function to this
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#header").load("");
jQuery("#footer").load("");
});
</script>
$(function(){
$('#header').load('../_header.html');
}
You have to tell JQuery to wait for the DOM to be loaded before you can act on it. At the end of the <head> tag, there's still no #header loaded in the DOM.
I am a newbie to webcomponenetsjs and I have been trying to use HTMLImports to import another HTML into my index.html. Since chrome supports HTML imports, I dont have a problem with it. But when I try the same with firefox, the HTML imports doesn't work as expected. The problem is that it loads all of the HTML elements, loads all the script and then only the |link rel="import"| starts to execute the imports. To make it more clear, following is the order of alerts fired:1.after vendor2. before import 3. alert inside vendor.js4.alert inside test.html.
By default, the execution of html imports would be like 1.alert inside vendor.js2. after vendor 3. before import.js4.alert inside test.html. Of course, it works of the same order in chrome. Any help on what I am missing would be much appreciated.
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="icon" type="image/ico" href="/images/favicon.ico"/>
<script src="lib/webcomponentsjs/HTMLImports.js"></script>
<link rel="import" href="js_imports/vendorjs.html">
<script>alert("after vendor");</script>
<b>
</head>
<body class="side-nav-collapsed">
<script>alert("before import");</script>
<link rel="import" href="test.html">
</body>
</html>
It's because Firefox makes use of the HTMLImports.js polyfill , the <link> calls are therefore asynchronous.
For a solution to this issue that is also exhibited in IE or Edge: HTML imports load order in Internet Explorer
I'm trying to run the following code, written on my local machine:
http://www.jsfiddle.net/WShdx/3/
Functionality-wise (ignore the broken images in the previous and next buttons, and the wrongly-sized main images) the click/hover function is working properly in jsfiddle. However, on my local machine it's not working at all.
For all intents and purposes the code is identical, except the local copy has this head section to load in the javascript/css files that are contained within the jsfiddle page:
<head>
<title>Jquery Wizard</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="wizard.js" type="text/javascript" ></script>
</head>
Is there some wonderful function of jsFiddle that is making my code magically work, or am I missing something here?
You chose to run the script-code "onload" on jsFiddle, that's the difference.
Without onload it will not find $('area') , because your script is placed inside the <head>, where the elements inside the <body> are still unknown.
I'd also advice anyone who run into such errors to use firebug or any debugging tool debug the script whenever such problems occur. Might be very simple yet frustrating problems like an Uncaught SyntaxError: Unexpected token ILLEGAL error. Debuggers come in very handy!
I have create a external script call script.js save in js folder. However i don't know why it is not working. Therefore, I have tried put the into the html file and it work fine. So I think it is the problem of missing something in or i don't know.
It is my html code
<!DOCTYPE html>
<html>
<head>
<title>...........</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<button class="button">show</button>
<p>yo</p>
</body>
JQuery
$(".button").click(function(){
$("p").toggle();
});
Ensure jquery is loaded first:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/script.js"></script>
I'd also move this to just before the closing </body> tag in your HTML.
And then check where the JS folder is relative to the HTML file you've written. Currently, the folder would need to be at the same level in the directory structure as the HTML file.
Inside your script, use window.onload. The script might be firing before the DOM has actually finished loading.
You might also want to put jQuery on top so that it finishes loading before any possible jQuery code in your script fires.
Try loading JS in the footer.
You need the elements to be present in DOM before you can select them.
Moreover including external js files at the bottom of your page, gives priority of your HTTP requests to the visual display that will be presented to the client instead of to the logic of interaction or dynamics;
this is the usual behavior you'd want.
If you are using jquery in your JavaScript code please put them in this order
<!DOCTYPE html>
<html>
<head>
<title>...........</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
If that is not the case can you post the error in the console (using chrome press f12 to see the errors in the console)
Other thing you can check, the js folder is in same directory where your html page is?
let us know
I'm new to javascript and trying to add this http://codepen.io/jklm313/pen/EarFd great map scrolling effect to my site. Css anf HTML read fine, but the js part doesn't want to work. Even if I put the js code in my html. This is the very typical beginning of my html:
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css"/>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
I've searched for clues, but I can't seam to find the issue, is the code outdated or should I add something more? Thanks in advance
Test and make sure you are getting the js file loaded into the page. One method would be to place at the top of the script.js file :
alert('loaded');
If you get the alert box then you you have the correct path. If not then you know it is likely a path issue. You may need to make sure your file is in the same directory or else specify the directory in the src
I just glanced at the link and notice it is using the jquery library. Go to jquery.com to learn how to include that js file as well