I am trying to build a universal header file that I can include in each .html file on my site. My header contains several dropdown tabs, and one of the tabs is always highlighted (depending on which page the user is on). So I want to do something like a server side include for the header, but I also want to give it a variable so that it knows which tab to highlight, something like this:
<div class="topmenu">
<ul>
<someScript>
if (variable=="home") {
print "<li class='current'>";
} else {
print "<li>";
}
</someScript>
...
My server is IIS 7 and doesn't support PHP, and I don't want to rename all my files to *.asp so that I can use ASP. How could I go about this?
By the extension I guess you would use Classic ASP. Then something like this should work:
<!--#include file="header.asp"-->
You can put this in each file you want to have a header.
Of couse, you should create that "header.asp" page first ;)
For highligthing the tab of the page you're in, there're several methods.
IMHO, I suggest a clientside script to do that. JS or jQuery of course.
You could check the file name of the URL you are in and give the proper class to the tab so it will be highligthed.
Example ( jQuery needed ):
var currentPage = window.location.pathname.substring(url.lastIndexOf('/')+1);
if(currentPage == 'default.asp') $('li.homepage a').addClass('current');
This simple code retrives the file name and, by it, add a class to the corresponding element in your navigation.
Of course this is a conceptual script, you'd better adapt it to your page.
Related
I have created a template in wordpress for the home page, named: page-home-slider.php
I have chosen the home page to take that custom template.
Until here everything works fine.
Then I have created header-home.php, so a custom header for my home page.
Then in page-home-slider.php I have coded: get_header("home");
Now, when I access the home page from browser, the default header is displayed first and under it, my custom header. Is this normal? I wanted to have just my custom header. Please tell me what I am doing wrong.
PS: I am using JobRoller template if it matters somehow.
As discussed in the comments, you could set a condition in header.php that checks if the requested page has the template using the is_page_template() function:
header.php
if ( is_page_template( 'page-home-slider.php' ) )
{
// do something different
}
Still, you need to check where get_header() is getting called to avoid duplicates.
Reference: https://developer.wordpress.org/reference/functions/is_page_template/
I wish to do the following things:
Insert external html blocks into new html pages
Use the same html header from one html file for a number of pages, without recreating the header again for all the pages
Please help!
You can use HTML Imports which is part of Web Components:
<head>
<link rel="import" href="/path/to/your/file.html">
</head>
If your page does not have to be pure HTML, you should consider using PHP or a similar server-side language.
There are plenty of options, depends on you:
1) use iframes (a lot problems with responsibility) http://www.w3schools.com/tags/tag_iframe.asp
2) ajax call in javascript, load external resource and then print it in placeholder tag (example is with jquery) http://www.w3schools.com/jquery/jquery_ajax_load.asp
3) use some server language/preprocessor (php, ruby, nodejs), depend if you can (need to by installed on server)
4) also there are static page generator, you add marks in your html, and they will compile html with marks to full static html http://hyde.github.io/ for example.
What you are talking about appears to be a process called templating. There are many ways to do this, including writing Javascript to insert pre-written HTML templates into the DOM (the webpage). You might also consider using a pre-written templating library such as http://handlebarsjs.com/ or another library which contains templating functions like http://underscorejs.org/. A simple MVC guide like:
http://blog.ircmaxell.com/2014/11/a-beginners-guide-to-mvc-for-web.html
May be helpful too, to get you started.
In a more practical sense, here's one possible solution:
To begin I would recommend putting the 'blocks' you want to insert in a separate folder. In the website I run, for example, I place them in the \templates folder (or subfolders) but you can more or less call it what you want as long as it makes sense to you. For our purposes let's say we've created block.html and put it in our \templates subfolder...
Now, within each template you will have whatever you want to load in; something like this:
<h2>Title of section</h2>
<p>My text.</p>
Or whatever you'd like. Then, you'll probably want to add an element to your main page which calls some Javascript, which loads your HTML template in when a particular condition occurs. For example, if you wanted to load in our block.html file you might write something like this:
<div id="calling-block" onclick="menuClicked('locationToInsert', 'block')"></div>
Which would call a Javascript function called 'menuClicked()' when we click the div with the id 'calling-block'.
Within the function we would write something like this:
<script>
function menuClicked(insertEl, UrlString, onTemplateLoaded) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById(insertEl).innerHTML = xhttp.responseText;
if (onTemplateLoaded) onTemplateLoaded();
};
};
console.log(UrlString);
xhttp.open("GET", UrlString, true);
xhttp.send();
};
</script>
This is a very simple way of doing things and I'm sure people will tell you there are problems with it, so I would definitely recommend doing your own reading as well, but I hope this covers the very basics.
You need tu use a server side functionality like php, aspx ...
I'm trying to render a .html webpage using #Renderpage() method in Webmatrix but the .html extension is not supported by the method. I guess the method only supports cshtml extensions. Is there a way I can render html pages dynamically on my site (Webmatrix). I dont want to use an iframe because I'll definitely have issues with my jquery files.
I attempted something i feel is safe yet feels unsafe. I resolved to read the html file and inject it to the DOM manually using:
Array html = null;
var mypage = Server.MapPath(page);
if(File.Exists(mypage)){
html = File.ReadAllLines(mypage);
}
After reading the file.....i injected it to the DOM
<div class="s_content s fontfix left s_content2 downdown">
#foreach (var data in html) {
<text>#Html.Raw(data)</text>
}
</div>
All this runs on compilation time before the page is created for rendering.....I attempted some security measures by attempting to inject server-side C# code in the HTML file but was useless. Makes me feel safe atleast. Is this risky? What is the possible threat to this alternative. i wish i can still have an alternative proper solution from the house. Thanks though.
Assuming #Renderpage() doesn't support HTML files, why don't you try Jquery.load or Ajax. There are lots of tutorials based on dynamic loading of html content.
I do something similar but I don't use #Renderpage or an html file. Instead I am using the "onclick" event and a javascript function which opens a cshtml file. You just put this and the java script function in your main cshtml file in the hmtl section. It will open a file in the current directory called my_window.cshtml when clicked
<a onclick=openWin("my_window",700,850);>Open when clicked</a>
<script type="text/javascript">
function openWin(url, width, height)
{
myWindow=window.open(url,'_blank','width='+width+',height='+height);
myWindow.focus();
}
Hope this helps!
I have a website in which I finished with the basic layout, design, fonts, styles, css etc.
For almost whole of the website, the layout i.e the sidebar, the footer, the background etc. will remain the same. There are custom embedded fonts used as well.
Since this basic layout will remain the same all across the website, I wanted to ask how can I prevent downloading of this content (like side-bar, fonts, or javascript etc.) again for the user, so that the other pages after the start do not take as much time as the start page.
I am sure there would be some mechanism since most of the websites have header/footer/sidebar in common across the pages. My website is in plain html/css, and there's no backend being used. Any ideas?
Your images, fonts, css and other contents will most likely be cached by the client's browser on the first hit, so it will be downloaded just once.
For the html page itself, since you use static html content, the only way I can think of is using AJAX request.
You probably want to use includes. So on each page you'd have a header include, a footer include, a sidebar include and even an include containing links to your css/js files.
Simplest way to do this would be to change your pages to be .php pages and use php includes to pull in the header file, footer file etc.
You can static-site generator like Jekyll.
You may design a basic layout first.
Avoid inline and embedded CSS maximum and add a class (can assign to multiple) or id (can assign to single) to common selectors.
Make a master stylesheet like master.css and attach this to every page.
Hope this helps.
You can do this in two way. You say you don't have a backend, however the server where your website is hosted can be the backend.
Without any backend interaction:
If you really prefer not to use the backend at all, you can make this a single page website, with some javascript to switch the content you have in there. The idea is you have your website structure, and your default data available the way you normally have it right. But you also have the html for your other pages in hidden divs. Then when you want to switch to say the about link you use javascript to get the content from the hidden div with that content and you place that content in the main div.
<!--First lets use jquery thought it can use some other framework-->
<script src="http://code.google.com/apis/ajaxlibs/documentation/index.html#jquery"></script>
<script>
$('a[href=#myAboutPage]').on('click',function(){//Whenever link that points to #myAboutPage is clicked
var getHTMLFROM = document.getElementById('myAboutPageHiddenContent').innerHTML;
//And place it on main div
document.getElementById('mainDivContent').innerHTML = getHTMLFROM
});
</script>
If you wanted to use some ajax interactions:
The process would be the same with the exception that the getHTMLFROM content, would actually be an html file that you request from the server.
Both of this javascript oriented methods will work, but would NOT recommend if you want your information to be SEO friendly. With that said reuse an external piece of css, to minimize redownloading the styling of your interface every single time.
There are definitely many ways to do this. I am a fan of dynamic inclusion. Here is a link to a great tutorial which explains how to set it up for your own page very simply. Dynamic Inclusion Tutorial NOTE: Don't be afaid of PHP, or having to change your file extension to PHP. It won't change your coding experience at all. It will just enhance your abilities.
I also have used the Javascript feature to hide certain elements. Depending on the size of your website, it may be just as easy to reload your CSS and navigation elements. However, if you really don't want your menu and logo to blink momentarily while it is reloading, you can just hide/reveal elements very simply with a bit of JS.
Here is an example function from my website:
function toggleVisible(e){
var i = e.id;
if(e.className == 'collapsed')
{
e.className = 'expanded';
e.innerHTML = 'Hide'
var hiddenArray = document.getElementsByClassName('hidden' + i);
hiddenArray[0].setAttribute('class', 'expanded' + i);
}
else if (e.className == 'expanded')
{
e.className = 'collapsed';
e.innerHTML = 'Show More';
var expandedArray = document.getElementsByClassName('expanded' + i);
expandedArray[0].setAttribute('class', 'hidden' + i);
}
}
The above code will run when the following link is clicked:
ANYWEBSITE.com || <a onClick="toggleVisible(this)" id="4" class="collapsed">Show More</a> || View PDF
Also, another user mentioned caching. Caching appears to be unreliable. Check out the following links for more info:
AJAX cache
HTML5 Application cache
2009 article about browser caching from stackoverflow.com question
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