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>
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>
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 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
});
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>
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.