6 Replies Latest reply: Apr 12, 2012 5:46 PM by Ben Pleysier RSS

    Two different spry tabbed panels; hovering behaviour for one of the panels not behaving!

    derrick kale Community Member

      Two 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-Writing-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=list&access_key=key-c 9w2orrbimp5rn8gd1m&secret_password=vd9i3wol11353g40xr1" 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_passw ord=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=list&access_key=key-2 0fue13g2e3b0bozb6y&secret_password=32gkg0egadxfatkgs97" 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-Journey-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=list&access_key=key-b n07uxi9ca1nv1abe8p&secret_password=sy77uft961qwr1399to" 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?secret_password=20ctq eqre2yzh3luhqbo#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=list&access_key=key-1 e223eua1vbds3e27gh1&secret_password=20ctqeqre2yzh3luhqbo" 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-Settings?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=list&access_key=key-p i5oi1zqcy46mmvy54w&secret_password=1twm2b25v3rh0cb226t6" 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-Autumn-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=list&access_key=key-u 4b8iwuu96etme2u81d&secret_password=1f3s9t9aqjc7cvq6phtt" 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?secret_password=l4o2tn hd3411x7l936u#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=list&access_key=key-1 hhb76n0drei6ij63cxx&secret_password=l4o2tnhd3411x7l936u" 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-Introducing-Skeletons?s ecret_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=list&access_key=key-b m90e73enk4tuwftlym&secret_password=24utqyaoekr6chdwtcwf" 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-Verts-and-Inverts?secr et_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=list&access_key=key-2 3wjo4fkh7yalvpmyvzb&secret_password=zpn85x1q51dxxtql2d0" 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-Imaginary-Worlds-Plan?se cret_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=list&access_key=key-7 7yv7erqpp2o70gsf3q&secret_password=2ayum7jzrlvfa80q01hs" 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=10ii di8jo22lkal3wiea#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=list&access_key=key-1 vqlid6khc2b8zgqyewz&secret_password=10iidi8jo22lkal3wiea" 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=8m1wuvpugoh 4uk46yay#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=list&access_key=key-b 33v4b75ot6bvup8t35&secret_password=8m1wuvpugoh4uk46yay" 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=1n9mq3q93g6c1zgdugug#pag e=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=list&access_key=key-1 ow137qkn46ck5u6tt8c&secret_password=1n9mq3q93g6c1zgdugug" 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-Activity?secret_passw ord=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=list&access_key=key-b rqunnpe4lxz8t0joe8&secret_password=2lggw1h90b3gf1254309" 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-Immigration-1-Hook?secre t_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=list&access_key=key-1 nyl8hax80dfw7glxvg9&secret_password=14hcmjjpusvm8321b5n3" 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?secret_password=2i1yroj 93pgaglbdkkji#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=list&access_key=key-e fjxxko0idogc1pn0i5&secret_password=2i1yroj93pgaglbdkkji" 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>



        • 1. Re: Two different spry tabbed panels; hovering behaviour for one of the panels not behaving!
          Ben Pleysier CommunityMVP

          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?

          See the Spry widgets as a motor vehicle, the structure (HTML), the panels (CSS) and the engine (JS). Without the structure, there is nothing, without the panels it would look ugly and without the engine it would not propel itself.

           

          Hence, the structure or markup will always be loaded into the browser and the loading time will be influenced.

          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.

          To make sure that there is no confusion, merely change the value of the attributes that need to be changed as in the following, where I have renamed the V2TabbedPanels to VRTabbedPanels

          <!doctype html>

          <html>

          <head>

          <meta charset="utf-8">

          <title>Untitled Document</title>

          <link href="SpryTabbedPanels.css" rel="stylesheet">

          <style>

          .VRTabbedPanels .TabbedPanelsTabGroup {

              float: right;

              text-align: left;

          }

          .VRTabbedPanels .TabbedPanelsTab {

              float: left;

              text-align: left;

          }

          .VRTabbedPanels .TabbedPanelsTabSelected {

              text-align: left;

          }

          </style>

          </head>

           

          <body>

          <div id="TabbedPanels1" class="VTabbedPanels VRTabbedPanels">

            <ul class="TabbedPanelsTabGroup">

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

              <li 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 src="SpryAssets/SpryTabbedPanels.js"></script>

          <script>

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

          </script>

          </body>

          </html>

          Gramps

          • 2. Re: Two different spry tabbed panels; hovering behaviour for one of the panels not behaving!
            derrick kale Community Member

            Hi Gramps.  Thanks for the suggestions.  I changed the .V2TabbedPanels to .VRTabbedPanels and I also changed the declarations in the source code.  Is there a way I can make the changes in the CSS file instead of writing it in the source code?

             

            Am I correct to understand that the style declarations in the source code superceed the declarations written in the CSS file when it is placed below the reference to the CSS file?

             

            Secondly.  The content in my content panels contains links, an embedded object (pdf) and an iframe embed (in case the user doesn't not have a pdf reader).  I have noticed that when I test the page out on a browser that does not have a PDF reader built in, the loading time is significant and slower than I would like.  Do you have any suggestions to help beat this problem?  I will be adding more content panels in the future, and I would like to avoid the view dumping my page or the browser crashing because there is too much to load.

             

            Thanks again Gramps.

             

            below is an example of what fills my content panels. x19 = significant waiting time

             

            <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-Writing-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=list&access_key=key-c 9w2orrbimp5rn8gd1m&secret_password=vd9i3wol11353g40xr1" data-auto-height="true" data-aspect-ratio="1.41503267973856" scrolling="no" id="doc_89634" width="100%" height="500" frameborder="0"></iframe>

               </object>

                </p>

                     </div>

            • 3. Re: Two different spry tabbed panels; hovering behaviour for one of the panels not behaving!
              Ben Pleysier CommunityMVP

              Is there a way I can make the changes in the CSS file instead of writing it in the source code?

              Yes, simply write the added CSS to the bottom of  SpryTabbedPanels.css.

              Am I correct to understand that the style declarations in the source code superceed the declarations written in the CSS file when it is placed below the reference to the CSS file?

              Correct, hence the name Cascading Style Sheet. Take the following example

              p {color:green;}

              p {color:blue;}

              p.myHighlight {color:red;}

              The colour of the text due to the above rules will be blue with the exception of the paragrapgh with the class of myHightlight which is red.

              Secondly.  The content in my content panels contains links, an embedded object (pdf) and an iframe embed (in case the user doesn't not have a pdf reader).  I have noticed that when I test the page out on a browser that does not have a PDF reader built in, the loading time is significant and slower than I would like.  Do you have any suggestions to help beat this problem?  I will be adding more content panels in the future, and I would like to avoid the view dumping my page or the browser crashing because there is too much to load.

              The contents forr the iframe seems to be the problem. It may be an idea to use a popup window that loads the content independently.

               

              Gramps

              • 5. Re: Two different spry tabbed panels; hovering behaviour for one of the panels not behaving!
                derrick kale Community Member

                Just wanted to run an idea by you Gramps or anyone else reading.

                 

                Since the content in the content panels loads at the same time, creating a slow browsing experience for the view, would you recommend creating individual pages for each of the contents instead of cramming everything into one set of panels?

                 

                I also like the suggestion of pop-ups, but I know for myself, I usually have an active pop-up blocker working as I am browsing. 

                 

                What's your take on this?

                 

                Thanks again!

                • 6. Re: Two different spry tabbed panels; hovering behaviour for one of the panels not behaving!
                  Ben Pleysier CommunityMVP

                  Since the content in the content panels loads at the same time, creating a slow browsing experience for the view, would you recommend creating individual pages for each of the contents instead of cramming everything into one set of panels?

                  There many ways that lead to Rome and you need to choose the one that is right for you. But it does not matter which way you go, the loading of the Scribd page takes a long time and I would never allow the page to load automatically. I would place a trigger, like a Learn More.. button to load the page (hence my suggestion for a pop-up). This way the user can control what he wants to see.

                   

                  You could also place the Scribd page in a local cache, that would speed things up.

                   

                  Just a few thoughts.

                  Gramps