Ok so on W3Schools, it has the image below. Is there a way to keep the outer orange/yellow part and simply replace the "Content goes here" by doing src="somehtmlpage.html" which contains only a body or whatever?
I know I can do it with a Frame/IFrame but I read somewhere that Frames aren't good or something like that.. Any ideas?
You're right, frames are not a good idea, but if you want an html solution that's what you have to use.
However, you can load content into that div using javascript. I recommend using jQuery's .load() method for this task, as it will streamline the process for you and allow you to select specific content from the source file.
There are Pros ad cons of usig frames
Pros
Ability to keep one part of the page static whilst changing
another part. For this reason frames are often used for navigation
menus.
Frames can also help reduce bandwidth and server load, because
the same content does not need to be loaded every time a new page is
visited.
Cons
A broken frameset happens when the frames are not loaded or
displayed correctly.
Search engines don't deal with frames well.
You can't link directly to a framed page.
The same problems related to links also apply to bookmarking pages.
Iframes can e give a trial. It works well too for some limits
you can use JQuery load function to load data from a HTML file in a specific element
see the link below
Jquery load function
good luck
If you want to add some html code from a different file, you could use php include
<?php include('somehtmlpage.html'); ?>
Dont forget to rename the file index.php or test.php
eg, If you wanted to have a template and a file for the main content:
main.php
<h1>title</h1>
<?php include('somehtmlpage.html'); ?>
somehtmlpage.html
<p>something...</p>
The page will look like this:
Title
something...
Related
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 started making a website, then I realized that I was pasting the top menu all over the html pages from the website. This isn't the best way to do that I thought. So, how do I manage to have the same menu on all the pages I want, without pasting this information all the time.
Is that possible to store "head" tag information too? Because the html code looks a little messy with so many things up there all the time.
Sending a portion of html code to browser cache is possible? I know that browsers sometimes do that with favicon or background images.
Doing that seems quite... Useful, because the user will not load the "same stuff" every time he access the pages. Despite to the fact that if you send something to the cache, you need to clear the browser cache to see the effects if the content has changed.
You have to use php function include().
Example:
header.php:
<h1>My header</h1>
otherpage.php source:
<?php
include("header.php");
?>
rest of the page...
otherpage.php output:
<h1>My header</h1>
rest of the page...
I'm trying to capture div#map-canvas from my site, www.RichBlocksPoorBlocks.com, to make an iframe that people can embed anywhere.
Here's my iframe
<iframe src="http://www.richblockspoorblocks.com#map-canvas" style="width:600px; height:400px;"></iframe>
It goes to div#map-canvas, but it also loads the rest of the page as well. I'd like that div to be the only thing in the iframe.
Is this possible with an iframe?
To achieve this, it would be easier to create a separate .php or .html document which contains only the parts that you want to show in the iframe and exclude everything else.
So, instead of the iframe pointing to "http://www.richblockspoorblocks.com#map-canvas", it would point to something like : "http://www.richblockspoorblocks.com/map-canvas.php".
This would be a very quick and efficient way of doing what you want, and doesn't require any outside libraries or javascript.
When you call http://www.richblockspoorblocks.com#map-canvas the hash will probably cause the browser to look for a corresponding <a name="foo">bar</a> so this won't work using an iFrame.
What I would recommend doing is writing a script which you call from your iFrame which accepts the name of the page fragment to load. I know using jQuery's $.load() you can call an element ID to load a page fragment, and I think it's also possible in PHP too...
You cannot use hash links in iframes.
You can and should use, few lines of you'r favorite server side language to create the specific content you want to render and then link to it. in that way, you'r server will send out to the end user only the desired data and also it saves bandwith and loading time.
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.
I am wondering if there's a way I can embed a webclip into a webpage, as in, I can have a portion of a webpage embedded as a widget into another page. I was thinking it might be possible someway though Mac OS X's Dashboard widgets, one can take a webclip and make a dashboard widget, as I hear that they are HTML based, and thus one could reverse-engineer one into simple HTML code. Kind of the reverse of what google does for gadgets. Any ideas? I'm open to any solutions.
Thanks.
The easy, html-based way is with an iframe. What this does is put an entire webpage within a box on your page. You don't have much flexibility with it.
You can also do it with javascript. JQuery makes it easy with their .load() method. Going this route, you can load a webpage with javascript, load specific tags within that page, or even modify the incoming code before displaying it.
Most basically:
$("#xxxx").load("url.html");
Where xxxx is the id of the html tag where you want the content to be loaded on your page (e.g. if you have <div id="xxxx">content will go here</div> in your HTML). See more details at: http://docs.jquery.com/Ajax/load.
If these don't suffice, the next step would be PHP (I doubt you'd need it, but if you'd like to, you car search for file_get_contents on php.net).