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.
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:
How to redirect one HTML page to another on load
(24 answers)
Closed 8 years ago.
In HTML is there a way to redirect to a different web page without there being a notification? I really need this for a website so that people cannot access work in progress pages and are redirected to the home page. But everything I have tried is an optional redirection.
<meta http-equiv="refresh" content="0; url=http://yoururl.com/" />
or if you want to use JS
<script type="text/javascript">
window.onload = function () { location.href = "/root/home.html"; }
</script>
also works.. just tested it on my server...
<html>
<head>
</head>
<body>
<script>
window.setTimeout(function() {window.location.assign("http://www.google.com")},3000);
</script>
</body>
</html>
You can use this code. What it does is when you put this Javascript to your html page it will wait 3000 miliseconds and then it automatically redirects to google.com. SetTimeout function is used to wait the specified number of milliseconds, and then execute the specified function.That's what I have done in the above code. window.location.assign("your location name here") is the function which will redirect you to the specified page. You can use this function directly too if you do not want to wait for specific time.
You haven't specified what (if any) server-side technologies you're using, but I've got to go for a bit, so I'll leave this here in case it's of any use.
If you're using ASP or ASP.NET, you can use Server.Transfer. This will stop the rendering of the current page, without stopping the current request, and allow you to start the rendering of another page instead. The net effect is that the URL in the browser stays the same, but a different page is sent to the client.
I'm currently trying to build a new website, nothing special, nice and small, but I'm stuck at the very beginning.
My problems are clean URLs and page navigation. I want to do it "the right way".
What I would like to have:
I use CodeIgniter to get clean URLs like
"www.example.com/hello/world"
jQuery helps me using ajax, so I can
.load() additional content
Now I want to use HTML5 features like pushstate to
get rid of the # in the URL
It should be possible to go back and forth without a page refresh but the page will still display the right content according to the current URL.
It should also be possible to reload a page without getting a 404 error. The site should exist thanks to CodeIgniter. (there is a controller and a view)
For example:
A very basic website. Two links, called "foo" and "bar" and a emtpy div box beneath them.
The basic URL is example.com
When you click on "foo" the URL changes to "example.com/foo" without reloading and the div box gets new content with jQuery .load(). The same goes for the other link, just of course different content and URL.
After clicking "foo" and then "bar" the back button will bring me back to "example.com/foo" with the according content. If I load this link directly or refresh the page, it will look the same. No 404 error or something.
Just think about this page and tell me how you would do this.
I would really love to have this kind of navigation and so I tried several things.
So far...
I know how to use CodeIgniter to get the URLs like this. I know how to use jQuery to load additional content and while I don't fully understand the html5 pushstate stuff, I at least got it to work somehow.
But I can't get it to work all together.
My code right now is a mess, that's the reason I don't really want to post it here. I looked at different tutorials and copy pasted some code together. Would be better to upload my CI folder I guess.
Some of the tutorials I looked at:
Dive into HTML5
HTML5 demos
Mozilla manipulating the browser history
Saner HTML5 history
Github: History.js
(max. number of links reached :/)
I think my main problem is, that everybody tries to make it compatible with all browsers and different versions, adds scripts/jQuery plugins and whatnot and I get confused by all the additional code. There is more code between my script-tags then actual html content.
Could somebody post the most basic method how to use HTML5 for my example page?
My failed attemp:
On my test page, when I go back, the URL changes, but the div box will still show the same content, not the old one. I also don't know how to change the URL in the script according to the href attribute from the link. Is there something like $(this).attr('href'), that changes according to which link I click? Right now I would have to use a script for every link, which of course is bad.
When I refresh the site, CodeIgniter kicks in and loads the view, but really only the view by itself, the one I loaded with ajax, not the whole page. But I guess that should be easy to fix with a layout and the right controller settings. Haven't paid much attention to this yet.
Thanks in advance for any help.
If you have suggestions, ideas, or simple just want to mention something, please let me know.
regards
DiLer
I've put up a successful minimal example of HTML5 history here: http://cairo140.github.com/html5-history-example/one.html
The easiest way to get into HTML5 pushstate in my opinion is to ignore the framework for a while and use the most simplistic state transition possible: a wholesale replacement of the <body> and <title> elements. Outside of those elements, the rest of the markup is probably just boilerplate, although if it varies (e.g., if you change the class on HTML in the backend), you can adapt that.
What a dynamic backend like CI does is essentially fake the existence of data at particular locations (identified by the URL) by generating it dynamically on the fly. We can abstract away from the effect of the framework by literally creating the resources and putting them in locations through which your web server (Apache, probably) will simply identify them and feed them on through. We'll have a very simple file system structure relative to the domain root:
/one.html
/two.html
/assets/application.js
Those are the only three files we're working with.
Here's the code for the two HTML files. If you're at the level when you're dealing with HTML5 features, you should be able to understand the markup, but if I didn't make something clear, just leave a comment, and I'll walk you through it:
one.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>One</title>
</head>
<body>
<div class="container">
<h1>One</h1>
Two
</div>
</body>
</html>
two.html
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script src="assets/application.js"></script>
<title>Two</title>
</head>
<body>
<div class="container">
<h1>Two</h1>
One
</div>
</body>
</html>
You'll notice that if you load one.html through your browser, you can click on the link to two.html, which will load and display a new page. And from two.html, you can do the same back to one.html. Cool.
Now, for the history part:
assets/application.js
$(function(){
var replacePage = function(url) {
$.ajax({
url: url,
type: 'get',
dataType: 'html',
success: function(data){
var dom = $(data);
var title = dom.filter('title').text();
var html = dom.filter('.container').html();
$('title').text(title);
$('.container').html(html);
}
});
}
$('a').live('click', function(e){
history.pushState(null, null, this.href);
replacePage(this.href);
e.preventDefault();
});
$(window).bind('popstate', function(){
replacePage(location.pathname);
});
});
How it works
I define replacePage within the jQuery ready callback to do some straightforward loading of the URL in the argument and to replace the contents of the title and .container elements with those retrieved remotely.
The live call means that any link clicked on the page will trigger the callback, and the callback pushes the state to the href in the link and calls replacePage. It also uses e.preventDefault to prevent the link from being processed the normal way.
Finally, there's a popstate event that fires when a user uses browser-based page navigation (back, forward). We bind a simple callback to that event. Of note is that I couldn't get the version on the Dive Into HTML page to work for some reason in FF for Mac. No clue why.
How to extend it
This extremely basic example can more or less be transplanted onto any site because it does a very uncreative transition: HTML replacement. I suggest you can use this as a foundation and transition into more creative transitions. One example of what you could do would be to emulate what Github does with the directory navigation in its repositories. It's an intermediate manoever that requires floats and overflow management. You could start with a simpler transition like appending the .container in the loaded page to the DOM and then animating the old container to {height: 0}.
Addressing your specific "For example"
You're on the right track for using HTML5 history, but you need to clarify your idea of exactly what /foo and /bar will contain. Basically, you're going to have three pages: /, /foo, and /bar. / will have an empty container div. /foo will be identical to / except in that container div has some foo content in it. /bar will be identical to /foo except in that the container div has some bar content in it. Now, the question comes to how you would extract the contents of the container through Javascript. Assuming that your /foo body tag looked something like this:
<body>
foo
bar
<div class="container">foo</div>
</body>
Then you would extract it from the response data through var html = $(data).filter('.container').html() and then put it back into the parent page through $('.container').html(html). You use filter instead of the much more reasonable find because from some wacky reason, jQuery's DOM parser produces a jQuery object containing every child of the head and every child of the body elements instead of just a jQuery object wrapping the html element. I don't know why.
The rest is just adapting this back into the "vanilla" version above. If you are stuck at any particular stage, let me know, and I can guide you better though it.
Code
https://github.com/cairo140/html5-history-example
Try this in your controller:
if (!$this->input->is_ajax_request())
$this->load->view('header');
$this->load->view('your_view', $data);
if (!$this->input->is_ajax_request())
$this->load->view('footer');
I'm sure this topic comes up all the time,
But I can't seem to fine a concise answer.
I've got a vertical menu bar that I want to reuse in webpages (>20).
The Menu Bar is coded in HTML and uses uses: UL, LI, A, <Div> tags, and CSS. We need this:
Reusable
Maintainable
Scalable
So we don't have to modify all pages every time we add a page.
We'd rather avoid a coding approach if possible. We could live with just one master file that we edit as needed. Since we're using CSS and <div>s, I don't think frames scale for us. What can we do?
Server side includes are the way to go if you don't want to use a programming language.
They take this form:
<!--#include virtual="menu.html" -->
and will be inserted in the page wherever you put that tag in your HTML. It requires server side parsing, so your web server must have server side includes enabled. You can try it out, and if it doesn't work, contact your server host to see if you can get them enabled. If it's Apache, there's a method of enabling them via .htaccess files as well.
In order to do this, you'll have to use some server side technology. For instance you could...
include them in php
put them in the master page in .net
put this in a partial or a layout page in rails
Some reading:
http://us.php.net/manual/en/function.include.php
http://msdn.microsoft.com/en-us/library/wtxbf3hh.aspx
Another solution would be to create all this using Javascript, but please don't do it like that :)
html:
<script type="text/javascript" src="hack.js"></script>
<div id="mymenu">
</div>
hack.js:
function createMenu(){
$("#mymenu").html("all the html of your menu");
}
Without any server side script or Javascript you can use object or iframe tags.
http://www.w3schools.com/tags/tag_object.asp
http://www.w3schools.com/tags/tag_iframe.asp
The only thing to care is to indicate target="parent" in links.
Hope it helps
Using a w3 script..
index.html
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="header.html"></div>
<div w3-include-html="nav.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
header.html
<h1>Title</h1>
nav.html
<h2>Your nav</h2>
See also: http://www.w3schools.com/howto/howto_html_include.asp
And don't forget to test this code on your localhost.
I've done this two separate ways - one using server side (PHP) and one using Javascript includes (for demos that need to be able to run without any internet connection or server capabilities).
For PHP includes your pages will have to end with .php rather than .htm or .html, and these are very ideal to replace your header, footer, navigation, etc. Anything that is repeated on multiple pages.
Basically you would create your normal code then copy and paste the code you want to break out - in this example, your navigation - and save it in another file called (for example) inc_navigation.htm (this page can be called .htm).
Then in your actual pages you'd use the following code:
<?php include('inc_navigation.htm') ?>
That would insert your navigation at that point, if you had a change to make you'd make it to the .htm file and it would propagate to any page with that included.
For javascript includes you will have to include the following line at the top of every document where you want to include your navigation:
<script type="text/javascript" src="includes.js"></script>
Then you'll create a document called includes.js.
At the top of this document you'll declare your navigation variable:
var navigation = new Array(); // This is for the navigation.
Then a little ways down in that same document you need to actually outline your navigation code (the line numbers in the square brackets are crucial - keep them in order and start with 0 - you cannot have line breaks in this code so every line of code has to be a new line):
// ==================== Navigation ==================== //
navigation[0] = '<div id="tab_navigation">';
navigation[1] = '<ul id="dropline">';
navigation[2] = '<li><b>Home</b></li>';
navigation[3] = '<li><b>About Us</b></li>';
navigation[4] = '</ul>';
navigation[5] = '</div><!-- Close TAB NAVIGATION -->';
Then a little ways after that you'll actually insert the javascript that will put that code into your page (it doesn't actually put it there but rather makes it accessible in the page without actually altering the code of the .htm page - so if you view source you'll see the reference to the code not the code itself).
function show(i)
{
for (x in i)
{
document.write(i[x]+'\n')
}
}
Finally - in your .htm document, say for your index.htm page, you'll replace your navigation code (that you put in the above block called navigation) with this:
<script type="text/javascript">show(navigation);</script>
Where that name after SHOW and in the parenthesis is the name of your variable (declared earlier).
I have sites showing both methods in use if you'd like to see them just send me a message.
I was facing the same thing. Then, I created a new file for storing the html of the navigation bar.
I created a file navbar.html which had all my navigation bar code.
Then, in your main html file where you want navigation bar, just include this file by using jquery.
$(document).ready(function() {
$('#navigation').load('navbar.html');
});
Then at the place where you want navigation bar, just add this line:
<div id="navigation"></div>
As a modern answer to a six year old question: Web Components are specifically reusable HTML components, and Polymer is possibly the most popular implementation of it at the moment. Currently virtually no browser has native support for Web Components, so at the very least a Javascript polyfill is required.
If you would use PHP, all you have to do is use the include command, no coding beyond this one command.
Also, check out server side includes
So far one of the best solutions I have found is to model the menus after the Son of Suckerfish XHTML/CSS solution that is pretty well documented on the internet now combined with some logic on the server to render the unordered list. By using unordered lists you have a couple different options on how to output the results, but as long as the menu has some basic hierarchy you can generate it. Then for the actual page all you need to do is include a reference to the menu generating function.
I was searching for a way to write a reusable navigation menu that toggled(show/hide) when clicking a button. I want to share a solution that worked for me in case anyone else is looking to do the same. This solution uses jQuery, html, and css.
Add this line of code to your head tag in your main index.html file:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Add div for your nav in body tag:
<div id="mySidenav" class="sidenav"></div>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#mySidenav").load("nav.html").toggle().width("400pt");
});
});
</script>
Create a html file that will be where your navigation menu resides. My file is called nav.html and inside the file the contents look like this:
have you found your one true musubi?`
item2
item3
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.