I have a website that has menu on every page. But, When I try to add new link on the menu, I
had to add the link on every page individually. So, I used HTML and CSS like this so I just have to edit one thing, but it will just show up as "Home" with "a" tag on it instead of showing "Home" as hyperlink.
<!DOCTYPE html>
<html>
<head>
<style>
.menu:after{
content: "HomeGames";}
</style>
<title>Page</title>
</head>
<body bgcolor="#cccccc">
<center>
<div class="menu"></div>
<center>
</body>
</html>
create a page call
menu.php and put the menu, for example with your code
HomeGames;
then in your index.php
<?php
include('menu.php');
?>
You cannot do that using CSS because the style would have to alter the DOM. CSS is simply not designed and not legitimized to alter the DOM.
CSS content property: is it possible to insert HTML instead of Text?
What you probably should do is using a server-sided pre-processing language like PHP to go with templating.
Another solution would be using jQuery (javascript):
$('.menu').prepend('Home');
That is the wrong way to go about doing something like that. What you really need is to use a language that can make templating possible. I would recommend learning PHP, it makes stuff like that much easier. With PHP, you could have a file called menu.php, with the HTML markup for the menu inside the file, and then just type include "menu.php"; when you need it. PHP (and similar languages) can do so much more than that, you won't regret learning it.
Yikes, that is a really messy way to do it. You don't say weather you can or can't... but I really recommend using PHP for this. Create your menu in a PHP file, say 'menu.php' and include it like this
require_once("menu.php");
You will also have to change the file you put this in from .html to .php. As far as I know there is no performance issues with your method, and while you are solving your problem by putting the link in CSS, this sort of goes against everything CSS stands for. The content attribute is mainly for inserting certain characters to be styled differently.. like a custom bullet or something.
PHP is the best way to go about this, as other have mentioned. Javascript can accomplish this, but it wouldn't break gracefully. If the Javascript didn't work or was turned off, you would be left without navigation.
I thought I would just mention some other possibilities.
iframe:
<iframe src="/nav.html" seamless></iframe>
seamless isn't compatible with older browsers, but you can fix that with css.
SSI:
<!--#include virtual="/nav.html" -->
file would have to be saved as .shtml or the server configured to parse html for ssi
Related
I have a web site of more than 20 pages, all using the same dropdown menu. Currently, each page contains redundant HTML code for the menu, so if I want to change one thing in a menu, I have to change it for all the pages. I am using plain html/css and some javascript for my site. Is there a way to have my dropdown menu all in one file and include the reference to that file for all 20 pages?
I tried using the <embed> element to include the menu, but it did not work out for me since I cannot adequately align it as it leaves a large empty area right below it to allow for dropdown options. Not sure what is the best way to handle that
As suggested by Quetin Veron in the comment, PHP include statements are the best way to deal with it.
However, in case you're not interested in writing backend code, you can do that using JavaScript by parsing a json or an ini file/text in your script and converting it into the required links on the menu.
[Do note that you'll still have to use JavaScript for that]
If you'd not even prefer to use JS (Not recommended), you can use an iframe as the navigation menu
When you do that, add <base target="_parent"> in the head section of your iframe.
And then, in all other pages, add <iframe src="menu.html"></iframe> and replace menu.html with the path to the menu.
I hope this helps. However, please note that this just is a workaround if you wish to use frontend technologies only.
Otherwise use <?php include "menu.php";?> for PHP or for Node with EJS, use <%include "menu.ejs";%>
In my Angular app, my menu component html code is displayed briefly when the page is loading. Even if I hide the menu html root element with a display none css, the html is still displayed when the page start loading.
I have read a lot of thing about ng-cloak (https://docs.angularjs.org/api/ng/directive/ngCloak) but it seems Angular 4 not have ngCloak.
So I don't know how to prevent this unpleasant effect.
does Angular 4 have an equivalent directive for ng-cloak?
How can I display properly page without display unstyled html on load?
The index.html file should not contain any application specific HTML code. But just some headers and the root tag of the application. It may contain a placeholder text like "Loading" inside the root tags.
All the html code of the application should be inside the app.component.html and or other components.
#angular/cli generates an index.html "template" file that looks like this:
<!doctype html>
<html>
<head>
...
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
The browser immediately displays the "Loading..." text. After Angular was initialized, it is replaced with the actual application. To get a white page, just removed the text.
I would have gone with #HendrikBrummermann's answer: place a "Loading..." tag.
From your comment, "...which component includes the header... the unstyled html of the header is displayed", I believe you already have your answer: there is no CSS loaded that can style the HTML of the header yet.
Hendrik's answer keeps the tag to a minimum, so this effect is not apparent.
If you really need to style the header immediately, I fear that you need to use an inline style (and with no images or fonts - those won't be loaded yet either). Keep that to the bare minimum is all:
<!doctype html>
<html>
<head>
...
<style>
...
</style>
</head>
<body>
<app-root>(styled header)</app-root>
</body>
</html>
Then upon loading you can remove the placeholder.
You can also try (but it's messy and difficult to maintain) an incremental approach with two "loaders": a very, very minimal one that needs next to no CSS/images, then as soon as the fonts and other very few basic assets are onLoad'ed you can maybe replace it with a simple animation, and from there you load all the rest and activate the full Angular app.
There are also "packager" utilities that will compact most of your HTML, CSS and JS into a single minified SPA bundle; some of them (I'm sorry, I saw a couple of them used, but never used myself and can't reference them) also supply a minimal loader as described above. This might take care of some maintenance for you, and it's perhaps worth a shot. I know this because for one project a colleague of mine had to replace a Flash "Please wait" loader with a HTML5 one (it wasn't an Angular project, but I don't think it matters).
Those are things which you could give a try:
(In my opinion best solution) You can use Angular Universal, for serverside rendering. Workflow is:
User sends request to example.com
Server is not responding with pure HTML (example above), but runs Angular on the server side and render output HTML
This HTML (together with <script> tag pointing to compiled app is send to users browser
On the first look, the user sees HTML + CSS formatted by his browser. Then browser launches *.js file, and after a while replace "static page" with "single page app"
Angular can deal with all action done on "static page" (before JavaScript launch), thanks to BrowserModule.withServerTransition(); More about Universal can be read here.
You can make one step further from Universal, and serve your Angular Universal App as a Progressive Web App (PWA). More about PWA can be read here
Go one more step further, and introduce Accelerated Mobile Page (AMP), from the Google Cache. More about AMP can be read here.
You should never ever place anything more than application root node in your index.html:
<!doctype html>
<html>
<head>
...
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
If you really want to have something "nice" while the user is waiting for Angular, you could create some kind of loader with ie css animation:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="loader.css">
</head>
<body>
<app-root>
<div id="css-loader"></div>
</app-root>
</body>
</html>
Regarding points 1 & 2 & 3: Here you can find an example of Angular Universal & PWA & AMP combined.
I think this behaviour is inevitable. Best you can do is speed it up as much as possible. Using the lastest versions, AOT and lazy-loading helps a lot.
Alternatively you can add some css to your index.html
This is a feature, not a bug.
You can do one of twothree things:
Let UAs get information as soon as they can and assume people can tell when things are loaded fully, or
Make people wait for information, and show it to them only after it has all loaded
Some kind of absurd gray area unicorn implementation that ensures part of the page is loaded before displaying it but doesn't bother for other parts
Historically, #2 has been the most derided approach, especially as so many people want to do it. I suggest not even pursuing it.
I want to build a website with 30 html pages. They all are going to have left menu and top menu always the same so i would like to define those menus in only one html and inherit that html in all other html pages.
Is this possible? How is it done?
I was looking for a solution without using php.
Regards,
You could use frames, but that's a bad method as its old and outdated now.
Your better solution would be to use PHP and have the menus as separate files and just 'link' them to the main page by using the include function
Ie
<html>
<head>
<?php include 'head.php'; ?>
</head>
</html>
And then your head.php file could include your title tag and anything else that may go in the head tag.
That way you only have to make one change to the site title for it to affect all the pages the include is featured in.
I made a drop down menu using HTML and CSS. Something like this: http://sneznipark-kg.si/
How can i put a menu in external file(so that i don't need to make changes to it on every page individually)?
I could use iframes, but the problem there is, that elements that "drop down", are only visible in iframe, not on the main page.
I found some solutions using PHP, but i cant use those, because contract with my server provider doesn't include databases (so i cant use PHP, right?).
I think you are looking for:
How to Make Website Navigations with PHP Includes:
http://www.youtube.com/watch?v=IMh2cGIX41g
Simple PHP/HTML navbar for a static website:
http://www.youtube.com/watch?v=v8PUIVn3NFE
As mentioned above, you should be able to use PHP.
If you're not opposed to jquery AND both files are on the same domain. You can use .load().
http://api.jquery.com/load/
You can use any container as a place holder. Like a div, then load the html page into the div. It will put the entire page into the div. So you probably just need to add the menu part, and not the entire html markup.
I have a web site that gets a new page every couple weeks, and that means I need to update the menu to have the new page in every single one. I'm wondering if there is a way to have an external text or .htm file that I can basically insert into the web page. That way I can put the menu in the external file and call it wherever I want it. So I only have to edit one thing when I get a new page.
Thanks in advance.
Edit: This is a drop-down menu with ul and li tags with an external style sheet for them. So this needs to work for that too. Thanks
Have a single HTML page like so:
<html>
<head></head>
<body>
HTML OF LINKS HERE
</body>
</html>
Then save it as my_links.html and into the page you want to insert it... do the following. Copy and paste the whole page and it as FILENAME.PHP and then use this code:
<?php include("my_links.html"); ?>
Congratulations, you have just used PHP! Learn more about the including pages here.
This is very easy and common to do on sites that use a server-side language behind them (PHP, ASP.NET, etc.)
If you don't want to use a server side language, than an <iframe> is your only option.
If you want to use HTML, and only html (no server side programming or javascript), you can use Server Side Includes embedded into your html files. Your web server may need to be configured to accept them.
If you are using server side include and you had navigation in a separated file, yes you can just edit things separate.
You can also do this using jQuery.
$('#elementid').load('page.html');
http://api.jquery.com/load/
But this will not be SEO friendly.
Also if someone has scripts turned off in their browser, then this will not work.