I have a html file with some code and jquery and js files my problem is if that scripts files are bottom of the page its working fine but if i put that files in top of the file i mean in header tag its not working.
<html>
<head>
<meta charset="utf-8" />
<title>Testing</title>
<link href="css/style.css" rel="stylesheet" />
<link href="css/style-default.css" rel="stylesheet" id="style_color" />
</head>
<body class="fixed-top">
/*some html code here*/
<div id="footer"></div>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/jquery-slimscroll/jquery-ui-1.9.2.custom.min.js"></script>
<script type="text/javascript" src="assets/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="assets/fullcalendar/fullcalendar/fullcalendar.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js" type="text/javascript"></script>
<script src="js/jquery.sparkline.js" type="text/javascript"></script>
<script src="assets/chart-master/Chart.js"></script>
<!--common script for all pages-->
<script src="js/common-scripts.js"></script>
<!-- END JAVASCRIPTS -->
</body>
</html>
help me out,
kiran
Most likely there are dependencies in the scripts on DOM elements that are not loaded yet.
You can wrap your JavaScript in a document.ready handler if you want the scripts to be loaded in the head tag
$(document).ready(function(){
//do your JS stuff here
});
Related
I'm trying to get a simple qtip2 demo running but it wont work need help.
qtip2 is a framework that allows to create individual tooltips.
if you hover over the link a small yellow box should appear.
all files are in the same folder.
<html>
<head>
<title>My site</title>
<!-- CSS file -->
<link type="text/css" rel="stylesheet" href="jquery.qtip.css" />
</head>
<body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.qtip.js"></script>
<script type="text/javascript" src="jquery.imagesloaded.pkg.min.js"></script>
Sample link
<script>
// self executing function here
(function() {
// your page initialization code here
// the DOM will be available here
$('a[title]').qtip();
})();
</script>
Sample link
</body>
</html>
i removed unnessesary codes like the imagesloaded and replace the jQuery link you have with a CDN version.
And it works.
<html>
<head>
<title>My site</title>
<!-- CSS file -->
<link type="text/css" rel="stylesheet" href="jquery.qtip.css" />
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
<script type="text/javascript" src="jquery.qtip.js"></script>
Sample link
<script>
// self executing function here
(function() { $('a[title]').qtip(); })(); </script>
Sample link
</body>
</html>
Here's the codepen: http://codepen.io/jjmartucci/pen/DlCmy
I'm using Brackets. I copied and pasted the CSS into my style.css, the JS into my init.js, and the HTML part into the body of my index.html...
I also modified the head of my HTML document to say:
<head>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/init.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-scenario.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-sanitize.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-sanitize.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-resource.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-resource.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-mocks.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-bootstrap-prettify.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-bootstrap-prettify.js"></script>
</head>
and I'm still struggling to get it going. The CSS seems to be working, but the functionality is messed up. Is there any obvious step I'm missing?
You're loading way too many instances of the same scripts. And your init.js needs to come after your 3rd party libraries.
Try this:
<head>
<!-- style -->
<link type="text/css" rel="stylesheet" href="css/style.css" />
<!-- libs -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-scenario.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-sanitize.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-resource.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-mocks.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.1.2/angular-bootstrap-prettify.min.js"></script>
<!-- app -->
<script src="js/init.js"></script>
</head>
While copying javascript from codepen, it may be adding some addition checks whilst compiling the coffeescript. So just use http://js2.coffee/ in order to convert the coffeescript into javascript preview, which you can then use in your code own code. Hopefully this solves the javascript problems.
I am attempting to add some simple jQuery through an external file. I would like the code to remain in the external .js file. I'm using Dropbox so I can test my site locally, and I am almost certain JavaScript works through this method, but I don't know about the jQuery library. I can't seem to get any feedback through trial and error. Here is the simple form of the code I'm attempting.
The HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel='stylesheet' type='text/css' href='style.css'/>
<script type="text/javascript" src="functions.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
</head>
<body>
<div id='container'>
<div class='menu'>
<h2>Title of menu/h2>
</div>
<div class='panel'>
<p>
Some text here
</p>
</div>
</div>
</body
This is the entire .js file so far. Does this need to be defined as a function and then added into the HTML? Is it a scope issue?
$(document).ready(function(){
$('.menu').click(function(){
$('.panel').slideToggle('slow')
})
})
You load your file before the library your file is using. Change the two <script> lines so that jQuery is loaded first:
Change
<script type="text/javascript" src="functions.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
to
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="functions.js" ></script>
You need to add your code after the jQuery inclusion..
So swap these lines
<script type="text/javascript" src="functions.js" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
to
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="functions.js" ></script>
That is because your code uses jQuery, so you need to load jQuery before you can use the $.
I downloaded the plugin and added it as a separate file in my html, I also added the css file in the head, but it is not working. my html is this:
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Click Sign Up!</title>
<link rel="stylesheet" href="signupstyle.css" type="text/css">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="messi.css" />
</head>
<body>
<a href="#" id="line_break" >Why is my name required?</a><br><br>
</body>
and my script is this:
<script type="text/javascript" src="/js/messi.js"></script>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/place.js"></script>
<script type="text/javascript" src="/js/jqueryUI.js"></script>
they said I should call it like this:
$( "#line_break" ).click(function(){
messi.alert('This is an alert with Messi.');
I even added the $(document).ready(function(){}) and it still didn't work.
there website: http://marcosesperon.es/apps/messi/
my reason for using messi dialog box is because it has a better look than the jquery ui dialog box and can be customized to fit my liking. If this is a waste of time please tell me and recommend something else.
You're loading messi.js before you're loading jquery.
Since messi is a jQuery plugin, you need to load your scripts in the right order.
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/messi.js"></script>
<script type="text/javascript" src="/js/place.js"></script>
<script type="text/javascript" src="/js/jqueryUI.js"></script>
jS novice here. Here are 2 almost identical html's. The top one works, the bottom one doesn't for some reason (moved 2 <script> columns from body to head). Why doesn't the one with all <script>'s in the <head> work? This one works:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="fancybox.css" type="text/css" media="screen" />
</head>
<body>
<div id="center">
<a class="fancybox" href="imagelarge.jpg"><img src="image.jpg" alt="" /></a>
</div>
<script type="text/javascript" src="jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body>
</html>
This one doesn't:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</head>
<body>
<div id="center">
<a class="fancybox" href="imagelarge.jpg"><img src="image.jpg" alt="" /></a>
</div>
</body>
</html>
first of all the script include could always be in the header
<head>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.fancybox.pack.js"></script>
</head>
And now.. fancapps themselfes put the onload part directly under the images they want to add a fancybox to. So this might have a reason -at least for their demo page- but I think it should be possible to just drop the document.ready part and give it a shot.
<script>
$(function(){
$(".fancybox").fancybox();
});</script>
so you end up with:
<head>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.fancybox.pack.js"></script>
<script>
$(function(){
$(".fancybox").fancybox();
});
</script>
</head>
If I'm correct this slightly changes the order of execution, the function will be called after the page is not only fully loaded but fully parsed too, so that fancybox is called AFTER the fancybox class is assigned to the img-link
There is no difference between the two versions, except that the bottom code doesn't include the jquery.js script tag before the jquery.fancybox.pack.js. Everything will work once it does.