Request: Help with css/html frame template from Dynamic [Archive]

View Full Version : Request: Help with css/html frame template from Dynamic

GillyH

12-29-2014, 10:04 AM

Hi,

I've downloaded a ready-made css/html template for a 3 x frame page from dynamic drive (This one: http://www.dynamicdrive.com/style/layouts/item/css-left-and-right-frames-layout/) and I'm in the process of adapting it to my needs. The idea is for the left and right columns to have links that will display their content in the middle (maincontent) frame when clicked, but I can't work out how to code that without breaking the template. When I click on the only link I'm working on at the moment ie: the top, left link ("Our Focus") my content .html document opens in a new window. Can someone help a newbie please? :)

Also, further to this, I'm wondering if I use this method, is it possible to have just one main content .html document and have this template's links zap to a specific section of that document to make updating easier? I'll be using this on an internal intranet for work

Here is the code as I have it so far,

Kind regards

Gilly


<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Left and Right Frames Layout</title>
<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
}

a:link { color: #ffffff; }
a:visited { color: #ffffff; }
a:hover { color: #2EFEF7; }
a:active { color: #00FF40; }

#framecontentLeft, #framecontentRight{
position: absolute;
top: 0;
left: 0;
width: 200px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#framecontentRight{
left: auto;
right: 0;
width: 150px; /*Width of right frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#maincontent{
position: fixed;
top: 0;
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
right: 150px; /*Set right value to WidthOfRightFrameDiv*/
bottom: 0;
overflow: auto;
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 0 150px 0 200px; /*Set value to (0 WidthOfRightFrameDiv 0 WidthOfLeftFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}

</style>

</head>

<body>

<div id="framecontentLeft">
<div class="innertube">

<h1>Page Heading</h1><BR>
<h3><ul><li><a href="ourfocus.html" target="maincontent">Our Focus</a></li>
<li><a href="clients.html" target="content">Company Clients</a></li>
<li><a href="contact.html" target="content">Contact Company</a></li>
</ul></h3>

</div>
</div>

<div id="framecontentRight">
<div class="innertube">

<h3>Useful links here</h3>

</div>
</div>

<div id="maincontent">
<div class="innertube">

</div>
</div>

</body>
</html>

Beverleyh

12-30-2014, 11:23 AM

The reason why your links are opening in a new window is that you cannot target a div in this way (in standard html) to have content open there. The template title may be confusing you though because you *can* target an Iframe in this way (if "maincontent" was an Iframe instead of a div). More info on that here http://webdesign.about.com/od/iframes/qt/target-links-iframes-and-frames.htm

However, then you go on to ask if it's possible to have only one content.html page and have links zap to specific portions to make updates easier. That sounds like your describing anchors and jump links - you can learn more about those here http://www.hypergurl.com/anchors.html This way you wouldn't need any separate content.html pages - you could have it all coded into one web page.

It depends in the content of your web page/site though. The two methods above are very simple ways to (hopefully) achieve what you want, but they may not be the most appropriate. For example, if you have time to learn more about building maintainable web pages, and if your server supports PHP, you might want to look at using PHP includes http://www.tizag.com/phpT/include.php

Another option is to use JavaScript. Arie has a blog here with two possible solutions that again you might want to look in to - http://www.dynamicdrive.com/forums/entry.php?294-Loading-files-into-divs-having-a-custom-src-attribute and http://www.dynamicdrive.com/forums/entry.php?292-From-frameset-to-hashchange

The last option, if time is not on your side, is to post a work request in the paid help forum http://www.dynamicdrive.com/forums/forumdisplay.php?30-General-Paid-Work-Requests Somebody will be able to discuss your requirements more thoroughly and advise and build a specific, tailored package to fully suit your needs.

molendijk

12-30-2014, 04:50 PM

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:

<!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 >


<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>


<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:

<!doctype html>
<html >
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

<title>content</title>

</head>

<body >



<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>



<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>



<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 (http://mesdomaines.nu/include_one_main_content/index.html).

molendijk

12-30-2014, 05:35 PM

I made a mistake
The script immediately before the closing body tag of index.html should have the following lines:

<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>

#evolution refers to the first page (fragment).

Beverleyh

12-31-2014, 07:48 AM

Hi Arie,

I was looking at the demo here http://mesdomaines.nu/include_one_main_content/index.html#evolution on iphone while laid on the settee. Anyway, long story short, I dropped my phone (right on my nose - ow!) and the screen flipped sideways. Unfortunately, while viewing the demo like this, the central panel doesn't want to scroll so there is lots of content hidden out of sight, which is impossible to access. :(

molendijk

12-31-2014, 11:41 AM

Thanks Beverleyh. I hope your nose ik alright now!
I cannot reproduce the problem on my tablet. It may be a question of resizing. So I slightly changed the code. Does the problem persist?

Beverleyh

12-31-2014, 01:25 PM

Thanks Arie. That's fixed it :)

molendijk

12-31-2014, 01:45 PM

Thanks to YOU !

molendijk

12-31-2014, 01:56 PM

Final version of index.html:

<!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 >


<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>


<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>

hussyrobert

01-09-2015, 07:15 AM

Hi , here are some tips that will help you to find out the solutions of your problem.

1.Only use inline styles, if you even use them at all.
2.Use tables for layout
3.Exclude the HTML, head, and body tags.
4.Exclude forms and JavaScript.