RH9 HTML - a back-to-top button for long topics

[Guest]

Is it possible for Robohelp to automatically generate a back to top of page button whenever I create a long topic?

[RoboColum_n_]

You could handle this by use of a master page. This could be setup with a bookmark (e.g. called "top") and a hyperlink at the bottom linked to it. If both the bookmark and the link were part of the master page body, this would do exactly what you want. Then you just need to assign the master page to the required topics.

---

The RoboColum(n)

@robocolumn

Colum McAndrew

[Guest]

I use this code:

<p class="top"><a class="topic" title="Return to Top" href="#">↑ Top</a></p>

Paste it at the bottom of the HTML page before thelast body tag.

The ↑ Top remains visible at all time.

Jac

[Guest]

Albeit, that's not automatic generation 🙂

[MergeThis]

It is, if you've placed it in the footer of the Master page, right?

Good luck,

Leon

[MergeThis]

BTW, if you'd like a floating Top "button" (which always floats on the screen no matter where the topic is, vertically), check out the following.

At the top of each topic (I have it just under the H1 heading):

<p class="top"><a class="topic" title="Return to Top" href="#">↑ Top</a></p>

It will look strange in Design mode, but not in Preview or the output.

In your .css style sheet file (place the p.top after the default p & LI.p settings, and the A.topics after the default A settings). Note: The z-index: 1; is a layering control to ensure that the element always appears "in front."

p.top {
position: fixed;
background-color: #d8e4f8;
border: 2px solid #b0c4de;
padding: 2px;
right: 12px;
bottom: 5px;
z-index: 1;
}

A.topic:link,
A.topic:visited {
color: #0000CD;
font-family: Verdana, sans-serif;
font-size: 80%;
font-weight: normal;
font-color: 000080;
padding: 15;
text-decoration: none;
}
A.topic:hover {
color: #000080;
font-size: 80%;
font-weight: normal;
text-decoration: none;
}

Obviously, you can customize this for fonts, colors, padding, etc., based on your design needs.

Good luck,

Leon

[JGaf]

Hi,

Thanks for your "top of page" code, it was exactly what I was looking for.  However, I've run into a bit of an issue...

I tested MergeThis' code/css on a few pages of my document.  I made a few modifications based on our own standards and all went well.  So I began the task of adding this feature to only those pages which require a bit of scrolling.  After a few insertions, I realized that it would be better to make it a snippet, that way, if things change later on, I only need to modify the snippet. (of course).  I made this a snippet then added it to a bunch of files, then stopped to test it.  Well, when the doc is generated, it adds "href=../../../#" to the original href="#" depending on location of the particular file and the location of the snippet file.  Ok, so I shouldn't do this type of thing in snippets.

So, to save some time and avoid rework, I deleted the snippet and selected "Delete Snippet And Replace References With Actual Content". I assumed that the code itself would be added to each file, and the actual snippet would be removed from the Snippet pod.   This did not happen, the snippet entry in the Snippets pod was removed, but the files still contained references to the snippet. 

what did I do wrong?

RH8.02.208

WebHelp

(comment on the snippets: I can't add the "top of page" stuff to the master page because I use Zoom search, which causes me to manually add breadcrumbs, to use the <!--ZOOMSTOP--> and ZOOMRESTART comments; and I only want "top of page" to appear on those pages which require scrolling.  This isn't a global thing..

[Peter Grainge]

You are not doing anything wrong. RoboHelp Snippets are designed to be created in one place and any relative path gets "helpfully" amended if the topic is several levels down. That you have discovered.

I'm not sure what happened then as I just added a snippet to four topics and saved. Then I deleted the snippet from the pod and selected the third option, the one you specified. The snippet was deleted from the pod and the topics then had the text, albeit with the paths prefixed but that is a simple tidy up.

I have tested in RoboHelp 9 but I'm pretty sure it would be the same in 8. Perhaps try in a test project?

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[JGaf]

Hmph.......

I was able to delete/replace snippet with contents on a NEW TEST project.  This operation does not work correctly on my existing project, and it also does not work on an old archived version of my project.  I tested the latter on 2 different machines......no success.

Guess I'm out of luck on this one, unfortunately... I'll have to manually remove the snippet and replace it with contents, so I know it'll be done correctly and cleanly........

If anyone has any other suggestions, tests or fixes, I'd appreciate them

thanks!

[Alexandra Duffy]

Hello,

I have a question about this. When I add a bookmark named Top to my master page, and then a hyperlink to link to it, how can I get the bookmark to appear for selection in the Hyperlink dialog box? The master page is not considered to be a file in my list of files, so the bookmark does not appear in the "Select destination" list. There's no "Link to: Bookmark" choice. I feel like I'm missing something obvious...

Thanks,

Alexandra

[Captiv8r]

Welcome to our community, Alexandra.

The simplest way to do Back To Top is to omit creating any bookmark. Then when you prepare to link, link only to # (pound or hash symbol).

This causes the page to simply reload from the top.

Cheers... Rick

Helpful and Handy Links RoboHelp Wish Form/Bug Reporting Form Begin learning RoboHelp HTML 7, 8 or 9 within the day! Adobe Certified RoboHelp HTML Training SorcerStone Blog RoboHelp eBooks

[Alexandra Duffy]

Hi,

Thanks for the welcome!

This method's not working for me. I am creating AIR help as my output, and that could be why. I added the link as described, with the # symbol only, and nothing happens when I click on the link in the AIR help.

I would like to try the bookmark method, but can't find the bookmark in the list of available destinations since it's on a master page.

Are there any other suggestions?

Thanks!
Alexandra

[Captiv8r]

Hi there

Well dratdarn! Interesting that it doesn't seem to work in AIR. One way would be to simply name the bookmark Top. Then just type #Top for the link.

Cheers... Rick

Helpful and Handy Links RoboHelp Wish Form/Bug Reporting Form Begin learning RoboHelp HTML 7, 8 or 9 within the day! Adobe Certified RoboHelp HTML Training SorcerStone Blog RoboHelp eBooks

[Alexandra Duffy]

Yes, I tried that too! I also tried the suggestion in reply #2. Also i tried using the "Cable Drum" connector. None of these methods seem to work.

If I open the html files generated by AIR in a browser and click on "Back to Top," I get an "Index" of files in the current folder. (?)

Adobe's own TCS3 help has a "Back to Top" button and they use AIR, so there must be a way.

Thanks anyway...

Alexandra

[Captiv8r]

Forget about the cable drum connector. Its only use is for working with DHTML.

Okay, I have a few minutes to look at things. Lemme try this setup in an AIR help and I'll report back.

Cheers... Rick

Helpful and Handy Links RoboHelp Wish Form/Bug Reporting Form Begin learning RoboHelp HTML 7, 8 or 9 within the day! Adobe Certified RoboHelp HTML Training SorcerStone Blog RoboHelp eBooks

[Alexandra Duffy]

I would be very interested to hear if you have the same experience in the AIR output.

Thanks for your help on this!
Alexandra