For some reason I didn't use JSP in my JAVA project and I only use plain html. Now I want to use jawr bundle files in my plain html, as I have searched, it should include a jawr_loader.js as following:
<script type="text/javascript" src="./jawr_loader.js" ></script>
<script>
JAWR.loader.style('/bundles/all.css');
JAWR.loader.script('/bundles/global.js');
</script>
I don't know if there is a jawr_loader.js already exist or I need to create one. If I need to create one, what the content I should write in the file,
Sorry maybe this problem is too stupid, but I new to java project using jawr, and I look for solution for few days but still cannot find answer, plz help me, thx.
Related
I currently have a pageMaster file which is an HTML file. I am trying to keep it clean. I am linking my javascript files to this pageMaster for example <script type="text/javascript" src="/resources/js/mainpage.js"></script>. I would like to link an HTML page this pageMaster to avoid having a clutter. Is this possible?
This is what i'm attempting <script="text/javascript" src="/resources/state-icons.html"></script> but it is not receiving back the icons I am expecting
Since html isn't a script, you can't load it as an script (using <script type="text/javascript"> does't make a lot of sense, does it?).
You have to use a preprocessing language, like php, which will build the output on the server. Using php, you could have something like:
<p>Some html
<?=file_get_contents(__DIR__.'/resources/state-icons.html')?>
...more html...</p>
Or:
<?php
include(__DIR__.'/header.php');
?>
...html...
If you can't or don't want to use a server-side language, you can do this with javascript. You can download the contents of the other page and insert them wherever you want (I will use jQuery just because it's easy to write, you don't actually need it):
HTML:
<span class="some-placeholder-for-state-icons"></span>
JS:
$(function() {
$.get('/resources/state-icons.html',function(html) {
$(".some-placeholder-for-state-icons").html(html);
});
});
Of course, this way will be slower and produce more requests per page view. Which one is better depends on what you want to achieve.
You can't do something like this with html. This is possible only for javascript file or stylesheets (css)
This question already has answers here:
What are the new frames? [closed]
(3 answers)
Closed 6 years ago.
Good night everyone.
I would like to know how to ass header or footer on an html page:
I have my index.html and then other html pages. I use the same navigation bar and header / footer in almost every page. I don't want to go on every .html file and change the header on each and everyone of them every time something changes. Therefore I want to have a header.html file and then include it on every page, so I just have to edit one single file and it updates the rest.
I know someone told me I can do it on php but I wanted to do it on html first, because I would like to not need a server to see the page in the mean time.
I searched and tried every thing I saw on the internet, for instance the href and other things and for me, it did not work.
Thanks in advance!
This will require you to use either JavaScript or PHP to remove the redundancy of code in multiple web pages. With Javascript, you could have an empty div tag with id attribute and attach a JS method on an event HTML attribute, possibly onLoad. Then call a JS method on that event onLoad=populate() and in that method, you can do something like document.getElementById("divID").innerHTML = 'HTML code here'
This is what it would look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body onload='populate(example)'>
<div id="example"> </div>
<script type="text/javascript">
function populate(divID){
document.getElementById(divID).innerHTML = "<h1> HELLO! </h1>"
}
</script>
</body>
</html>
You can call this header.js instead of having the JS code in the HTML file and import that script into multiple HTML docs with 1 line:
<script src="folder/to/header.js"></script>
With PHP, you would create a module called HeaderView and include that into your HomepageView.php file. It's up to you to choose between them. HTML and CSS are purely static, hardcoded web pages. JavaScript and/or PHP are used to make them dynamic. This method is a bit more complicated.
I've got a little project in Angular. I'm trying to keep everything in the Single Responsibility way and
I'm quite happy with me app structure. The only think I feel is not looking very good is index.html. All js files are included on
the bottom of the file and I do not like the look of it. I'm adding more files (controllers, services, etc) as I go and the list
could grow quite long.
So my question is: Is it normal,that the index file includes all these or is there way to move all these in a single file and reference that in the index.html?
<html>
<head>
...
</head>
<body>
...
...
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-route.js"></script>
<script src="assets/js/angular-touch.js"></script>
<script src="assets/js/angular-sanitize.js"></script>
<script src="assets/js/angular-animate.min.js"></script>
<script src="assets/js/jquery-2.1.3.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="app/app.js"></script>
<script src="app/app.routes.js"></script>
<script src="controllers/controllerOne.js"></script>
<script src="controllers/controllerTwo.js"></script>
<script src="controllers/controllerThree.js"></script>
<script src="directives/directiveOne.js"></script>
<script src="directives/directiveTwo.js"></script>
<script src="services/serviceOne.js"></script>
<script src="services/serviceTwo.js"></script>
<script src="services/serviceThree.js"></script>
</body>
</html>
Update 07/04/2015
I have end up using Gulp. For anyone looking for bit of help on this, I have followed this small tutorial: https://medium.com/#dickeyxxx/best-practices-for-building-angular-js-apps-266c1a4a6917
There are few possible solutions that I know that will automatically inject your script tags for index.html:
Using Gulp - Task / Build runner.
You can use Gulp-Inject which is:
a stylesheet, javascript and webcomponent reference injection plugin
for gulp
Grunt - JavaScript Task Runner
You can use Grunt-Injector for:
Inject references to files into other files (think scripts and stylesheets into an html file)
Another option which I didn't use is RequireJS.
See - http://www.startersquad.com/blog/angularjs-requirejs/
You can find many discussions on Gulp vs Grunt, Both will make your life easier and solve your problem.
See:
Grunt vs Gulp
Another Grunt vs Gulp
What i would suggest is using a task runner of some sort to concatenate all your files, and build them in to something like a single 'app.js' file.
My personal preference is gulp, but another popular alternative is grunt. Here is a nice introduction to using gulp with angular which I suggest checking out.
Using require.js , u can manage all tags in one line
This approach is utterly normal for a development stage as it facilitates debugging. You shouldn't be worried about the way it looks.
However, when releasing your application to production you should concatenate all scripts into one single file as this'll significantly boost your bootstrap time. There are different ways of achieving this goal and usually they involve usage of front-side build tools like Grunt or Gulp. It's is up to you to decide which tool will work best for you.
Moreover, require.js has built-in modularity with a easy-to-use tool for concatenation, though, it's argued that Angular benefits from using it as Angular has it's own modularity. The main advantage of require.js is that there's no need to pay attention to order in which your files are concatenated since it's responsibility of the tool. Unfortunately, it costs a lot of boilerplate code.
As a simple solution, in HTML5 you can do this
<link rel="import" href="header.html">
and place all your
<script src="libs/....js"></script>
<script src="libs/....js"></script>
<script src="libs/....js"></script>
in the header.html
It's ok. Separating different scripts into different files is a part of basic recommandations for code styling.
The best way is to use Google Style recommendations in work. These 2 are for html&css and javascript:
https://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
I've never been able to figure this out!
Yeah I copy the java script in but what is the html code required and css??
Their website doesn't explain any of that (unless I am missing it!!)
If someone could please break it down for me I would be very grateful
Actually used this in a site before, this is what I have in my code:
In the header, assuming you have it installed in the /soundmanager2/ directory:
<script type="text/javascript" src="soundmanager2/soundmanager2.js"></script>
<script type="text/javascript">
soundManager.url = 'soundmanager2/';
soundManager.useHTML5Audio = false;
soundManager.useFlashBlock = false;
soundManager.debugMode = false;
</script>
Then on each element you want to play a sound with on click, include this attribute:
onClick="soundManager.play('Name','path/to/filename.mp3')"
Or you can simply call soundManager.play wherever you want.
Granted it is not the easiest interface in the world in terms of copy and paste code and your good to go.
However all of the demos on there site have all the CSS / HTML you need to get started writting your own themes and templates.
There site is mor about the JS behind the scenes then the look of the interface.
http://www.schillmania.com/projects/soundmanager2/demo/play-mp3-links/ (as an example)
Although I am sure you were hoping for downloadable code I hope this at least gets you pointed in the right direction.
Is there a decent way with static HTML/XHTML to create common header/footer files to be displayed on each page of a site? I know you can obviously do this with PHP or server side directives, but is there any way of doing this with absolutely no dependencies on the server stitching everything together for you?
Edit: All very good answers and was what I expected. HTML is static, period. No real way to change that without something running server side or client side. I've found that Server Side Includes seem to be my best option as they are very simple and don't require scripting.
There are three ways to do what you want
Server Script
This includes something like php, asp, jsp.... But you said no to that
Server Side Includes
Your server is serving up the pages so why not take advantage of the built in server side includes? Each server has its own way to do this, take advantage of it.
Client Side Include
This solutions has you calling back to the server after page has already been loaded on the client.
JQuery load() function can use for including common header and footer. Code should be like
<script>
$("#header").load("header.html");
$("#footer").load("footer.html");
</script>
You can find demo here
Since HTML does not have an "include" directive, I can think only of three workarounds
Frames
Javascript
CSS
A little comment on each of the methods.
Frames can be either standard frames or iFrames. Either way, you will have to specify a fixed height for them, so this might not be the solution you are looking for.
Javascript is a pretty broad subject and there probably exist many ways how one might use it to achieve the desired effect. Off the top of my head however I can think of two ways:
Full-blown AJAX request, which requests the header/footer and then places them in the right place of the page;
<script type="text/javascript" src="header.js"> which has something like this in it: document.write('My header goes here');
Doing it via CSS would be really an abuse. CSS has the content property which allows you to insert some HTML content, although it's not really intended to be used like this. Also I'm not sure about browser support for this construct.
The simplest way to do that is using plain HTML.
You can use one of these ways:
<embed type="text/html" src="header.html">
or:
<object name="foo" type="text/html" data="header.html"></object>
You can do it with javascript, and I don't think it needs to be that fancy.
If you have a header.js file and a footer.js.
Then the contents of header.js could be something like
document.write("<div class='header'>header content</div> etc...")
Remember to escape any nested quote characters in the string you are writing.
You could then call that from your static templates with
<script type="text/javascript" src="header.js"></script>
and similarly for the footer.js.
Note: I am not recommending this solution - it's a hack and has a number of drawbacks (poor for SEO and usability just for starters) - but it does meet the requirements of the questioner.
you can do this easily using jquery. no need of php for such a simple task.
just include this once in your webpage.
$(function(){
$("[data-load]").each(function(){
$(this).load($(this).data("load"), function(){
});
});
})
now use data-load on any element to call its contents from external html file
you just have to add line to your html code where you want the content to be placed.
example
<nav data-load="sidepanel.html"></nav>
<nav data-load="footer.html"></nav>
The best solution is using a static site generator which has templating/includes support. I use Hammer for Mac, it is great. There's also Guard, a ruby gem that monitors file changes, compile sass, concatenate any files and probably does includes.
The most practical way is to use Server Side Include. It's very easy to implement and saves tons of work when you have more than a couple pages.
HTML frames, but it is not an ideal solution. You would essentially be accessing 3 separate HTML pages at once.
Your other option is to use AJAX I think.
You could use a task runner such as gulp or grunt.
There is an NPM gulp package that does file including on the fly and compiles the result into an output HTML file. You can even pass values through to your partials.
https://www.npmjs.com/package/gulp-file-include
<!DOCTYPE html>
<html>
<body>
##include('./header.html')
##include('./main.html')
</body>
</html>
an example of a gulp task:
var fileinclude = require('gulp-file-include'),
gulp = require('gulp');
gulp.task('html', function() {
return gulp.src(['./src/html/views/*.html'])
.pipe(fileInclude({
prefix: '##',
basepath: 'src/html'
}))
.pipe(gulp.dest('./build'));
});
You can try loading them via the client-side, like this:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>
<div id="headerID"> <!-- your header --> </div>
<div id="pageID"> <!-- your header --> </div>
<div id="footerID"> <!-- your header --> </div>
<script>
$("#headerID").load("header.html");
$("#pageID").load("page.html");
$("#footerID").load("footer.html");
</script>
</body>
</html>
NOTE: the content will load from top to bottom and replace the content of the container you load it into.
No. Static HTML files don't change. You could potentially do this with some fancy Javascript AJAXy solution but that would be bad.
Short of using a local templating system like many hundreds now exist in every scripting language or even using your homebrewed one with sed or m4 and sending the result over to your server, no, you'd need at least SSI.
The only way to include another file with just static HTML is an iframe. I wouldn't consider it a very good solution for headers and footers. If your server doesn't support PHP or SSI for some bizarre reason, you could use PHP and preprocess it locally before upload. I would consider that a better solution than iframes.