I hope this isn't too vague of a question, but I feel like I'm running into a brick wall, so I'd really appreciate any and all feedback.
In a nutshell, what I'm trying to do is create a simple webpage, wherein the content is maintained by someone else (who has very little coding knowledge). My thought was to set up a page with a big frame in the middle, and to have tabs up top that would change the content in the frame. (This way, the person who maintains the page will only need to worry about the individual pages that are displayed in the frame; they'll never have to make changes to the main webpage itself.) So far, I've gotten this to mostly work pretty well.
The problem I'm having is with the height of the frame. More accurately, I'm having a problem with the div it's inside of. I'd like it to be adjustable - based on the height of the content it's pulling in - but I can only seem to set the height manually. The reason I want it adjustable is because the content it's pulling in for each tab is going to vary.
Thank you in advance for any suggestions you may have... even if it's to tell me to try another solution altogether. My main goal here is to create something that can be maintained by someone who doesn't really know any html. I figured using a frame would be perfect, since they could update that piece in Word, but there may be some other method I'm not thinking of. I'm open to all suggestions.
*edit: Here's some sample code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Indexfiles\style.css" />
</head>
<body>
<div id="wrapper" style="text-align: center;">
<div id="menubar" style="display: inline-block;text-align: center;">
<a href="Indexfiles/iframe1.htm" target="Mainframe"><div id="tab"><h6>Tab 1
</h6></div></a><a href="Indexfiles/iframe2.htm" target="Mainframe"><div id="tab"><h6>Tab 2
</h6></div></a><a href="Indexfiles/iframe3.htm" target="Mainframe"><div id="tab"><h6>Tab 3
</h6></div></a><a href="Indexfiles/iframe4.htm" target="Mainframe"><div id="tab"><h6>Tab 4
</h6></div></a><a href="Indexfiles/iframe5.htm" target="Mainframe"><div id="tab"><h6>Tab 5
</h6></div></a><a href="Indexfiles/iframe6.htm" target="Mainframe"><div id="tab"><h6>Tab 6
</h6></div></a>
</div><br />
<div id="maincontent">
<iframe src="Indexfiles/iframe1.htm" width="100%" scrolling="no" frameborder="0" name="Mainframe"></iframe>
</div>
</div>
</body>
</html>
If you use iframe you can dynamically adjust the size of the iframe to fit the content using javascript as follows:
var iframe = document.getElementById(iFrameId);
iframe.width = iframe.contentWindow.document.body.offsetWidth;
iframe.height = iframe.contentWindow.document.body.offsetHeight;
Edit:
You can try to see if this will work:
<script>
function resizeIFrame() {
var iframe = document.getElementById("MainFrame");
iframe.width = iframe.contentWindow.document.body.offsetWidth;
iframe.height = iframe.contentWindow.document.body.offsetHeight;
}
</script>
<div id="maincontent">
<iframe id="MainFrame" onload="resizeIFrame();" src="Indexfiles/iframe1.htm" width="100%" scrolling="no" frameborder="0" name="Mainframe"></iframe>
</div>
This is what my iframe*.htm files looks like as an example:
<!DOCTYPE html>
<html>
<head>
<title>iframe</title>
<style type="text/css">
body {
padding:0px;
margin:0px;
box-sizing: border-box;
-moz-box-sizing: border-box;
float:left;
border:1px solid rgb(200,200,200);
}
</style>
</head>
<body>
<div style="float:left; width:160px; height:500px;">Frame</div>
</body>
</html>
Important: when testing this you must run these files through a web server and have the files in the same domain otherwise your browser will block the request due to security issues.
If you have Chrome installed you will see the following error message when you view the javascript console:
As long as the div has an id, it's height can be updated in an included css file.
your_page.html:
<link rel="stylesheet" href="your_style.css" />
<div id="your_frame">
[Frame Contents]
</div>
your_style.css:
#your_frame{
height: 40px // Just tell your developers to change this number (they'll never have to open the html file). Also, if you have google chrome, you can fiddle with this number in the Developer tools.
}
Depending on the scenario, you can use javascript to set the height more intelligently.
EDIT:
Here's an approach that requires even less maintenance:
The div inside of your html page:
<div id="your_frame">
<div id="your_contents">
Contents Go Here
<br>
<br> More Contents
<br> Even more contents
</div>
</div>
The css:
#your_frame{
border-style:solid; # <-- using a solid border so you can play with these code chunks in JSfiddle.net
#height:100px; # <-- omit the height (let the div auto-size/auto-wrap the contents)
}
#your_contents {
#height:100px; # <-- omit the height (let the div auto-size/auto-wrap the contents)
margin-top:10px; # <-- I think what you're really after is the margin adjustments
margin-bottom:10px;
margin-left:10px;
}
By default a div will automatically extend to the height of its parent container. Changes in this behavior often relate the the position property of its children. For instance if all of a divs children are absolutely positioned the height of the div will be at its default height. I don't have an example of what you are doing so I can only guess at the cause of your issue.
Alternatively, if you are open to alternatives. The scenario that you present is typically solved by the use of Content Management Systems. You would just need to customize the look and feel for your purposes.
http://en.wikipedia.org/wiki/Web_content_management_system
Related
I created a <div> element and I'm going to use below css style withing the <div> element.
#girls {
background-image: url("girl.gif");
}
Here is my HTML <div> element (This element contains in index.html page):
<div id="girls">
<p>
<b>Girls chat:</b> at the lounge, we're committed to providing you, our guest, with an exceptional
experience every time you visit. Whether you're just stopping by to check in on email over an elixir,
or are here for an out-of-the-ordinary dinner, you'll find our knowledgeable service staff pay attention to every
detail. If you're not fully satisfied, have a Blueberry Bliss Elixir on us.
</p>
</div>
But when I load index page, the background image (girl.gif) doesn't show up. Anyone can help me with this?
Try this:
#girls {
background-image: url("../girl.gif");
}
I'm guessing that the css is inside that stylesheet folder, that's why you need to go up a level to access girl.gif, thus the usage of ../
<!DOCTYPE html>
<html>
<head>
<title>GIF DEMO</title>
</head>
<style type="text/css">
#girls {
background-image: url('demo.gif');
height: 200px;
width: 50%;
}
</style>
<body>
<div id="girls">Sample Text
</div>
</body>
</html>
If you are using external CSS then Change your directory path of the image & try again.
else Inline Stlying go with the sample code
image link
https://s-media-cache-ak0.pinimg.com/originals/25/81/28/258128ed71595efc9b561ed7d88b89f2.gif
In the footer of the website, I would like to include social widgets. Facebook one is working just fine, Tripadvisor comes with a many lines of code and and is not really styled, jumps off my footer etc.
How do I eventually style the widget which is not styled? If I change anything in the code, a message:
"Please check the TripAdvisor code and install again."
This is their code
<div id="TA_socialButtonBubbles675" class="TA_socialButtonBubbles">
<ul id="7xYqVoY8wKU" class="TA_links LV2VKytU2yB">
<a target="_blank" href="http://www.tripadvisor.com/Attraction_Review-g274707-d6883393- Reviews-I_Love_Segway_Private_Tours-Prague_Bohemia.html">
<img src="http://www.tripadvisor.com/img/cdsi/img2/branding/socialWidget/20x28_green-21693-2.png"/>
</a>
</li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=socialButtonBubbles&uniq=675&locationId=6883393&color=green&size=rect&lang=en_US&langversion=2"></script>
The main problem is that it jumps out of the footer and does not stay in line like I would like to.
Screenshot:
The whole site to check is : http://ilovesegway.com
The best way for you to get it exactly like you want is for you to open your site in your browser of choice and tinker with the styling in the browsers developer tools.
I went in and slightly modified the parent div. I gave it a display: inline-block
<div id="TA_socialButtonBubbles675"
class="TA_socialButtonBubbles"
style="display: inline-block">...
That wasn't enough so I also changed two children divs to inherit the vertical-align styles.
<div class="socialWidgetContainer" had a style of display: table-cell which I removed.
<div class="socialWidget" style="vertical-align: inherit;"
I assume the second modification was generated content by trip advisor, but you should still be able to style this via a .css file or even some JavaScript.
I did all this through the chrome dev tools.
Have you tried using an iframe, similar to what the Facebook widget uses? That way, you could put the TripAdvisor code in a separate HTML fragment and let the iframe dictate where you want the widget to go. That way, you're not fighting against whatever styles are being pushed at you from TripAdvisor's scripts.
<!-- Facebook widget -->
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FI-Love-Segway%2F540468152732697&width=100&layout=button&action=like&show_faces=false&share=false&height=35&appId=487866241269315" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:35px;padding-top:15px;" allowTransparency="true"></iframe>
<!-- Trip Advisor widget; add whatever styles or parameters you need -->
<iframe src="YOURSITE/tripaddvisor.php"></iframe>
You can still apply css rules to the included content. Consider making #TA_socialButtonBubbles675 position:relative and moving it manually to where you would like it to appear. I had some luck with:
#TA_socialButtonBubbles675
{
position: relative;
top: -116px;
left: 360px;
}
Why doesn't the below Z-INDEX order work?
What I want is the DIV tag to overlay the H1 and P tags. Instead, when the DIV's innerHTML is initialized, the other tags shift down the page. As you can see, all elements on the page are positioned and the DIV has a higher Z-INDEX. What else am I missing? (both the HTML and CSS validate)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>z-index test</title>
<style type="text/css">
#media screen {
#myTitle {position: relative; margin-top:20px; margin-left:20px; z-index:1;}
#overLay {position: relative; margin-top:20px; margin-left:20px; z-index:999;}
.btn {position: relative; margin-left:20px;}
p {position: relative; margin-left:20px; z-index:1;}
}
</style>
</head>
<body>
<div id="overLay"></div>
<h1 id="myTitle">An H1 Header</h1>
<p>A paragraph....</p>
<p>And another paragraph....</p>
<button class="btn" onclick="on_Clear();">clear div element</button>
<button class="btn" onclick="on_Init();">init div element</button>
<script type="text/javascript">
<!--
document.getElementById("overLay").innerHTML = "Stack Overflow is a programming Q & A site that’s free. Free to ask questions, free to answer questions, free to read, free to index, built with plain old HTML, no fake rot13 text on the home page, no scammy google-cloaking tactics, no salespeople, no JavaScript windows dropping down in front of the answer asking for $12.95 to go away. You can register if you want to collect karma and win valuable flair that will appear next to your name, but otherwise, it’s just free. And fast. Very, very fast.";
function on_Clear() {document.getElementById("overLay").innerHTML = "";}
function on_Init() {document.getElementById("overLay").innerHTML = "Stack Overflow is a programming Q & A site that’s free. Free to ask questions, free to answer questions, free to read, free to index, built with plain old HTML, no fake rot13 text on the home page, no scammy google-cloaking tactics, no salespeople, no JavaScript windows dropping down in front of the answer asking for $12.95 to go away. You can register if you want to collect karma and win valuable flair that will appear next to your name, but otherwise, it’s just free. And fast. Very, very fast.";}
//-->
</script>
</body>
</html>
if you want elements to overlay on top of other elements you're going to have to use z-index along with position: absolute; or use negative margins/padding.
You also shouldn't need to put position:relative; on everything in your css.
Try absolute positioning inside a relative container (div). This takes the element outside the normal document flow and z-index should work.
Also,remove the z-idnex from the relative elements.
The below works as expected. I made the changes based on one of #Catfish comments.
Note, I added one wrapper DIV around the overLay DIV. The wrapper does not need to contain any of the other elments on the page and it can be relatively positioned. Its z-index is set to one. It contains the overLay DIV which is absolutely positioned, but what is useful (I think) is #overLay does not need to have any position attributes set. So, affectively, it is still relatively positioned. Finally, the positioning and z-index styling was removed from all other elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>z-index test</title>
<style type="text/css">
#media screen {
#wrapper {position: relative; margin-top:20px; margin-left:20px; z-index:1;}
#overLay {position: absolute; z-index:999; background-color:#fff;}
#myTitle {margin-top:20px; margin-left:20px;}
.btn {margin-left:20px;}
p {margin-left:20px;}
}
</style>
</head>
<body>
<div id="wrapper"><div id="overLay"></div></div>
<h1 id="myTitle">An H1 Header</h1>
<p>A paragraph....</p>
<p>And another paragraph....</p>
<button class="btn" onclick="on_Clear();">clear div element</button>
<button class="btn" onclick="on_Init();">init div element</button>
<script type="text/javascript">
<!--
document.getElementById("overLay").innerHTML = "Stack Overflow is a programming Q & A site that’s free. Free to ask questions, free to answer questions, free to read, free to index, built with plain old HTML, no fake rot13 text on the home page, no scammy google-cloaking tactics, no salespeople, no JavaScript windows dropping down in front of the answer asking for $12.95 to go away. You can register if you want to collect karma and win valuable flair that will appear next to your name, but otherwise, it’s just free. And fast. Very, very fast.";
function on_Clear() {document.getElementById("overLay").innerHTML = "";}
function on_Init() {document.getElementById("overLay").innerHTML = "Stack Overflow is a programming Q & A site that’s free. Free to ask questions, free to answer questions, free to read, free to index, built with plain old HTML, no fake rot13 text on the home page, no scammy google-cloaking tactics, no salespeople, no JavaScript windows dropping down in front of the answer asking for $12.95 to go away. You can register if you want to collect karma and win valuable flair that will appear next to your name, but otherwise, it’s just free. And fast. Very, very fast.";}
//-->
</script>
</body>
</html>
Now, let's see if this works on a real page.
I am working on a website(this is my first website as a developer) and I was wondering if someone could help me align these to items next to each other horizontally. I don't know how to code HTML so I am completely unfamiliar with this. For the most part when developing sites I go and make due with what is online to help but this instance I am with your help.
The site is using WordPress and this is going to be a page. With a table from W-P Table reloaded and a Google map.
Here is the code currently:
<p style="text-align: left;">[table id=4 /]<small></small></p><p style="text-align: right;">
<iframe src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Avie's+SKi+Sports+100+Main+Street,+Westerly,+R+02891-2194&aq=&sll=41.375316,-71.831092&sspn=0.006948,0.016512&vpsrc=0&g=100+Main+Street,+Westerly,+R+02891-2194&ie=UTF8&hq=Avie's+SKi+Sports+100+Main+Street,+Westerly,+R+02891-2194&hnear=&radius=15000&t=m&ll=41.379063,-71.831102&spn=0.015457,0.027466&z=15&iwloc=lyrftr:m,9024240540147588029,41.375323,-71.831043&output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="640" height="480"></iframe>
<small><a style="color: #0000ff; text-align: left;" href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Avie%27s+SKi+Sports+100+Main+Street,+Westerly,+R+02891-2194&aq=&sll=41.375316,-71.831092&sspn=0.006948,0.016512&vpsrc=0&g=100+Main+Street,+Westerly,+R+02891-2194&ie=UTF8&hq=Avie%27s+SKi+Sports+100+Main+Street,+Westerly,+R+02891-2194&hnear=&radius=15000&t=m&ll=41.379063,-71.831102&spn=0.015457,0.027466&z=15&iwloc=lyrftr:m,9024240540147588029,41.375323,-71.831043">View Larger Map</a></small></p>
Typically when you want to line something up side by side on a page, you have two options:
The old school way - Use Tables (If you are using a program like Dreamweaver, this should be fairly easy - Insert > Table)
The better way - Using CSS. This may be a little harder for you to deal with since you said you have no experiencing working with HTML and I am presuming CSS.
The CSS way would require you to create a stylesheet with two divisions (divs). Here's an example of some code that would do that:
<style>
#col1{ width:300px; float:left;}
#col2 { width:300px; float: right;}
</style>
The above code would go between your <head></head> tags. Then in the body of your page, you would simply call the two divs:
<div id="col1">YOUR CONTENT</div>
<div id="col2">YOUR CONTENT</div>
I had a similar problem. I tried to use the CSS route but failed. If you are using Wordpress the easiest way would be to place 2 columns in the section you want the division. then place one element in each and then target their HTML codes accordingly.
Is there any way to have multiple distinct HTML pages contained within a single HTML file? For example, suppose I have a website with two pages:
Page 1 : click here for page 2
and
Page 2 : click here for page 1
Can I create a single HTML file that embeds simple static HTML for both pages but only displays one at a time? My actual pages are of course more complicated with images, tables and javascript to expand table rows. I would prefer to avoid too much script code. Thanks!
Well, you could, but you probably just want to have two sets of content in the same page, and switch between them. Example:
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
<div id="Page1">
Content of page 1
Show page 2
</div>
<div id="Page2" style="display:none">
Content of page 2
Show page 1
</div>
</body>
</html>
(Simplified HTML code, should of course have doctype, etc.)
I used the following trick for the same problem. The good thing is it doesn't require any javascript.
CSS:
.body {
margin: 0em;
}
.page {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: -100vw;
overflow-y: auto;
z-index: 0;
background-color: hsl(0,0%,100%);
}
.page:target {
left: 0vw;
z-index: 1;
}
HTML:
<ul>
<li>Click here for page 1</li>
<li>Click here for page 2</li>
</ul>
<div class="page" id="one">
Content of page 1 goes here.
<ul>
<li>Back</li>
<li>Page 2</li>
</ul>
</div>
<div class="page" id="two">
Content of page 2 goes here.
<ul style="margin-bottom: 100vh;">
<li>Back</li>
<li>Page 1</li>
</ul>
</div>
See a JSFiddle.
Added advantage: as your url changes along, you can use it to link to specific pages. This is something the method won't let you do.
Hope this helps!
have all the pages in distinct div areas
<div style="" id="page1">
First Page Contents
</div>
<div style="display:none" id="page2">
Second Page Contents
</div>
then use a js script to workout what you are viewing (like within an hashtag style) to navigate. Either that, or ajax to get the response from a specific file (like /pages/page1.html)
var $prehashval = "";
function loop()
{
if (location.hash.slice(1)!=$prehashval)
hashChanged();
$prehashval = location.hash.slice(1);
setTimeout("loop()", 100);
}
function hashChanged()
{
var $output;
switch (location.hash.slice(1))
{
case "page1":
document.getElementById('page1').style.display = "";
document.getElementById('page2').style.display = "none";
break;
case "page2":
document.getElementById('page1').style.display = "none";
document.getElementById('page2').style.display = "";
break;
default:
$output = location.hash.slice(1);
}
}
loop();
Have you considered iframes or segregating your content and using a simple show/hide?
Edit If you want to use an iframe, you can have the contents of page1 and page2 in one html file. Then you can decide what to show or hide by reading the location.search property of the iframe. So your code can be like this :
For Page 1 : iframe.src = "mypage.html?show=1"
For Page 2 : iframe.src = "mypage.html?show=2"
Now, when your iframe loads, you can use the location.search.split("=")[1], to get the value of the page number and show the contents accordingly. This is just to show that iframes can also be used but the usage is more complex than the normal show/hide using div structures.
JQuery Mobile has multipage feature. But I am not sure about Desktop Web Applications.
This is kind of overriding the thing of one page, but... You could use iframes in HTML.
<html>
<body>
<iframe src="page1.html" border="0"></iframe>
</body>
</html>
And page1.html would be your base page. Your still making multiple pages, but your browser just doesn't move. So lets say thats your index.html. You have tabs, you click page 2, your url wont change, but the page will. All in iframes. The only thing different, is that you can view the frame source as well.
Screen Rec
You could use Colker, which is built for this, but you'll have to remove the search box, and search feature code, because searching isn't compatible with the type of content you intend to use.
Page contents are stored in a java-script array, and the "page" (eg: ?page=pagename) URL parameter determines which page content to serve.
Twine is an open-source tool for telling interactive, nonlinear stories.
It generates a single html with multiples pages.
Maybe it is not the right tool for you but it could be useful for someone else looking for something similar.
By hiding and showing one another, you can achieve this without embedding it. While Guffa's answer worked quite well, I couldn't figure out how to add more than 2 pages, and while Binz Nakama's answer fixes that, it doesn't quite let you only show Page 1 and toggle between them.
Here's the codepen I made, and here's an example I made from one of my existing websites.
HTML:
<div class="part1">
Page 1 content goes here.
<button onclick="hidePart1()">Go to Page 2</button>
<button onclick="showPart3()">Go to Page 3</button>
</div>
<div class="part2">
Page 2 content goes here.
<button onclick="hidePart2()">Go to Page 1</button>
<button onclick="showPart3()">Go to Page 3</button>
</div>
<div class="part3">
Page 3 content goes here.
<button onclick="hidePart2()">Go to Page 1</button>
<button onclick="hidePart1()">Go to Page 2</button>
</div>
CSS:
.hide {
display: none !important;
}
.show {
display: block !important;
}
.part1 {
display: block;
}
.part2 {
display: none;
}
.part3 {
display: none;
}
JS:
function hidePart1() {
document.querySelector(".part1").classList.remove("show");
document.querySelector(".part1").classList.add("hide");
document.querySelector(".part3").classList.remove("show");
document.querySelector(".part3").classList.add("hide");
document.querySelector(".part2").classList.add("show");
}
function hidePart2() {
document.querySelector(".part2").classList.remove("show");
document.querySelector(".part2").classList.add("hide");
document.querySelector(".part3").classList.remove("show");
document.querySelector(".part3").classList.add("hide");
document.querySelector(".part1").classList.add("show");
}
function showPart3() {
document.querySelector(".part1").classList.remove("hide");
document.querySelector(".part1").classList.remove("show");
document.querySelector(".part1").classList.add("hide");
document.querySelector(".part2").classList.remove("hide");
document.querySelector(".part2").classList.remove("show");
document.querySelector(".part2").classList.add("hide");
document.querySelector(".part3").classList.remove("hide");
document.querySelector(".part3").classList.add("show");
}
While the code above is probably not quite optimized (especially the JS), it definitely works well for me. I am still quite new to JavaScript, and not very good at it.
Edit: Added part 3 to the code.
Edit: Added example.
It is, in theory, possible using data: scheme URIs and frames, but that is rather a long way from practical.
You can fake it by hiding some content with JS and then revealing it when something is clicked (in the style of tabtastic).
Solution 1
One solution for this, not requiring any JavaScript, is simply to create a single page in which the multiple pages are simply regular content that is separated by a lot of white space. They can be wrapped into div containers, and an inline style sheet can endow them with the margin:
<style>
.subpage { margin-bottom: 2048px; }
</style>
... main page ...
<div class="subpage">
<!-- first one is empty on purpose: just a place holder for margin;
alternative is to use this for the main part of the page also! -->
</div>
<div class="subpage">
</div>
<div class="subpage">
</div>
You get the picture. Each "page" is just a section followed by a whopping amount of vertical space so that the next one doesn't show.
I'm using this trick to add "disambiguation navigation links" into a large document (more than 430 pages long in its letter-sized PDF form), which I would greatly prefer to keep as a single .html file. I emphasize that this is not a web site, but a document.
When the user clicks on a key word hyperlink in the document for which there are multiple possible topics associated with word, the user is taken a small navigation menu presenting several topic choices. This menu appears at top of what looks like a blank browser window, and so effectively looks like a page.
The only clue that the menu isn't a separate page is the state of the browser's vertical scroll bar, which is largely irrelevant in this navigation use case. If the user notices that, and starts scrolling around, the whole ruse is revealed, at which point the user will smile and appreciate not having been required to unpack a .zip file full of little pages and go hunting for the index.html.
Solution 2
It's actually possible to embed a HTML page within HTML. It can be done using the somewhat obscure data: URL in the href attribute. As a simple test, try sticking this somewhere in a HTML page:
blah
In Firefox, I get a "blah" hyperlink, which navigates to a page showing the FOO heading. (Note that I don't have a fully formed HTML page here, just a HTML snippet; it's just a hello-world example).
The downside of this technique is that the entire target page is in the URL, which is stuffed into the browser's address input box.
If it is large, it could run into some issues, perhaps browser-specific; I don't have much experience with it.
Another disadvantage is that the entire HTML has to be properly escaped so that it can appear as the argument of the href attribute. Obviously, it cannot contain a plain double quote character anywhere.
A third disadvantage is that each such link has to replicates the data: material, since it isn't semantically a link at all, but a copy and paste embedding. It's not an attractive solution if the page-to-be-embeddded is large, and there are to be numerous links to it.
going along with #binz-nakama, here's an update on his jsfiddle with a very small amount of javascript. also incoporates this very good article on css navigation
update on the jsfiddle
Array.from(document.querySelectorAll("a"))
.map(x => x.addEventListener("click",
function(e){
Array.from(document.querySelectorAll("a"))
.map(x => x.classList.remove("active"));
e.target.classList.add("active");
}
));
Let's say you have multiple pages, with id #page1 #page2 and #page3. #page1 is the ID of your start page. The first thing you want to do is to redirect to your start page each time the webpage is loading. You do this with javascript:
document.location.hash = "#page1";
Then the next thing you want to do is place some links in your document to the different pages, like for example:
Click here to get to page 2.
Then, lastly, you'd want to make sure that only the active page, or target-page is visible, and all other pages stay hidden. You do this with the following declarations in the <style> element:
<style>
#page1 {display:none}
#page1:target {display:block}
#page2 {display:none}
#page2:target {display:block}
#page3 {display:none}
#page3:target {display:block}
</style>
An example that actually uses two separate HTML files. The example is based on this tutorial from Tutorial Republic.
app.js
$(document).ready(function(){
$("#screen").load("page1.html")
$(document).on("click", '#page1_button', function(event) {
$("#screen").load("page2.html")
});
$(document).on("click", '#page2_button', function(event) {
$("#screen").load("page1.html")
});
});
Index.html
<!DOCTYPE html>
<html lang="eng">
<head></head>
<body>
<div id="screen"></div>
<!-- Import JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Import main JS -->
<script src="app.js"></script>
</body>
</html>
page1.html
<div>Welcome to page one</div>
<button id="page1_button" type="button">Go to page 2</button>
page2.html
<div>Welcome to page two</div>
<button id="page2_button" type="button">Go to page 1</button>
Important: Page one and page two should only have the body content, i.e., without <body> and <HTML> tags.
In case the container should span over the whole page (taken from this StackOverflow answer):
stycle.css
#screen
{
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
}
<html>
<head>
<script>
function show(shown, hidden) {
document.getElementById(shown).style.display='block';
document.getElementById(hidden).style.display='none';
return false;
}
</script>
</head>
<body>
Show page 1
Show page 2
<div id="Page1">
Content of page 1
</div>
<div id="Page2" style="display:none">
Content of page 2
</div>
</body>
</html>