COGNOiSe.com - The IBM Cognos Community

IBM Cognos 10 Platform => Cognos 10 BI => Report Studio => Topic started by: kc9400 on 15 Apr 2015 09:41:09 AM

Title: JS to make a floaty button? :-/
Post by: kc9400 on 15 Apr 2015 09:41:09 AM
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.

Title: Re: JS to make a floaty button? :-/
Post by: BigChris on 15 Apr 2015 10:03:42 AM
Sounds like a CSS sort of thing...way outside my area of knowledge though
Title: Re: JS to make a floaty button? :-/
Post by: navissar on 16 Apr 2015 10:10:57 AM
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:

<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!
Title: Re: JS to make a floaty button? :-/
Post by: kc9400 on 12 May 2015 03:46:53 AM
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.
Title: Re: JS to make a floaty button? :-/
Post by: bdbits on 13 May 2015 04:36:45 PM
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.