16 Replies Latest reply on Jul 18, 2013 4:41 AM by Willam van Weelden

    Auto-expanded drop-downs when a page loads (RH8)

    Jop Smith Level 1

      I'm not sure if this is possible, but can anyone tell me how to make DHTML drop-downs automatically display as expanded when a page loads?

       

      Many thanks

      Jonathan

        • 1. Re: Auto-expanded drop-downs when a page loads (RH8)
          Willam van Weelden Adobe Community Professional & MVP

          Hi,

           

          That kind of defeats the purpose of dropdowns, don't you think? You can write a javascript to show all the dropdowns on load.

           

          Greet,

           

          Willam

           

          This e-mail is personal. For our full disclaimer, please visit www.centric.eu/disclaimer.

          • 2. Re: Auto-expanded drop-downs when a page loads (RH8)
            Jop Smith Level 1

            I know what you're saying and it is an odd request, but for my release notes it would be useful to show every category by default but allow the user to collapse the ones they are not so interested in.

             

            Jonathan

            • 3. Re: Auto-expanded drop-downs when a page loads (RH8)
              Willam van Weelden Adobe Community Professional & MVP

              Hi,

               

              You can use the following script:

               

              setTimeout("ExpandAll()", 1);
              function ExpandAll()
              {
                  var links = document.getElementsByTagName('a');
                  for(var i in links)
                  {
                      if(links[i].className == "dropspot" || links[i].className == "expandspot")
                      {
                          TextPopup(links[i])
                      }
                  }
              }

               

              Put it in your topic, or in a separate script file that you link to the topics. This script cycles through the hyperlinks in the topic and when the link is a dropdown or expandtext link, the script expands the dropdown/expandspot.

               

              Greet,

               

              Willam

              • 4. Re: Auto-expanded drop-downs when a page loads (RH8)
                Peter Grainge Adobe Community Professional (Moderator)

                I'm curious as to why you are using dropdowns when you want the content automatically displayed?

                 

                I have seen people want a single dropdown expanded when the link is from another topic and the target content is in a dropdown but you haven't said that is the requirement here.

                 


                See www.grainge.org for RoboHelp and Authoring tips

                 

                @petergrainge

                • 5. Re: Auto-expanded drop-downs when a page loads (RH8)
                  Jop Smith Level 1

                  Willam, thanks for that. I tried it with the script in my page and a linked .js file, but it didn't work.

                   

                  Does it work for you?

                   

                  Cheers

                  Jonathan

                  • 6. Re: Auto-expanded drop-downs when a page loads (RH8)
                    Jop Smith Level 1

                    I want my content to be displayed by default so that it can be read from start to finish, but I also want to give my readers the choice of collapsing sections they're not interested in, as some will be quite long. I know I could alternatively use standard dropdowns and let my readers open the sections they want to read, but someone wanting to read everything would have to manually open them all or I'd have to include your Show/Hide All script.

                     

                    This seemed like a good idea last week, but I may change my mind!

                     

                    Regards

                    Jonathan

                    • 7. Re: Auto-expanded drop-downs when a page loads (RH8)
                      Willam van Weelden Adobe Community Professional & MVP

                      It worked on my test project... Does the script work when you insert it into the topic itself? If not, please share an example topic so I can have a look. If it works, I'll amend the script.

                       

                      Using the ShowHide script is also a good idea, but requires the user to click before all content is displayed. You can amend that script to work on page load.

                       

                      Greet,

                       

                      Willam

                       

                      This e-mail is personal. For our full disclaimer, please visit www.centric.eu/disclaimer.

                      • 8. Re: Auto-expanded drop-downs when a page loads (RH8)
                        Jop Smith Level 1

                        Here's my test page:

                         

                        <?xml version="1.0" encoding="utf-8" ?>
                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                        <html xmlns="http://www.w3.org/1999/xhtml">
                        <head>
                        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                        <meta name="generator" content="Adobe RoboHelp 8" />
                        <title>New Topic</title>
                        <link rel="StyleSheet" href="RHStyleMapping.css" type="text/css" />
                        <script type="text/javascript" language="JavaScript1.2">//<![CDATA[
                        +setTimeout("ExpandAll()", 1);
                        function ExpandAll()
                        {
                            var links = document.getElementsByTagName('a');
                            for(var i in links)
                            {
                                if(links[i].className == "dropspot" || links[i].className == "expandspot")
                                {
                                    TextPopup(links[i])
                                }
                            }
                        }+
                        //]]></script>
                        </head>

                        <body>
                        <?rh-script_start ?><script src="ehlpdhtm.js" type="text/javascript" language="JavaScript1.2"></script><?rh-script_end ?>
                        <h1>Title</h1>
                        <p><a class="dropspot" href="javascript:TextPopup(this)" id="a1">Drop1</a></p>
                        <div class="droptext" id="POPUP253491555" style="display: none;">
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
                          nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
                          volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                          ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
                          Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
                          molestie consequat, vel illum dolore eu feugiat nulla facilisis at
                          vero eros et accumsan et iusto odio dignissim qui blandit praesent
                          luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
                        </div>
                        <p><a class="dropspot" href="javascript:TextPopup(this)" id="a2">Drop2</a></p>
                        <div class="droptext" id="POPUP253472254" style="display: none;">
                        <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
                          suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem
                          vel eum iriure dolor in hendrerit in vulputate velit esse molestie
                          consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
                          et accumsan et iusto odio dignissim qui blandit praesent luptatum
                          zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum
                          dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                          euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                        </div>
                        <p><a class="dropspot" href="javascript:TextPopup(this)" id="a3">Drop3</a></p>
                        <div class="droptext" id="POPUP253509108" style="display: none;">
                        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit
                          esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
                          at vero eros et accumsan et iusto odio dignissim qui blandit praesent
                          luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
                          Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
                          nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
                          volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
                          ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                        </div>
                        <?rh-script_start ?><script type="text/javascript" language="JavaScript1.2">//<![CDATA[
                        if( typeof( TextPopupInit ) != 'function' ) TextPopupInit = new Function();
                        TextPopupInit('a1', 'POPUP253491555');
                        TextPopupInit('a2', 'POPUP253472254');
                        TextPopupInit('a3', 'POPUP253509108');
                        //]]></script><?rh-script_end ?>
                        </body>
                        </html>

                        • 9. Re: Auto-expanded drop-downs when a page loads (RH8)
                          Willam van Weelden Adobe Community Professional & MVP

                          Hi,

                           

                          The script works for me in WebHelp. You can increase the timeout if you have problems in WebHelp (1 means one thousand of a second). Increase to fix your problems.

                           

                          If you're using CHM, the script doesn't work. (I normally don't test on CHM ).

                           

                          The following script works for WebHelp and CHM:

                           

                          setTimeout("ExpandAll()", 1);
                          function ExpandAll()
                          {
                              var divs = document.getElementsByTagName('div');
                              for(var i in divs)
                              {
                                  if(divs[i].className == "droptext")
                                  {
                                     divs[i].style.display = "";
                                  }
                              }
                          }

                           

                          Set the timeout for WebHelp to 200. 1 is fine for CHM.

                           

                          Greet,

                           

                          Willam

                          • 10. Re: Auto-expanded drop-downs when a page loads (RH8)
                            Jop Smith Level 1

                            Hi Willam, thanks again, but I'm still getting the following script error when I preview my page in WebHelp, even with the timeout set to 200.

                             

                            error.jpg

                            • 11. Re: Auto-expanded drop-downs when a page loads (RH8)
                              Jop Smith Level 1

                              Willam, it works fine if I remove the "+" symbol from the start and end of your script. I wasn't sure if this was part of the script or not, so I included it anyway.

                               

                              Thanks for all your help!

                              Jonathan

                              • 12. Re: Auto-expanded drop-downs when a page loads (RH8)
                                Willam van Weelden Adobe Community Professional & MVP

                                OK. Glad this one works.

                                 

                                Greet,

                                 

                                Willam

                                 

                                This e-mail is personal. For our full disclaimer, please visit www.centric.eu/disclaimer.

                                • 13. Re: Auto-expanded drop-downs when a page loads (RH8)
                                  collincanright1

                                  I wanted to reopen this, as I am trying to use the script to make glossary entried display opened. To answer the pretty obvious question of why, the project is a data dictionary, and it seems easiest to use a glossary entry for field definitions, allowing me to write/edit once and use many times, as the same definitions can appear in lists in multiple topics. Otherwise I would use tables.

                                   

                                  I used the script you provided, and it works, but only on the first link in my topic. I am not much for javascript and suspect that I need to wrap code around each link on the page, which may make the whole idea too time intensive.

                                   

                                  At any rate, here is a bit of the code as I used it:

                                   

                                  <title>Topic Title</title>
                                  <link rel="StyleSheet" href="default.css" type="text/css" />
                                  </head>

                                  <script type="text/javascript" language="JavaScript1.2">//<![CDATA[
                                  setTimeout("ExpandAll()", 200);
                                  function ExpandAll()
                                  {
                                      var links = document.getElementsByTagName('a');
                                      for(var i in links)
                                      {
                                          if(links[i].className == "glossterm" || links[i].className == "expandspot")
                                          {
                                              TextPopup(links[i])
                                          }
                                      }
                                  }
                                  //]]></script>
                                  <body>
                                  <h1>Topic Head tab</h1>
                                  <p>this is the description of what the tab does. Primary fields include:</p>
                                  <p id="p1"><?rh-glo_start class="glossterm"?>Definition 1<?rh-glo_end ?></p>
                                  <p id="p2"><?rh-glo_start class="glossterm"?>Definition 2<?rh-glo_end ?></p>
                                  <p id="p3"><?rh-glo_start class="glossterm"?>Definition 3<?rh-glo_end ?></p>

                                   

                                  I am using WebHelp. As I mentioned, Definition 1 displays with the expanding hotspot definition showing when the topic loads, as I would like. The others do not.

                                  • 14. Re: Auto-expanded drop-downs when a page loads (RH8)
                                    Willam van Weelden Adobe Community Professional & MVP

                                    Hi,

                                     

                                    Try this method: http://www.wvanweelden.eu/blog/2012/08/03/expand-drop-downs-default

                                     

                                    It's one that should work much better. (Since I now now much more about RH internals than in 2010.)

                                     

                                    Please post back if it doesn't work.

                                     

                                    Greet,

                                     

                                    Willam

                                    • 15. Re: Auto-expanded drop-downs when a page loads (RH8)
                                      collincanright1 Level 1

                                      Thank you, Willam. Your referenced script works perfectly.

                                       

                                      Collin

                                      • 16. Re: Auto-expanded drop-downs when a page loads (RH8)
                                        Willam van Weelden Adobe Community Professional & MVP

                                        Great. Thanks for letting me know.

                                         

                                        Greet,

                                         

                                        Willam