I was originally just using JSFiddle, but I wanted to move my project over to Notepad++ so I could have the files on my computer. The problem is, my Javascript on my page is not going into effect.
Heading Code:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
Any reason why? It links to my style sheet just fine, but my app.js does not seem to be working.
Three things:
app.js uses jQuery so the jQuery file needs to be included first
Also, you said you're running this on your PC. You could be using localhost, but if you're running from file://, src="//... won't work because your browser will be looking for file://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js instead of http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js so all you need to do is add the http:
But did you mean jQuery not jQuery UI? (Thanks #ahren)
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> -->
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
Jquery comes first, like so:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
Related
I cant understand the error where $ is unidentified when using onload on my page. This is just as sample page I created where I need to call a function after loading the page.
Jquery Code
$(document).ready(function(){
alert("loaded");
});
<html>
<head>
</head>
<body>
</body>
<script src="../Jquery/contact.js"></script>
<script src="../Jquery/jquery-1.12.0.min.js"></script>
<script src="../Jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="../Jquery/jquery.SPServices-2014.01.min.js"></script>
<link rel="stylesheet" type="text/css" href="../CSS/default.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>
</html>
Two issues here:
It's invalid to put script or link tags as direct children of html, so it doesn't surprise me that it doesn't work correctly on at least some browsers. You need to put them in the body or head. The only valid content of the html element is a single head element followed by a single body element.
Standard guidance, for instance in the YUI Best Practices for Speeding Up your Website is:
Put the link tags in head
Put the script tags at the bottom of body, just prior to the closing </body> tag
It looks like your contact.js file calls $() immediately (not in response to an event). If so, then contact.js must be after jQuery in the list of scripts, so that jQuery has been loaded when your code runs.
So:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/default.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>
</head>
<body>
<script src="../Jquery/jquery-1.12.0.min.js"></script>
<script src="../Jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="../Jquery/jquery.SPServices-2014.01.min.js"></script>
<script src="../Jquery/contact.js"></script>
</body>
</html>
Side notes:
You might look at script and CSS combining and minifying, to avoid having a lot of HTTP requests.
Consider adding <!doctype html> at the very top to ensure the browser is in standards mode (not quirks mode).
Consider adding <meta charset="UTF-8"> at the top of head (ensuring that the file is indeed in UTF-8, or changing the "UTF-8" in that to whatever encoding you're actually using in the file).
thanks for the input. so basically I had 2 problems on this. I solved the first one by moving the contact.js to the bottom and removing the migrate plugin.
I've been trying to get a simple implementation of the Slick Carousel working.
I've followed the instructions at the Git page: https://github.com/kenwheeler/slick
Here is my code. Can anyone see a problem? Does anyone have a simple working code sample for slick?
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css"/>
</head>
<body style="background-color: lightblue">
<div class="your-class">
<div><p>test1</p></div>
<div><p>test2</p></div>
<div><p>test3</p></div>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.3.7/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick();
});
</script>
</body>
</html>
The reason it's not working is because you are running your html from file. This means that the url scheme being used for your script links is
file:
instead of
http:
so your CDN links are being resolved as
file://code.jquery.com/jquery-1.11.0.min.js
which is clearly incorrect.
Either hard-wire the scheme to http: by updating all the links to contain a scheme:
<link rel="stylesheet" type="text/css"
href="http://cdn.jsdelivr.net/jquery.slick/1.3.7/slick.css"/>
or run your code from an http context instead of from a file on your HD.
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>
I am trying to setup bootstrap-calendar, but I am having some difficulties. I used the command
$ bower install bootstrap-calendar
to download the dependences and I created a test index file which looks like this:
<html>
<head>
<title>calendar test</title>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/language/en-GB.js"></script>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/calendar.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/moment/moment.js"></script>
<script type="text/javascript" src="bower_components/underscore/underscore-min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-calendar/css/calendar.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/docs/assets/css/bootstrap.css">
<script type="text/javascript">
var calendar = $('#calendar').calendar();
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
Opening index.html with a browser, gives an empty page. Any idea why?
Thanks in advance
It is possible that simply the order which you include your scripts is wrong. I usually put jQuery on top (considering most things are dependent upon it, it will need to be loaded first) then bootstrap.js below it, then underscore, so on and so forth. Scripts should also be included at the end of the body for speed, although it could also be possible that your scripts are running in the head before the dom is loaded, and #calendar is not found simply because it's not there yet. Try those things, good luck!
I'm getting the following error message in Chrome and firefox while trying to implement gorbachev's syntax highlighter.
The page at local host says:
SyntaxHighlighter
Can"t find brush for: php
It's all the more frustrating because i just got it working on a test page in the same folder, it still works. There is very little different between the two pages. Here's my code:
<??>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--STYLESHEET LINKS-->
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shThemeDefault.css" rel="stylesheet" type="text/css" media="screen" />
<link href="shCore.css" rel="stylesheet" type="text/css" media="screen" />
<!--JQUERY SCRIPTS-->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<!--PROCESSING SCRIPTS
<script type="text/javascript" src="processing.js"></script>
<script type="text/javascript" src="init.js"></script>
-->
<!--syntax highlighter-->
<script type="text/javascript" src="shBrushPhp.js"></script>
<script type="text/javascript" src="shCore.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// put all your jQuery goodness in here.
SyntaxHighlighter.all();
});
</script>
</head>
<title>code</title>
<body>
<div id="content">
<h2>code</h2>
<pre class="brush: php">
$last_modified = filemtime("header.php");
echo("last modified: ");
echo(date("m.j.y h:ia", $last_modified));
</pre>
<!--<script type="application/processing">
</script>
<canvas data-processing-sources="processing/lines.pde">
</canvas> -->
</div>
</body>
</html>
<??>
For me, the solution was making the brush style non-capital. So for me, I was adding a new brush to syntaxhighlighter (haskell), and I changed the markup:
<pre class="brush:Haskell">...</pre>
To
<pre class="brush:haskell">...</pre>
Alternatively, you could change the brush identifier:
Brush.aliases = ['Haskell'];
Hope this helps!
It cant find the js file for the php highlighter. Make sure you uploaded the right brush and have the correct path for the brush. I had a lot of trouble getting it work in an MVC 3 application. I ended up using the S3 hosted files that Alex has.
Trying calling the remoted files and see if it works. Also take the call SyntaxHighlighter.all() out of your jquery call. Mine is in its own set of script tags. See if that works.
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js" type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" type="text/javascript"></script>
i just moved all the content from the page into the test page, renamed it and it works fine now. just one of those things i guess.