8 Replies Latest reply on Sep 7, 2016 9:56 AM by SGRoeh

    Implementing Twisties in RH2015

    SGRoeh Level 1

      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

        • 1. Re: Implementing Twisties in RH2015
          Peter Grainge Adobe Community Professional (Moderator)

          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

          • 2. Re: Implementing Twisties in RH2015
            SGRoeh Level 1

            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

            1 person found this helpful
            • 3. Re: Implementing Twisties in RH2015
              Peter Grainge Adobe Community Professional (Moderator)

              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.

              • 4. Re: Implementing Twisties in RH2015
                SGRoeh Level 1

                Peter,

                 

                Just when I thought I was done and have the Show All/Hide All working, I notice after generating the output and I click the Show All button, all the twisties indeed display. But if I click just one of the drop-downs to close just that one, the image is locked with the previous state's image.

                 

                In the twisty.js file from your project I see at the top you have this comment for the "ShowHide with Twisties" implementation (emphasis mine):

                 

                "Create twisties and set the ShowHide button. No extra settings needed."

                 

                But in the swapImages function you also have this comment (emphasis mine):

                 

                "Check if the dropdown is visible or not. Needed to stay in sync when using show all and hide all buttons."

                 

                I'm sure it's a simple adjustment somewhere but what needs to be done to make the images for each state to be in sync when using the ShowHide functionality. I don't see anything that jumps out at me on how to do this in your js.

                 

                I'm using the single button implementation.

                 

                Thank you in advance!

                 

                Steve Roehrig

                • 5. Re: Implementing Twisties in RH2015
                  Peter Grainge Adobe Community Professional (Moderator)

                  Sorry for slow reply. Am I right in thinking you are using RoboHelp Twisties and the script in the project from Toolbar Show/Hide download?

                   

                   


                  See www.grainge.org for RoboHelp and Authoring information

                   

                   

                  @petergrainge

                  • 6. Re: Implementing Twisties in RH2015
                    SGRoeh Level 1

                    Yes, kind of...

                     

                    Because I can't seem to get it to work without getting the Save As dialog after selecting my two twistie images in the Styles dialog box, I manually added these lines into my css for the a.dropspot and a.expandspot styles:

                     

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

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

                         display: inline;

                     

                    Is there something else RH sets when you define the Twisties using the RH method? I can't seem to implement it using the RH method descibed in the post "I Came, I Saw, I Learned...: Adobe RoboHelp: Working with Twisties" without getting the Save As dialog box.

                     

                    When I save the file using the Save As dialog box, I save the file as a css file, open it and it contains these lines:

                     

                         /*Created with Adobe RoboHelp 2015.*/

                         a.dropspot {

                             x-open-image: url("file://E:/HG/PCDmisQA/Pcdlrn/Help/CLM/arrowdown.gif");

                             x-close-image: url("file://E:/HG/PCDmisQA/Pcdlrn/Help/CLM/arrowright.gif");

                             display: inline;

                         }

                     

                    As far as the Show/Hide, I use the single button method described in you post "Scripts for Twisties, Show All / Hide All and Print Buttons" using the twisty2b.js file. For this, I followed your instructions entirely.

                     

                    Please let me know if you have questions or need further clarification, and by all means, any suggestions.

                    • 7. Re: Implementing Twisties in RH2015
                      Peter Grainge Adobe Community Professional (Moderator)

                      Sorry, I missed this reply.

                       

                      Please set up a two topic project with the failing method, then see the Contact page on my site and send the project as instructed there. Do make sure you include a link to this thread and please do not email the project direct.

                       


                      See www.grainge.org for RoboHelp and Authoring information

                       

                       

                      @petergrainge

                      • 8. Re: Implementing Twisties in RH2015
                        SGRoeh Level 1

                        Hi Peter - thank for your response and I apologize for the late response back to you.

                         

                        Jared, my colleague, investigated this issue too and contacted Willam who sent us back a zipped project that used the twisty.js version of the file - I was using the twisty2b.js version. I tested his project which worked beautifully. I then implemented it into one of our projects and it worked there too. Of course there's a snag which I'm about to ask Willam about...

                         

                        We have projects that are organized with folders which contain htm files.

                         

                        When I preview a topic from one of these folders after implementing the Show All/Hide All functionality in one of these projects, and click one of the links ("Show All" or "Hide All"), it displays a "This page cannot be displayed" error message when either of the links are clicked.

                         

                        When I right-click one of the links and select "Open in new window", a Windows Explorer appears that displays the contents of the folder where the root of the project is located.

                         

                        When I right-click the topic and select "View source", I see the link to the js file is preceded with a "../" as expected since the file is located one folder up from where the htm file is located. I also see in the anchor tags for each of the links: href="../#". In topics that do not contain a folder structure and all the htm's are in the root where the js file is located the anchor tags are defined with href="#", so I think that's where the issue may be but not 100% positive.

                         

                        I went back into the other project where all the htm's are in the root of the project, created a test folder in RH, copied one of the htm files that contained dropspots into it and tested it. It too failed so it's definitely an issue with projects that are structured with folders.

                         

                        I'll update this post if we find a resolution to this latest issue.

                         

                        Steve Roehrig