Javascript on custom toolbar (back-to-top) button

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

Javascript on custom toolbar (back-to-top) button

Postby mtg on Mon Jul 30, 2018 4:55 am

Hi,

I am trying to add a back-to-top button to the bottom of my topics using a custom toolbar button and javascript. I already tried all kind of solutions that have been mentioned in the forum but nothing works in our help.

We are using:
- HTML5 output
- side navigation

What I've tried so far:
1. Adding a custom toolbar button.
2. Adding the javascript code in the 'Setup' tab of the skin for the button:
Code: Select all
function scrollBackToTop(){
   alert("hallo");
      window.scrollTo(0,0);
};

3. Adding the event call to the javascript function in the 'Styles' tab:
back_to_top_button_event_call.png

4. Adding the custom button to my master page.

Problem:
When I click on the button in my generated help nothing happens. I tested if the script is called with an alert method and this works. However it seems as if the scrollTo method is not recognized/known.
I also tried several other javascript calls instead of 'window.scrollTo(0,0)' but without any effect.

I assumed that the jquery lib that is included by default from Flare (<script src="../Resources/Scripts/jquery.js"></script>) does not know the scrolling methods. Therefore, I added a link to the jquery lib 'jquery-3.3.1.min.js' to my master page:
Code: Select all
<script src="../Scripts/jquery-3.3.1.min.js"></script>


If I link to jquery-3.3.1.min.js then the back-to-top button works. But then other problems occur:
- the position of the header is not fixed anymore. If I scroll down, the header moves up.
- the TOC is not displayed anymore. Only the background is visible.

Probably, the 'default' jquery file from Flare conflicts with the additionally included jquery-3.3.1.min.js file?? So what can I do to make this work?? I am no javascript pro and don't know what else I can try to fix this :cry:
Others seem to have a working solution but I don't get which javascript code I have to use that also works with the side navigation and the default jquery lib included by Flare.

Anybody any idea??
You do not have the required permissions to view the files attached to this post.
mtg
Jr. Propeller Head
 
Posts: 7
Joined: Tue Jun 26, 2018 3:56 am

Re: Javascript on custom toolbar (back-to-top) button

Postby mtg on Mon Jul 30, 2018 10:49 pm

I think I just found the code that works with the jquery version of Flare:

Code: Select all
function scrollBackToTop(){
   $("div.body-container").scrollTop(0);
};


On a first check this seems to work. However I will test it today in the different browsers and manuals to see if it really works as expected.. :D
mtg
Jr. Propeller Head
 
Posts: 7
Joined: Tue Jun 26, 2018 3:56 am

Re: Javascript on custom toolbar (back-to-top) button

Postby joshua_cline on Fri Aug 24, 2018 6:32 am

Hi. I am new to flare and I am trying to add a back-to-top button. Can you offer a little more clarity on how you accomplished this? I've looked at other posts in the forum and nothing that I've tried seems to work. Thank you for any help you can offer.
joshua_cline
Propeller Head
 
Posts: 35
Joined: Mon Jun 25, 2018 8:45 am

Re: Javascript on custom toolbar (back-to-top) button

Postby mtg on Mon Aug 27, 2018 7:06 am

Hi,

I used a solution in which I added the code for the back-to-top button including the jquery part only in the master page:

I added the following code at the respective place in my master page where I want the button to be displayed:
Code: Select all
<a href="#"><img src="../Images/Icons/arrow_up_16pt.png" onclick="$('div.body-container').animate({scrollTop: 0}, 300);" class="back-to-top" /></a>


I wanted to add the animated scroll effect so I added the animate function. However, if you don't want to have this animated scroll effect, you could also simply use
Code: Select all
onclick="$('div.body-container').scrollTop(0);"
instead of the "onclick" declaration above. Both "onclick" declarations worked fine for me.


In my style sheet I have added the style for my back-to-top image:
Code: Select all
img.back-to-top
{
   vertical-align: middle;
   padding: 13px 15px 13px 15px;
   mc-float: frame-center;
   margin-bottom: 0px;
}


This solution worked best for me, especially since it actually is quite simple and I don't have to add a separate script file or add any jquery code to the skin.
I hope this helps for your back-to-top button. If you still have questions, let me know! :wink:
mtg
Jr. Propeller Head
 
Posts: 7
Joined: Tue Jun 26, 2018 3:56 am

Re: Javascript on custom toolbar (back-to-top) button

Postby joshua_cline on Mon Aug 27, 2018 1:02 pm

That worked! Thank you so much :D
joshua_cline
Propeller Head
 
Posts: 35
Joined: Mon Jun 25, 2018 8:45 am

Re: Javascript on custom toolbar (back-to-top) button

Postby MadFlareUser on Thu Dec 06, 2018 12:10 pm

Adding the javascript code in the 'Setup' tab of the skin


I see that you have said that you only add the script to the master page, not the skin, but I don't see a way to add scripts to the skin in any case. On the Setup tab I only see a field for entering the logo URL and the Skin ID. Where would you have entered the script in this editor?
MadFlareUser
Jr. Propeller Head
 
Posts: 2
Joined: Thu Apr 13, 2017 11:33 pm
Location: San Francisco

Re: Javascript on custom toolbar (back-to-top) button

Postby mtg on Fri Mar 15, 2019 3:45 am

Hi ,

sorry for the late answer! I am not sure if this was a little confusing. I assume you think that I added some kind of a link to an external script file?

In my solution I simply added the code with the jquery to the <img> tag of my back-to-top button in the master page, but within the text editor.
  • Open the master page.
  • Switch to the 'Text Editor' view.
  • Probably, you have already added the image for your back-to-top button to the master page. (something like <img src="../Images/Icons/arrow_up_16pt.png"/>)
  • You can add the 'back-to-top' behavior by adding the code I mentioned in my previous post to your img tag:
    Code: Select all
    <a href="#"><img src="../Images/Icons/arrow_up_16pt.png" onclick="$('div.body-container').animate({scrollTop: 0}, 300);" class="back-to-top" /></a>

To style the image of my button, I also added the css class 'back-to-top'.

Thus, there is no link to an external script file. The respective code is simply added locally.

If you still have questions, please let me know! :D
mtg
Jr. Propeller Head
 
Posts: 7
Joined: Tue Jun 26, 2018 3:56 am

Re: Javascript on custom toolbar (back-to-top) button

Postby oelgoetz on Tue Mar 19, 2019 3:05 am

mtg wrote:I used a solution in which I added the code for the back-to-top button including the jquery part only in the master page:


The solution works for me too. So it's fine.
But just a comment: I hardly doubt that this solution uses jquery functionality. I rather think that the hyperlink "<a href="#">" causes the scroll-to-top behaviour.
A strong indicator for my assumption is the fact that changing the ms value in "animate({scrollTop: 0}, 300);" doesn't have any consequences.
oelgoetz
Propeller Head
 
Posts: 29
Joined: Wed Jun 23, 2010 8:04 am

Re: Javascript on custom toolbar (back-to-top) button

Postby Dave Lee on Tue Mar 19, 2019 5:36 am

oelgoetz wrote:
mtg wrote:I used a solution in which I added the code for the back-to-top button including the jquery part only in the master page:


The solution works for me too. So it's fine.
But just a comment: I hardly doubt that this solution uses jquery functionality. I rather think that the hyperlink "<a href="#">" causes the scroll-to-top behaviour.
A strong indicator for my assumption is the fact that changing the ms value in "animate({scrollTop: 0}, 300);" doesn't have any consequences.


It does actually work, but it depends on the skin you're using, as that solution is for a Side nav skin, but not a Top nav skin.
(I've mentioned this in various posts about scroll to top - e.g. viewtopic.php?f=13&t=28915#p131981)

The area containing the topic that you need to animate/scroll is different for each skin:
* For a side nav skin you need to animate/scroll the div.body-container, so use the selector $('div.body-container')
* For a top nav skin you just animate the whole page using the html tag, so use the selector $('html')

While the hyperlink href="#" might move to the top of the page if you're using a top nav skin, it would not work for a side nav skin. The jquery animate scrolls the page up smoothly, but obviously to see this work you need to use the correct selector for the type of skin (as I mention above).
Dave Lee
Master Propellus Maximus
 
Posts: 5653
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Javascript on custom toolbar (back-to-top) button

Postby amitkapoor on Mon Sep 23, 2019 7:21 pm

This is a time-saver! Thank you.
amitkapoor
Jr. Propeller Head
 
Posts: 8
Joined: Mon Sep 16, 2019 5:23 am


Return to Web-based Outputs

Who is online

Users browsing this forum: Google [Bot] and 1 guest