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
Post Reply
mtg
Propeller Head
Posts: 12
Joined: Tue Jun 26, 2018 3:56 am

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

Post by mtg »

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
Propeller Head
Posts: 12
Joined: Tue Jun 26, 2018 3:56 am

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

Post by mtg »

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
joshua_cline
Propeller Head
Posts: 35
Joined: Mon Jun 25, 2018 8:45 am

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

Post by joshua_cline »

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.
mtg
Propeller Head
Posts: 12
Joined: Tue Jun 26, 2018 3:56 am

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

Post by mtg »

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:
joshua_cline
Propeller Head
Posts: 35
Joined: Mon Jun 25, 2018 8:45 am

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

Post by joshua_cline »

That worked! Thank you so much :D
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

Post by MadFlareUser »

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?
mtg
Propeller Head
Posts: 12
Joined: Tue Jun 26, 2018 3:56 am

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

Post by mtg »

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
oelgoetz
Propeller Head
Posts: 41
Joined: Wed Jun 23, 2010 8:04 am

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

Post by oelgoetz »

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.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

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

Post by NorthEast »

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).
amitkapoor
Propeller Head
Posts: 33
Joined: Mon Sep 16, 2019 5:23 am

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

Post by amitkapoor »

This is a time-saver! Thank you.
kel322
Propeller Head
Posts: 34
Joined: Tue Jan 03, 2017 12:56 pm

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

Post by kel322 »

I've used this and it works great in my side nav output. However, when I shrink the browser to tablet and mobile views, the button does not work. Anyone else experience this and/or have some solutions?
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

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

Post by NorthEast »

kel322 wrote:I've used this and it works great in my side nav output. However, when I shrink the browser to tablet and mobile views, the button does not work. Anyone else experience this and/or have some solutions?
I fixed this in my projects by scrolling - html, body, .body-container

So replace

Code: Select all

onclick="$('div.body-container')
With

Code: Select all

onclick="$('html, body, .body-container')
kel322
Propeller Head
Posts: 34
Joined: Tue Jan 03, 2017 12:56 pm

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

Post by kel322 »

Thank you so much for the quick reply!
Post Reply