I'm creating a site using Harp, and I was wondering if there is a way to use Jade blocks alongside the normal != yield way of working. Basically, for page specific scripts, I'd like to pass a block into my layout. At the moment, whatever I have in a block in my template just gets passed through as is into my layout.
For example:
// _layout.jade
html
head
title Hello, world
body
!= yield
div Random delimiter
block scripts
// index.jade
h1 Hello, world
block scripts
script(src='/some/script.js').
div Not working
Outputs:
<html>
<head>
<title>Hello, world</title>
</head>
<body>
<h1>Hello, world</h1>
<div>Not working</div>
<div>Random delimiter</div>
</body>
</html>
Any ideas?
Yes, you could do something like this:
// _custom_layout.jade
html
head
title Hello World
body
block main_content
//- Default main content
div Delimiter
block scripts
//- Default scripts here
And
// index.jade
extends _custom_layout.jade
block main_content
h1 Hello From Index
block scripts
script(src='/some/script.js').
That should output
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello From Index</h1>
<div>Delimiter</div>
<script src="/some/script.js"></script>
</body>
</html>
To take advantage of jade's block feature, use something other than _layout.jade because that file name has a defined use in Harp. You'll have to assign the custom templates to pages using _data.json.
I haven't tested this code, comment if there's anything wrong with it and I'll fix it.
Related
I'm building a C# app (WinForm). I have a javascript component that changes the background color of the webpage. If I put the JS directly into the HTML file it works (ie the background color of the webBrowser appears red).
<!DOCTYPE html>
<<HTML>
<HEAD>
<TITLE>Title</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<HR>
<script>
var setBackColor = function () {
document.body.style.backgroundColor = "red";
}
setBackColor();
</script>
<H1>This is a Header</H1>
<H2>This is a Medium Header</H2>
<P> This is a new paragraph!
<P>
<B>This is a new paragraph!</B>
<BR><B><I>This is a new sentence without a paragraph break, in bold italics.</I></B><BR>
<HR>
</BODY>
</HTML>
When I put the JS in an external file and try to access it through the path shown, I get an error that reads...
"The value of the property 'setBackColor' is null or undefined, not a Function object."
<!DOCTYPE html>
<<HTML>
<HEAD>
<TITLE>Title</TITLE>
</HEAD>
<BODY BGCOLOR="FFFFFF">
<HR>
<script type="text/javascript" src=c:\users\local user\documents\visual studio 2015\Projects\HTMLTestApp\HTMLTestApp\Scripts\JavaScript1.js></script>
<body onload="setBackColor()"></body>
<H1>This is a Header</H1>
<H2>This is a Medium Header</H2>
<P> This is a new paragraph!
<P>
<B>This is a new paragraph!</B>
<BR><B><I>This is a new sentence without a paragraph break, in bold italics.</I></B><BR>
<HR>
</BODY>
</HTML>
I am a complete novice coder, so I don't know what I am doing wrong.
Okay this is more of an HTML and javascript thing than it is a web browser control thing.
Take a look at w3schools on the src attribute of scripts.
So first off, you will need the URL for your src attribute in quotes.
Secondly people usually have some kind of directory structure setup with the webpages so they normally use relative paths so that when they copy over from Dev environment on to their webserver it still works.
So if your script folder is one below the folder with the HTML in it then you would use this as your script tag :
<script src="Scripts/JavaScript1.js"> </script>
Also you have your body tag declared twice. That is too many times.
It should be easy,
but as easy as it should be I can't solve the problem.
If I'm typing the following HTML and JS code into an online editor,
everything works fine but if I'm typing this into my (offline) editor it won't work.
Here's the online code:
http://jsbin.com/kenurunahu/1/edit?html,js,output)
I bet it has something to do with the loading order and how the files are linked.
Thats how my (lokal) HTML-file looks like (where the files are linked):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" content="Index.css">
<script src="Script.js"></script>
</head>
<body>
<p id="demo">
something
</p>
</body>
</html>
Many Thanks for Help!
[Update]
Firefox and Chrome display the JS file. Sometimes I get an error message that says 'innerHTML is null', but if I write the same code into the console everything works fine.
you have the error when the js script is loaded before the html dom is fully loaded by the browser. A simple solution for your testing is to place the script include at the end of your html page, like this :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" content="Index.css">
</head>
<body>
<p id="demo">
something
</p>
<script src="Script.js"></script>
</body>
</html>
A better solution is to run your script only when the dom is fully loaded. For example with the body onload event :
<body onload="yourFunc()">
Or event better by using only js code, for example with jquery ready function or by writing a simple custom handler that should work on all major browsers :
document.addEventListener("DOMContentLoaded", function(event) {
//call your func here
});
Hope that helps.
A few guesses:
Capitalization is important. If the file is named script.js do not link to Script.js
Is your js file in the same folder as the index.html document? Because that is what you are saying.
Normally, we arrange our file structure something like this:
public_html
- css
- js
- img
- inc
If your styles/scripts are stored in sub-folders, such as js and css, then you must amend your references to:
<link rel="stylesheet" content="css/Index.css">
<script src="js/Script.js"></script>
As a good practice, your scripts should be placed at the closing of body tag. External scripts are blocking and hence it would make sense we do not put them at the top. Also, when your script placed at the top runs, your DOM may not be ready, which means any element your script is trying to access may not be present in DOM at all which results in your error.
Hence, all your scripts should be at the closing of body tag. That way when the script loads and runs, you can be assured that the DOM is ready.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" content="Index.css">
</head>
<body>
<p id="demo">
something
</p>
<script src="Script.js"></script>
</body>
</html>
This http://webcomponents.org/polyfills/html-imports/ says following:
Under native imports, <script> tags in the main document block the loading of imports.
why then this:
<html>
<head>
<script>
console.log('index');
</script>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="some-elt.html">
</head>
<body>
</body>
</html>
and some-elt.html:
<html>
<head>
<script>
console.log('import');
</script>
</head>
<html>
produces in chrome (native imports):
import
index
and in fireforx (polyfill):
index
import
?
It looks like <script> tags are blocked while imports are being loaded.
Is there also some way to ensure js execution before loading any imports?
I have created a quick pen here with markup you supplied.
It seems to be producing identical and correct output(index then import)for me in both FF and chrome.
But it is equally possible that you might be seeing something different in your console. Culprit here is not how the way script element is parsed,but rather console APIs. It is a non standard feature and might be returning different results for you as explained here
console.log is not standardized, so the behavior is rather undefined,
and can be changed easily from release to release of the developer
tools
To answer your question, script tag by design is blocking therefore any script which you put before your link rel="import" will be executed before browser encounters import tag.
Here is another pen(http://codepen.io/vishwaabhinav/pen/bEYwaK) to prove this(Also available below), where I am creating and appending divs to body in both imported and main document. It also works as expected i.e. index node is appended to body before import node.
<html>
<head>
<script>
var node = document.createElement('div');
node.innerHTML = 'Index';
document.body.appendChild(node);
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.20/webcomponents-lite.js"></script>
<link rel="import" href="http://codepen.io/vishwaabhinav/pen/XXzjZW.html">
</head>
<body>
</body>
</html>
sorry everybody, it appears to be someting wrong with build scripts. The resulting html output is as following:
<!DOCTYPE html><html><head>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.20/webcomponents-lite.js"></script>-->
<link rel="import" href="some-elt.html">
</head>
<body>
<script src="index.js"></script></body></html>
https://github.com/PolymerElements/polymer-starter-kit/issues/669
I'd like to include a template html with angularjs like:
<div ng-include src="'template/slider.html'"></div>
I will take the template from http://www.jssor.com, which requires also some <head><script>... tags in the template itself:
Question: is it the correct way to create a template with a schema as follows, or should I move the elements somewhere else?
slider.html:
<head>
<script src="jssor.slider.min.js"></script>
<script>
jssor_slider1_starter = function (containerId) {
...
};
</script>
</head>
<div id="slider1_container">
<!-- Slides Container -->
<div ... />
<script>jssor_slider1_starter('slider1_container');</script>
</div>
Your angular templates do not need to have the <head> tag, there should only be one <head> tag in your html page, and it should not be enclosed between the <body> tags. Having multiple <head> tags breaks validation and will cause unpredictable behavior.
I have a Node app using Express and Jade. I'm pulling json data from an API and I want that data to be refreshed on the page periodically. So, my thought was to have an empty div, then inject the contents of a different route/template into that div and use setInterval to refresh it. It loads initially, but never refreshes. Here's the relevant bits of my code:
board.jade:
extends layout
block content
div(class='bodyBlock')
h1= title
div#data
layout.jade:
!!! 5
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
script(type='text/javascript')(src='//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js')
body
block content
script(type='text/javascript').
$(document).ready(function(){
setInterval ($("#data").load("/currentdev"), 5000 );
});
The /currentdev route loads data.jade:
ul
each card in inprogresscards
li(style='margin-bottom: 5px')
b #{card.color} #{card.name} #{card.idShort}
So, like I said, /currentdev is being loaded into #data initially and displaying properly on my page. But it never refreshes. It seems setInterval is acting more like setTimeout...What am I missing? Thanks...
Oh, and here's the generated HTML:
<!DOCTYPE html>
<html>
<head>
<title>Current Development Board</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div class="bodyBlock">
<h1>Current Development Board</h1>
<div id="data"></div>
</div>
</body>
<script type="text/javascript">$(document).ready(function(){
setInterval ($("#data").load("/currentdev"), 5000 );
});</script>
</html>
I think you're missing the function wrapper, like this:
setInterval(function() { $("#data").load("/currentdev"); }, 5000);
Otherwise your load() gets called immediately and its return value is what is actually used for the function argument for setInterval.