PDA

View Full Version : floating menu problem. (please help)



llllawrence
06-03-2007, 04:38 PM
Hi all, thanks for reading this
I have a rather complicated (at least to me ) floating menu problem.:confused: :confused:
I have a little page like this http://www.ufc.org.hk/about.html

probably you don't understand the chinese so neglect it
but as you can see, I have a rather long page
so that I created a right navigation box (not finished, supposedly for going to those page anchors)

I wanted the right box to move down as soon as I scroll down the page to a extent that the box can not be seen 100%, (being covered by the browser)

I did a search and I found something like this (http://www.jtricks.com/javascript/navigation/floating.html)
which has the effect of moving while scrolling but not really what i wanted..
as,
1. it will start as soon as I scroll ( not until a extent has been reached )
2. its position seems to be fixed but my page is actually centered in a big div...
I want my box to center with my other content like it will now but also it could move while scrolling.

could anyone tell me a workaround for my problem?
I am completely a newbie of this kinda stuff
again thanks for reading this:) :)

Trinithis
06-03-2007, 04:42 PM
I wanted the right box to move down as soon as I scroll down the page to a extent that the box can not be seen 100%, (being covered by the browser)

Why, and to what extent? Covered by the top, the right, etc? And if the user scrolls back to the very top, will the box still be covered?

llllawrence
06-03-2007, 05:07 PM
Why, and to what extent? Covered by the top, the right, etc? And if the user scrolls back to the very top, will the box still be covered?

maybe i didn't address my problem properly
would you mind take a look at this image (http://ufc.org.hk/prob.jpg)

thanks a million

Trinithis
06-03-2007, 10:20 PM
I'm still not exactly sure what you want, but see how you like this. Place the following code immediately after your <div id="right"> tag is closed.


<script type="text/javascript">
var o = document.getElementById("right");
o.style.position = "relative";
o.startOffsetTop = o.offsetTop;
var moveRight = window.setInterval(function(){o.style.top = Math.max(window.pageYOffset - o.startOffsetTop, 0) + "px";}, 20);
</script>

Only tested in FF because I can't get a shell bookmarklet to work in IE

llllawrence
06-04-2007, 01:09 AM
that's exactly what I wanted,
I figured that animation effect is not necessary !
thanks

firefox works perfect,
not possible to have it in IE??

Trinithis
06-04-2007, 01:11 AM
I think it works in IE. I just haven't tested it. You can though, or if you don't have IE, update your page and I'll check.

llllawrence
06-04-2007, 01:18 AM
updated,
FF works perfect
my IE6 says "done with javascript error"
didn't try IE7
because still I think the majority still uses IE6

Trinithis
06-04-2007, 01:47 AM
As usual, IE does not support certain properties, in this case, window.pageYOffset, so I bummed some code off a site.


<script type="text/javascript">
function getScrollY() {
var scrOfY = 0;
if(window.pageYOffset!==undefined) scrOfY = window.pageYOffset;
else if(document.body && (document.body.scrollTop)) scrOfY = document.body.scrollTop;
else if(document.documentElement && (document.documentElement.scrollTop)) scrOfY = document.documentElement.scrollTop;
return scrOfY;
}
o = document.getElementById("right");
o.style.position = "relative";
o.startOffsetTop = o.offsetTop;
window.setInterval(function(){o.style.top = Math.max(getScrollY() - o.startOffsetTop, 0) + "px";}, 20);
</script>

llllawrence
06-04-2007, 09:02 AM
your the best
thanks!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1