PDA

Click to See Complete Forum and Search --> : fixed positioning

Nulrick
05-16-2003, 01:46 PM
Is there a script (or some HTML) that can place a table in a certain fixed position so that even when you scroll down the page, the table remains in the same spot?

I want to apply this to "Quick Links" within the following page:

http://newweb.rnktel.com/designdrafts/newwebsite/index.html

Help Anyone???

Thanks!
cacalex
05-16-2003, 01:57 PM
You might use something like this, but you will have to change those : Left/Top Position and scroll delay...


<HTML>
<HEAD>
<!-- Shane Awtrey-->
<TITLE>Scrolling Menu</TITLE>
<STYLE TYPE="text/css">
<!--
a:link { color:blue; text-decoration:none;}
a:visited { color:red; text-decoration:none;}
a:hover { font-size: 14pt; color: yellow}
-->
</STYLE>
<SCRIPT LANGUAGE=JAVASCRIPT>
<!--
function ScrollMenu()


{

//Max left position
var menuLeft= 5;

//Max Top position
var menuTop = 10;

//Delay before the Box Should Scroll after page scrolling (Down/up)
var scrollDelay = 100;

if (document.all.menu.style.pixelLeft < document.body.scrollLeft + menuLeft)


{
document.all.menu.style.pixelLeft++;
setTimeout('ScrollMenu()', scrollDelay);
}
else if (document.all.menu.style.pixelTop < document.body.scrollTop + menuTop)


{
document.all.menu.style.pixelTop++;
setTimeout('ScrollMenu()', scrollDelay);
}
else if (document.all.menu.style.pixelLeft > document.body.scrollLeft + menuLeft)


{
document.all.menu.style.pixelLeft--;
setTimeout('ScrollMenu()', scrollDelay);
}
else if (document.all.menu.style.pixelTop > document.body.scrollTop + menuTop)


{
document.all.menu.style.pixelTop--;
setTimeout('ScrollMenu()', scrollDelay);
}
}
//-->
</SCRIPT>
</HEAD>
<BODY onScroll="ScrollMenu()">
<DIV id="menu" style="BORDER-RIGHT: black 0px solid; PADDING-RIGHT: 2px; BORDER-TOP: black 0px solid; PADDING-LEFT: 2px; LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: black 0px solid; WIDTH: 100px; PADDING-TOP: 2px; BORDER-BOTTOM: black 0px solid; POSITION: absolute; TOP: 10px">
<TABLE cellSpacing="0" cellPadding="0" width="165" align="left" border="0" style="WIDTH: 165px; HEIGHT: 318px">
<TR>
<TD><A href="http://Link 1"><FONT face="Tahoma" size="3"><STRONG>Link 1</STRONG></FONT></A></TD>
</TR>
<TR>
</TABLE>
</DIV>
<CENTER>
<TABLE align=center border=0 height=800>
Not much on this page but go ahead scroll down!!
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
Not bad Huh??
</TABLE>
</CENTER>
</BODY>
</HTML>
Nulrick
05-16-2003, 02:02 PM
yeah, I came across some code similiar to this, but it didn't work with the scroll and positioning elements, which I need to keep.. any ideas?
Nevermore
05-16-2003, 02:04 PM
In Mozilla, Netscape and Opera, you can just used position:fixed; in the CSS.
cacalex
05-16-2003, 02:09 PM
I also tried to make something similar some time ago, and the only thing a find was this (With the speed of the scroll delay faster), so it "almost" scroll down with the page...

as far as i know, there is no way you can give an "fixed" position to an object, making it stay in place will the rest of the page is scrolling down.

I'm not saying that it is impossible, but I can't help you further with this !

By the way, if you find something, post it !
cacalex
05-16-2003, 02:12 PM
Cijori, are you saying that it is impossible in Iexplorer ???

Not fair !

:mad:
khalidali63
05-16-2003, 05:44 PM
Originally posted by Dave Clark
---- it is just jumpy:

Dave

That is actually "literally" true
:D
Nulrick
05-19-2003, 12:57 PM
Dave,

The link you've provided above could work, but looking at your code, I'm not sure how I would adjust the code to work for my scrolling menu, as you have it set up to work with a button..

Your link:

http://www.DaveClarkConsulting.com/...v_position.html


my link:

http://newweb.rnktel.com/designdraf...site/index.html


Could you help me with this?


thanks!!



Nicole
pyro
05-19-2003, 01:08 PM
Perhaps it will be easier to adapt this? http://www.infinitypages.com/research/staticmenu.htm Also that takes advantage of NN/Mozilla's correct interpretation of position:fixed, and only uses javascript for IE, which does not.
Nulrick
05-20-2003, 12:23 PM
well, I tried to apply the code from the above example, but this is what I'm running into:

http://newweb.rnktel.com/designdrafts/test2.html


(also notice how the top:60% within the #floating style is being ignored..)


any thoughts on how to fix/control the scrolling? I don't want the text "Quick Links" to scroll, just the menu below it..

Thanks so much!

Nicole
pyro
05-20-2003, 01:17 PM
Please check if this is what you are looking for: http://www.infinitypages.com/temp/nulrick.htm
Nulrick
05-20-2003, 01:47 PM
Yes, but the "Quick Link" scrolling is still buggy. when you scroll down the page, the quick links scroll bar breaks apart... this is similiar to what I was dealing with earlier..

Also, I'm on a mac.. so how is it working on a PC (I'm assuming you have a PC)?
pyro
05-20-2003, 01:53 PM
Either I don't know what you want, or it is working differently for you on the Mac... In Win XP IE6, here is a screenshot once I am scrolled to the bottom... looks the same as it does at the top: http://www.infinitypages.com/temp/nulrick.gif
Nulrick
05-20-2003, 06:55 PM
Yep! You got it! I am now on a PC and it's working fine.. it's a shame that this isn't the case on Macs.. gotta figure that one out.. sigh.. it's always something!

Thanks for your help.. I really appreciate it!


Nicole