What you want can (also) be done with the help of a hidden iframe. You will have 2 files: index.html for the menu, and content.html for the 'pages' which are in fact page fragments.
index.html:
Code:
<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>main</title>
<style type="text/css">
a:link { color: #ffffff; }
a:visited { color: #ffffff; }
a:hover { color: #2EFEF7; }
a:active { color: #00FF40; }
}
</style>
</head>
<body >
<!-- Hidden iframe used for loading the content -->
<iframe name="content" src="content.html" style="position: absolute; left: 0; width: 10px; height: 10px; left: -100px; display: none" onload="parent.document.getElementById('maincontent').innerHTML=frames.content.document.documentElement.innerHTML; parent.full_height('div','content_fragment')"></iframe>
<div style="position: absolute; left: 0; top: 0; height: 100%; width: 200px; background: navy; color: white">
<div style="padding: 10px">
<h1>Menu</h1><br>
<h3><ul>
<li><a href="#evolution" >Evolution</a></li>
<li><a href="#rudolfensis" >Homo rudolfensis</a></li>
<li><a href="#erectus" >Homo erectus</a></li>
</ul>
</h3>
</div>
</div>
<div style="position: absolute; right: 0; top: 0; height: 100%; width: 150px; background: navy; color: white; ">
<div style="padding: 10px"><h3>Useful links here</h3></div>
</div>
<div id="maincontent" style="position: fixed; top: 0;left: 200px; right: 150px; bottom: 0; overflow: hidden; font-family: verdana; font-size: 13px"></div>
<!-- scripts for the height of the text fragments and for loading the content -->
<script>
function full_height(tag,className) {
var els = document.getElementsByTagName(tag)
for (i=0;i<els.length; i++) {
if (els.item(i).className == className){
els.item(i).style.position='relative';
els.item(i).style.height=window.innerHeight+'px';
els.item(i).style.width='100%';
els.item(i).style.overflow='auto';
}
}
}
</script>
<script>
function hash_change()
{
if(document.URL.substr(document.URL.lastIndexOf("/")+1,document.URL.length)=='index.html#'){window.location.href='index.html'}
window.location.replace("index.html#"+location.hash.substring(1,location.hash.length)) ;
$('*').scrollTop(0)
}
window.onhashchange=hash_change;
window.onload=hash_change;
var the_height=window.innerHeight
setInterval("if(the_height!==window.innerHeight){window.location.reload()}",1000);
setTimeout("if(the_height==window.innerHeight){}",1000)
if(window.location.hash=='')window.location.replace('#evolution')
</script>
</body>
</html>
content.html:
Code:
<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>content</title>
</head>
<body >
<!-- Each div having class="content_fragment" represents a page. Inside the div there's a a-element serving as an anchor for the links in the menu of index.html. There also another div inside each 'big div' for creating paddings -->
<div class="content_fragment" >
<a id="evolution" style="height: 20px; display: block"></a>
<div style="padding-left: 30px; padding-right: 30px; padding-bottom: 30px">
<h2>Evolution</h2><br>
Modern humans (Homo sapiens = we) are primates of the family Hominidae, and the only surviving species of the genus Homo. Modern humans are characterized by having a large brain relative to body size, with a particularly well developed neocortex, prefrontal cortex and temporal lobes, making them capable of abstract reasoning, language, introspection, problem solving and culture through social learning. This mental capability, combined with an adaptation to bipedal locomotion that frees the hands for manipulating objects, has allowed modern humans to make far greater use of tools than any other living species on Earth. Modern humans are the only extant species known to build fires and cook their food, as well as the only known species to clothe themselves and create and use numerous other technologies and arts.<br><br>
Homo sapiens originated in Africa, where they reached anatomical modernity about 200.000 years ago and began to exhibit full behavioral modernity around 50.000 years ago. The human lineage diverged from the last common ancestor with its closest living relative, the chimpanzee, some five million years ago, evolving into the Australopithecines and eventually the genus Homo. The first Homo species to move out of Africa was Homo erectus, the African variety of which, together with Homo heidelbergensis, is considered to be the immediate ancestor of modern humans. Homo sapiens proceeded to colonize the continents, arriving in Eurasia 125.000-60.000 years ago, Australia around 40.000 years ago, the Americas around 15.000 years ago, and remote islands such as Hawaii, Easter Island, Madagascar, and New Zealand between the years AD 300 and 1280.<br><br>
As early as 12.000 years ago, humans began to practice sedentary agriculture, domesticating plants and animals which allowed for the growth of civilization. <br>
</div>
</div>
<!-- Each div having class="content_fragment" represents a page. Inside the div there's a a-element serving as an anchor for the links in the menu of index.html. There also another div inside each 'big div' for creating paddings -->
<div class="content_fragment" >
<a id="rudolfensis" style="height: 20px; display: block"></a>
<div style="padding-left: 30px; padding-right: 30px">
<h2>Homo rudolfensis: 1.9 million to 1.8 million years ago</h2><br>
The description of Homo rudolfensis is based on a 1.9 million-year-old skull, found near Lake Rudolf (now Turkana) in Kenya.<br><br>
This human species had a braincase size of 775 cubic centimeters, which is considerably above the upper end of Homo habilis braincase size (680 cubic centimeters). But it is still apelike, with long arms and hips not adapted to long-distance walking.<br><br>
Homo rudolfensis had large and wider molars compared to Homo habilis. While their teeth were only slightly smaller than those seen in robust Australopithecines, Homo rudolfensis didn't have the heavily-built jaw and strong jaw muscle attachments seen in robust early humans. These anatomical differences likely indicate different diets between Homo rudolfensis and earlier australopith species capable of more powerful chewing.<br><br>
</div>
</div>
<!-- Each div having class="content_fragment" represents a page. Inside the div there's a a-element serving as an anchor for the links in the menu of index.html. There also another div inside each 'big div' for creating paddings -->
<div class="content_fragment">
<a id="erectus" style="height: 20px; display: block"></a>
<div style="padding-left: 30px; padding-right: 30px">
<h2>Homo erectus</h2><br>
Inspired by Darwin's new theory of evolution, Dutch anatomist Eugene Dubois set out to find the remains of an early human. In 1891, after a five-year search, he succeeded. On the island of Java, at Trinil, on the banks of the Solo River, he found the partial remains of a very ancient human being.<br><br>
Dubois named his find Pithecanthropus erectus (later the generic name Pithecanthropus was changed to Homo to reflect the great similarity of this hominid to modern humans). But the public soon dubbed this hominid "Java Man".<br><br>
The specimens were the first of Homo erectus ("upright man") ever found and the first of any hominid differing from modern humans discovered outside Africa or Europe. Dubois was convinced that he had found the missing link between apes and human beings (thus the name Pithecanthropus, which means "ape-man").<br><br>
After Dubois, beginning in the 1920s, the story of the discovery of Homo erectus shifts to China. There, international research teams found numerous Homo erectus specimens at Zhoukoudian ("Hill of the Dragons"), near Beijing. This putatively new early human was soon dubbed "Peking Man" (Beijing was then called Peking).<br><br>
In the ensuing years, a few more jaws and teeth were turned up, and the first skull. By 1936, a total of 14 skulls, 11 jawbones and 147 teeth had been discovered. The material was obviously similar to Dubois' Pithecanthropus erectus (both Dubois' material and that obtained at Zhoukoudian have since been assigned to Homo erectus).<br><br>
The most complete fossil individual of Homo erectus is known as the 'Turkana Boy' – a well-preserved skeleton (though minus almost all the hand and foot bones), dated around 1.6 million years old.<br><br>
Homo erectus had an average cranial capacity of about 1000 cc — significantly larger than that of earlier hominids. It is also the oldest known early human species to have possessed modern human-like body proportions with relatively elongated legs and shorter arms compared to the size of the torso (adaptations to a life lived on the ground).<br><br>
The appearance of Homo erectus in the fossil record is often associated with the earliest handaxes, the first major innovation in stone tool technology. There is also fossil evidence that this species cared for old and weak individuals. Some experts think that Homo erectus was the first to use rafts to travel the oceans.<br><br>
Homo erectus had an average height of about 1.79 m (5 feet, 10 inches). Together with Homo ergaster it was probably the first human species that matched the definition of hunter gatherer.
</div>
</div>
</body>
</html>
Demo here.
Request: Help with css/html frame template from Dynamic
Reply With Quote
Bookmarks