[DHTML] Keep In View (Float Menu Replacement)

[RoyW]

1) CODE TITLE:
Keep In View

2) AUTHOR NAME/NOTES:
Roy Whittle
This script will keep almost any html element in view even if the user scrolls the browser window.

It is a re-write of the float menu code. Now we (js coders) don't have to consider netscape 4 it makes the code a lot simpler. It also solves problems that users have asked for. How do align center, how do I keep it in the left/right of a table column, how can I make it not scroll untill it is going off the screen.

I have tested the code in various browers, with various doctype settings, floating various HTML elements(table, td, tr, img, div, span) but due to the possible combinations I cannot test all. You could simply state that all "Keep In View" elements must be in div's.

I have coded it so all the user has to do is give the element an "id" of "jsfx_float<x>" where x=0 to 3. The code can easily be changed to let the user specify the "id" of the element that needs to float.

3) DESCRIPTION:
Using this script you can keep any html element in view when the user scrolls the browser window. Simply give the element an id of jsfx_float0, jsfx_float1, jsfx_float2, jsfx_float3, then cut and paste the script just before the closing body tag </body>

4) URL TO CODE:
Keep In View (http://www.jsfx.com/submitscripts/float2/index.html)

P.S.
If javascript is disabled then the page should layout as normal but the elelemnts will simply not float.

[joshywood]

Excellent script, beautiful clean coding - very impressive and helpful~!

[jscheuer1]

It is nice looking. However, you should probably round off your math in one or more spots to be kind to browsers, and cpu's.

[djr33]

It's kinda jerky, but I suppose that is to be expected, and also extreme in the example with so much moving around.

[yela]

This is a cool script, it already starts at the position you want it but I wonder how can you limit the movement of the floating elements to a specific area (like a table) so it doesn't go all the way til the end?. Anyone? Thanks.

[ddadmin]

Wow, old thread bump got me confused there for a moment lol.

[molendijk]

Clever scripting.
One general question, though. Why would people use 'float' instead of 'position:fixed'? ('Fixed' is never jerky).

Arie Molendijk.

[jscheuer1]

Clever scripting.
One general question, though. Why would people use 'float' instead of 'position:fixed'? ('Fixed' is never jerky).

Arie Molendijk.

I know that one, fixed isn't supported in IE 6, and because many people like the way that a floating object attracts more attention and looks more graceful than a fixed one. The trick is to get the floating action smooth. Generally this is done by decreasing the increment of positional change as the object approaches its desired location.

[molendijk]

But 'fixed' can easily be fixed for IE6. And if the floating istn't smooth, it will disturb rather than attract people.

Arie M.

[jscheuer1]

I've never seen any fix for 'fixed' in IE 6 that wouldn't breakdown under certain layouts, and/or styles, and/or scripts.

I won't argue the point about floating being no good if it is jerky, because I never said that it was good if jerky. But that is a separate issue.

[molendijk]

How about this (http://molendijk.110mb.com/fixed.html) one?

[jscheuer1]

Requires javascript and (I believe) 'safe' Active X elements enabled, unnecessarily burdens IE 7 and presumably later, could still mess up in a complex style/layout design.

[molendijk]

Tested it with safe ActiveX disabled, and still works. I use it on sites with complex js & css, never encountered a problem.
Requires javascript, true. Will not burden IE 7 anymore when the time has come where nobody uses IE6: I'll simply leave it out at that moment.

Arie.

[jscheuer1]

Won't be fixed on left right scroll. The fact that you use it effectively is a separate issue from it being a suitable 'one size fits all' method for fixed position in IE 6.

[shmooper]

Nice compact code, but there are some serious memory and optimization issues. Google javascript closures to learn how to write even better.

[AshleyQuick]

Hi,

Is there a version that will place this in the upper right corner?

Also, I noticed the demo contains two doctype declarations. Is this a necessity?

Ashley