Log in

View Full Version : CSS "Frame" Targeting


BalsamDesign
02-28-2011, 11:28 PM
Hi all,

I'm trying to get a navigation bar that will always be on the top of a website, no matter what subpage you visit. Frames would be the easiest way, but they seem to have fallen from favour and if someone is visiting via a blackberry or something, it'll probably look like crap.

I did find a great CSS solution for creating "frames" on a page, but have a question on how to take it to the next level. First, I used the example found here on Dynamic Drive (http://www.dynamicdrive.com/style/layouts/item/css-top-frame-layout/).

Now, I have my navigation buttons in the top "frame" and the content in the bottom one. My question is, how does one target the bottom frame? Clicking on one of the navigation links causes the new page to fill the browser.

Of course, I could just make every page have the same code in it so when you click one of the navigation links it just recreates the whole 2 frames, navigation bar and all, but that seems inelegant.

Forgive me if the answer is obvious - I'm a bit of a neophyte with CSS.

Thanks.

Brian
Beverleyh
02-28-2011, 11:44 PM
If you're using frames with ease-of-maintenance in mind ( ie - update only one instance of menu code to have the change reflect site wide) how about looking into php includes instead?

Of course this depends if you can use php on your server but if you can, it will make for a much cleaner solution: http://www.tizag.com/phpT/include.php
molendijk
03-01-2011, 02:04 PM
If you can't use PHP, here is how to do it with javascript (there are many other possibilities, this is just one of them).
From the document you found at http://www.dynamicdrive.com/style/layouts/item/css-top-frame-layout, just retain the following and put it in a document called menu.html:
menu.html:

<div id="framecontent">
<div class="innertube">
<h1>CSS Top Frame Layout</h1>
<h3>Sample text here</h3>
</div>
</div>
The styles given at http://www.dynamicdrive.com/style/layouts/item/css-top-frame-layout should be inserted into a css-file called (for instance) my_styles.css.
Content of my_styles.css:

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

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

#maincontent{
position: fixed;
top: 130px; /*Set top value to HeightOfFrameDiv*/
left: 0;
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}

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

* html body{ /*IE6 hack*/
padding: 130px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/
}

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

Now create a js-file called my_script.js and put the following in it:
my_script.js:

var div_node=document.createElement('div');
div_node.setAttribute("id", "menu_loader");
document.body.appendChild(div_node);

var iframe_pop=document.createElement('iframe');
iframe_pop.setAttribute("scrolling", "no");
iframe_pop.setAttribute("frameBorder", "no");
iframe_pop.setAttribute("name", "iframe");
iframe_pop.setAttribute("width", 0);
iframe_pop.setAttribute("height", 0);
iframe_pop.style.border="0px";
iframe_pop.style.position="absolute";
iframe_pop.style.left="-1000px";
iframe_pop.setAttribute("src", "menu.html");
document.body.appendChild(iframe_pop);
window.onload=include_menu;
function include_menu(){
document.getElementById('menu_loader').innerHTML = frames['iframe'].document.body.innerHTML
}
Finally, on each page in which you want to include the menu (menu.html), put the following:
Each page in which you want to include the menu (menu.html):

<head>
<link href="my_styles.css" rel="stylesheet">
</head>

<body>
<!-- Script must be put in the body -->
<script type="text/javascript" src="my_script.js"></script>
<div id="maincontent" style="padding:10px">
Your content
</div>
</body>

This will do the trick.
Edit:
If you want to use javascript functions in menu.html, don't put them in menu.html itself, but on each page in which you want to include menu.html!
===
Arie Molendijk.
BalsamDesign
03-01-2011, 03:13 PM
Wow, thank you for the help! I'm grateful! :)
molendijk
03-01-2011, 03:16 PM
I noticed that my script doesn't work in IE. That browser doesn't understand the DOM!
If you replace the contents of my_script.js with the following, it will (also) work in IE:

document.write('<div id="menu_loader"><iframe name="iframe" width="0" height="0" style="position: absolute; left:-10000px" src="menu.html"><\/iframe><\/div>')
function include_menu(){
document.getElementById('menu_loader').innerHTML = frames['iframe'].document.body.innerHTML
}
window.onload=include_menu
Arie.
BalsamDesign
03-01-2011, 05:15 PM
That's weird Arie, I can get it to work with IE8 (though I have to okay the script to run). I can't get it to run on Chrome though...haven't tried Firefox yet.
BalsamDesign
03-01-2011, 05:33 PM
Firefox: script works great
IE8: works if you okay the script to run - I think this will throw most visitors off
Chrome: doesn't work at all - only shows the main body, just blank where the top blue frame should be
molendijk
03-01-2011, 06:42 PM
BalsamDesign, I got it working on all modern browsers now. You can test it at http://www.let.rug.nl/molendyk/balsamdesign/page1.html
Before going into the details, I'll make some observations on your remarks about IE and Chrome. You don't have to okay the script in IE and you don't get the blank in Chrome if you use these browsers online. I guess you only tested on your local machine.

The only problem now concerns a major difference between IE8 and lower IE-versions. IE8 behaves like non-IE, but IE<8 needs the document.write I gave you in my previous post.

To make the script run everywhere, you have to make two js-scripts:
my_script_standard.js (IE8 and non-IE):

var div_node=document.createElement('div');
div_node.setAttribute("id", "menu_loader");
document.body.appendChild(div_node);

var iframe_pop=document.createElement('iframe');
iframe_pop.setAttribute("scrolling", "no");
iframe_pop.setAttribute("frameBorder", "no");
iframe_pop.setAttribute("name", "iframe");
iframe_pop.setAttribute("width", 0);
iframe_pop.setAttribute("height", 0);
iframe_pop.style.border="0px";
iframe_pop.style.position="absolute";
iframe_pop.style.left="-1000px";
iframe_pop.setAttribute("src", "menu.html");
document.body.appendChild(iframe_pop);
window.onload=include_menu;
function include_menu(){
document.getElementById('menu_loader').innerHTML = frames['iframe'].document.body.innerHTML
}

my_script_nonstandard.js (IE<8):

document.write('<div id="menu_loader"><iframe name="iframe" width="0" height="0" style="position: absolute; left:-10000px" src="menu.html"><\/iframe><\/div>')
function include_menu(){
document.getElementById('menu_loader').innerHTML = frames['iframe'].document.body.innerHTML
}
window.onload=include_menu
Then a given page in which we want this to work in a crossbrowser way:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>

<head>
<link href="my_styles.css" rel="stylesheet">
</head>

<body>
<!--[if gt IE 7]><!-->
<script type="text/javascript" src="my_script_standard.js"></script>
<!--<![endif]-->

<!--[if lt IE 8]>
<script type="text/javascript" src="my_script_nonstandard.js"></script>
<![endif]-->

<div id="maincontent" style="padding:10px">
Your content
</div>
</body>
</html>
Arie.
BalsamDesign
03-01-2011, 07:05 PM
Thank you Arie, it would never have occurred to me that it would only work online.

Brian