Back to Top button in SideNav

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
MPlatt
Propeller Head
Posts: 13
Joined: Mon Mar 02, 2015 10:20 am

Back to Top button in SideNav

Post by MPlatt »

I'm trying to implement this Back to Top button - https://codepen.io/rdallaire/pen/apoyx
I've made a few changes (e.g. I'm not using font-awesome) and it works, except when the browser is wide and displays the Side Navigation panel.

I think this is caused by either one of the following issues:

When the Side Navigation panel displays, the scrollbar for the topic is no longer for the whole window, but only for the body.
What can I do in the javascript to detect scrolling in the body instead of the window?

or:

When the Side Navigation displays, the width properties of the body are changed and my button is hidden somewhere off screen.
What can I do in the css to show the button when this happens?

Button added below the body proxy in the masterpage:

Code: Select all

<MadCap:bodyProxy /><a href="#top" id="return-to-top"><p><img src="../Images/Standard/chevron-up.png" style="mc-thumbnail: none;width: 30px;height: auto;" /></p></a>
My altered css:

Code: Select all

#return-to-top
{
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: rgb(0, 0, 0);
	background: rgba(0, 0, 0, 0.7);
	width: 50px;
	height: 50px;
	display: block;
	text-decoration: none;
	-webkit-border-radius: 35px;
	-moz-border-radius: 35px;
	border-radius: 35px;
	display: none;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	z-index: 99;
}

#return-to-top p
{
	color: #fff;
	margin: 0;
	position: relative;
	text-align: center;
	font-size: 30px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

#return-to-top:hover
{
	background: rgba(0, 0, 0, 0.9);
}

#return-to-top:hover p
{
	color: #fff;
	top: -5px;
}
The javascript:

Code: Select all

// ===== Scroll to Top ==== 
$(window).scroll(function() {
    if ($(this).scrollTop() >= 150) {        // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200);    // Fade in the arrow
    } else {
        $('#return-to-top').fadeOut(200);   // Else fade out the arrow
    }
});

$('#return-to-top').click(function() {      // When arrow is clicked
    $('body,html').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
});
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Back to Top button in SideNav

Post by NorthEast »

For side nav, you need to replace:

Code: Select all

$(window).scroll(function(){
With:

Code: Select all

$('div.body-container').scroll(function(){
See my post in this thread: viewtopic.php?f=13&t=28915#p131981
whunter
Sr. Propeller Head
Posts: 429
Joined: Thu Mar 12, 2009 4:49 pm
Location: Portland, OR

Re: Back to Top button in SideNav

Post by whunter »

EDIT: Duh, I had forgotten to reference the script in the brand new project. After fixing that, it works (fades in).
That's not the case in my help project though, so I guess I have done something to my project that makes this not work. Hmm.

______________________________________________

FWIW: I tried this in my help project (with Dave's adjustment) and it did not work for me -- meaning, icon does not fade in on scroll.

I then tried it in a brand new Flare Side Nav project, in case I had done something to my project that would make it not work. I could not get it to work there either.

If anyone has gotten it to work in side nav and has any insight into what may be going wrong, I would appreciate any help.
qtxasjo
Propeller Head
Posts: 37
Joined: Tue Oct 16, 2007 5:06 am
Location: Europe

Re: Back to Top button in SideNav

Post by qtxasjo »

I have gotten the fade in button to work in side navigation by adding these:

JavaScript as separate file:

Code: Select all

$('div.body-container').scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('.backToTop').fadeIn();
		} else {
			$('.backToTop').fadeOut();
		}
	});
In my CSS:

Code: Select all

a.backToTop
{
   position: fixed;
   bottom: 10px;
   right: 30px;
   display: none;
   z-index: 9999;
}
In my master pages, between my breadcrumbs and body proxies:

Code: Select all

<script type="text/javascript" src="../Scripts/backtotop.js"></script>
<a name="top"></a>
<a class="backToTop" href="#top"><img src="../Images/Icons/Arrows/chevron.png" alt="" title="" /></a>
miseryshusband
Jr. Propeller Head
Posts: 8
Joined: Thu Oct 25, 2018 4:51 am

Re: Back to Top button in SideNav

Post by miseryshusband »

I am having an issue with this. It worked perfectly with 2018R2 and I think 2019, however when I publish in 2019R2, the arrow no longer works. If I publish the same project in 2018R2 (I have both versions on my computer) the arrow re-appears and works as designed.

Has anyone else had this problem or figured out a way to correct it.
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Back to Top button in SideNav

Post by ChoccieMuffin »

Sounds like (yet another!) bug in 2019r2. I suggest you raise a bug with Madcap, see my signature for a link to the bug report form.

I'm pretty disappointed with the latest release, there seem to be rather too many bugs that people on the forums are finding, and with it being an update rather than a new release, I can't have both 2019 and 2019r2 on my machine together.
Started as a newbie with Flare 6.1, now using Flare 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
qtxasjo
Propeller Head
Posts: 37
Joined: Tue Oct 16, 2007 5:06 am
Location: Europe

Re: Back to Top button in SideNav

Post by qtxasjo »

@miseryshusband, I'm still using my code on 2019R2 and it works fine for me. The only update I had to do was to change

Code: Select all

div.body-container
to

Code: Select all

.body-container
in the JavaScript.
miseryshusband
Jr. Propeller Head
Posts: 8
Joined: Thu Oct 25, 2018 4:51 am

Re: Back to Top button in SideNav

Post by miseryshusband »

@ChoccieMuffin and @ qtxasjo

Thanks for your responses and sorry it took so long for getting back. My work load has been crazy and I forgot I put this here. I took screenshots of the problem and my sysadmin put a trouble ticket in. There response was they do not provide support to 3 party java scripts.

As for the code change, this is not the only java script I have been having problems with. I use one from the forum to make image maps responsive. With 2019R2 the took tip shows up randomly on the page when the spot is hovered over. in 2018R2 it shows up to the bottom right, where it belongs.
Nita Beck
Senior Propellus Maximus
Posts: 3667
Joined: Thu Feb 02, 2006 9:57 am
Location: Pittsford, NY

Re: Back to Top button in SideNav

Post by Nita Beck »

Is there anything relevant to your script in this Flare knowledge base article, effective as of Flare 2019 r2 build 15.1.7283, release date 12/12/2019, assuming, of course, that you have upgraded to that release? Look at the Note in particular.

http://kb.madcapsoftware.com/Content/Mi ... hanges.htm
Nita
Image
RETIRED, but still fond of all the Flare friends I've made. See you around now and then!
miseryshusband
Jr. Propeller Head
Posts: 8
Joined: Thu Oct 25, 2018 4:51 am

Re: Back to Top button in SideNav

Post by miseryshusband »

Nita Beck wrote:Is there anything relevant to your script in this Flare knowledge base article, effective as of Flare 2019 r2 build 15.1.7283, release date 12/12/2019, assuming, of course, that you have upgraded to that release? Look at the Note in particular.

http://kb.madcapsoftware.com/Content/Mi ... hanges.htm
Thank you for this. First let me say the fix @qtxasjo provided fixed the arrow problem, but the tooltip on my responsive image maps was still broke on 2019R2(oct2019) was still broken. Being that I normal work on two seperate network, the company and a normally isolated network, flare is on the isolated, I didn't know they release a patch on 12/12/2019. The patch fixed the responsive image map problem.

Thank you for pointing me in the right direction.
mdpais-c
Propeller Head
Posts: 20
Joined: Wed May 13, 2020 11:56 am

Re: Back to Top button in SideNav

Post by mdpais-c »

I've used this code in my project after replacing div.body-container with .body-container. It works perfectly in the web view. The problem is the button doesn't display in the tablet view (when I reduce the width of the window until the side nav bar disappears). Any suggestions?
qtxasjo wrote:
JavaScript as separate file:

Code: Select all

$('div.body-container').scroll(function(){
		if ($(this).scrollTop() > 100) {
			$('.backToTop').fadeIn();
		} else {
			$('.backToTop').fadeOut();
		}
	});
In my CSS:

Code: Select all

a.backToTop
{
   position: fixed;
   bottom: 10px;
   right: 30px;
   display: none;
   z-index: 9999;
}
In my master pages, between my breadcrumbs and body proxies:

Code: Select all

<script type="text/javascript" src="../Scripts/backtotop.js"></script>
<a name="top"></a>
<a class="backToTop" href="#top"><img src="../Images/Icons/Arrows/chevron.png" alt="" title="" /></a>
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Back to Top button in SideNav

Post by NorthEast »

Yep, I noticed that in my projects too and realised it didn't work in tablet/mobile, so my hacky solution is to duplicate the javascript, so it checks both he body-container and the window positions.

Code: Select all

	/* SIDE NAV - in desktop view, only the .body-container is scrolled */
	$(".body-container").scroll(function(){
		if ($(this).scrollTop() > 200) {
			$('.go-to-top').fadeIn();
		} else {
			$('.go-to-top').fadeOut();
		}
	});
	/* SIDE NAV - in mobile/tablet view, only the window is scrolled */	
	$(window).scroll(function(){
		if ($(this).scrollTop() > 200) {
			$('.go-to-top').fadeIn();
		} else {
			$('.go-to-top').fadeOut();
		}
	});
mdpais-c
Propeller Head
Posts: 20
Joined: Wed May 13, 2020 11:56 am

Re: Back to Top button in SideNav

Post by mdpais-c »

Brilliant. Thanks Dave. There's a small glitch when you scroll down and then resize the window to the tablet view or vice versa (the icon disappears and reappears) but I can live with that.
Post Reply