3 Replies Latest reply on Mar 2, 2010 10:03 PM by gwhPoster

    Table row appearing / disappearing effect needed

    gwhPoster Level 1

      Hi everyone

       

      I have a small 4-row table on my web page. I want the header row only to be showing and then when the mouse rolls over the row, the remaining body rows will appear showing the contents of the table on rollover. On rollout, the rows would disappear, once again showing only the header row.  I'm not sure how to accomplish this and wondered if anyone could provide any advice on how to get it working? Not sure if jquery or AJAX or some other language is needed, or perhaps Dreamweaver can accomplish this? Appreciate any advice.

        • 1. Re: Table row appearing / disappearing effect needed
          Mylenium Most Valuable Participant

          Apply CSS pseudo-classes for :hover :active and put a link inside the cell to trigger the behavior. I'm sure you can also do this the complicated way by finding some complicated scripts, but using styles seems the easiest to me.

           

          Mylenium

          • 2. Re: Table row appearing / disappearing effect needed
            osgood_ Level 8

            You could use the show/hide behaviour within Dreamweaver to do this. (example code/css below)

             

            Or you might be able to implement a much simpler css class switcher using jquery or javascript. I've had a quick google but I couldn't find much to be honest.

             

             

            <!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" />
            <title>Untitled Document</title>
            <style type="text/css">
            body {
            margin: 50px 0 0 50px;
            font-family: verdana, arial, helvetica, sans-serif;
            font-size: 11px;
            }
            #one, #two, #three {
            visibility: hidden;
            }
            td {
            background-color:#CC9;
            padding: 3px;
            }
            </style>
            <script type="text/javascript">
            <!--
            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; }
            }
            //-->
            </script>
            </head>

             

            <body>

             

            <table width="600" border="0" cellspacing="0" cellpadding="0">
            <tr onmouseover="MM_showHideLayers('one','','show','two','','show','three','','show')" onmouseout="MM_showHideLayers('one','','hide','two','','hide','three','','hide')">
            <td>Monday</td>
            <td>Tuesday</td>
            <td>Wednesday</td>
            <td>Thursday</td>
            </tr>
            <tr id="one">
            <td>10am-5pm</td>
            <td>8am-6pm</td>
            <td>8am-9pm</td>
            <td>11am-4pm</td>
            </tr>
            <tr id="two">
            <td>8am-1pm</td>
            <td>1pm-8pm</td>
            <td>Closed</td>
            <td>9am-4pm</td>
            </tr>
            <tr id="three">
            <td>8am-2pm</td>
            <td>7am-2pm</td>
            <td>9am-2pm</td>
            <td>Closed</td>
            </tr>
            </table>
            </body>
            </html>

            • 3. Re: Table row appearing / disappearing effect needed
              gwhPoster Level 1

              Great - thanks for the two options guys. I'll try them out.