Simple (?) question about Spry tabbed panel

Hi, I'm a bit of a noob at DW and am wondering if there's any way to open a link from within a Spry tabbed panel, and have the content load in the same panel.
I would have thought this would be simple, or even default behavior, but every target I try opens a new browser window or just loads it over everything in the current window.
Any advice would be greatly appreciated.

See if this article by David Powers is any help towards getting what you're after:
http://foundationphp.com/tutorials/spry_url_utils.php
Nadia
Adobe® Community Expert : Dreamweaver
Unique CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
Book: Ultimate CSS Reference
http://www.sitepoint.com/launch/005dfd4/3/133
http://twitter.com/nadiap

Similar Messages

  • Question about Spry Collapsible Panel

    Hey guys my question is that I have a PSD sliced and imported into Dreamweaver and I was wondering if it was possible to have a Spry Collapsible Panel drop down from a button I designed in Photoshop and brought into dreamweaver? Basically I want a content area to drop down when that button is clicked and I figured a Spry Collapsible Panel might be able to accomplish that. I hope I'm explaining this clearly enough, I'm not very experienced with Dreamweaver. Thanks!

    Definitely possible.
    You should first import the image into DW.
    Insert > Spry > Spry Collapsible Panel
    It'll insert a demo panel.
    You'll then have to move your image <img src..> into the default first div under spry collapsible as follows:
    <div id="CollapsiblePanel1" class="CollapsiblePanel">
      <div class="CollapsiblePanelTab" tabindex="0"><img src="location-to-your-image.jpg" width="100" height="50" /></div>
      <div class="CollapsiblePanelContent">Content</div>
    </div>
    You'll basically be removing 'TAB' from here to replace it with your img src tag.
    Your HTML should look like this:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Collapsible Test</title>
    <script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="CollapsiblePanel1" class="CollapsiblePanel">
      <div class="CollapsiblePanelTab" tabindex="0"><img src="location-to-your-image.jpg" width="100" height="50" /></div>
      <div class="CollapsiblePanelContent">Content</div>
    </div>
    <script type="text/javascript">
    <!--
    var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
    //-->
    </script>
    </body>
    </html>
    Do note that you'll have to copy the supporting spry files to your server for this to work. By default, DW will place them into your project folder once you insert the spry collapsible panel.

  • ANN: article about Spry tabbed panels

    How good/bad are they?
    http://www.tjkdesign.com/articles/the_truth_about_spry_tabbed-panels.asp
    Thierry
    Articles and Tutorials:
    http://www.TJKDesign.com/go/?0
    http://www.divahtml.com/products/scripts_dreamweaver_extensions.php
    - Add "you are here" highlighting to virtually any menu
    - FAQ pages made easy

    Nice analysis. Your rating with Adobe has dropped a few
    points, though! 8)
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "Thierry | www.TJKDesign.com" <[email protected]>
    wrote in message
    news:f7j6mi$sgt$[email protected]..
    > How good/bad are they?
    >
    http://www.tjkdesign.com/articles/the_truth_about_spry_tabbed-panels.asp
    >
    >
    > --
    > Thierry
    > Articles and Tutorials:
    http://www.TJKDesign.com/go/?0
    > --
    >
    http://www.divahtml.com/products/scripts_dreamweaver_extensions.php
    > - Add "you are here" highlighting to virtually any menu
    > - FAQ pages made easy
    >
    >

  • Spry Tabbed Panels: Tabs

    I'm experimenting with Spry Tabbed Panels. The problem I
    couldn't work out is that how to get panel tabs stay on their
    place. They seems to be jumping out (far right) when I click on
    enter key while my cursor in the tab content area. This happens on
    DW CS3 but displays correctly on browsers preview (site is local)?
    I am inserting Spry Tabbed Panel in a simple styled div.
    There are many styled divs/nested divs on the page.
    I can insert non Spry items in a same div and style them
    without problem but something seems to be different about Spry
    Tabbed Panel?

    I'm experimenting with Spry Tabbed Panels. The problem I
    couldn't work out is that how to get panel tabs stay on their
    place. They seems to be jumping out (far right) when I click on
    enter key while my cursor in the tab content area. This happens on
    DW CS3 but displays correctly on browsers preview (site is local)?
    I am inserting Spry Tabbed Panel in a simple styled div.
    There are many styled divs/nested divs on the page.
    I can insert non Spry items in a same div and style them
    without problem but something seems to be different about Spry
    Tabbed Panel?

  • Spry tabbed panels, all content showing on one page, please help?

    Hi there,
    I'm developing a website for my friend and i'm using DW CS5 spry tabbed panels. Everything looks great in DW but when i load the page to the server all of the content shows as one page and i can't navigate through tabs.http://dndperspective.co.cc/
    I'll give you the whole code, I am fairly experienced in html but have never used spry before, so it may be a silly mistake. Any Suggestions?
    Here is the code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DND Perspective</title>
    <script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    body {
    background-color: #2B3856;
    .style1 {
    color: #FFFFFF;
    .style4 {
    color: #FFFFFF;
    font-size: 36px;
    font-style: italic;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin-left: 250px;
    .style5 {color: #CCCCCC}
    .style11 {
    font-size: 18pt;
    font-style: italic;
    a:link {
    color: #FFFF00;
    a:visited {
    color: #000000;
    a:hover {
    color: #000033;
    -->
    </style></head>
    <body>
    <div align="center">
      <p align="left" class="style4">DND  </p>
    </div>
    <p align="left">
    <img style="border:6px inset #545565; margin-left: 150px; margin-bottom: 50px;" src="newbanner.jpg" width="701" height="244" />  </p>
    <p align="center">
    <p align="center">
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup" >
        <li class="TabbedPanelsTab" tabindex="0"><img src="images/homebar.jpg" width="125" height="50" /> </li>
        <li class="TabbedPanelsTab" tabindex="0"><img src="images/aboutbar.jpg" width="125" height="50" /></li>
        <li class="style11 TabbedPanelsTab" tabindex="0"><em><img src="images/servicesbar.jpg" width="125" height="50" /></em></li>
        <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/gallerybar.jpg" width="125" height="50" /></li>
        <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/pricingbar.jpg" width="125" height="50" /></li>
        <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/contactbar.jpg" width="125" height="50" /></li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent style1">
          <div align="center">
            <p class="style11">Welcome to DND </p>
            <p>We are so glad you took the time to visit our site during your busy planning schedule. We have tried to make this site as user friendly as possible so you can get back to planning your big day. We provide straight foward and dependable services so you've got nothing to worry about.</p>
            <p>We are located in Rhode Island, but service Massachusetts and Connecticut as well. </p>
            <p>Please visit our services page to discover all photography sessions we have available such as:</p>
            <p>Wedding Photography</p>
            <p> Engament Photos</p>
            <p>Senior Portraits </p>
            <p>Anniversary</p>
            <p>&amp; More!!!</p>
            <p> </p>
          </div>
        </div>
        <div class="TabbedPanelsContent">
          <p class="style1"><strong><u>S.W</u></strong> -<em> Owner and Photographer</em>. For more information about her please click <a href="Untitled-11.pdf">here</a>!
        </div>
        <div class="TabbedPanelsContent">Under Construction...</div>
        <div class="TabbedPanelsContent">Under Construction....</div>
        <div class="TabbedPanelsContent style1">
    <p>We hear at DND  understand that packages and pricing may not provide the precise accomadations to fit you unique and carefully planned big day. We are very open and happy to discuss with you an individual catered package or plan that fits your style and most of all your budget. Whether you need us for just an hour or a full day we want to make your day as special as possible. We have services available starting at just $200.00. Below you will find our most popular packages, printing prices &amp;
    packages, custom videos, thank you cards and albums.</p>
               <hr width="50%" align="left" />
          <p><strong>Package 1 - $500.00</strong></p>
          <p>3 Hours; 1 location - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
          <p><strong>Package 2 - $575.00</strong></p>
          <p>3 Hours; 2 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
          <p><strong>Package 3 - $700.00</strong></p>
          <p>4 Hours; 3 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8&quot;x10&quot; fine art high quality print. *</p>
          <p>*Each additional hour or location available for $100.00. Locations beyond 20 miles will require additional fees. Additional DVD priced at $25.00 each.</p>
               <hr width="50%" align="left" />
          <p><strong>Prints</strong>: (Fine Art High Quality)**</p>
          <p>Individual prices: 8&quot;x10&quot; = $12.99; 10&quot;x13&quot; = $19.99; 2 - 5&quot;x7&quot; = $12.99; 4 - 4&quot;x6&quot; = $11.99</p>
          <p>(Custom sizes available - Custom framing available)</p>
          <p><strong>Package 1:</strong></p>
          <p>3 - 8&quot;x10&quot;; 4 - 5&quot;x7&quot;; 4 - 4&quot;x6&quot; = $50.00</p>
          <p><strong>Package 2:</strong></p>
          <p>5 - 8&quot;x10&quot;; 6 - 5&quot;x7&quot;; 6 - 4&quot;x6&quot; = $90.00</p>
          <p><strong>Package 3:</strong></p>
          <p>8 - 8&quot;x10&quot;; 4 - 5&quot;x7&quot;; 4 - 4&quot;x6&quot; = $125.00</p>
          <p><strong>Package 4:</strong> (Basic Prints)</p>
          <p>Any 100 photos printed 4&quot;x6&quot; = $100.00</p>
               <hr width="50%" align="left" />
          <p><strong>Custom video:</strong>**</p>
          <p>Any 100 photos put to royalty-free music = $50.00</p>
              <hr width="50%" align="left" />
          <p><strong>Custom thank you cards for your guests:</strong>**</p>
          <p>300 cards - 4&quot;x6&quot; = $350.00</p>
          <p>100 cards - 4&quot;x6&quot; = $150.00</p>
         <hr width="50%" align="left" />
          <p><strong>Custom Albums Available: </strong>(prices vary - special order)</p>
          <p>Bride &amp; Groom Albums</p>
          <p>Parent Albums</p>
               <hr width="50%" align="left" />
          <p>**Please be aware that your DVD will be available within a week; Web Gallery within 5-7 business days; Prints, Cards or Video within 2-6 weeks. Thank you!</p>
        </div>
        <div class="TabbedPanelsContent style5">
          <p> Contact DND Perspective:</p>
          <p>The best way to reach us is via email .</p>
          <p>You can alternately reach us anytime at ...!</p>
        </div>
        <div class="TabbedPanelsContent">
          <div align="center">
            <p><span class="style1">About Info</span></p>
            <p> </p>
          </div>
        </div>
      </div>
    </div>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <script type="text/javascript">
    <!--
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    //-->
      </script>
    </body>
    </html>

    You called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
    Correct these links:
    <script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    And you should be good to go.
    Beth
    ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
    B

  • How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel?

    I have 5 of them all containing nested Apdiv within nested ApDivs (a long storie ) that I would like to insert into 5 tabs in the Spry Tabbed Panel.
    Please help.

    "Hi Gramp,I realize I have made hard work for myself but I really don't know any better. I also realize now that taking on this project may have been a mistake :-)I taught myself how to use the design side of Dream Weaver. These five ApDivs were created in the content area of the spry tool and it worked fine. (yes a lot of work though)For the first time I looked at the code side. I wanted to try to bring a peace of code from another page for something unrelated and when it didn't work I took it out and without noticing, deleting a line from the Spry tool.Of course like a classic newbe I was working without a backup copy so here I am. Loosing hours of tedious work and on the verve of tears :-)I do have some  questions though.  My APDiv
      What does "apDiv1" stands for and what does "My APDiv" stands for?Is the only thing I have to do is changing this line for my five ApDivs and paste it in the appropriate places in the code? Thanks again,Gilaad
    Date: Sat, 16 Jun 2012 20:39:07 -0600
    From: [email protected]
    To: [email protected]
    Subject: How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel? 
        Re: How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel? 
        created by Altruistic Gramps in Spry Framework for Ajax - View the full discussion 
    You have really made hard work for yourself by using APDiv's. I suppose it can be done, but I would not. To answer your question, I have create an example as per#apDiv1
    My APDiv
    Content 2
    Tab 1
    Gramps 
         Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/4498679#4498679
         To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/4498679#4498679. In the Actions box on the right, click the Stop Email Notifications link.
         Start a new discussion in Spry Framework for Ajax by email or at Adobe Forums
      For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

  • Help Using Spry tabbed panel as a menu.

    Thanks in advance to all who take the time to read and any assistance you can offer.
    I'm picking up where someone else started a website. They used Spry tabbed panels as a menu system (CS4). Each Panel is a top-level "menu" and when it opens, sub-menus (hyperlinks) come up vertically under the panel.  I REALLY don't want to start over if I don't have to - need the site up and running - but cannot figure out how to make the "HOME" tabbed panel (the first one) actually take users back to the home page.  For now, I've created a "submenu" (link) under HOME tabbed panel to help the user navigate back to the home page.
    HELP? 
    http://www.orange.k12.nc.us/ec/beta/default.html

    Thank you Gramps - for your prompt and helpful response!  Your solution absolutely fixed the problem I asked about.
    If I had followed forum advisories and asked the question correctly, the navigation on this website would probably be working perfectly by now. Your solution fixes the home page.  Can you look at one more page and advise please??
    On the "subpages" of this site, the same tabbed panel "fake menu" exists.  I replaced the equivalent line of code in the template for those pages (at line 45) with what you gave me.  I'm obviously missing something in the code to send the user back to the HOME page from these pages.
    In the sample link below, you will be starting from a "subpage" of the site.  Clicking on the "HOME" tab leads you not to the actual home page (default.html in the root directory) but to a default.html page within the subdirectory for the page you are on (which doesn't exist.)  Can I add something to that line of code to get them back to the home page?
    Again... thank you!!
    http://www.orange.k12.nc.us/ec/beta/Students/Student_Resources.html

  • Spry Tabbed Panels and Master/ Detail Page Set interraction

    Hi,
    I have created a feedback form and am using a Spry Tabbed Panel to allow users to review all responses to one question and then all responses to the next question in different tabs, there are 6 tabs in all. In each tab I have created a Master/ Detail Page set - well actually just the Master appears in the tab. This is working fine. I allow up to 20 responses to be shown on each tab, after which the user selects First/Previous/Next/Last. When they do this the screen refreshes and the tabbed panel display goes back to the default tab, clicking on the tab previously used correctly displays whichever of First/Previous/Next/Last the user selected. I'd like the display to remain on the user's current tab when they select First/Previous/Next/Last.
    The page in question is here http://www.hollisterairshow.com/feedback-results2.php, then scroll about half way down the page and select one of the tabs.
    Thanks.
    Tony

    Hi Tony,
    Look at the following, blue coded is comment only, red coded is what has to be added to your existing code and orange coded is added by the SpryDataSet creator if done properly. Where the orange part starts, thats where you place your cursor when creating the dataset.
        <p> </p>
       <div id="TabbedPanels1" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">All feedback</li>
            <li class="TabbedPanelsTab" tabindex="0">Suggestions for improvement</li>
            <li class="TabbedPanelsTab" tabindex="0">What did you like the most</li>
            <li class="TabbedPanelsTab" tabindex="0">What did you like the least</li>
            <li class="TabbedPanelsTab" tabindex="0">What else would you like to see</li>
            <li class="TabbedPanelsTab" tabindex="0">Any other comments</li>
          </ul>
          <div class="TabbedPanelsContentGroup">
            <div class="TabbedPanelsContent">
              <table border="1" align="center" id="allFeedback"> .... start feedback table tag (line 763)
                <tr>
                  <td width="80"><strong>Feedback Number</strong></td>
                  <td><strong>Days attended</strong></td>
                  <td><strong>Arrived by</strong></td>
                  <td><strong>Arrival arrangements</strong></td>
                  <td><strong>Expectations met</strong></td>
                  <td><strong>Ticket price</strong></td>
                  <td><strong>Zip code</strong></td>
                </tr>
    .................... rest of table probably your PHP repeat area
                  </tr>
              </table> .... end feedback table tag    
              <div spry:region="dsAllFeedback">
                <table>        
                   <tr>
                    <th spry:sort="Feedback_Number">Feedback Number</th>
                    <th spry:sort="Days_attended">Days attended</th>
                    <th spry:sort="Arrived_by">Arrived by</th>
                    <th spry:sort="Arrival_arrangements">Arrival arrangements</th>
                    <th spry:sort="Expectations_met">Expectations met</th>
                    <th spry:sort="Ticket_price">Ticket price</th>
                    <th spry:sort="Zip_code">Zip code</th>
                  </tr>
                  <tr spry:repeat="dsAllFeedback" spry:setrow="dsAllFeedback" spry:odd="row_odd" spry:even="row_even" spry:hover="row_hover" spry:select="row_select">
                    <td>{Feedback_Number}</td>
                    <td>{Days_attended}</td>
                    <td>{Arrived_by}</td>
                    <td>{Arrival_arrangements}</td>
                    <td>{Expectations_met}</td>
                    <td>{Ticket_price}</td>
                    <td>{Zip_code}</td>
                  </tr>
                </table>
              </div>
              <br />
              <table border="0">
    I hope this helps.
    Ben

  • Spry Tabbed Panel and Master/Detail Page Set interraction

    Hi,
    I have created a feedback form and am using a Spry Tabbed Panel to allow users to review all responses to one question and then all responses to the next question in different tabs, there are 6 tabs in all. In each tab I have created a Master/ Detail Page set - well actually just the Master appears in the tab. This is working fine. I allow up to 20 responses to be shown on each page, after which the user selects First/Previous/Next/Last. When they do this the screen refreshes and the tabbed panel display goes back to the default tab, clicking on the tab previously used correctly displays whichever of First/Previous/Next/Last the user selected. I'd like the display to remain on the user's current tab when they select First/Previous/Next/Last.
    The page in question is here http://www.hollisterairshow.com/feedback-results2.php, then scroll about half way down the page.
    Thanks.
    Tony 

    Hi Tony,
    Have a look here http://labs.adobe.com/technologies/spry/samples/data_region/PagingSample.html and here http://labs.adobe.com/technologies/spry/samples/data_region/SpryPagedViewSample.html
    If you need further assistance, go to the Spry Forum http://forums.adobe.com/community/labs/spry
    I hope this helps.
    Ben

  • Spry Tabbed Panels Help

    Greetings everyone:
    I had an existing Spry tabbed panel with three tabs. I then
    added a fourth tab and used the up arrow to move it to the number
    one slot. It displays properly as far as the tab goes, but when the
    page loads the original number one tab (now number two) is always
    open.
    How do I make the new number one tab the default for being
    open when the page loads?
    Thanks in advance for any help.
    Glenn

    Duh! (Smacks self in the forehead!)
    How about in the property inspector - Default Panel.
    Duh!
    From reading all the purists posts on the board (Murray,
    David and the rest of the gang) I immediately started looking for
    this in the code and couldn't find it, so I posted the question.
    I know, looking in the code is a good thing! :)
    Thanks.
    Glenn

  • Spry Tabbed Panel 2.0 Problem

    I have used the Spry Tabbed Panel 2.0 in DWCS5 and 6 html pages before without a problem. However, last week I tried to add a panel to an html page and while it works lovally in live view locally, I get errors that appear to be a path problem, but I cannot figure out the problem. You can view a plain html page with nothing but the Tabbed Panels 2.0 created with DWCS6 and see the errors at  http://www.scotchplainsnj.gov/tabs.html
    When the page loads it gives errors for each of the .js modules as it tries to load them. I have replicated this problem in CS5 and 6 in Windows 7. I also saw a comment in another forum where someone else was also experiencing the same problem and error sessages.
    SpryPanelSet.js requires SpryWidjet.js
    The prograns are in the default directories with no changes.
    Any help would be appreciated.
    Morris

    1)
    I can't really answer that, so what I would suggest is posting that answer in the correct forums: http://forums.adobe.com/community/labs/widgetbrowser you might get more luck there with finding an answer to your question
    I do share the same feelings about this issue, I think allot of users would still love to be able to configure the widgets through DW. But the issue is that the widget browser is based on the Open Ajax Metadata specification which does not include such functionality in to its specification.
    Aleast, there is no way for developers to "tell" Dreamwaver which markup they should add to create a new panel or instance. While it would nice to have i doubt its techically possible at this point. But those are just my 2 cents =
    2)
    The tabbed panel supports of allot different markup. But they can only ship one markup with the Widget Browser.  As you will see in the SpryTabbedPanels documentation you can specify the tabs and content panels manually by adding the CSS selector for those in to the constructor of the widget: http://labs.adobe.com/technologies/spry/ui/samples/tabbedpanels2/SpryTabbedPanels2_sample1 .html
    3)
    There is no way to specify "default" settings for all widgets. As the developer of the widget decides the markup that ships with the widget. As for DW, you can specify the default document type through the preferences panel > new document > Default Document Type ?
    While the responses of on these user to user forums by the Adobe product team members might seem minimal this does not mean they do not monitor the discussions that occure here. So it's always wise to speak you mind and let the community and product team know how you feel.
    ~ Arnout

  • Spry Tabbed Panel obj Qs style

    Spry Tabbed Panel obj
    TAB NAMES how rather left-aligned(default) get centered?
    may have an image in a tab name?
    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?

    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

  • Dividing Spry Tabbed Panels content area into columns?

    Hi there.
    I am building a website and I want to divide the content area of a Spry Tabbed Panel into 3 columns for text.
    How can I do this?
    I thought about making divs inside the Panel but it would be too messy.
    Please let me know if there is a simple way to do this.
    Thanks in advance.

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script src="SpryAssets/SpryTabbedPanels.js"></script>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
    <style>
    * {box-sizing: border-box;}
    body {width: 960px; margin: auto;}
    .TabbedPanelsContentVisible {overflow: auto;}
    .col33 {width: 33.3333%; float: left; padding: 15px;}
    </style>
    </head>
    <body>
    <div id="TabbedPanels1" class="TabbedPanels">
      <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">
            <div class="col33">
              <h3>Column 1</h3>
            <p>Content 1</p>
            <p>Dicta sunt explicabo. Nisi ut aliquid ex ea commodi consequatur? Neque porro quisquam est, aut odit aut fugit, ut aut reiciendis voluptatibus maiores alias. Iste natus error sit voluptatem dicta sunt explicabo. Sed quia consequuntur magni dolores eos itaque earum rerum hic tenetur a sapiente delectus, cum soluta nobis est eligendi optio. Omnis voluptas assumenda est, nemo enim ipsam voluptatem neque porro quisquam est.</p>
            <p>Eaque ipsa quae ab illo inventore veritatis totam rem aperiam, qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, aut odit aut fugit, ut enim ad minima veniam. Id est laborum et dolorum fuga. Atque corrupti quos dolores et quas molestias qui ratione voluptatem sequi nesciunt. Temporibus autem quibusdam saepe eveniet ut et voluptates repudiandae sint sed quia non numquam eius modi.</p>
          </div>
            <div class="col33">
              <h3>Column 2</h3>
            <p>Content 1</p>
            <p>It is the star to every wand'ring bark, which alters when it alteration finds, love alters not with his brief hours and weeks. Or bends with the remover to remove. That looks on tempests and is never shaken; admit impediments; love is not love let me not to the marriage of true minds.</p>
          </div>
            <div class="col33">
              <h3>Column 3</h3>
            <p>Content 1</p>
            <p>The three cs - customers, competition and change - have created a new world for business while those at the coal face don't have sufficient view of the overall goals. In order to build a shared view of what can be improved, building a dynamic relationship between the main players. Highly motivated participants contributing to a valued-added outcome.</p>
            <p>Whether the organization's core competences are fully in line, given market realities the components and priorities for the change program an important ingredient of business process reengineering. Taking full cognizance of organizational learning parameters and principles, organizations capable of double-loop learning, working through a top-down, bottom-up approach. In order to build a shared view of what can be improved, maximization of shareholder wealth through separation of ownership from management measure the process, not the people. Presentation of the process flow should culminate in idea generation, taking full cognizance of organizational learning parameters and principles, the components and priorities for the change program. An investment program where cash flows exactly match shareholders' preferred time patterns of consumption from binary cause and effect to complex patterns, working through a top-down, bottom-up approach.</p>
          </div>
        </div>
        <div class="TabbedPanelsContent">Content 2</div>
      </div>
    </div>
    <script>
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    </body>
    </html>

  • Customizing Spry Tabbed Panels

    I am trying to create my very first spry tabbed panel. I have
    a 5 tab panel. Instead of plain text on a colored background, I
    would like to have customized tabs with the text already on them,
    along with a "on mouseover" version. I am actually using it as part
    of my navigation.
    My CSS skills are still young, but in studying the
    sprytabbedpanels.css that dreamweaver automatically creates, it
    appears that there are about 9 class properties all starting with
    .tabbedpanels. It seems to be an all or nothing, so am I correct in
    assuming that if I want to have each of my tabs to be "unique" that
    I need to create 4 more "sets" of these classes? Are there just
    specific ones that I would need?
    I can't find anything online or in my dreamweaver bible to
    help me make heads or tails. Any help or insight would be most
    appreciated.
    Bonnie

    Hey Bonnie -
    .TabbedPanelsContent is
    the class for the content within the tab panel component. If you
    want to change the color for each tab panel content for instance,
    you could duplicate
    .TabbedPanelsContent 5
    times and add a background color to each class. I think the
    suggestion you mentioned would create various styles for each tab
    state. Is that really what you wanted? Just making sure I
    understand the question. :)
    .TabbedPanelsContent1 {
    padding: 4px;
    background-color: #FF0000;
    .TabbedPanelsContent2 {
    padding: 4px;
    background-color: #999;
    .TabbedPanelsContent3 {
    padding: 4px;
    background-color: #CCC;
    .TabbedPanelsContent4 {
    padding: 4px;
    background-color: #CC9900;
    .TabbedPanelsContent5 {
    padding: 4px;
    background-color: #CC9900;
    }

  • Spry tab panels

    Hello,
    I have 2 questions I am hoping someone can help me with.
    1. is there a way to center the spry tabbed panels, currently
    they are float left and when I remove the float left they still
    remain float left.
    2. how do I add a colored background rectangle behind the
    tabs so they appear to span the length of my div tag/content area?
    Thank you!
    amber

    I have figured out the background rectangle but still
    perplexed about the centering issues....
    any help is greatly appreciated.
    thank you!

Maybe you are looking for