JS to make a floaty button? :-/

[kc9400]

I can't find anything on this.

Basically I have a text item on the my report which Says 'Back' what this does is take you back up a level in a report. Not really relevant.

It appears at the end of the report so you have to scroll to the bottom before you see it.

Is there a way to make the button show at the bottom of the screen, instead of having to go to the bottom of the page and as you scroll it'll move down with you always being at the bottom of the screen.

Kind of a floating, always on top button always visible.... has anyone else done something similar? either with pictures or text.

[BigChris]

Sounds like a CSS sort of thing...way outside my area of knowledge though

[navissar]

This may sound like a simple request, but if it were my client, I'd probably try to get them to drop it. In case you couldn't, I did most of the heavy lifting already.
First, you must isolate your "back" text. put before it an HTML item with <div id="backbutton" style="position:absolute">
After it put another HTML item with </div>
I suggest that you style it a little - give it a background colour and borders, so it is easily discernible, because it is going to hover over your data.
Now, you can put your button with the wrapping HTML items anywhere on the page, because we're going to fix it to the bottom left corner.
Stick this script in an html item AFTER where your back button is. It's not pretty, but it will do the trick:

Code Select Expand


<script>
var bb=document.getElementById("backbutton");
var fW = (typeof getFormWarpRequest == "function" ? getFormWarpRequest() : document.forms["formWarpRequest"]);

                if ( !fW || fW == undefined) { fW = ( formWarpRequest_THIS_ ? formWarpRequest_THIS_ : formWarpRequest_NS_ );}

                var preFix = "";

                if (fW.elements["cv.id"]) {  preFix = fW.elements["cv.id"].value; }
var cont=document.getElementById("RVContent"+preFix);
function setScroll(){var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;
bb.style.top=y-100+cont.scrollTop;
}
cont.onscroll=function(){setScroll();}
window.onresize=function(){setScroll();}
setScroll();

</script>

(Basically this is a script that runs whenever you scroll or resize the window, and repositions the back button).

Enjoy!

[kc9400]

Apologies for the late reply. Cheers for that Nim :)

I'll give it a go later today as I've just got back after a nice break.

[bdbits]

If you want a fixed layout with the button at the bottom, you can do that with a table or some divs, and little CSS.

But I kind of like Nimrod's floating button idea, so give it a whirl. If you decide you do not like it and want a fixed layout approach, post back and I can probably whip something up.