PDA

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



RoyW
08-02-2006, 03:02 AM
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
06-14-2007, 08:14 PM
Excellent script, beautiful clean coding - very impressive and helpful~!

jscheuer1
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.

djr33
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.

yela
01-20-2008, 01: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.

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

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

Arie Molendijk.

jscheuer1
01-21-2008, 03: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.

molendijk
01-21-2008, 06: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.

jscheuer1
01-21-2008, 06: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.

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

jscheuer1
01-21-2008, 09: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.

molendijk
01-21-2008, 09: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.

Arie.

jscheuer1
01-22-2008, 02: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.

shmooper
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.

AshleyQuick
10-30-2008, 01:29 PM
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