Skip navigation
derrick kale
Currently Being Moderated

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

Apr 10, 2012 11:15 AM

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-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>



 
Replies
  • Currently Being Moderated
    Apr 10, 2012 6:01 PM   in reply to derrick kale

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 11, 2012 5:40 PM   in reply to derrick kale

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2012 5:46 PM   in reply to derrick kale

    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

     
    |
    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