By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,569 Members | 1,181 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,569 IT Pros & Developers. It's quick & easy.

Floating Menu

P: n/a
I'm working with the cookie-cutter code located here:

http://www.jtricks.com/javascript/na.../floating.html

Very helpful script, BTW!

I'm trying to modify it, though, so that the menu will scroll relative
to a parent DIV instead of the main window. So, I have something like
this (simplified so that you can copy it to your viewer and see the
problem):

<br><br><br><br><br>
<table height="1000">
<tr valign="top">
<td>&nbsp;</td>
<td>
<div id="primary" style="position: relative">
<div id="floatdiv" style="
position: relative;
top: 0px; left: 0px;
width: 135px; height: 50px; border: 2px solid #000000">
Menu
</div>
</div>
</td>
</tr>
</table>

<script type="text/javascript">
// copy from jtricks above
</script>

You can see that the physical location of "primary" is 110px from the
top of the window. It's not positioned there through CSS, though; that
just happens to be where it falls in the design because of elements on
the page above it. In the sample, I gave a bunch of <br>, but on my
live page there's a logo, navigation, etc.

My problem is that when "floatdiv" moves down, it consistently stays
110px from the top of the window. Meaning, if you scroll down two or
three folds, you'll see 110px of white above the word "Menu," when I
really want it to be more like 10px. When the page initially loads
before you scroll down, the position is perfect; I just want it to not
remember to be 110px down when you scroll.

Or, I guess it's more accurate to say that I don't want the menu to
start moving until I've scrolled down by around 100px.

Any ideas on how to modify the code so that when I scroll down,
"floatdiv" will be 10px or so from the top instead of 110? I tried
modifying the "targetY" variable to 110, then to 0, then to -110, and
it doesn't seem to change anything.

TIA,

Jason
Jul 12 '08 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Jason Carlton wrote:
I'm working with the cookie-cutter code located here:

http://www.jtricks.com/javascript/na.../floating.html

Very helpful script, BTW!
If it is as helpful as your failed attempt at writing HTML below ...

I won't visit the site just to add to your hits anyway.
[...]
<br><br><br><br><br>
<table height="1000">
The `table' element has no `height' attribute.

<http://validator.w3.org/>
[...]
In the sample, I gave a bunch of <br>, but on my
live page there's a logo, navigation, etc.
Why do you provide pointless examples?
My problem is that when "floatdiv" moves down, it consistently stays
110px from the top of the window. Meaning, if you scroll down two or
three folds, you'll see 110px of white above the word "Menu," when I
really want it to be more like 10px. When the page initially loads
before you scroll down, the position is perfect; I just want it to not
remember to be 110px down when you scroll.

Or, I guess it's more accurate to say that I don't want the menu to
start moving until I've scrolled down by around 100px.

Any ideas on how to modify the code so that when I scroll down,
"floatdiv" will be 10px or so from the top instead of 110? I tried
modifying the "targetY" variable to 110, then to 0, then to -110, and
it doesn't seem to change anything.
You have a rather long-winded way to tell everyone you do not know what you
are doing. I suggest you learn HTML and CSS before you attempt to script
Web user agents. Try googling "position fixed".
PointedEars
--
Use any version of Microsoft Frontpage to create your site.
(This won't prevent people from viewing your source, but no one
will want to steal it.)
-- from <http://www.vortex-webdesign.com/help/hidesource.htm>
Jul 13 '08 #2

P: n/a
If it is as helpful as your failed attempt at writing HTML below ...
>
I won't visit the site just to add to your hits anyway.
I didn't give a site for you to visit, genius.

The `table' element has no `height' attribute.

<http://validator.w3.org/>
Excuse the crap out of me, I didn't know that I had to post validated
code as a sample. I would have assumed that a genius such as yourself
would be able to work with it.

In case you're too stupid...

<table>
<tr height="10000">

How's that, baby? Do you still need a pacifier?

Why do you provide pointless examples?
Just because you're too stupid to understand doesn't make it
pointless.

You have a rather long-winded way to tell everyone you do not know what you
are doing. *I suggest you learn HTML and CSS before you attempt to script
Web user agents. *Try googling "position fixed".
Interestingly, you have a rather long-winded way to tell everyone that
you're a dick, but still don't know how to answer the question. Why
waste everyone's time if you can't contribute?

::sigh::

Thanks for being a douche. You've reminded me of why anyone of value
has stopped using the newsgroups.
Jul 13 '08 #3

P: n/a
Jason Carlton wrote:
[...]
>You have a rather long-winded way to tell everyone you do not know what you
are doing. I suggest you learn HTML and CSS before you attempt to script
Web user agents. Try googling "position fixed".

Interestingly, you have a rather long-winded way to tell everyone that
you're a dick, but still don't know how to answer the question. Why
waste everyone's time if you can't contribute?

::sigh::

Thanks for being a douche. You've reminded me of why anyone of value
has stopped using the newsgroups.
That must be the people from whom Googlodytes like you have learned proper
language and Web development. FOAD.
PointedEars
--
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
-- Richard Cornford, cljs, <f8*******************@news.demon.co.uk>
Jul 14 '08 #4

P: n/a
On Jul 14, 11:06*am, Jason Carlton <jwcarl...@gmail.comwrote:
If it is as helpful as your failed attempt at writing HTML below ...
I won't visit the site just to add to your hits anyway.

I didn't give a site for you to visit, genius.
The `table' element has no `height' attribute.
<http://validator.w3.org/>

Excuse the crap out of me, I didn't know that I had to post validated
code as a sample. I would have assumed that a genius such as yourself
would be able to work with it.

In case you're too stupid...

<table>
<tr height="10000">

How's that, baby? Do you still need a pacifier?
Why do you provide pointless examples?

Just because you're too stupid to understand doesn't make it
pointless.
You have a rather long-winded way to tell everyone you do not know whatyou
are doing. *I suggest you learn HTML and CSS before you attempt to script
Web user agents. *Try googling "position fixed".

Interestingly, you have a rather long-winded way to tell everyone that
you're a dick, but still don't know how to answer the question. Why
waste everyone's time if you can't contribute?

::sigh::

Thanks for being a douche. You've reminded me of why anyone of value
has stopped using the newsgroups.
Actually, the fix is simple - only one extra line of code is needed in
the floating menu script.

On line 70, the script determines what the new desired Y coordinate
(position from the top of the page) will be for the div to move to.
All you need to do is check this value after it has been calculated -
it is lower the 150 (or whatever), set it to 150.

So, immediately before "if (floatingMenu.targetY < 0)" on line 76 add
the following code:

floatingMenu.shiftY = ( floatingMenu.shiftY < 150 ) ? 150 :
floatingMenu.shiftY;

Incidentally, since you now now that floatingMenu.shiftY will always
be greater than zero, you could remove the next code block.

And presto - it works!

Best of luck,
Hamish
Jul 14 '08 #5

This discussion thread is closed

Replies have been disabled for this discussion.