5 Replies Latest reply: Apr 10, 2012 5:05 PM by Ben Pleysier RSS

    how to have a different hover and selected state for each tab

    whatisgood Community Member

      I've been trying for a while to get different hover and selected states for each tab in my tabbed menu...can anyone help?

       

      i have a tabbed menu wiht the class: .menutab 

       

      do i need to define the tabs using .menutabcontent1 or create a new class?  I tried to create  a new class but then it wasn't recognized as part of the menu and threw everything off....thanks in advance

        • 1. Re: how to have a different hover and selected state for each tab
          Ben Pleysier CommunityMVP

          This is a bit confusing for this old codger.

           

          I know of SpryTabbedPanels and of SpryMenuBar. But you speak of a tabbed menu.

           

          At this stage I will assume that you refer to the SpryTabbedPanels. In that case, try the following.

          <!DOCTYPE html>
          <html>
          <head>
          <title>Untitled</title>
          <script src="SpryAssets/SpryTabbedPanels.js"></script>
          <style>
          #ex1.TabbedPanelsTabSelected, #ex1.TabbedPanelsTabHover {
              background-color: #090;
          }
          #ex2.TabbedPanelsTabSelected, #ex2.TabbedPanelsTabHover {
              background-color: #F00;
          }
          </style>
          <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
          </head>
          <body>
          <div id="TabbedPanels1" class="TabbedPanels">
            <ul class="TabbedPanelsTabGroup">
              <li id="ex1" class="TabbedPanelsTab" tabindex="0">Tab 1</li>
              <li id="ex2" class="TabbedPanelsTab" tabindex="0">Tab 2</li>
            </ul>
            <div class="TabbedPanelsContentGroup">
              <div class="TabbedPanelsContent">Content 1</div>
              <div class="TabbedPanelsContent">Content 2</div>
            </div>
          </div>
          <script>
          var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
          </script>
          </body>
          </html>

          I hope this helps.

          Ben

          • 2. Re: how to have a different hover and selected state for each tab
            derrick kale Community Member

            What does the following line of code do?:

             

            var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");

            • 3. Re: how to have a different hover and selected state for each tab
              Ben Pleysier CommunityMVP

              That is the SpryMenuBar constructor. It places an instance of the widget in your document.

               

              Gramps

              • 4. Re: how to have a different hover and selected state for each tab
                derrick kale Community Member

                Thanks Gramps!

                 

                Two more questions:

                 

                1) When using spry tabbed panels on a webpage, does the loading time of that page depend on the number of panels and the amount of content in those panels? Or do web browsers treat the individual panels on the webpage as individual webpages, loading them one at a time, as they are clicked?

                 

                2)  On one page, under the CSS, .VTabbedPanels, I use vertical spry tabbed panels with the tab floated to the left of the content panel. 

                     On another page, I am using vertical spry tabbed panels that float the tabs to the right of the content panel, .V2TabbedPanels.  To create the second set of spry tabbed panels I  duplicated the first set of CSS(.VTabbedPanels) and renamed it (.V2TabbedPanels) respectively so that I could make the tab panels unique from the first set.  When I did this, the CSS that describes the "hover" behaviour doesn't get applied to the second set of CSS, or to the second tab panel for that matter.  The hover behaviour still works for the first panel.

                 

                How can I get the hover behaviour to work for my second set of panels?

                 

                 

                 

                CSSSource Code

                .TabbedPanels {

                    overflow: hidden;

                    margin: 0px;

                    padding: 0px;

                    clear: none;

                    width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/

                }

                 

                .TabbedPanelsTabGroup {

                    margin: 0px;

                    padding: 0px;

                }

                 

                .TabbedPanelsTab {

                    /* [disabled]position: relative; */

                    top: 1px;

                    float: left;

                    padding: 4px 10px;

                    margin: 0px 1px 0px 0px;

                    font: bold 0.7em sans-serif;

                    background-color: transparent;

                    list-style: none;

                    /* [disabled]border-left: solid 1px #CCC; */

                    /* [disabled]border-bottom: solid 1px #999; */

                    /* [disabled]border-top: solid 1px #999; */

                    /* [disabled]border-right: solid 1px #999; */

                    -moz-user-select: none;

                    -khtml-user-select: none;

                    cursor: pointer;

                    width: 100px;

                    outline: none;

                }

                 

                .TabbedPanelsTabHover {

                    background-color: #FFC;

                }

                 

                 

                .TabbedPanelsTabSelected {

                    background-color: #EEE;

                    /* [disabled]border-bottom: 1px solid #EEE; */

                }

                 

                .TabbedPanelsTab a {

                    color: black;

                    text-decoration: none;

                }

                 

                .TabbedPanelsContentGroup {

                    clear: both;

                    /* [disabled]border-left: solid 1px #CCC; */

                    /* [disabled]border-bottom: solid 1px #CCC; */

                    /* [disabled]border-top: solid 1px #999; */

                    /* [disabled]border-right: solid 1px #999; */

                    background-color: transparent;

                }

                 

                .V2TabbedPanelsTabHover {

                    background-color: #FFC;

                }

                 

                .TabbedPanelsContent {

                    overflow: hidden;

                    padding: 4px;

                }

                 

                .TabbedPanelsContentVisible {

                    font-weight: 100;

                    text-align: left;

                }

                 

                .VTabbedPanels {

                    overflow: hidden;

                    zoom: 1;

                    min-width: 100px;

                    font-family: Verdana, Arial, Helvetica, sans-serif;

                }

                 

                .VTabbedPanels .TabbedPanelsTabGroup {

                    float: left;

                    width: 140px;

                    height: 100%;

                    background-color: transparent;

                    position: relative;

                    padding-left: 0px;

                    border-top-style: none;

                    border-right-style: none;

                    border-bottom-style: none;

                    border-left-style: none;

                }

                 

                .VTabbedPanels .TabbedPanelsTab {

                    float: right;

                    margin: 0px;

                    font-size: 14px;

                    font-weight: 300;

                    text-align: right;

                    padding-top: 5px;

                    padding-bottom: 5px;

                    border-top-style: none;

                    border-right-style: none;

                    border-bottom-style: none;

                    border-left-style: none;

                }

                 

                .VTabbedPanels .TabbedPanelsTabSelected {

                    background-color: #6CF;

                    width: 100px;

                    border-top-color: transparent;

                    border-right-color: transparent;

                    border-bottom-color: transparent;

                    border-left-color: transparent;

                    border-top-style: none;

                    border-right-style: none;

                    border-bottom-style: none;

                    border-left-style: none;

                }

                 

                .VTabbedPanels .TabbedPanelsContentGroup {

                    clear: none;

                    float: left;

                    padding: 0px;

                    width: 85%;

                    height: 100%;

                    border-top-style: none;

                    border-right-style: none;

                    border-bottom-style: none;

                    border-left-style: none;

                }

                 

                .V2TabbedPanels {

                    overflow: hidden;

                    zoom: 1;

                    min-width: 100px;

                    font-family: Verdana, Arial, Helvetica, sans-serif;

                }

                 

                .V2TabbedPanels .TabbedPanelsTabGroup {

                    float: right;

                    width: 20%;

                    height: 100%;

                    background-color: transparent;

                    position: relative;

                    padding-left: 0px;

                    border-top-style: none;

                    border-right-style: none;

                    border-bottom-style: none;

                    border-left-style: none;

                }

                 

                .V2TabbedPanels .TabbedPanelsTab {

                    float: left;

                    margin: 0px;

                    font-size: 14px;

                    font-weight: 300;

                    text-align: left;

                    padding-top: 5px;

                    padding-bottom: 5px;

                    border-top-style: none;

                    border-right-style: none;

                    border-bottom-style: none;

                    border-left-style: none;

                    width: 70px;

                    background-color: transparent;

                }

                 

                .V2TabbedPanels .TabbedPanelsTabSelected {

                    background-color: #6CF;

                    /* [disabled]width: 100px; */

                    border-top-color: transparent;

                    border-right-color: transparent;

                    border-bottom-color: transparent;

                    border-left-color: transparent;

                    border-top-style: none;

                    border-right-style: none;

                    border-bottom-style: none;

                    border-left-style: none;

                    text-align: left;

                }

                 

                .V2TabbedPanels .TabbedPanelsContentGroup {

                    clear: none;

                    float: left;

                    padding: 0px;

                    width: 75%;

                    height: 100%;

                    border-top-style: none;

                    border-right-style: none;

                    border-bottom-style: none;

                    border-left-style: none;

                }

                 

                 

                 

                @media print {

                .TabbedPanels {

                    overflow: visible !important;

                }

                .TabbedPanelsContentGroup {

                    display: block !important;

                    overflow: visible !important;

                    height: auto !important;

                }

                .TabbedPanelsContent {

                    overflow: visible !important;

                    display: block !important;

                    clear:both !important;

                }

                .TabbedPanelsTab {

                     overflow: visible !important;

                     display: block !important;

                     clear:both !important;

                }

                }

                .Vpanelbackgroundimg {

                    background-image: url(../DC_001.jpg);

                    background-repeat: no-repeat;

                }

                <!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"><!-- InstanceBegin template="/Templates/MrChanPortWorkingTemplateSideBarAssessment.dwt" codeOutsideHTMLIsLocked="false" -->

                <head>

                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                <!-- InstanceBeginEditable name="doctitle" -->

                <title>MrChanPortWorkingTemplateNOSidebar</title>

                <!-- InstanceEndEditable -->

                <style type="text/css">

                <!--

                -->

                </style><!--[if lte IE 7]>

                <style>

                .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */

                ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */

                </style>

                <![endif]-->

                <!-- InstanceBeginEditable name="head" -->

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

                <link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />

                <!-- InstanceEndEditable -->

                <link href="CSS/NoSideBarWide.css" rel="stylesheet" type="text/css" />

                </head>

                 

                <body>

                 

                <div class="container">

                   <div class="header">

                   

                      <div id="Banner"></div>

                      <div id="NaviMother">

                        <div id="Navi1">

                          <div align="center"><a href="MrChan2aProfilePhilosophy.html">CORE</a></div>

                        </div>

                        <div id="Navi1a"><a href="MrChan3aClassManageNPedagogy.html">CLASS MANAGEMENT &amp; PEDAGOGY</a></div>

                        <div id="Navi1b"><a href="MrChan4aInstruction.html">INSTRUCTION</a></div>

                        <div id="Navi1c"><a href="MrChan5aArtifacts.html">ARTIFACTS</a></div>

                        <div id="Navi1d"><a href="MrChan6aContact.html">CONTACT ME</a></div>

                        <div id="Navi2"><a href="MrChan4Instruction.html">planning documents</a></div>

                        <div id="Navi2b"><a href="MrChan3bTechnology.html">assessment</a></div>

                     </div>

                      <!-- end .header --></div>

                   <!-- InstanceBeginEditable name="Content" -->

                  <div class="content">

                     <h1><strong>Instruction</strong></h1>

                   <div id="TabbedPanels2" class="V2TabbedPanels">

                       <ul class="TabbedPanelsTabGroup">

                         <li class="TabbedPanelsTab" tabindex="0">Overview</li>

                         <li class="TabbedPanelsTab" tabindex="0">6+1 Traits of Writing - Ideas - Gr. 5</li>

                         <li class="TabbedPanelsTab" tabindex="0">Interpreting Trends on Graphs - Gr. 5 </li>

                         <li class="TabbedPanelsTab" tabindex="0"><span class="Vpanelbackgroundimg">Writing Mystery Narratives - Gr. 5</span></li>

                         <li class="TabbedPanelsTab" tabindex="0">Percent Triangles - Gr. 5</li>

                         <li class="TabbedPanelsTab" tabindex="0"> Imaginary Settings - Yr. 4</li>

                         <li class="TabbedPanelsTab" tabindex="0">Roman Shield - Yr. 4 </li>

                         <li class="TabbedPanelsTab" tabindex="0">French - Yr. 4 </li>

                         <li class="TabbedPanelsTab" tabindex="0">Skeleton -<br />

                         Yr. 4</li>

                <li class="TabbedPanelsTab" tabindex="0"> Verts vs. Inverts - Yr. 4</li>

                         <li class="TabbedPanelsTab" tabindex="0"> Imaginary Worlds - Yr. 4</li>

                         <li class="TabbedPanelsTab" tabindex="0">Sums and Differences - Yr. 4</li>

                         <li class="TabbedPanelsTab" tabindex="0">Sub Plans -Wednesday</li>

                         <li class="TabbedPanelsTab" tabindex="0">Sub Plans -2008</li>

                         <li class="TabbedPanelsTab" tabindex="0">Mean Median Mode - Gr. 5</li>

                         <li class="TabbedPanelsTab" tabindex="0">UoI - Unit Hook</li>

                         <li class="TabbedPanelsTab" tabindex="0">Sub Plans -Thursday</li>

                         <li class="TabbedPanelsTab" tabindex="0">Tab 18</li>

                       </ul>

                       <div class="TabbedPanelsContentGroup">

                         <div class="TabbedPanelsContent">

                           <p class="pbody">Overview</p>

                           <p class="pbody">

                content

                </p>

                </div>

                         <div class="TabbedPanelsContent">

                           <table width="100%" border="0" cellspacing="0" cellpadding="0">

                             <tr>

                         <td width="54%"><h3>6+1 Writing Traits Ideas Lesson Plan</h3></td>

                         <td width="46%"><h6 align="right" class="tablespacing"><strong><a href="http://www.scribd.com/doc/74071521/Lesson-Plan-Plans2-Writing-Unit-6-W riting-Traits-IDEAS?secret_password=vd9i3wol11353g40xr1">View the 6+1 Writing Traits Ideas Lesson Plan on Scribd.</a></strong></h6>

                         <h6 align="right" class="tablespacing"><strong><a href="assets/4/pdfs/Lesson Plan - Plans2_Writing_Unit_6_Writing_Traits_IDEAS.pdf">Click  here to download the file.</a></strong></h6></td>

                      </tr>

                  </table>

                    <p> <object data="assets/4/pdfs/Lesson Plan - Plans2_Writing_Unit_6_Writing_Traits_IDEAS.pdf"

                border= "0" solid #FF0000 type="application/pdf" width="100%" height="500px">

                 

                <iframe class="scribd_iframe_embed" src="http://www.scribd.com/embeds/74071521/content?start_page=1&view_mode=l  ist&access_key=key-c9w2orrbimp5rn8gd1m&secret_password=vd9i3wol11353g4 0xr1" data-auto-height="true" data-aspect-ratio="1.41503267973856" scrolling="no" id="doc_89634" width="100%" height="500" frameborder="0"></iframe>

                   </object>

                    </p>

                         </div>

                         <div class="TabbedPanelsContent"><table width="100%" border="0" cellspacing="0" cellpadding="0">

                             <tr>

                         <td width="54%"><h3>Lesson Plan - Math - Interpreting Trends on Graphs</h3></td>

                         <td width="46%"><h6 align="right" class="tablespacing"><strong><a href="http://www.scribd.com/doc/73710751/Lesson-Plan-Math-Graph-Interpreting -Trends?secret_password=32gkg0egadxfatkgs97#page=1">View the Interpreting Trends on Graphs Lesson Plan on Scribd.</a></strong></h6>

                         <h6 align="right" class="tablespacing"><strong><a href="assets/4/pdfs/Lesson plan - Math Graph interpreting trends.pdf">Click  here to download the file.</a></strong></h6></td>

                      </tr>

                  </table>

                    <p> <object data="assets/4/pdfs/Lesson plan - Math Graph interpreting trends.pdf"

                border= "0" solid #FF0000 type="application/pdf" width="100%" height="500px">

                 

                <iframe class="scribd_iframe_embed" src="http://www.scribd.com/embeds/73710751/content?start_page=1&view_mode=l  ist&access_key=key-20fue13g2e3b0bozb6y&secret_password=32gkg0egadxfatk gs97" data-auto-height="true" data-aspect-ratio="1.2938689217759" scrolling="no" id="doc_3446" width="100%" height="500" frameborder="0"></iframe>

                   </object>

                    </div>

                         <div class="TabbedPanelsContent"><table width="100%" border="0" cellspacing="0" cellpadding="0">

                             <tr>

                         <td width="54%"><h3>Lesson Plan - Literacy - Writing Mystery Narratives</h3></td>

                         <td width="46%"><h6 align="right" class="tablespacing"><strong><a href="http://www.scribd.com/doc/74071513/Lesson-Plan-Plans1-Writing-Unit-Jou rney-Mystery?secret_password=sy77uft961qwr1399to#page=1">View the Writing Mystery Narratives Lesson Plans on Scribd.</a></strong></h6>

                         <h6 align="right" class="tablespacing"><strong><a href="assets/4/pdfs/Lesson Plan - Plans1_Writing_Unit_Journey_Mystery.pdf">Click  here to download the file.</a></strong></h6></td>

                      </tr>

                  </table>

                    <p> <object data="assets/4/pdfs/Lesson Plan - Plans1_Writing_Unit_Journey_Mystery.pdf"

                border= "0" solid #FF0000 type="application/pdf" width="100%" height="500px">

                 

                <iframe class="scribd_iframe_embed" src="http://www.scribd.com/embeds/74071513/content?start_page=1&view_mode=l  ist&access_key=key-bn07uxi9ca1nv1abe8p&secret_password=sy77uft961qwr13 99to" data-auto-height="true" data-aspect-ratio="0.706697459584296" scrolling="no" id="doc_44284" width="100%" height="500" frameborder="0"></iframe>

                   </object>

                    </p></div>

                         <div class="TabbedPanelsContent"><table width="100%" border="0" cellspacing="0" cellpadding="0">

                             <tr>

                         <td width="54%"><h3>Lesson Plan - Numeracy - Percent Triangles</h3></td>

                         <td width="46%"><h6 align="right" class="tablespacing"><strong><a href="http://www.scribd.com/doc/74061990/Lesson-Plan-Math-Percent-Triangle?s ecret_password=20ctqeqre2yzh3luhqbo#page=1">View the Percent Triangles Lesson Plan on Scribd.</a></strong></h6>

                         <h6 align="right" class="tablespacing"><strong><a href="assets/4/pdfs/lesson plan - Math percent triangle.pdf">Click  here to download the file.</a></strong></h6></td>

                      </tr>

                  </table>

                    <p> <object data="assets/4/pdfs/lesson plan - Math percent triangle.pdf"

                border= "0" solid #FF0000 type="application/pdf" width="100%" height="500px">

                 

                <iframe class="scribd_iframe_embed" src="http://www.scribd.com/embeds/74061990/content?start_page=1&view_mode=l  ist&access_key=key-1e223eua1vbds3e27gh1&secret_password=20ctqeqre2yzh3 luhqbo" data-auto-height="true" data-aspect-ratio="1.2938689217759" scrolling="no" id="doc_39022" width="100%" height="500" frameborder="0"></iframe>

                   </object>

                    </p></div>

                         <div class="TabbedPanelsContent"><table width="100%" border="0" cellspacing="0" cellpadding="0">

                             <tr>

                         <td width="54%"><h3>Lesson Plan - Year 4 Literacy - Imaginary Settings Plans</h3></td>

                         <td width="46%"><h6 align="right" class="tablespacing"><strong><a href="http://www.scribd.com/doc/71296897/Literacy-Year-4-PLAN-Imaginary-Sett ings?secret_password=1twm2b25v3rh0cb226t6#page=1">View the Imaginary Settings Plans on Scribd.</a></strong></h6>

                         <h6 align="right" class="tablespacing"><strong><a href="assets/4/pdfs/Lesson Plan - Literacy Year 4 PLAN imaginary settings.pdf">Click  here to download the file.</a></strong></h6></td>

                      </tr>

                  </table>

                    <p> <object data="assets/4/pdfs/Lesson Plan - Literacy Year 4 PLAN imaginary settings.pdf"

                border= "0" solid #FF0000 type="application/pdf" width="100%" height="500px">

                 

                <iframe class="scribd_iframe_embed" src="http://www.scribd.com/embeds/71296897/content?start_page=1&view_mode=l  ist&access_key=key-pi5oi1zqcy46mmvy54w&secret_password=1twm2b25v3rh0cb 226t6" data-auto-height="true" data-aspect-ratio="1.41666666666667" scrolling="no" id="doc_61029" width="100%" height="500" frameborder="0"></iframe>

                   </object>

                    </p></div>

                         <div class="TabbedPanelsContent"><table width="100%" border="0" cellspacing="0" cellpadding="0">

                             <tr>

                         <td width="54%"><h3>Lesson Plan - Year 4 Arts - Roman Shield</h3></td>

                         <td width="46%"><h6 align="right" class="tablespacing"><strong><a href="http://www.scribd.com/doc/74070690/Lesson-Plan-Art-Year-4-Week-1-Autum n-2?secret_password=1f3s9t9aqjc7cvq6phtt#page=1">View the Art Lesson Plan on Scribd.</a></strong></h6>

                         <h6 align="right" class="tablespacing"><strong><a href="assets/4/pdfs/Lesson Plan - Art Year 4 Week 1 Autumn 2.pdf">Click  here to download the file.</a></strong></h6></td>

                      </tr>

                  </table>

                    <p> <object data="assets/4/pdfs/Lesson Plan - Art Year 4 Week 1 Autumn 2.pdf"

                border= "0" solid #FF0000 type="application/pdf" width="100%" height="500px">

                 

                <iframe class="scribd_iframe_embed" src="http://www.scribd.com/embeds/74070690/content?start_page=1&view_mode=l  ist&access_key=key-u4b8iwuu96etme2u81d&secret_password=1f3s9t9aqjc7cvq 6phtt" data-auto-height="true" data-aspect-ratio="1.41666666666667" scrolling="no" id="doc_67294" width="100%" height="500" frameborder="0"></iframe>

                   </object>

                    </p></div>

                         <div class="TabbedPanelsContent">

                           <table width="100%" border="0" cellspacing="0" cellpadding="0">

                             <tr>

                               <td width="54%"><h3>Lesson Plan - MFL - Year 4 French</h3></td>

                               <td width="46%"><h6 align="right" class="tablespacing"><strong><a href="http://www.scribd.com/doc/74071401/Lesson-Plan-French-Year-4-Week-3?se cret_password=l4o2tnhd3411x7l936u#page=1">View the French Lesson Plan on Scribd.</a></strong></h6>

                                 <h6 align="right" class="tablespacing"><strong><a href="assets/4/pdfs/Lesson Plan - French Year 4  Week 3.pdf">Click  here to download the file.</a></strong></h6></td>

                             </tr>

                           </table>

                           <p>

                             <object data="assets/4/pdfs/Lesson Plan - French Year 4  Week 3.pdf"

                border= "0" solid #FF0000 type="application/pdf" width="100%" height="500px">

                               <iframe class="scribd_iframe_embed" src="http://www.scribd.com/embeds/74071401/content?start_page=1&view_mode=l  ist&access_key=key-1hhb76n0drei6ij63cxx&secret_password=l4o2tnhd3411x7 l936u" data-auto-height="true" data-aspect-ratio="1.41666666666667" scrolling="no" id="doc_99386" width="100%" height="500" frameborder="0"></iframe>

                             </object>

                           </p>

                         </div>

                         <div class="TabbedPanelsContent">

                           <table width="100%" border="0" cellspacing="0" cellpadding="0">

                             <tr>

                               <td width="54%"><h3>Lesson Plan - Year 4 Science - Skeletons</h3></td>

                               <td width="46%"><h6 align="right" class="tablespacing"><strong><a href="http://www.scribd.com/doc/74071498/Lesson-Plan-Science-Week-1-Plan-Int roducing-Skeletons?secret_password=24utqyaoekr6chdwtcwf#page=1">View the Skeletons Lesson Plan on Scribd.</a></strong></h6>

                                 <h6 align="right" class="tablespacing"><strong><a href="assets/4/pdfs/Lesson Plan - Science Week 1 Plan - Introducing Skeletons.pdf">Click  here to download the file.</a></strong></h6></td>

                             </tr>

                           </table>

                           <p>

                             <object data="assets/4/pdfs/Lesson Plan - Science Week 1 Plan - Introducing Skeletons.pdf"

                border= "0" solid #FF0000 type="application/pdf" width="100%" height="500px">

                               <iframe class="scribd_iframe_embed" src="http://www.scribd.com/embeds/74071498/content?start_page=1&view_mode=l  ist&access_key=key-bm90e73enk4tuwftlym&secret_password=24utqyaoekr6chd wtcwf" data-auto-height="true" data-aspect-ratio="1.41666666666667" scrolling="no" id="doc_64402" width="100%" height="500" frameborder="0"></iframe>

                             </object>

                           </p>

                         </div>

                <div class="TabbedPanelsContent"><table width="100%" border="0" cellspacing="0" cellpadding="0">

                             <tr>

                         <td width="54%"><h3>Lesson Plan - Year 4 Science - Compare Verts and Inverts</h3></td>

                         <td width="46%"><h6 align="right" class="tablespacing"><strong><a href="http://www.scribd.com/doc/74071508/Lesson-Plan-Science-Wk-4-Compare-Ve rts-and-Inverts?secret_password=zpn85x1q51dxxtql2d0#page=1">View the Vertebrates vs. Invertebrates Lesson Plans on Scribd.</a></strong></h6>

                         <h6 align="right" class="tablespacing"><strong><a href="assets/4/pdfs/Lesson Plan - Science wk 4 - Compare Verts and Inverts.pdf">Click  here to download the file.</a></strong></h6></td>

                      </tr>

                  </table>

                    <p> <object data="assets/4/pdfs/Lesson Plan - Science wk 4 - Compare Verts and Inverts.pdf"

                border= "0" solid #FF0000 type="application/pdf" width="100%" height="500px">

                 

                <iframe class="scribd_iframe_embed" src="http://www.scribd.com/embeds/74071508/content?start_page=1&view_mode=l  ist&access_key=key-23wjo4fkh7yalvpmyvzb&secret_password=zpn85x1q51dxxt ql2d0" data-auto-height="true" data-aspect-ratio="1.41666666666667" scrolling="no" id="doc_46456" width="100%" height="500" frameborder="0"></iframe>

                   </object>

                    </p></div>

                         <div class="TabbedPanelsContent"><table width="100%" border="0" cellspacing="0" cellpadding="0">

                             <tr>

                         <td width="54%"><h3>Lesson Plan - Year 4 Literacy - Writing Imaginary Worlds Narratives</h3></td>

                         <td width="46%"><h6 align="right" class="tablespacing"><strong><a href="http://www.scribd.com/doc/74071409/Lesson-Plan-Literacy-Narrative-Imag inary-Worlds-Plan?secret_password=2ayum7jzrlvfa80q01hs#page=1">View the Writing Imaginary Worlds Narratives Lesson Plans on Scribd.</a></strong></h6>

                         <h6 align="right" class="tablespacing"><strong><a href="assets/4/pdfs/Lesson Plan - Literacy Narrative Imaginary Worlds Plan.pdf">Click  here to download the file.</a></strong></h6></td>

                      </tr>

                  </table>

                    <p> <object data="assets/4/pdfs/Lesson Plan - Literacy Narrative Imaginary Worlds Plan.pdf"

                border= "0" solid #FF0000 type="application/pdf" width="100%" height="500px">

                 

                <iframe class="scribd_iframe_embed" src="http://www.scribd.com/embeds/74071409/content?start_page=1&view_mode=l  ist&access_key=key-77yv7erqpp2o70gsf3q&secret_password=2ayum7jzrlvfa80 q01hs" data-auto-height="true" data-aspect-ratio="1.41666666666667" scrolling="no" id="doc_48317" width="100%" height="500" frameborder="0"></iframe>

                   </object>

                    </p>

                         </div>

                         <div class="TabbedPanelsContent"><table width="100%" border="0" cellspacing="0" cellpadding="0">

                             <tr>

                         <td width="54%"><h3>Lesson Plan - Year 4 Numeracy - Sums and Difference</h3></td>

                         <td width="46%"><h6 align="right" class="tablespacing"><strong><a href="http://www.scribd.com/doc/74072297/Lesson-Plan-Maths-Year-4-Week-5-B1? secret_password=10iidi8jo22lkal3wiea#page=1">View the Sums and Differences Lesson Plans on Scribd.</a></strong></h6>

                         <h6 align="right" class="tablespacing"><strong><a href="assets/4/pdfs/Lesson Plan - Maths_Year 4  - Week 5 B1.pdf">Click  here to download the file.</a></strong></h6></td>

                      </tr>

                  </table>

                    <p> <object data="assets/4/pdfs/Lesson Plan - Maths_Year 4  - Week 5 B1.pdf"

                border= "0" solid #FF0000 type="application/pdf" width="100%" height="500px">

                 

                <iframe class="scribd_iframe_embed" src="http://www.scribd.com/embeds/74072297/content?start_page=1&view_mode=l  ist&access_key=key-1vqlid6khc2b8zgqyewz&secret_password=10iidi8jo22lka l3wiea" data-auto-height="true" data-aspect-ratio="1.41666666666667" scrolling="no" id="doc_62329" width="100%" height="500" frameborder="0"></iframe>

                   </object>

                    </p></div>

                         <div class="TabbedPanelsContent"><table width="100%" border="0" cellspacing="0" cellpadding="0">

                             <tr>

                         <td width="54%"><h3>Wednesday's Sub Plans</h3></td>

                         <td width="46%"><h6 align="right" class="tablespacing"><strong><a href="http://www.scribd.com/doc/74179544/SUBplans-Wednesday-Feb-24th?secret_ password=8m1wuvpugoh4uk46yay#page=1">View Wednesday's Sub Plans on Scribd.</a></strong></h6>

                         <h6 align="right" class="tablespacing"><strong><a href="assets/4/pdfs/SUBplans_Wednesday Feb 24th.pdf">Click  here to download the file.</a></strong></h6></td>

                      </tr>

                  </table>

                    <p> <object data="assets/4/pdfs/SUBplans_Wednesday Feb 24th.pdf"

                border= "0" solid #FF0000 type="application/pdf" width="100%" height="500px">

                 

                <iframe class="scribd_iframe_embed" src="http://www.scribd.com/embeds/74179544/content?start_page=1&view_mode=l  ist&access_key=key-b33v4b75ot6bvup8t35&secret_password=8m1wuvpugoh4uk4 6yay" data-auto-height="true" data-aspect-ratio="0.772727272727273" scrolling="no" id="doc_8214" width="100%" height="500" frameborder="0"></iframe>

                   </object>

                    </p></div>

                         <div class="TabbedPanelsContent"><table width="100%" border="0" cellspacing="0" cellpadding="0">

                             <tr>

                         <td width="54%"><h3>Sub Plans from 2008</h3></td>

                         <td width="46%"><h6 align="right" class="tablespacing"><strong><a href="http://www.scribd.com/doc/74179545/Sub-Plans-2008?secret_password=1n9m q3q93g6c1zgdugug#page=1">View a Sub Plans from 2008 on Scribd.</a></strong></h6>

                         <h6 align="right" class="tablespacing"><strong><a href="assets/4/pdfs/SubPlans2008.pdf">Click  here to download the file.</a></strong></h6></td>

                      </tr>

                  </table>

                    <p> <object data="assets/4/pdfs/SubPlans2008.pdf"

                border= "0" solid #FF0000 type="application/pdf" width="100%" height="500px">

                 

                <iframe class="scribd_iframe_embed" src="http://www.scribd.com/embeds/74179545/content?start_page=1&view_mode=l  ist&access_key=key-1ow137qkn46ck5u6tt8c&secret_password=1n9mq3q93g6c1z gdugug" data-auto-height="true" data-aspect-ratio="0.772727272727273" scrolling="no" id="doc_56421" width="100%" height="500" frameborder="0"></iframe>

                   </object>

                    </p></div>

                         <div class="TabbedPanelsContent"><table width="100%" border="0" cellspacing="0" cellpadding="0">

                             <tr>

                         <td width="54%"><h3>Grade 5 Numeracy - Mean Median Mode Learning Activity Plans</h3></td>

                         <td width="46%"><h6 align="right" class="tablespacing"><strong><a href="http://www.scribd.com/doc/74066273/Lesson-Plan-Math-Mean-Median-Mode-A ctivity?secret_password=2lggw1h90b3gf1254309#page=1">View the Mean Median Mode Plans on Scribd.</a></strong></h6>

                         <h6 align="right" class="tablespacing"><strong><a href="assets/4/pdfs/Lesson plan - Math mean median mode activity.pdf">Click  here to download the file.</a></strong></h6></td>

                      </tr>

                  </table>

                    <p> <object data="assets/4/pdfs/Lesson plan - Math mean median mode activity.pdf"

                border= "0" solid #FF0000 type="application/pdf" width="100%" height="500px">

                 

                <iframe class="scribd_iframe_embed" src="http://www.scribd.com/embeds/74066273/content?start_page=1&view_mode=l  ist&access_key=key-brqunnpe4lxz8t0joe8&secret_password=2lggw1h90b3gf12 54309" data-auto-height="true" data-aspect-ratio="1.2938689217759" scrolling="no" id="doc_35909" width="100%" height="500" frameborder="0"></iframe>

                   </object>

                    </p></div>

                         <div class="TabbedPanelsContent"><table width="100%" border="0" cellspacing="0" cellpadding="0">

                             <tr>

                         <td width="54%"><h3>Grade 5 UoI - Where we are in Place and TIme Unit Hook</h3></td>

                         <td width="46%"><h6 align="right" class="tablespacing"><strong><a href="http://www.scribd.com/doc/74072299/Lesson-Plan-UOI-Place-and-Time-Immi gration-1-Hook?secret_password=14hcmjjpusvm8321b5n3#page=1">View the UoI Unit Hook Plans on Scribd.</a></strong></h6>

                         <h6 align="right" class="tablespacing"><strong><a href="assets/4/pdfs/Lesson Plan - UOI Place and Time Immigration 1 - Hook.pdf">Click  here to download the file.</a></strong></h6></td>

                      </tr>

                  </table>

                    <p> <object data="assets/4/pdfs/Lesson Plan - UOI Place and Time Immigration 1 - Hook.pdf"

                border= "0" solid #FF0000 type="application/pdf" width="100%" height="500px">

                 

                <iframe class="scribd_iframe_embed" src="http://www.scribd.com/embeds/74072299/content?start_page=1&view_mode=l  ist&access_key=key-1nyl8hax80dfw7glxvg9&secret_password=14hcmjjpusvm83 21b5n3" data-auto-height="true" data-aspect-ratio="1.2938689217759" scrolling="no" id="doc_87664" width="100%" height="500" frameborder="0"></iframe>

                   </object>

                    </p></div>

                         <div class="TabbedPanelsContent"><table width="100%" border="0" cellspacing="0" cellpadding="0">

                             <tr>

                         <td width="54%"><h3>Thursday's Sub Plans</h3></td>

                         <td width="46%"><h6 align="right" class="tablespacing"><strong><a href="http://www.scribd.com/doc/74179543/SUBplans-Thursday-May-12th-2011?sec ret_password=2i1yroj93pgaglbdkkji#page=1">View Thursday's Sub Plans on Scribd.</a></strong></h6>

                         <h6 align="right" class="tablespacing"><strong><a href="assets/4/pdfs/SUBplans_Thursday May 12th 2011.pdf">Click  here to download the file.</a></strong></h6></td>

                      </tr>

                  </table>

                    <p> <object data="assets/4/pdfs/SUBplans_Thursday May 12th 2011.pdf"

                border= "0" solid #FF0000 type="application/pdf" width="100%" height="500px">

                 

                <iframe class="scribd_iframe_embed" src="http://www.scribd.com/embeds/74179543/content?start_page=1&view_mode=l  ist&access_key=key-efjxxko0idogc1pn0i5&secret_password=2i1yroj93pgaglb dkkji" data-auto-height="true" data-aspect-ratio="0.772727272727273" scrolling="no" id="doc_48905" width="100%" height="500" frameborder="0"></iframe>

                   </object>

                    </p></div>

                         <div class="TabbedPanelsContent">Content 18</div>

                       </div>

                     </div>

                     <p><!-- end .content -->

                   <script type="text/javascript">

                var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");

                       </script>     <!-- end .content --></div>

                   <!-- InstanceEndEditable -->

                   <div class="footer">

                  <div class="centered"><a href="index.html">home</a></div>

                    <!-- end .footer --></div>

                  <!-- end .container --></div>

                </body>

                <!-- InstanceEnd --></html>



                • 5. Re: how to have a different hover and selected state for each tab
                  Ben Pleysier CommunityMVP

                  Please start a new discussion.

                   

                  Gramps