Here, the processing website explains two ways to set up the processing library. I'm trying to use the first way. My code:
<html>
<head>
<title>PATHOGEN</title>
</head>
<body>
<script src="processing.min.js"/>
<canvas data-processing-sources="main.pde"/>
</body>
</html>
It works, but what if I don't want all my code on one page? main.pde is gonna get crowded. I've tried writing this:
<script src="processing.min.js"></script>
<script src="blobby.js"></script>
<canvas data-processing-sources="main.pde"></canvas>
But it just gives me a grey canvas.
For all you other people trying to use processing.js for the first time, and if you want to include multiple pages, just write this for your canvas:
<canvas data-processing-sources="blobby.pde main.pde"></canvas>
Just make all your pages end in .pde. For some reason it doesn't want to work for Chrome, (which is really a bummer) but it does work on Safari.
Related
Im looking to figure out how to compile a couple of html pages into one page. like if i made a triangle in one html page, how would i link it with another html page that has a rectangle for example so that they both show up in one page. of course im not trying to figure out how to do this specifically but i want to generally know how to do it.
With jquery you can do it like so:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$("#includeContent").load("fileName.html");
});
</script>
</head>
<body>
<div id="includeContent"></div>
</body>
</html>
source: https://www.codegrepper.com/profile/abutahir
I have a processing program which I want to display on a browser in an html file. I found an instruction on https://cs.nyu.edu/~kapp/cs101/processing_on_the_web/. It still does not show up in my webpage. I also tried it with the same code from the instruction and it still does not show up. I am using chrome and my html code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Bitmap?</title>
<script type="text/javascript" src="processing.js"></script>
</head>
<body>
<h1>Text</h1>
/* #pjs preload="Karte_schweiz_zentriert.jpg","bitmap_zentriert.jpg"; */
<canvas data-processing-sources="bitmap_map_comparison.pde"></canvas>
</body>
</html>
I have the .html file, processing.js, the two .jpg pictures and the bitmap_map_comparison.pde processing code in one folder called bitmap_map_comparison.
Does anyone know where the problem is?
You are using src incorrectly. Unless you have ProcessingJS in the exact same folder as the program, it will not import as it does not exist. Use this instead:
<script src="https://cdn.jsdelivr.net/processing.js/1.6.6/processing.min.js"></script>
Edit: I'm just now realizing that I'm 3 years late and this probably won't help anyone.
I know that it is best practice to have separate files for CSS and JS so that this:
<head>
<style>
<!--CSS code -->
<!--CSS code -->
</style>
</head>
<body>
<!--HTML code -->
<!--HTML code -->
<script>
<!--JS code -->
<!--JS code -->
</script>
</body>
becomes this:
<head>
<link rel="stylesheet" type="text/css" href="my-blackjack-file.css">
</head>
<body>
<!--HTML code -->
<!--HTML code -->
<script src="my-javascript-file.js"></script>
</body>
But is there an equally simple way to do this for the html portion of the code for the sake of better organization? I have seen some suggestions online for including html pages, but they seem to be talking about iframes and use some fairly complex (for me) javascript. Is there something more akin to
<body>
<link rel="stylesheet" type="html" href="my-html-file.html">
</body>
in order to separate a long document into several files that run as if they were on the same page?
This is work in progress and may (or may not) be supported in the next version.
Until then, unless you output the HTML through some server-side technology such as JSPs or Velocity, which support templating, you can only use iframes or AJAX as a workaround for including HTML.
Depending on the development environment you can use partial views.
<body>
#Html.RenderPartial("descriptiveNameHere.html");
<script src="my-javascript-file.js"></script>
</body>
Or something to that effect. There is additional syntax of course, but maybe this will put you on the track you're looking for.
Ultimately you will still have an html file with your "HTML Code". But if you're looking to reduce the complexity of a large file by moving chunks into external files, partial views are a way to do so.
Can anyone tell me why special here?
<html>
<head>
<script src="editor.js"></script>
</head>
<body>
<div id="scripts" class="scripts">
Editor.Execute('<html>Html String</html>');
Editor.Execute('<something>Html String</something>');
</div>
</body>
</html>
document.getElementById("scripts").innerHTML shows something however html dissapears.
Execute('Html String');
Execute('<something>Html String</something>');
It behaves the same way in Firefox and Chrome.
You're running into this issue.
Basically, the browser sanitizes out the HTML tags before your JavaScript can even access the page – you can check in the Chrome elements inspector, your <html> tag is not there.
I guess the answer depends on what exactly you're trying to do, but if you're just trying to output that code onto a web page, you can just escape the characters:
<html>
<body>
<div id="scripts" class="scripts">
Execute('<html>Html String</html>');
Execute('<something>Html String</something>');
</div>
</body>
</html>
Then document.getElementById('scripts').innerHTML will output:
Execute('<html>Html String</html>');
Execute('<something>Html String</something>');
And then you can replace the HTML entities in JavaScript.
Without knowing what you do in that Execute() it is hard to say what is going on there.
Just in case: HTML document can have one and only one <html> node.
I have 3 different links on my homepage. I am trying to have each link go to a page that looks something like this:
<link rel="stylesheet" href="/assets/common/temlate1.css">
</head>
<body>
<div ng-include="'/assets/common/template1.html'" ng-controller="ControlsCtrl"></div>
<script src="/assets/common/template1.js" type="text/javascript"></script>
</body>
I need each link on homepage to have different css, html and js files associated with it. For example:
If I click link 1: the file will look like the one above. If I click link 2, the file will look like this:
<link rel="stylesheet" href="/assets/common/temlate2.css">
</head>
<body>
<div ng-include="'/assets/common/template2.html'" ng-controller="ControlsCtrl"></div>
<script src="/assets/common/template2.js" type="text/javascript"></script>
</body>
And the third link will have the files:
template3.css
template3.html
template3.js
What is the best way to accomplish what I want. I do NOT want to include all css and js files together. What I mean is I do not want to have this at the bottom of my file: The same is true for the css files.
<script src="/assets/common/template1.js" type="text/javascript"></script>
<script src="/assets/common/template2.js" type="text/javascript"></script>
<script src="/assets/common/template3.js" type="text/javascript"></script>
I am only showing you a small portion of the website so that this question is easy to understand. I have a lot of other links in the head section and a lot of js links above the body tag. All of these are common to all 3 templates. Therefore, I would like to use the same file and just replace the 3 areas mentioned above.
How do I accomplish this? I am hoping for a solution in angular. Maybe someone can point me in the right direction.
I think you'll have to define different modules within AngularJS to accomplish this. They can each have their own template.
So in short:
angular.module('page1');
angular.module('page2');
angular.module('page3');
They can all have their own templates, respectively page1.html, page2.html, and so on ...
This looks like a good explanation: https://docs.angularjs.org/guide/module