Skip to main content
S
SGRoeh
Inspiring
August 23, 2016
Answered

Implementing Twisties in RH2015

  • August 23, 2016
  • 1 reply
  • 1224 views

Please bear with me, this is a bit messy due to the complexity of my troubleshooting in implementing Twisties.

I’ve been trying to implement the Twisty functionality for dropspots and expandspots in our RH2015 help projects and have come across several issues that I’m in need of support. Our ultimate goal is to have a single button or link at the top of each topic that expands and collapses all twisties in a topic.

I’ve tried implementing this functionality based on this post by Willam Van Weelden:

http://iconlogic.blogs.com/weblog/2013/07/adobe-robohelp-working-with-twisties.html

After setting my two image files for the twisties, the url’s are defined in the Description section of the Styles dialog box:

I click Apply, but once I click OK I get a Save As dialog box:


There’s nothing in Willam’s instructions regarding this dialog box, and I don’t know why I’m supposed to save a file or what the file is. Is this something new to RH 2015?

The default file type is HTML but you can also select the CSS file type from the File of type list. The default location is also confusing – why isn’t the folder location the same as the project’s location? I believe the file is supposed to be saved as a CSS file type. Why isn’t the style just being updated in the CSS file I’m using since that’s the file I’m trying to assign the updates to in my RH2015 project?

I saved the file, and opened it in a text editor to see what exactly it’s comprised of. I found it’s a “a.dropspot” styling for the twisty defining “x-open-image” and “x-close-image” each followed by their respective url image file locations as shown in the Description section of the Styles dialog box.

For example:

   a.dropspot {

      x-open-image: url("file://f:/DocProjects/RH2015Conversion/Laser/arrowdown.gif");

      x-close-image: url("file://f:/DocProjects/RH2015Conversion/Laser/arrowright.gif");

      display: inline;

   }

I copied the style content into the same “a.dropspot” location of my project CSS. I tested several topics (Ctrl+W) and saw they were working for both text dropspots and image dropspots. I then generated a chm. When I reviewed the chm I found the twisties were functioning – but only for text links.

I have some dropspots that use “Information” images (small i icon shown below) but for some reason the twisties won’t show up for these images in a chm. I’m not sure if it’s because the image is at the end of a bulleted list item or some other reason:

I closed the chm and went back to my project. I did another review (Ctrl+W) of the text dropspot and found that it too no longer had the twisties. Jared Hess, a colleague, (also on these forums) suggested I make sure the two twisty images were still in my project, but we found that they were not. I have no idea what happened but apparently RH did its magic and for whatever reason deleted the two images from my project. I copied them back into my project, previewed a couple topics and they were there again and working.

To verify the above info image dropspot issue, I created a new dropspot using the same image on a standalone paragraph (not within a list). I generated a new chm monitoring the project folder where the two images are and as soon as the chm was finished being generated I notice that the two images disappeared from the project. I reviewed the topic I added the standalone dropspot on and they were working – all of them, even those within lists. I went to another topic that had dropspots on images and in lists, and they were not working. Apparently, the chm generation process removes them from the project and packages them in as part of the chm archive. By the way, I defined the two images as Baggage files. Jared also tried it, and the chm generation process removes the twisty images from his test project as well.

I copied the two image files back into the project and this time generated a Web output.

The two image files remained in the project folder and were copied into the Web output folder, but when I went to view the Web output, the twisties were not working. The drop-down functionality worked, but the twisty images were missing.

The Twisty functionality is so buggy and impossible to implement I don’t understand how Adobe can include this in their product. If it’s not easy to implement and has major bugs why release it into the product?

We have many dropspots in one very large project which has htm files in the root of the project as well as in sub-folders. They are all styled with the same CSS found in the root of the project. We would like an easy way to implement this twisty functionality. We thought Willam’s approach would do this, but we are running into too many obstacles.

Please, if anyone else has had success implementing the Twisty functionality in their project in RH 2015, please provide a detailed step-by-step account of your process.

As always, your help is greatly appreciated.

Steve Roehrig

This topic has been closed for replies.
Correct answer Peter Grainge

The Twisty functionality is so buggy and impossible to implement I don’t understand how Adobe can include this in their product. If it’s not easy to implement and has major bugs why release it into the product?

I don't think it's fair to attack Adobe on this until the cause of the problem has been identified and found to be down to them rather than something in your project.

I've always used a different method described on my site and using a script that was updated by Willam and which is also available on his site. I use that because it allows the Show / Hide All functionality that RoboHelp twisties do not. However, their twisties do work and I have just tested the RoboHelp method again with RoboHelp 2015 and as described by Willam. It works in a CHM and WebHelp although the image did not show in the Design Editor, just in the output. That could be something I did as it was a quick test.

So what we need to do first is ascertain why it is not working for you. I notice the path includes a drive letter suggesting the images are not in the project or on the same drive. Have you tried copying the images in to the project first? (Sorry if that is in your post.)

Second, try it in one of the sample projects. Click Open on the RoboHelp Starter page and then click Samples in the ribbon on the left. Same problem there? If not, then it suggests that it is something in your project and we will then need to dig deeper.

If it works in the sample, try a new clean project locally and check that also works.

Post back.

See www.grainge.org for RoboHelp and Authoring information

@petergrainge

1 reply

Peter Grainge
Community Expert
Peter GraingeCommunity ExpertCorrect answer
Community Expert
August 24, 2016

The Twisty functionality is so buggy and impossible to implement I don’t understand how Adobe can include this in their product. If it’s not easy to implement and has major bugs why release it into the product?

I don't think it's fair to attack Adobe on this until the cause of the problem has been identified and found to be down to them rather than something in your project.

I've always used a different method described on my site and using a script that was updated by Willam and which is also available on his site. I use that because it allows the Show / Hide All functionality that RoboHelp twisties do not. However, their twisties do work and I have just tested the RoboHelp method again with RoboHelp 2015 and as described by Willam. It works in a CHM and WebHelp although the image did not show in the Design Editor, just in the output. That could be something I did as it was a quick test.

So what we need to do first is ascertain why it is not working for you. I notice the path includes a drive letter suggesting the images are not in the project or on the same drive. Have you tried copying the images in to the project first? (Sorry if that is in your post.)

Second, try it in one of the sample projects. Click Open on the RoboHelp Starter page and then click Samples in the ribbon on the left. Same problem there? If not, then it suggests that it is something in your project and we will then need to dig deeper.

If it works in the sample, try a new clean project locally and check that also works.

Post back.

See www.grainge.org for RoboHelp and Authoring information

@petergrainge

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
S
SGRoehAuthor
Inspiring
August 24, 2016

Hi Peter – Thank you for your response.

You are correct in your chastise of my comment in my initial post, my explanation…

I took your suggestion and opened the “Travel the Whirls” Sample project in RH2015 – I had to convert it to RH2015 as it apparently was an older project included with the RH2015 install. I found a topic that already had defined dropspots and then implemented the Twisty functionality through the “travel-the-whirls.css” the project uses. The steps involved follow.

Sample project test:

  1. Double-clicked the css file from the Style Sheets folder in the Project Manager
  2. I clicked the Drop-down hotspot style in the Hyperlink section of the Styles dialog box
  3. I clicked the Set Twisties button and set the two images I wanted to use for the open and close events
  4. I clicked the Expanding hotspot style in the Hyperlink section of the Styles dialog box
  5. I clicked the Set Twisties button and set the two images I wanted to use for the open and close events
  6. I clicked Apply then OK to save the changes – no Save As dialog box appeared!
  7. I did a preview (Ctrl+W), Web output and HTML (chm) output – all tested fine, and the image files used all remained in the project’s folder

I then created a New project as you suggested that contained a single topic. I created:

  1. A drop-down hotspot on just text
  2. A drop-down hotspot on an image at the end of a bulleted list item
  3. An Expanding hotspot on just text

Again, I did a preview (Ctrl+W), Web output and HTML (chm) output – all tested fine, and again the image files remained in the project folder.

Regarding your statement:

“I notice the path includes a drive letter suggesting the images are not in the project or on the same drive. Have you tried copying the images in to the project first?”

Yes, the images are in the root of my Test project and the path in my url code is the path to the two image files in the root of the Test project. I’ve even defined them as Baggage files.

In light of your statement, it seems you hit upon something.

I compared the css changes after implementing the twisty functionality in the Sample and New projects with what’s in the css of the original Test project. I found the url’s in the css files of the Sample and New projects only show the image file names – not the file path within double-quotes as in my Test project.

I updated my Test project’s css file so the url’s are defined only as the image file names without the double-quotes. I regenerated the Web and HTML outputs, tested and they are now all functioning as expected, and as above, the image files I used remained in the project folder.

To summarize, all I did was add in these three lines of code into the css file for the a.expandspot and a.dropspot making sure the image files being used are in the root of the project:

     x-open-image: url(arrowdown.gif);

     x-close-image: url(arrowright.gif);

     display: inline;

Again thank you for your reply and my sincerest apologies to the Adobe Developers – I let me frustration get the best of me.

Steve Roehrig

Peter Grainge
Community Expert
Peter GraingeCommunity Expert
Community Expert
August 24, 2016

We've all been there.

The samples are 2015 versions but pre-patches.

On my site there are later versions with revised info about filtering.

These too might need an "upgrade" but the content is better.

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices