Skip navigation
Currently Being Moderated

Adding detail to html data set table

Jul 24, 2012 1:12 PM

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?

 
Replies
  • Currently Being Moderated
    Jul 24, 2012 9:32 PM   in reply to BerlyMeister

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2012 6:21 AM   in reply to BerlyMeister

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2012 11:13 AM   in reply to BerlyMeister

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 25, 2012 5:27 PM   in reply to BerlyMeister

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 26, 2012 5:38 PM   in reply to BerlyMeister

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 31, 2012 7:00 PM   in reply to BerlyMeister

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 6:11 AM   in reply to BerlyMeister

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

     

    Thank you for sharing.

     

    Gramps

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points