Back to Top button in SideNav

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets

Back to Top button in SideNav

Postby MPlatt on Thu Sep 27, 2018 6:43 am

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);
});
MPlatt
Jr. Propeller Head
 
Posts: 8
Joined: Mon Mar 02, 2015 10:20 am

Re: Back to Top button in SideNav

Postby Dave Lee on Mon Oct 01, 2018 12:16 am

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
Dave Lee
Master Propellus Maximus
 
Posts: 5674
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Back to Top button in SideNav

Postby whunter on Mon Oct 08, 2018 8:52 am

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.
whunter
Sr. Propeller Head
 
Posts: 429
Joined: Thu Mar 12, 2009 4:49 pm
Location: Portland, OR

Re: Back to Top button in SideNav

Postby qtxasjo on Tue Apr 30, 2019 3:02 am

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>
qtxasjo
Propeller Head
 
Posts: 37
Joined: Tue Oct 16, 2007 5:06 am
Location: Europe

Re: Back to Top button in SideNav

Postby miseryshusband on Mon Nov 25, 2019 8:56 am

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.
miseryshusband
Jr. Propeller Head
 
Posts: 4
Joined: Thu Oct 25, 2018 4:51 am

Re: Back to Top button in SideNav

Postby ChoccieMuffin on Mon Nov 25, 2019 10:11 am

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 2019r1.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
ChoccieMuffin
Senior Propellus Maximus
 
Posts: 2161
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Back to Top button in SideNav

Postby qtxasjo on Tue Nov 26, 2019 1:43 am

@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.
qtxasjo
Propeller Head
 
Posts: 37
Joined: Tue Oct 16, 2007 5:06 am
Location: Europe


Return to Web-based Outputs

Who is online

Users browsing this forum: No registered users and 3 guests