View Full Version : [DHTML] Keep In View (Float Menu Replacement)

08-02-2006, 03:02 AM
Keep In View

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.

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>

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

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

06-14-2007, 08:14 PM
Excellent script, beautiful clean coding - very impressive and helpful~!

06-15-2007, 03:36 AM
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.

06-15-2007, 03:49 AM
It's kinda jerky, but I suppose that is to be expected, and also extreme in the example with so much moving around.

01-20-2008, 02:29 AM
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.

01-20-2008, 02:53 PM
Wow, old thread bump got me confused there for a moment lol.

01-21-2008, 04:17 PM
Clever scripting.
One general question, though. Why would people use 'float' instead of 'position:fixed'? ('Fixed' is never jerky).

Arie Molendijk.

01-21-2008, 04:56 PM
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.

01-21-2008, 07:06 PM
But 'fixed' can easily be fixed for IE6. And if the floating istn't smooth, it will disturb rather than attract people.

Arie M.

01-21-2008, 07:37 PM
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.

01-21-2008, 09:20 PM
How about this (http://molendijk.110mb.com/fixed.html) one?

01-21-2008, 10:11 PM
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.

01-21-2008, 10:34 PM
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.


01-22-2008, 03:13 AM
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.

06-26-2008, 10:52 PM
Nice compact code, but there are some serious memory and optimization issues. Google javascript closures to learn how to write even better.

10-30-2008, 01:29 PM

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?