8 Replies Latest reply on Mar 9, 2010 10:52 AM by Zabeth69

    Spry Tabbed Panel obj Qs style

    123polis123 Level 1

      Spry Tabbed Panel obj

       

      1. TAB NAMES how rather left-aligned(default) get centered?
      2. may have an image in a tab name?
      3. How tabs from left aligned extent to get all space(width) , all get bigger in width and aligned(the tabs) so tabbed area starts with: start of first tab and end with end of last tab?
        • 1. Re: Spry Tabbed Panel obj Qs style
          Zabeth69 Level 5
          1. Change this rule:

            .TabbedPanelsTab {
                position: relative;
                top: 1px;
                float: left;
                padding: 4px 10px;
                margin: 0px 1px 0px 0px;
                font: bold 0.7em sans-serif;
                background-color: #DDD;
                list-style: none;
                border-left: solid 1px #CCC;
                border-bottom: solid 1px #999;
                border-top: solid 1px #999;
                border-right: solid 1px #999;
                -moz-user-select: none;
                -khtml-user-select: none;
                cursor: pointer;
               width: 100px;
                text-align: center;

            }

          You will notice that I also added a width. Spry Tabbed Panel Tabs normally depend on the width of the text for their own dimension, so you need to add a width for the text to center in.

           

          2. Of course you can have an image. You are essentially working with a list structure; anything you can have in a list you can have on a tab.

           

          3. Give each tab li an id and "work out" percentage widths. Then, add selectors that assign those widths to each id'd list item. Caveats: you might want to do away with left and right padding in tabs if you are using percentages, because they will throw you off your count.

           

          If you are using a static width, you could use pixel widths, but I think percentages are a little cleaner. Here's what your code might look like:

          <li id="aboutustab" class="TabbedPanelsTab" tabindex="0">About Us</li>

          <li id="qualitycontroltab" class="Tabbed PanelsTab" tabindex="0">Quality Control Department</li>

          And corresponding CSS might look like this (if these were the only tabs!):

          .TabbedPanelsTab {
              position: relative;
              top: 1px;
              float: left;
              padding: 4px 10px;
              margin: 0px 1px 0px 0px;
              font: bold 0.7em sans-serif;
              background-color: #DDD;
              list-style: none;
              border-left: solid 1px #CCC;
              border-bottom: solid 1px #999;
              border-top: solid 1px #999;
              border-right: solid 1px #999;
              -moz-user-select: none;
              -khtml-user-select: none;
              cursor: pointer;
              width: 100px;
              text-align: center;
          }
          #aboutustab.TabbedPanelsTab {

               width: 30%;

          }

          #qualitycontroltab.TabbedPanelsTab {

               width: 69%;

          }

           

          /*Note: be sure to put these BELOW the original .TabbedPanelsTab selector. ALSO NOTE that these are id and class on the SAME list item, so do not put a space between #aboutustab and .TabbedPanelsTab */

          I guesstimated the widths of the text for the tabs by throwing a grid over my page and adjusting the grid to show only ten grid-squares over the entire width of the panels. If you put all your tabs and tab labels in, you can then "read" an approximate width.

           

          Then I summed the 'lengths' of the tab labels (in this case, I got aboutustab=1, qualitycontroltab=2.3, total=3.3) and divided each width by the total (small divided by large) to get the percentage for each width.

           

          Be sure you don't add to more than 100%, or it will break.

           

          Okay, if you simply want your tabs to meet the ends of your TabbedPanels, and don't care particularly about the width of each tab, give the width in the principal style rule (.TabbedPanelsTab) a simple percentage of the width of the Panels. If you have 5 tabs, each will be 20% wide (adjust for borders, etc.).

           

          Beth

          • 2. if total 100% no work but with total 69%(8 tabs) missing a pixel well . if 1% more no work-go to nex
            123polis123 Level 1

            if total 100% no work but with total 69%(8 tabs) missing a pixel well ? if 1% more no work-go to next line...

             

            http://www.polisphotos.com/PaWed/

            • 3. Re: if total 100% no work but with total 69%(8 tabs) missing a pixel well . if 1% more no work-go to nex
              123polis123 Level 1
              1. TAB NAMES how rather left-aligned(default) get centered?

               

              I mean the tab rectangle by TAB NAMES...

              • 4. Re: if total 100% no work but with total 69%(8 tabs) missing a pixel well . if 1% more no work-go to nex
                123polis123 Level 1

                Spry Tabbed Panel objs may exist 2 or 3 panels in same page ? May be nested eg one in a tab has Tabbed Panel and in another tab another Tabbed Panel obj total 3 ...

                 

                In

                <li id="Links" class="TabbedPanelsTab" tabindex="0">

                the

                tabindex="0"

                required?

                • 5. Re: if total 100% no work but with total 69%(8 tabs) missing a pixel well . if 1% more no work-go to nex
                  123polis123 Level 1

                  How I go to a tab from a differ tab(change tab) via a link(not by clicking the tab), may I ? either reload page or not....

                  • 6. Re: if total 100% no work but with total 69%(8 tabs) missing a pixel well . if 1% more no work-go to nex
                    Zabeth69 Level 5

                    Make sure when you apply text-align: center; that you are applying it to text. If you apply it to the ul or the li, it will not only center the text, it will center the whole list item.

                     

                    So apply text-align: center; to the a (in the CSS).

                     

                    Beth

                    • 7. Re: if total 100% no work but with total 69%(8 tabs) missing a pixel well . if 1% more no work-go to nex
                      Zabeth69 Level 5

                      Sure, you can have several SpryTabbedPanels widgets in one page. Put each into its own containing div.

                       

                      You don't need the tabindex="0".

                       

                      Beth

                      • 8. Re: if total 100% no work but with total 69%(8 tabs) missing a pixel well . if 1% more no work-go to nex
                        Zabeth69 Level 5

                        Yes, you can go to a particular tab or panel from a link, even from a separate page.

                         

                        For example, in this code:

                        <a href="javascript:;"  onclick="CollapsiblePanel1.open(); sites_ds.setCurrentRowNumber(23);">24.    Picnic Grounds</a>

                        1. The linking text is "24. Picnic Grounds"
                        2. The onclick="CollapsiblePanel1.open();" opens the Collapsible Panel Widget on the page
                        3. The "sites_ds.setCurrentRowNumber(23);" is opening the data detail for that 24. Picnic Grounds

                         

                        The "CollapsiblePanel1.open();" would change to correspond to the Widget you are using.

                         

                        If you want to link from another page, use the technique that David Powers indicates in his tutorial: http://foundationphp.com/tutorials/spry_url_utils.php

                         

                        Beth