PDA

View Full Version : navigation


Rivendell
14th Jul 2006, 09:55 am
Im using front page and i am wondering how to have the navigation stay on the screen as you scroll down the page? :?
any help will be much apreciated,
thanks, :D
Skeeps
14th Jul 2006, 10:06 am
what about using frames? then you can scroll your main page and it leaves the navigation buttons on the side?
Here's the html for the frame page


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<frameset rows="120,*" cols="*" frameborder="NO" border="0" framespacing="0">
<frame src="1.htm" name="topFrame" scrolling="NO" noresize >
<frameset cols="140,*" frameborder="NO" border="0" framespacing="0">
<frame src="2.htm" name="leftFrame" scrolling="NO" noresize>
<frame src="3.htm" name="mainFrame">

</frameset>
</frameset>
<noframes><body>

</body></noframes>
</html>


if you can pick it apart you'll see you'll need to change 3.htm to read the main page (e.g. index.html) then 2.htm to read the contents or navigation buttons page (e.g. contents.htm) and 1.htm to whatever your title page is called.

is this clear..or have I been rambling?
Another way is use flash, but I don't know if you have that.
CADTutor
14th Jul 2006, 10:12 am
Frames would probably be the best way to do this but you should be aware that they are very much out of favour now in web design circles. The main problem is that you can't have an unique URL for each page because all the browser sees is the containing frameset page.

Think about whether you really need to do this.
SEXYMAG
8th Aug 2006, 05:28 am
Try This Floating Layer.

Floating Layers are easy to manipulate in FrontPage


<html>

<head>
<title>New Page 1</title>


<script language="JavaScript">
<!--
function namosw_init_float_layers&#40;&#41;
&#123;
var name;
var layer;
var i;
var j;

var is_ns4 = navigator.appName.indexOf&#40;'Netscape', 0&#41; != -1 && !document.getElementById;
var is_ns6 = &#40;navigator.appName.indexOf&#40;'Netscape', 0&#41; != -1 && document.getElementById&#41;;

j = 0;
document._float_layers = new Array&#40;Math.max&#40;1, namosw_init_float_layers.arguments.length/2&#41;&#41;;
for &#40;i = 0; i < namosw_init_float_layers.arguments.length; i += 2&#41; &#123;
name = namosw_init_float_layers.arguments&#91;i&#93;;
if &#40;name == ''&#41;
return;

if &#40;is_ns4&#41; &#123;
layer = document.layers&#91;name&#93;;
layer._fl_pos_left = layer.left;
layer._fl_pos_top = layer.top;
&#125; else if &#40;is_ns6&#41; &#123;
layer = document.getElementById&#40;name&#41;;
layer._fl_pos_left = parseInt&#40;layer.style.left&#41;;
layer._fl_pos_top = parseInt&#40;layer.style.top&#41;;
&#125; else &#123;
layer = document.all&#91;name&#93;;
layer._fl_pos_left = layer.style.pixelLeft;
layer._fl_pos_top = layer.style.pixelTop;
&#125;

layer._fl_pos = namosw_init_float_layers.arguments&#91;i+1&#93;;
if &#40;layer&#41;
document._float_layers&#91;j++&#93; = layer;
&#125;

document._fl_interval = setInterval&#40;'namosw_process_float_layers&#40;&#41;', 200&#41;;
&#125;

function namosw_page_width&#40;&#41;
&#123;
var is_ns4 = navigator.appName.indexOf&#40;'Netscape', 0&#41; != -1 && !document.getElementById;
var is_ns6 = &#40;navigator.appName.indexOf&#40;'Netscape', 0&#41; != -1 && document.getElementById&#41;;

return &#40;is_ns4 || is_ns6&#41; ? innerWidth &#58; document.body.clientWidth;
&#125;

function namosw_page_height&#40;&#41;
&#123;
var is_ns4 = navigator.appName.indexOf&#40;'Netscape', 0&#41; != -1 && !document.getElementById;
var is_ns6 = &#40;navigator.appName.indexOf&#40;'Netscape', 0&#41; != -1 && document.getElementById&#41;;

return &#40;is_ns4 || is_ns6&#41; ? innerHeight &#58; document.body.clientHeight;
&#125;

function namosw_process_float_layers&#40;&#41;
&#123;
var is_ns4 = navigator.appName.indexOf&#40;'Netscape', 0&#41; != -1 && !document.getElementById;
var is_ns6 = &#40;navigator.appName.indexOf&#40;'Netscape', 0&#41; != -1 && document.getElementById&#41;;

if &#40;document._float_layers&#41; &#123;
var i;
var layer;
for &#40;i = 0; i < document._float_layers.length; i++&#41; &#123;
layer = document._float_layers&#91;i&#93;;
if &#40;is_ns4&#41; &#123;
if &#40;layer._fl_pos == 1&#41;
layer.left = layer._fl_pos_left + window.pageXOffset;
else if &#40;layer._fl_pos == 2 || layer._fl_pos == 5&#41;
layer.left = window.pageXOffset;
else if &#40;layer._fl_pos == 3 || layer._fl_pos == 6&#41;
layer.left = window.pageXOffset + &#40;namosw_page_width&#40;&#41; - layer.clip.width&#41;/2;
else
layer.left = window.pageXOffset + namosw_page_width&#40;&#41; - layer.clip.width - 16;
if &#40;layer._fl_pos == 1&#41;
layer.top = layer._fl_pos_top + window.pageYOffset;
else if &#40;layer._fl_pos == 2 || layer._fl_pos == 3 || layer._fl_pos == 4&#41;
layer.top = window.pageYOffset;
else
layer.top = window.pageYOffset + namosw_page_height&#40;&#41; - layer.clip.height;
&#125; else if &#40;is_ns6&#41; &#123;
if &#40;layer._fl_pos == 1&#41;
layer.style.left = layer._fl_pos_left + window.pageXOffset;
else if &#40;layer._fl_pos == 2 || layer._fl_pos == 5&#41;
layer.style.left = window.pageXOffset;
else if &#40;layer._fl_pos == 3 || layer._fl_pos == 6&#41;
layer.style.left = window.pageXOffset + &#40;namosw_page_width&#40;&#41; - parseInt&#40;layer.style.width&#41;&#41;/2;
else
layer.style.left = window.pageXOffset + namosw_page_width&#40;&#41; - parseInt&#40;layer.style.width&#41;;
if &#40;layer._fl_pos == 1&#41;
layer.style.top = layer._fl_pos_top + document.body.scrollTop;
else if &#40;layer._fl_pos == 2 || layer._fl_pos == 3 || layer._fl_pos == 4&#41;
layer.style.top = window.pageYOffset;
else
layer.style.top = window.pageYOffset + namosw_page_height&#40;&#41; - parseInt&#40;layer.style.height&#41;;
&#125;
else &#123;
if &#40;layer._fl_pos == 1&#41;
layer.style.pixelLeft = layer._fl_pos_left + document.body.scrollLeft;
else if &#40;layer._fl_pos == 2 || layer._fl_pos == 5&#41;
layer.style.pixelLeft = document.body.scrollLeft;
else if &#40;layer._fl_pos == 3 || layer._fl_pos == 6&#41;
layer.style.pixelLeft = document.body.scrollLeft + &#40;namosw_page_width&#40;&#41; - layer.style.pixelWidth&#41;/2;
else
layer.style.pixelLeft = document.body.scrollLeft + namosw_page_width&#40;&#41; - layer.style.pixelWidth;
if &#40;layer._fl_pos == 1&#41;
layer.style.pixelTop = layer._fl_pos_top + document.body.scrollTop;
else if &#40;layer._fl_pos == 2 || layer._fl_pos == 3 || layer._fl_pos == 4&#41;
layer.style.pixelTop = document.body.scrollTop;
else
layer.style.pixelTop = document.body.scrollTop + namosw_page_height&#40;&#41; - layer.style.pixelHeight;
&#125;
&#125;
&#125;
&#125;

// -->
</script>

</HEAD>
<BODY OnLoad="namosw_init_float_layers&#40;'Logo', 1&#41;;">

<DIV id="Logo" style="width&#58;230px; height&#58;104px; position&#58;absolute; left&#58;33px; top&#58;0px; z-index&#58;1; visibility&#58;visible">

</DIV>

</body>

</html>

Please tell me if this does not work

EXAMPLE SITE Click Here (http://school.cottondew.net/USGovernment/National.html) the right side is the floating layer the left side is java script Click Here (http://www.dynamicdrive.com/dynamicindex1/davidmenu.htm) for the Java Script.