I want to be able to print a code snippet with script-tags using JavaScript.
This is more or less what I want to print:
<script src='URL type='text/javascript'></script><script>functionName();</script>
I tried:
jQuery('selector').text("<pre><script src='URL type='text/javascript'></script><script>functionName();</script></pre>");
Use some syntax higlighter for that (ex https://highlightjs.org/).
<html>
<head>
<title>test</title>
<!-- load highlight.js css & js -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/styles/default.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.0.0/highlight.min.js" type="text/javascript"></script>
</head>
<body>
<!-- set up your tag which want to highlight -->
<pre><code class="xml">
<script src='URL type='text/javascript'></script><script>functionName();</script>
</code></pre>
<script>
// initialize highlight
hljs.initHighlightingOnLoad();
</script>
</body>
</html>
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>
Okay, this is going to sound very imbecilic. (which it probably is)
I'm a very novice programmer, so please bear with me.
I'm trying to link a simple jQuery file to my HTML file, but I can't seem to make it work. After looking through the previous answers to this trivial question, I realized that i was missing pivotal lines of code such as (and this is just an example)
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
Again, I know I must sound very stupid.
Here's what I have so far:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
</script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>
My jQuery code is as follows:
$(document).ready(function() {
$('#green').fadeOut(1000);
});
Can someone please tell me how to link the jQuery file to the HTML file? I know this question has been asked 500 times, but for some reason I am unable to make this work. Thank you very much! Sorry for making you cringe with my ineptness.
First of all its is mandatory to include jQuery library.
There are few ways you can link your jQuery code in html:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
<!-- Mandatory to include -->
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
This is how you can integrate your codes:
Method 1 (In Footer)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
<!-- Mandatory to include -->
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
<script>
$(document).ready(function() {
$('#green').fadeOut(1000);
});
</script>
</body>
</html>
Method 2 (In Header)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
<!-- Mandatory to include -->
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
$('#green').fadeOut(1000);
});
</script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
Method 3 (From External File) Lets say you have a file custom.js that has you codes :
$(document).ready(function() {
$('#green').fadeOut(1000);
});
This is how you can add external js file
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="firststuffcss.css"/>
<!-- Mandatory to include -->
<script type="text/javascript" src="code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="PATH_OF_JS_FILE/custom.js"></script>
</head>
<body>
<div id="green"></div>
<div id="blue"></div>
</body>
</html>
Update: Path Example
- Project Directory
--- CSS
--- CSS/style.css
--- JS
--- JS/custom.js
--- index.php | index.html
url: http://www.yourproject.com
js path: http://www.yourproject.com/JS/custom.js
Just add your initial jquery load to the header beneath the stylesheets. You want to load any css before you load your jquery scripts (in the future).
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
#green {width: 150px; height: 150px; background: green; }
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
$('#green').fadeOut(1000);
});
});//]]>
</script>
</head>
<body>
<div id="green"></div>
</body>
Do note that you load jquery before you use any part of the script calls ($).
Hope that helps!
Here's your fiddle:
http://jsfiddle.net/2633c1em/
Put your script tag in header section like
<head>
<script type="text/javascript" src="your jquery file name "></script>
</head>
file name like load.js
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>
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.