I have a bit of a problem. I made a blog for my webpage, and I use the header of it in my blog.
The thing is, I have a drop down menu which includes a pretty long menu, so when used in the blog, the iframe does not show all of it, only the first few options.
I'm wondering whether there is a way to make that iframe extends or allow the menu to show the options.
I think that you should include the header server side instead of embedding it using an iframe. How you do this depends on what platform you're using.
If you are using plain html, the simplest option is to just copy the header. If you are using IIS you could extract the header to its own file and include it using SSI:
<!--#include file="header.html"-->
If you're using some kind of templating system, perhaps you could extract the header so that it exists in its own template file and then include it where needed. Using Django:
{% include "header.html" %}
If you have a homebrew site, perhaps you are using PHP? Then you could just include it like this, of course:
<?php include('header.html'); ?>
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";%>
I am converting an existing HTML to AMP-HTML. In older HTML I am loading footer and header which are in separate HTML files which are loaded by using jquery as mentioned in the below code.
$("#divHeader").load('../header.html');
$("#divFooter").load('../footer.html');
These HTML have only static data. Is there any way to add these HTML in AMP pages? I cannot use amp-iframe because amp-iframe cannot be within first 75% of the viewport and has to be 600px away from the top as mentioned in this link.
AMP cannot contain any type of external stylesheet or scripts. For your HTML file, you might have used the HTML partials to load. But in the case of AMP pages, you cannot include that, you have to explicitly write your header and footer in AMP
In the official doc here, under the HTML Tags heading it is specified that
Scripts are Prohibited unless the type is application/ld+json. (Other non-executable values may be added as needed.) An exception is the mandatory script tag to load the AMP runtime and the script tags to load extended components
If your are using PHP, or you're able to convert your pages to PHP, you can use an include or require statement.
<?php include_once('path/to/file.php'); ?>
<?php require_once('path/to/file.php'); ?>
The main difference between include and require are include will output an error if there is one and continue rendering the page. Require will stop at the error. The _once just makes sure it gets called once per page load. Not really necessary usually but I typically do it just to be safe.
It might be possible using amp-iframe or amp-list but other than that it is not possible.
Make two different HTML files where one stores the header and the other file stores the footer. Try loading them separately utilizing amp-iframe or amp-list. I tried doing this stuff personally but couldn't do it but I know some people have done it in the past.
All the best.
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.
So I have a website and I'm using a basic menu located at the top right corner of the screen. It's links are as follows:
| Home | Blog | Results | Pictures | Our Location |
Form time to time I need to add a new link to the menu or change where one of the links points to. This means that on every page that the menu exist I must manually change the link. Surely there is some way to have a master menu that is just put on every page.
Or am I dreaming?
Put the menu in a separate file and include it on the server side, either using a full-blown scripting language like PHP (one line) or using SSI.
There are various ways to do this. It depends what you have access to on the server. Possibly the simplest mechanism is server-side includes. You would just have a file that contains the menu and include it on every page.
You can also do this with every programming language in more or less elegant ways.
EDIT: The SSI is quite simple. You can just make a /header.html file, then do:
<!--#include virtual="/header.html" -->
in the appropriate place.
use the PHP include on all your pages
<?php include 'includes/menu.php'; ?>
and have a separate menu.php within a folder named 'includes'. you'll need to save all oyur pages as .php
you can make your footer as an include too
I think this is the easiest way of doing it without a server side language. Use a javascript library like W3Data. All you need to do is add the w3-include-html attribute to your div. Done!
If your menu is in a file called menu.html you'd do something like this.
<div w3-include-html="menu.html"></div>
Have a server side program determine what menus and locations of the links need to be there.
Then use ajax to periodically poll the server side script to get the contents of the menu at the current time.
It'd be easy to have it send an xml data back like:
<menu>
<link name="Home" href="destinationhome.html"/>
...
<link name="Pictures" href="....html"/>
</menu>
Then build your links from that data.
You can generate pages from templates before uploading them: See Template Toolkit.