I"m trying to create this demo: http://jqueryui.com/dialog/#modal-message
I first decided to copy the source code and modify the file paths so that everything would match up accordingly. I changed the source path to the following, everything else I kept the same:
<link href="jquery-ui.css" rel="stylesheet" type="text/css">
<script src="jquery-ui.js"></script>
<script src="jquery.js"></script>
And my folder looks like this:
So theoretically I linked them all together correctly. But it doesn't appear to be the case when I click on the html file to test it. It's supposed to look like this:
But instead it looks like this:
And I have no idea why. I was hoping someone could help me replicate the demo that I found online. I'm not having much luck. http://jqueryui.com/dialog/#modal-message If anyone can figure it out I would greatly appreciate it. Thanks.
Change the sequence of the files as given below. Since jquery-ui is dependent on jquery. You need to load the jQuery library first.
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
Everything you are doing is correct except the order in which you are including the scripts.
Do this...
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<link href="jquery-ui.css" rel="stylesheet" type="text/css">
jQuery must included first, and its dependencies later.
Related
I'm a newbie to web dev, so please stick with me. I know this question has come up a lot (or a similar deviation), but after a couple of hours of searching I have not found an answer that works for me.
I've made sure the JQuery file is loaded first, and tried multiple versions to no avail. Whenever I try to load the Magnific Popup script, I get (TypeError: $ is not a function) on line 50. I've had a look and tried to change $ to JQuery to no avail, so it's back to normal now.
Here's the Magnific Popup code block:
var mfp,
MagnificPopup = function(){},
_isJQ = !!(window.jQuery),
_prevStatus,
_window = $(window), <<<<<< ERROR HERE
_document,
_prevContentType,
_wrapClasses,
_currPopupType;
And the relevant html:
<head>
<link rel="stylesheet" href="css/magnific-popup.css">
</head>
<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.js"></script>
</body>
looks like its not picking your jquery library from CDN..
make sure that you have the network in your system or have access to jquery CDN url
if all above is fine then you try with http in CDN url like below. this is working for me
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Try to load your jquery file from your own (local) machine. Hopefully, this will work well.
Also, it would be helpful for me if you please let me know that you are not getting 404 for the JQuery file from the CDN.
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
In my jsfiddle below:
http://jsfiddle.net/5fs7e6wt/5/
I manually import jQuery 1.7.2 from a Google CDN but as you can see the dropdown does not work.
However, when I change jsfiddle to use jQuery 1.7.2 onLoad within the left side bar, the drop down now appears to work.
I am fairly confused as to what changed in my dev environment or what jsfiddle is pulling in additionally that I am missing?
Any advice on how to debug this situation would be very appreciated.
Just looking at the new "sources" pulled in from the page source is fairly counfusing as it is mixed with the pre-existing jsfiddle javascript.
My imports look like:
<link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/2.2.2/css/bootstrap.min.css">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/2.2.2/js/bootstrap.min.js" charset="utf-8"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
This is happening because you are including bootstrap before jQuery. If you check out the console you will see that you are getting the error:
Uncaught TypeError: undefined is not a function
Simply switch the script elements like in this fiddle.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/2.2.2/js/bootstrap.min.js" charset="utf-8"></script>
I am trying to make a small app in angular and am trying to include the Bootstrap CDN into the head section. My current head section looks like this:
<head>
<script src="http://code.angularjs.org/angular-1.0.0rc3.min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="todo.css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
</head>
When I go to refresh the page none of the bootstrap changed have been made. Is this something going on with Angular or am I just making a dumb mistake?
You have the wrong URL. You can plug it into your browser to see where it takes you.
yours:
http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css
correct one:
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css
To make sure you have the correct one, always get it from here: http://getbootstrap.com/getting-started/
For me, Instead of using CDN, Adding and referencing the bootstrap css file locally in dist folder(or whatever folder you have generated via Angular fixed the issue.
Im fairly new to JavaScript so finding it hard to understand. But Im making a homepage and I want an image slide show and Lightbox together, and I guess there a conflict between the different Js libraries. I also have read things like the No.Conflict script on the jQuery website but I have no idea on how to implement on to my HTML. Heres the code.
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<link href="css/lightbox.css" rel="stylesheet" />
If some one can help me out that would be amazing. and put it in the simplest form would be super as well, as like I said Im quite new.
Thanks
remove the first script library from google and add only the .js jQuery file with your site