17 Replies Latest reply: Aug 2, 2012 6:11 AM by Ben Pleysier RSS

    Adding detail to html data set table

    BerlyMeister Community Member

      I have created a table with an html dataset to display class schedules:

      http://www.units.muohio.edu/lifelonglearning/ilr/fall2012working.html

       

      Source dataset:

      http://www.units.muohio.edu/lifelonglearning/ilr/fall2012-dataset.html

       

      Is there a way to add a link so that when {course} is selected {description} is displayed?

        • 1. Re: Adding detail to html data set table
          Ben Pleysier CommunityMVP

          One way to do this is to have a window pop-up when clicking on the course.

           

          1.For the repeat region add spry:setrow ="ds1fall2012ilr" as in

          <tr spry:repeat="ds1fall2012ilr" spry:setrow="ds1fall2012ilr" spry:odd="odd" spry:even="even" spry:hover="hover" spry:select="select">

          2. Create a spry detail-region after the spry region as in

            </table>

          </div>

          <div id="apDiv1" spry:detailregion="ds1fall2012ilr">

            <div>{Description}</div>

            <div><input name="" value="close" type="button" onclick="MM_showHideLayers('apDiv1','','hide')" /></div>

          </div>

          I have added an ID to the detail-region, placed the description and a button with an onclick event.

          3. Now we need a few style rules for our detail-region as per

          #apDiv1 {

              position: absolute;

              left: 122px;

              top: 1400px;

              width: 761px;

              height: 341px;

              z-index: 1;

              background: #CCC;

              visibility: hidden;

          }

              padding: 20px;   

          This will absolutely position the detail-region and hide it to start with.

          4. When we click on the course we want the detail-region to show as in

          <td onfocus="MM_showHideLayers('apDiv1','','show')">{Course}</td>

          5. And lastly, a bit of JS that will handle our events

          function MM_showHideLayers() { //v9.0

            var i,p,v,obj,args=MM_showHideLayers.arguments;

            for (i=0; i<(args.length-2); i+=3)

            with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];

              if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }

              obj.visibility=v; }

          }

          All of the above has been done using DW. The apDiv1 was drawn using Draw AP Div feature. The onclick events and JS were done in the Behaviours panel.

           

          This is a very crude model of what can be done. You might like to have a look at http://linecraft.com/spry-pop-up-dialog/extension.php for a proper pop-up or use one of the light boxes. The example is only limited by your imagination.

           

          Gramps

          • 2. Re: Adding detail to html data set table
            BerlyMeister Community Member

            This is exactly what I wanted to do... however I don't think I have the coding correct.  True confession - am a designer, not a programmer... so I REALLY appreciate your help.  Can you take a look and see what I have wrong?

             

            The link is correct - when you click on course the description appears - but below it.  It doesn't "pop-up." 

             

            The updated files have been posted to the web. http://www.units.muohio.edu/lifelonglearning/ilr/fall2012working.html

             

            I had looked at the linecraft product before I got to the point of posting here.  It does look like what I need, however I am unsure about how to link it to the data set to populate the pop ups.  Am hoping after we work through what you have given me I will understand how to set it up.

             

            THANKS! - you rock!

            • 3. Re: Adding detail to html data set table
              Ben Pleysier CommunityMVP

              A couple of additions/changes need to be made; some of the changes are as a result of my hastily made errors.

               

              1. Underneath line #8 add the following highlighted

              <style type="text/css">

              .style8 {color: #EEEEEE}

              #apDiv1 {

                  position: absolute;

                  left: 122px;

                  top: 600px;

                  width: 761px;

                  height: 341px;

                  z-index: 1;

                  background: #CCC;

                  visibility: hidden;

                  padding: 20px;

              }

              </style>

              2. In line #125 change onfocus to onclick as in

              <tr spry:repeat="ds1fall2012ilr" spry:setrow="ds1fall2012ilr" spry:odd="odd" spry:even="even" spry:hover="datahover" spry:select="dataselect">

                <td>{Day}</td>

                <td>{Time}</td>

                <td>{Weeks}</td>

                <td>{Begins}</td>

                <td onclick="MM_showHideLayers('apDiv1','','show')">{Course}</td>

                <td>{Oxford}</td>

                <td>{Fairfield}</td>

                <td>{Hamilton}</td>

                <td>{West_Chester}</td>

                <td>{Other}</td>

              </tr>

              That should do it.

               

              Gramps

              • 4. Re: Adding detail to html data set table
                BerlyMeister Community Member

                GREAT!  Now it is just a matter of styling and positioning.  Your help is very much appreciated.

                • 5. Re: Adding detail to html data set table
                  BerlyMeister Community Member

                  To take it to the next level.... I have purchased the pop up dialog box extension to add more capabilities.  How do I incorporate that into what we have done?

                  • 6. Re: Adding detail to html data set table
                    Ben Pleysier CommunityMVP

                    Place the cursor on line #122 of your document, then add the Spry Pop-up Dialog. You may get a warning issued by DW which you can ignore.

                     

                    What this has done is

                    1. inserted links to the JS and CSS files in the head section of the document

                    2. placed a constructor for the pop-up near the bottom of the document

                    3. created the markup for the pop-up

                    4. created a clickable link to activate the pop-up

                     

                    All we need to do now is to

                     

                    1. change the pop-up to suit us as per

                    <div id="spryPopupDialog1" class="popupContainer" spry:detailregion="ds1fall2012ilr">

                      <div class="popupBox">

                        <div align="right" class="popupBar"> <a class="popupClose" href="javascript:;" onclick="spryPopupDialog1.displayPopupDialog(false);">-</a>

                          <div class="popupTitle">POPUP DIALOG TITLE</div>

                        </div>

                        <div class="popupContent">{Description}</div>

                      </div>

                    </div>

                    2. cut the link on line #122 and place it in the table cell as per

                    <td><a href="javascript:;" onclick="spryPopupDialog1.displayPopupDialog(true);">{Course}</a></td>

                    you will have noticed that the onclick event that we put there originally, has been removed

                     

                    3. remove other remnants of the detail region as in

                    <div id="apDiv1" spry:detailregion="ds1fall2012ilr">

                      <div>{Description}</div>

                      <div><input name="" value="close" type="button" onclick="MM_showHideLayers('apDiv1','','hide')" /></div>

                    </div>

                    and

                    function MM_showHideLayers() { //v9.0

                      var i,p,v,obj,args=MM_showHideLayers.arguments;

                      for (i=0; i<(args.length-2); i+=3)

                      with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];

                        if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }

                        obj.visibility=v; }

                    }

                    These are no longer needed.

                     

                    4. test the page in your favourite browser.

                     

                    Gramps

                    • 7. Re: Adding detail to html data set table
                      BerlyMeister Community Member

                      ALMOST there.... It works in every browser I have tested except for IE on a PC.... methinks I am missing something.

                      • 8. Re: Adding detail to html data set table
                        Ben Pleysier CommunityMVP

                        Remove the useEffect and it will work

                        var spryPopupDialog1 = new Spry.Widget.PopupDialog("spryPopupDialog1", {allowDrag:true, allowScroll:true, useEffect:"fade", modal:true});

                        Get in touch with Alex July and he will fix it for you, great guy.

                         

                        Gramps

                        • 9. Re: Adding detail to html data set table
                          BerlyMeister Community Member

                          Thanks Gramps! 

                          I just sent a message to Alex. Am hoping to be able to use the fade function it really does make it look more polished.

                           

                          Best,

                          BerlyMeister

                          • 10. Re: Adding detail to html data set table
                            BerlyMeister Community Member

                            Still waiting to hear back from Alex - but I did remove the fade effect - and it didn't help.

                            IE 7 on a PC gives an error and only shows the content holders.

                            In Dreamweaver it gives the compatiblity issues as:

                            Line 62 Expanding Box Problem

                            Line 103 Expanding Box Problem

                             

                            Any content that does not fit in a fixed-width or -height box causes the box to expand to fit the content rather than letting the content overflow.

                            • 11. Re: Adding detail to html data set table
                              BerlyMeister Community Member

                              Size on both the content, and the pop-up box as refered to in the note above ARE defined in CSS...hmmmm scratching my head.

                              • 12. Re: Adding detail to html data set table
                                BerlyMeister Community Member

                                Gramps,

                                 

                                Alex came up with the solution - thought you would want to know - it was the load order of the .js file.

                                 

                                Move this line right after the <head> tag

                                 

                                <script src="../SpryAssets/SpryPopupDialog.js" type="text/javascript"></script>

                                 

                                so it looks like this:

                                 

                                <head>

                                <script src="../SpryAssets/SpryPopupDialog.js" type="text/javascript"></script>

                                 

                                Worked like a charm!

                                • 13. Re: Adding detail to html data set table
                                  Ben Pleysier CommunityMVP

                                  Thank you for your feedback, I shall certainly keep this in mind.

                                   

                                  Have a look at his other products, like the Spry Utilities extension http://www.linecraft.com/, and service bar none!

                                   

                                  Gramps

                                  • 14. Re: Adding detail to html data set table
                                    BerlyMeister Community Member

                                    Gramps, there is one more bug that needs to be worked out of this page before it can be implemented.

                                     

                                    NEW LINK - http://www.units.muohio.edu/lifelonglearning/ilr/schedule.html

                                     

                                    In IE 7 or 8 when you click on one title it operates correctly, opens the description, then you can close it.  When you open the second - looks perfect... but then it freezes the pop up frame.  You cannot close it without refreshing the browser screen.

                                     

                                    Fingers are crossed that you have an idea for this one.

                                     

                                    THANKS!

                                     

                                    Kim

                                    • 15. Re: Adding detail to html data set table
                                      Ben Pleysier CommunityMVP

                                      This is the error message

                                      SCRIPT5007: Unable to get value of the property 'filter': object is null or undefined

                                      SpryPopupDialog.js, line 447 character 3

                                      and this is the affected script

                                      if (Spry.is.ie)

                                      {

                                        var filter = this.popupBox.currentStyle.filter.replace(/alpha\s*\(\s*opacity\s*=\s*[0-9\.]{1,3}\)/, '');

                                        this.popupBox.style.filter = filter+"alpha(opacity=" + parseInt(ht * 100, 10) + ")";

                                      }

                                      It looks like friend Alex needs to be involved.

                                       

                                      Gramps

                                      • 16. Re: Adding detail to html data set table
                                        BerlyMeister Community Member

                                        Yes indeed - Alex solved it - and it was a fairly simple fix.  Will share here for other's edification

                                         

                                        Changed from this:

                                        <div id="spryPopupDialog1" class="popupContainer"spry:detailregion="ds1fall2012ilr">

                                          <div class="popupBox">

                                            <div align="right" class="popupBar"> <a class="popupClose" href="javascript:;" onclick="spryPopupDialog1.displayPopupDialog(false);">Click to close</a>

                                              <div class="popupTitle">{Course}</div>

                                            </div>

                                            <div class="popupContent">{Description}</div>

                                          </div>

                                        </div>

                                         

                                         

                                        To this:

                                         

                                        <div id="spryPopupDialog1" class="popupContainer">

                                          <div class="popupBox">

                                            <div align="right" class="popupBar"> <a class="popupClose" href="javascript:;" onclick="spryPopupDialog1.displayPopupDialog(false);">Click to close</a>

                                              <div class="popupTitle" spry:detailregion="ds1fall2012ilr">{Course}</div>

                                            </div>

                                            <div class="popupContent" spry:detailregion="ds1fall2012ilr">{Description}</div>

                                          </div>

                                        </div>

                                         

                                        Apparently IE doesn’t like when the entire widget is inside the detail region.

                                        • 17. Re: Adding detail to html data set table
                                          Ben Pleysier CommunityMVP

                                          As the saying goes, 'you are never too old to learn'.

                                           

                                          Thank you for sharing.

                                           

                                          Gramps