A Floating Submit Button
When we upgraded our mobile Internet satellite system, the controller came with internal web pages from which settings can be adjusted and the dish given commands. One of the settings pages has a form several scrolls long.
The reason I mention it is because that particular form's submit button stays in the visible area of the browser window, moving along with the scroll. And I thought, "how cool!"
The submit button's up/down movement is bounded left and right by a table data cell. No matter how wide or narrow the web page, the submit button stays with the form, sliding up and down where it's supposed to.
I thought I would show you how it's done.
The original page has the submit button in a table within a table, changing the vertical dimensions of the table whenever a scroll or window resize occurs.
I re-did the code so a div tag with a varying height above the submit button shoves it to where it's supposed to be.
Now, it doesn't have to be a submit button. Although, for large forms where only one or several fields need to have values changed, a floating submit button is a nice, user friendly touch.
In lieu of a submit button, you can have an image, a text ad, a search box, a waving stick man, whatever you please.
To implement something like this, the first step is to copy this JavaScript code and paste it into your web page. The JavaScript is what does the work.
The JavaScript code is ready to copy and paste. No edits are necessary in most cases.
It can be put anywhere in the head or body area of the source code, so long as it doesn't interfere with other page elements.
The next step is to create the floating content, a submit button in this example:
Notice the div with id="Spacer"? That is the div the JavaScript effects. The div gains and loses height as the window is scrolled. As it adjusts, the submit button is shoved into position immediately below the div.
If you change the id to something different, then "Spacer" in the JavaScript also needs to be changed accordingly.
Note also the style specifying 0 for font-size and line-height. It is an accommodation for IE6, which would otherwise insert space above the submit button about equal to the browser default font-size/line-height, even when the div's height is adjusted by the JavaScript to be less than that. To all you who surf with Firefox or other non-IE browser, that's the reason it's there :)
You may replace the submit button in the example with whatever you wish. Probably anything that can otherwise be published on a web page, in any desired combination, could be used instead of the submit button.
If your replacement is not a form element, the form tags enclosing the table in the example can be removed.
This is important: The submit button, or whatever it is replaced with, must be in the browser window when the page first loads. The reason is that the floating content will remain in the relative vertical position it starts out at. If it starts out invisible below the window, it will happily remain there.
Now you know another way to float :)
Will Bontrager
©Copyright 2007 Bontrager Connection, LLC Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
