I'm trying to use Remark.js to create HTML presentations based on the template provided. The template includes the textarea tag with id='source' where the markdown is simply copied in. I wanted to go for a solution where I can leave the template and just change the file that is loaded, so that I don't have to work inside the HTML file and keep the markdown separate.
I've tried using jQuery (I'm a noob) but it does not seem to work, the page stays empty. Here's what I tried:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>My presentation</title>
<link rel='stylesheet' type='text/css' href='presentation.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script src='https://gnab.github.io/remark/downloads/remark-latest.min.js'></script>
</head>
<body>
<textarea id="source"> </textarea>
<script>
$('#source').load('presentation.md');
</script>
<script>
var slideshow = remark.create();
</script>
</body>
</html>
I don't get any errors in the JS console, but I also don't see anything. When I simply copy the file into the textarea it works, as expected, so the markdown file is OK.
I ran Chrome with the --allow-file-access-from-files so that at least I don't get the cross-origin requests error. However, that is not satisfactory as I intend to place the HTML file (and the related files) in Dropbox. If possible, I don't want to run a web server locally as it's just a 'simple' HTML file with some text copied in from another file.
What's the best way to achieve this, i.e. copying in a file as-is?
This willl solve your problem:
Create the remark after you loaded the data by adding the call to your callback function.
<script>
$('#source').load('presentation.md', function() {
var slideshow = remark.create();
});
</script>
Related
I am at the start of learning Javascript, but within the first 10min I hit on a Chrome issue. I'm attempting to display the code I wrote with Visual Studio in the Chrome console, but rather than showing the code in the section below the menus 'Element', 'Console', 'Source' etc, the code displays exactly as I wrote it, but in the view panel including all html tags below the menu section 'Apps', 'Bookmarks', 'Customize Links' etc. How do I resolve this, any answers?
I tried to use ctrl-o to open the .js file whilst in Visual Studio and also whilst on Chrome, but only the file path to the .js file opened, and when subsequently clicking on the file it looked like the image below.
chrome not displaying JavaScript code in the location I want it to be
To clarify - you are loading a .js file in the browser which is what is displaying in chrome (the content of that file).
What you want to do is run that js file and have Chrome's JavaScript interpreter (V8) parse that information. To do that, you must add your script to an index.html page and then in index.html, load that e.g something like <script type="text/javascript" src="script.js"></script>
Alternatively, you can just run the JavaScript directly in index.html via
<script type="text/javascript">
// your JavaScript
</script>
You are opening the javascript file directly in the browser, not opening an .html file with a javascript tag. That's why Chrome is showing you the file content.
If you want to execute your javascript code in the Chrome console, paste it directly in the "console" tab of the developer tools.
If you want to execute your javascript code in a web page, you have to create an html file with a script tag loading your javascript code, something like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="main.js"></script>
</head>
<body>
</body>
</html>
In order to see your html content on browser you should load .html file instead of loading .js file
you can include your javascript code in two ways
Add your Javascript code inside the script tagcreate a new javascript file with extension .js and add it in your html file
Example1 (Adding Javascript inside script tag)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
console.log("good morning");
alert("good morning");
</script>
</body>
</html>
Example2 (Adding Javascript from external file)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="nameOfFile.js"></script>
</body>
</html>
console.log doesn't display what I want it to show in my chrome browser dev console.
I have this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="script.js">
console.log(amazingCars);
var amazingCars =["BMW","Lexus","Ford","Mercedes"];
amazingCars.pop();
console.log(amazingCars);
amazingCars.sort();
console.log(amazingCars);
amazingCars.length;
console.log(amazingCars.length);
</script>
</body>
</html>
The directions for the assignment are the following:
Link the JavaScript page to the HTML page.
Create an array named amazingCars that contains four values:
BMW
Lexus
Ford
Mercedes
Remove the last value from the array
Next, sort the array in alphabetical order
Lastly, find the length of the array
I dont understand why it isn't displaying or the reason of this issue
If you are putting your JS code in html just add them between<script></script> tag.
You do not need to add src for script unless your JavaScript code is coming from a separate script file.
The src attribute specifies the URL of an external script file.
If you want to run the same JavaScript on several pages in a web site,
you should create an external JavaScript file, instead of writing the
same script over and over again. Save the script file with a .js
extension, and then refer to it using the src attribute in the
<script> tag
.
As per the instructions that you are following : "Link the JavaScript page to the HTML page."
Create another file "index.js" in your project directory.
Move your js code into the index.js file in your project directory and then use :
<script src="index.js"></script> in your HTML.
Firstly, make the <script src="index.js"></script> seperate from the code in the head, also unless if you have a seperate javascript file you dont need the src part at all, and secondly the first console.log outputs it before definition, creating an error. I hope this helped
You have to change <script src="script.js"> to <script>.
Alternatively you can keep it this way and create a script.js file and copy paste all the code you have inside the <script> tag to the file. This file need to be in the same folder as your index.html file.
So, I have this really weird error. I am trying to link to an external JS file from my HTML file. Whatever I do, the functions in that external JS file can not be called.
This is my HTML code:
<html>
<head>
<meta charset="UTF-8">
<script src="cookies.js"></script>
<script type="text/javascript">
//some other JavaScript...
function test() {
extTest();
}
</script>
</head>
<body>
<button type="button" onclick="test();">Test</button>
</body>
</html>
And this is my external JavaScript file:
function extTest() {
alert("Hello world");
}
(I simplified both code blocks to contain only the necessary lines.)
So, whenever I click the button, the function extTest() is supposed to open a popup saying "Hello world". But extTest() is not called. Instead, I get a ReferenceError saying "extTest is not defined". The problem occurs in Firefox as well as Chrome and Edge.
Both files (HTML and JS) are in the same directory on my laptop. I tried linking to the JS file with a relative link (as shown in the code above), a relative link using . for current directory (./cookies.js), and an absolute link (/C:/...). I also tried putting the JS file in its own folder and linking to it, it didn't work.
I'd consider myself rather a beginner when it comes to JavaScript, but I already used external JS files and it worked. Do you guys have any idea where this error comes from? I mean, I could put all the code from the external file into the script in the HTML file, but I'm really curious why it's not working the other way.
Any hints are highly appreciated, thank you in advance.
You can use just like this, you don't need to make another function inside because i suppose you make the js code in cookies.js
<html>
<head>
<meta charset="UTF-8">
<script src="cookies.js"></script>
</head>
<body>
<button type="button" onclick="extTest();">Test</button>
</body>
</html>
I'd say initially it looks like you are declaring your function test but not invoking it. Try putting a line below that just has:
test ();
A question, if you similarly invoke your extTest function at the bottom of your external .js file, by which I mean again putting a line that says
extTest(); does it work as intended? If it doesn't, then there may be another issue at hand.
<HTML>
<Head>
<Title>My Test</Title>
<script src="http://someurl.com/test.js"></script>
</Head>
<Body>
This is for test
</Body>
</HTML>
Above mentioned is my HTML code. When I right click my page & hit "view source" I can see exact same code.
But what my requirement is, instead of <script>...</script> I want actual javascript code from test.js should be displayed when I am hitting "view source".
I tried to put it in iframe, but it didn't worked.
What you want is impossible to achieve with HTML and an external JS file.
There is no way to make View Source show anything other than the actual source code of the URL.
If you want to look at the JavaScript source code, then look at the URL for the JavaScript. Most browsers will hyperlink it in View Source to make it easy to do.
If you really want the JS to be displayed as part of the source of the HTML document, then you have to make it part of the HTML document. Remove the src attribute and copy the contents of the JS file to between the start and end tag of the script element.
add a <script> tag in the <head> section
<script src="path/to/test.js"></script>
I'm very new to html and trying to make a website. So far, I've got an html file that has the header for my site and I would like to use it in all the pages I create for the site using jQuery's load function.
So basically what I want to do is load Header.html into Page.html.
This is the code in Page.html:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hello</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Header").load("Header.html");
});
</script>
</head>
<body>
Hi
<div id="Header"></div>
</body>
</html>
Header.html looks something like this:
<div id="Header_Name">Adabelle Combrink</div>
<div id="Header_GameProgrammer">Game Programmer</div>
The only thing that comes up on the screen is "Hi" at the moment.
Looks good, apart from the backslashes in the src attributes should be forward slashes.
Is there any particular error you are getting?
Also, as has been pointed out, PHP would be better suited to this job.
<?php include 'header.php'; ?>
Aside from the accessibility question, there might also be a negative SEO impact.
Edit:
Assuming your path to jQuery is correct, then the code you posted should work (it does for me).
Things to try / be sure of:
You are running this on a server (i.e. not just opening the file in your browser, as this will fall foul of the same origin policy). Check that the address in your address bar doesn't start with file://
Make sure that the path to the jQuery library is correct
Make sure that Page.html and Header.html are in the same folder
Check your broswer's error console. Instructions.
you can use iframe for including html file into the div.
Otherwise you have to follow some server side include method.
like, in php <?php include("includes/header.php"); ?>
your code looks fine.
are you running the site on a web server, such as out of visual studio (iis express) ?
You can't run it locally. Ajax wont work that way.
Open your page in chrome, and press f12 to open up dev tools.
go to the network tab.
do you see the ajax request being fired on the load function?
by the way, regarding the header div,
a div is not a self-closing tag. Its a container. Its best that you close it using a closing tag.
Otherwise you might get unpredictable results in some browsers. ( I have not checked in a while, but it was that way a few years ago, probably in explorer 8)
jQuery(document).ready(function(){
jQuery.ajax({
url: 'header.html',
type: 'get',
success:function(data){
jQuery('#header_container').html(data);
}
});
});
<div id="header_container">....</div>
The content returned by the request will go inside the header_container div
Div elements require a closing div tag like so <div></div>.
there is no need to call small pieces of code from another js file, just write your code in the head element like so:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello</title>
<script type="text/javascript" src="../Scripts/jQuery.js"></script>
<script>
$(document).ready(function() {
$("#Header").load("../Templates/Header.html");
});
</script>
</head>
<body>
<div id="Header"></div>
</body>
</html>
Don't be afraid to ask for more info.
$.load() http://api.jquery.com/load/