Tabbed Panels Questions...

When a form is submitted on a Tabbed Panel, how do you get it go back to that particular panel and not automatically go to the first panel?
I used javascript to create a link on the same page, but can't seem to figure out how to do it on a form submit...

rickpick77665 wrote:
When a form is submitted on a Tabbed Panel, how do you get it go back to that particular panel and not automatically go to the first panel?.
There's a tutorial on my site at http://foundationphp.com/tutorials/spry_url_utils.php. It explains how to link to a specific panel from a different page. When submitting a form, you would need to add a query string to the action attribute in the form to redirect the user back to the correct panel.

Similar Messages

  • Spry tabbed panels - question about hover

    Hello, I am relatively new to Dreamweaver and Spry, but have made a website using vertical Tabbed Panels that finally looks ALMOST like I want it. I am sure that I have done some things that could be much simpler though…
    http://web.me.com/marinka9170/JL_test/JL_test.html
    My problem is that I would like the tabs to stay in their hover state (so coloured and wider) when you navigate to the content panel (until you hover over the next tab of course), instead of going back to their standard grey. How do I do that?
    And my other question is: in the content panels I have used custom bullets. Is there a way to assign a different custom bullet for each content panel? Do I number the content panels, like I have done with the tabs?
    Any hints, tips, solutions are appreciated!
    Thanks,
    Marinka

    I indeed see that your example works, but I think in my code there is some sort of conflict going on
    I have copied the Source Code and the SpryTabbedPanels.ccs below and 'bolded' the parts where I think the problem is. It is probably in splitting the different tabs in 5, right?
    I am sorry for asking these stupid questions. It's all quite new to me, but I've ordered a book to study more. It's just not in yet
    Thanks again for your help! Really appreciate it!
    Marinka
    <!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" />
    <meta name="description" content="description goes here">
    <meta name="keywords" content="">
    <meta name="author" content="metatags generator">
    <meta name="robots" content="index, follow">
    <meta name="revisit-after" content="3 month">
    <title>JL_test</title>
    <style type="text/css">
    <!--
    body {
    font: 12px/17px Verdana, Arial, Helvetica, sans-serif;
    background: #FFF;
    color: #000;
    .TabbedPanelsTab1:hover {
    background-color: #15375E
    .TabbedPanelsTab2:hover {
    background-color: #016596
    .TabbedPanelsTab3:hover {
    background-color: #00A0AF
    .TabbedPanelsTab4:hover {
    background-color: #679145
    .TabbedPanelsTab5:hover {
    background-color: #B4D88B
    .TabbedPanelsContent ul#tab1 {
    list-style-image: url(Website_03-web-images/bullet1.png)
    .TabbedPanelsContent ul#tab2 {
         list-style-image: url(Website_03-web-images/bullet2.png)
    .TabbedPanelsContent ul#tab3 {
         list-style-image: url(Website_03-web-images/bullet3.png)
    .TabbedPanelsContent ul#tab4 {
         list-style-image: url(Website_03-web-images/bullet4.png)
    .TabbedPanelsContent ul#tab5 {
         list-style-image: url(Website_03-web-images/bullet5.png)
    ul {
    padding: 0;
    margin: 0;
    ol, dl, ul {
    padding-right: 15px;
    padding-left: 5px;
    margin: 0 0 0 15px;
    list-style-type: none;
    list-style-position: outside;
    text-indent: 0px;
    h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: 17px;
    p {
    margin: 0;
    line-height: 17px;
    padding-right: 15px;
    a img {
    border: none;
    a:link {
    color: #b4d88b;
    text-decoration: none;
    a:visited {
    text-decoration: none;
    a:hover, a:active, a:focus {
    text-decoration: none;
    color: #016596;
    .container {
    width: 1024px;
    background: #FFFFFF;
    margin: 0 auto;
    .content {
    background: #FFFFFF;
    clear: both;
    height: 200px;
    margin-top: 50px;
    .header {
    background: #FFF;
    width: 1024px;
    height: 120px;
    .column1 {
    float: left;
    width: 338px;
    background: #15375E;
    height: 20px;
    .column2 {
    width: 348px;
    float: left;
    background: #016596;
    height: 20px;
    .column3 {
    float: left;
    width: 338px;
    background: #679245;
    height: 20px;
    .placeholder {
    width: 1024px;
    height: 400px;
    clear: both;
    .footer {
    padding: 0px;
    background: #FFF;
    position: relative;
    clear: both;
    width: 280px;
    text-align: right;
    .fltrt {
    float: right;
    margin-left: 8px;
    .fltlft {
    float: left;
    margin-right: 8px;
    .clearfloat {
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
    -->
    </style>
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    function MM_callJS(jsStr) { //v2.0
      return eval(jsStr)
    </script>
    <style type="text/css">
    h1,h2,h3,h4,h5,h6 {
    h1 {
    font-family: Verdana, Geneva, sans-serif;
    color: #15375e;
    font-weight: bold;
    font-size: 14px;
    h2 {
    font-family: Verdana, Geneva, sans-serif;
    color: #016596;
    font-weight: bold;
    font-size: 14px;
    h3 {
    color: #00A0AF;
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    h4 {
    color: #679145;
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    h5 {
    color: #B4D88b;
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
    font-weight: bold;
    .container .content #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent table tr {
    vertical-align: top;
    .container .footer copyright {
    </style>
    <div class="container">
      <div class="header"><!-- end .header --><img name="" src="" width="1024"
      " height="120" alt="logo" style="background-color: #FFFFFF" align="right" /></div>
      <div class="column1"></div>
      <div class="column2"></div>
      <div class="column3"><!-- end .column3 --></div>
      <div class="placeholder"><img src="Website_03-web-images/JL_ice.jpg" width="1024" height="400" alt="" /></div>
       <div class="content">
        <div id="TabbedPanels1" class="VTabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab1" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">home</li>
            <li class="TabbedPanelsTab2" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">who are we?</li>
            <li class="TabbedPanelsTab3" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">our services</li>
            <li class="TabbedPanelsTab4" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">sectors of activity</li>
            <li class="TabbedPanelsTab5" tabindex="0" onmouseover="TabbedPanels1.showPanel(this);">contact</li>
          </ul>
         <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
    <table width="686" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="348" height="200"><div class="TabbedPanelsContent">
                    <home>
                      <h1>news</h1>
                    </home>
                    <p>News items can go here. Perum re sitibus eicita volupti inulpa doluptam, optate secum estiore idellectur rehenecabo. Nequidu cimolen ihilit quunt plab ipsunte caborup tinihic ipiscia menimin ulpari dolupta tendio esciust am et labo. <br />
                      Mincit quunto oditibus consecto berest ad miliquaspe debis voluptatus erum fugit hariberum rescipsa qui nistia estiusd andant autaepeles et rat.<br />
                      Vidi non pelique et eliata estinvellis volesequissi dus volorer umenien ihiciet vent volupta doluptat.</p>
    </div></td>
                  <td width="338" height="200"><div class="TabbedPanelsContent">
                    <h1> </h1>
                    <p>Dandem quamendit as pelendae placiamus adipiet, voluptur minctis ad qui sinctur repercia dolorerum aceatiis est aut erchil maio qui nobis accupta.<br />
                      ssimpe qui omniscid quunt id molupti orrorpor res estrumquae lab ipician debitaq uature, optate nobis ut illaborrum diae placit id moloreribus doluptatur, unt rehent laborent rempori tassed ma non ne id qui rem voluptatur mos.<br />
                      Apist rem fugit et, corepuda con reperum auts esendip.</p>
                  </div></td>
                </tr>
              </table>
            </div>
        <div class="TabbedPanelsContent">
         <table width="686" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="348" height="200"><div class="TabbedPanelsContent">
                    <h2>who are we?</h2>
                    <p>Who are we? Why are we here? What do we do? Perum re sitibus eicita volupti inulpa doluptam, optate secum estiore idellectur rehenecabo. Nequidu cimolen ihilit quunt plab ipsunte caborup tinihic ipiscia menimin ulpari dolupta tendio esciust am et labo. <br />
                      Mincit quunto oditibus consecto berest ad miliquaspe debis voluptatus erum fugit hariberum rescipsa qui nistia estiusd andant autaepeles et rat.<br />
                      Vidi non pelique et eliata estinvellis volesequissi dus volorer umenien ihiciet vent volupta doluptat.</p>
    </div></td>
                  <td width="338" height="200"><div class="TabbedPanelsContent">
                    <h3><img src="" alt="Photo" width="338" height="200" hspace="0" vspace="0" align="texttop" /></h3>
                  </div></td>
                </tr>
              </table></div>
        <div class="TabbedPanelsContent"><table width="686" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="348" height="200"><div class="TabbedPanelsContent">
                  <h3>our services</h3>
          <ul id="tab3">
            <li>Service 1 - description of the type of service goes here with a possible hyperlink or something</li>
            <li>Service 2</li>
            <li>Service 3</li>
          </ul>
        </div></td>
                  <td width="338" height="200"><div class="TabbedPanelsContent">
    </div></td>
                </tr>
              </table></div>
            <div class="TabbedPanelsContent"><table width="686" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="348" height="200"><div class="TabbedPanelsContent">
                  <h4>sectors of activity</h4>
          <ul id="tab4">
            <li>Sector 1 - description of the sector of activity goes here with a possible hyperlink or something</li>
            <li>Sector 2</li>
            <li>Sector 3</li>
            </ul>
        </div></td>
                  <td width="338" height="200"><div class="TabbedPanelsContent">
    </div></td>
                </tr>
              </table></div>
         <div class="TabbedPanelsContent"><table width="686" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td width="348" height="200"><div class="TabbedPanelsContent">
                  <h5>contact</h5>
                    <p>Name</p>
                    <p>Telephone number: +12 3456 7890</p>
                    <p>email: <a href="mailto:[email protected]">[email protected]</a></p>
                  </div></td>
                  <td width="338" height="200"><div class="TabbedPanelsContent">
                  </div></td>
                </tr>
              </table></div>
          </div>
        </div>
      <!-- end .content --></div>
      <div class="footer">
        <copyright>©2011  <!-- end .footer --></copyright>
      </div>
    <!-- end .container --></div>
    <script type="text/javascript">
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    </body>
    </html>
    @charset "UTF-8";
    /* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* Horizontal Tabbed Panels
    * The default style for a TabbedPanels widget places all tab buttons
    * (left aligned) above the content panel.
    /* This is the selector for the main TabbedPanels container. For our
    * default style, this container does not contribute anything visually,
    * but it is floated left to make sure that any floating or clearing done
    * with any of its child elements are contained completely within the
    * TabbedPanels container, to minimize any impact or undesireable
    * interaction with other floated elements on the page that may be used
    * for layout.
    * If you want to constrain the width of the TabbedPanels widget, set a
    * width on the TabbedPanels container. By default, the TabbedPanels widget
    * expands horizontally to fill up available space.
    * The name of the class ("TabbedPanels") used in this selector is not
    * necessary to make the widget function. You can use any class name you
    * want to style the TabbedPanels container.
    .TabbedPanels {
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    clear: none;
    width: 338px;
    height: 30px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    /* This is the selector for the TabGroup. The TabGroup container houses
    * all of the tab buttons for each tabbed panel in the widget. This container
    * does not contribute anything visually to the look of the widget for our
    * default style.
    * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
    * necessary to make the widget function. You can use any class name you
    * want to style the TabGroup container.
    .TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
    /* This is the selector for the TabbedPanelsTab. This container houses
    * the title for the panel. This is also the tab "button" that the user clicks
    * on to activate the corresponding content panel so that it appears on top
    * of the other tabbed panels contained in the widget.
    * For our default style, each tab is positioned relatively 1 pixel down from
    * where it wold normally render. This allows each tab to overlap the content
    * panel that renders below it. Each tab is rendered with a 1 pixel bottom
    * border that has a color that matches the top border of the current content
    * panel. This gives the appearance that the tab is being drawn behind the
    * content panel.
    * The name of the class ("TabbedPanelsTab") used in this selector is not
    * necessary to make the widget function. You can use any class name you want
    * to style this tab container.
    .TabbedPanelsTab {
    position: relative;
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0px 0px 10px;
    font: bold 12px/22pt Verdana, Geneva, sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    color: #15375e;
    text-align: right;
    height: 30px;
    width: 270px;
    .TabbedPanelsTab1 {
    position: relative;
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0px 0px 10px;
    font: bold 12px/22pt Verdana, Geneva, sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    color: #15375E;
    text-align: right;
    height: 30px;
    width: 270px;
    .TabbedPanelsTab2 {
    position: relative;
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0px 0px 10px;
    font: bold 12px/22pt Verdana, Geneva, sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    color: #15375E;
    text-align: right;
    height: 30px;
    width: 270px;
    .TabbedPanelsTab3 {
    position: relative;
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0px 0px 10px;
    font: bold 12px/22pt Verdana, Geneva, sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    color: #15375E;
    text-align: right;
    height: 30px;
    width: 270px;
    .TabbedPanelsTab4 {
    position: relative;
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0px 0px 10px;
    font: bold 12px/22pt Verdana, Geneva, sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    color: #15375E;
    text-align: right;
    height: 30px;
    width: 270px;
    .TabbedPanelsTab5 {
    position: relative;
    float: left;
    padding: 0px 10px 0px 0px;
    margin: 0px 0px 10px;
    font: bold 12px/22pt Verdana, Geneva, sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    color: #15375E;
    text-align: right;
    height: 30px;
    width: 270px;
    /* This selector is an example of how to change the appearnce of a tab button
    * container as the mouse enters it. The class "TabbedPanelsTabHover" is
    * programatically added and removed from the tab element as the mouse enters
    * and exits the container.
    .TabbedPanelsTabHover {
    color: #fff;
    height: 30px;
    width: 300px;
    /* This selector is an example of how to change the appearance of a tab button
    * container after the user has clicked on it to activate a content panel.
    * The class "TabbedPanelsTabSelected" is programatically added and removed
    * from the tab element as the user clicks on the tab button containers in
    * the widget.
    * As mentioned above, for our default style, tab buttons are positioned
    * 1 pixel down from where it would normally render. When the tab button is
    * selected, we change its bottom border to match the background color of the
    * content panel so that it looks like the tab is part of the content panel.
    .TabbedPanelsTabSelected {
    height: 30px;
    width: 300px;
    /* This selector is an example of how to make a link inside of a tab button
    * look like normal text. Users may want to use links inside of a tab button
    * so that when it gets focus, the text *inside* the tab button gets a focus
    * ring around it, instead of the focus ring around the entire tab.
    .TabbedPanelsTab a {
    /* This is the selector for the ContentGroup. The ContentGroup container houses
    * all of the content panels for each tabbed panel in the widget. For our
    * default style, this container provides the background color and borders that
    * surround the content.
    * The name of the class ("TabbedPanelsContentGroup") used in this selector is
    * not necessary to make the widget function. You can use any class name you
    * want to style the ContentGroup container.
    .TabbedPanelsContentGroup {
    clear: both;
    border-left: none;
    border-bottom: none;
    border-top: none;
    border-right: none;
    background-color: #FFF;
    /* This is the selector for the Content panel. The Content panel holds the
    * content for a single tabbed panel. For our default style, this container
    * provides some padding, so that the content is not pushed up against the
    * widget borders.
    * The name of the class ("TabbedPanelsContent") used in this selector is
    * not necessary to make the widget function. You can use any class name you
    * want to style the Content container.
    .TabbedPanelsContent {
    padding: 0px 0px 0px 0px;
    list-style-image: url(file:///Macintosh%20HD/Users/marinka/Desktop/JL/optencia_website/images/bullet.png);
    /* This selector is an example of how to change the appearnce of the currently
    * active container panel. The class "TabbedPanelsContentVisible" is
    * programatically added and removed from the content element as the panel
    * is activated/deactivated.
    .TabbedPanelsContentVisible {
    padding-right: 10px;
    /* Vertical Tabbed Panels
    * The following rules override some of the default rules above so that the
    * TabbedPanels widget renders with its tab buttons along the left side of
    * the currently active content panel.
    * With the rules defined below, the only change that will have to be made
    * to switch a horizontal tabbed panels widget to a vertical tabbed panels
    * widget, is to use the "VTabbedPanels" class on the top-level widget
    * container element, instead of "TabbedPanels".
    .VTabbedPanels {
    overflow: hidden;
    /* This selector floats the TabGroup so that the tab buttons it contains
    * render to the left of the active content panel. A border is drawn around
    * the group container to make it look like a list container.
    .VTabbedPanels .TabbedPanelsTabGroup {
    float: left;
    width: 338px;
    height: 240px;
    position: relative;
    overflow: hidden;
    /* This selector disables the float property that is placed on each tab button
    * by the default TabbedPanelsTab selector rule above. It also draws a bottom
    * border for the tab. The tab button will get its left and right border from
    * the TabGroup, and its top border from the TabGroup or tab button above it.
    .VTabbedPanels .TabbedPanelsTab1 {
    float: left;
    overflow: hidden;
    .VTabbedPanels .TabbedPanelsTab2 {
    float: left;
    overflow: hidden;
    .VTabbedPanels .TabbedPanelsTab3 {
    float: left;
    overflow: hidden;
    .VTabbedPanels .TabbedPanelsTab4 {
    float: left;
    overflow: hidden;
    .VTabbedPanels .TabbedPanelsTab5 {
    float: left;
    overflow: hidden;
    /* This selector disables the float property that is placed on each tab button
    * by the default TabbedPanelsTab selector rule above. It also draws a bottom
    * border for the tab. The tab button will get its left and right border from
    * the TabGroup, and its top border from the TabGroup or tab button above it.
    .VTabbedPanels .TabbedPanelsTabSelected {
    text-decoration:none;
    overflow: hidden;
    /* This selector floats the content panels for the widget so that they
    * render to the right of the tabbed buttons.
    .VTabbedPanels .TabbedPanelsContentGroup {
    clear: none;
    float: left;
    padding: 0px;
    width: 686px;
    height: 240px;
    background-color: #fff;
    /* Styles for Printing */
    @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;

  • Tabbed Panel Question

    I have created a tabbed panel on one of my pages.  It appears to be working correctly in design mode, but when I preview in my browser, the only panel that works is the top (first) one.  Here is a link to the page: www.robertmunozphotography.net/Muse/Places.html.  There should be a slideshow in each panel.
    Any ideas?
    Robert

    Hello,
    That did it.  Bad news -- I'm using Juicebox because I can build my
    galleries directly from Lightroom and it's HTML5 (More IPad-friendly).  And
    I obviously need to run on FF.  I guess I'll have to try something else.
    Thanks again for your help.
    Robert

  • Spry Tabbed Panel Question

    Anybody know how to hide/display a panel. I want to be able
    to hide certain panels/tabs with dynamic data.

    There is a lot of info about the Spry Widgets at the Adobe
    website. See if
    the first example here will help.
    http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample.htm
    Regards,
    ..Trent Pastrana
    www.fourlevel.com
    "parkingtech" <[email protected]> wrote in
    message
    news:fdsjan$cvl$[email protected]..
    > Anybody know how to hide/display a panel. I want to be
    able to hide
    > certain panels/tabs with dynamic data.

  • Spry Tab Panel Question

    I am designing a new site which for the most part will be one
    page of Spry Tab Panesl.
    Is it possible to have the contect section grow or shrink
    vertically according to the amount of content in a slow motion,
    like the accordian or collapasible panels?

    Morning Arnout,
    Thank you for both links.  I tried every permutation that was on Mr. Power's site (Thank you!) and the Adobe Labs site.  Neither worked.  And believe me when I say that I spent five hours working on it.
    I can get the first file (00a.php) to open the second file (index.php) very easily by using <a href="../../index.php"> tag.  But getting the following code to open the target file AND the tab at the same time is beyond my limited understanding of java script.
    <a href="../../index.php" onclick="TabbedPanels1.showPanel('dontarget')"
    onmouseover="MM_swapImage('donate','','../../images/donate1_over.png',1)" onmouseout="MM_swapImgRestore()"><img src="../../images/donate1.png" alt="Donate to Support this Site — PayPal" name="donate" width="70" height="44" border="0" id="donate1" /></a>
    I even tried pasting in the java script "var TabbedPanels1 = ..." code from the target file at the bottom of the file I am linking from.  I tried so many variations that eventually I corrupted my file.  But I had two back ups just in case.  The problem is just beyond my understanding of java script.
    Heck, I would not have got the first file (index.php) to work without aid. With David's assistance I at least got it so that by clicking on the donate button on that page it opens the proper tab.

  • Spry Tabbed Panel 2.0 Suggestions/Questions

    I've been starting to play around with the Widget Browser on CS4 & CS5 and I am just noticing a few things that I think need to be looked at.
    1. I am starting to understand your process for the UI (I actually never realized that was there at first, but with CS4 version I also have it makes it more obvious).  Is there a plan before the final release to allow users to edit text/content within the tabs or panels within the GUI, or will that end up being done with DW only?
    2. In the code view for the page, it is laid out with <h2> for the title and <p> for the tags.  Wouldn't it make more sense to have the tabbed panels to be <div>'s as opposed to <p> for the sake that with divs, it can be essentially like creating a page within the tab.  For instance, you can position elements within a div, add p tags as necessary.  I'm just thinking if the tabbed panels will be used by users for more than just text this code should change to accomodate that.  I do realize on live code it is being converted back to a <div>, just curious why it is the way it is.
    3.  Maybe I'm missing this somewhere but is there an option to set the default document type in the Widget Browser or within the import to CS5?

    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

  • 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

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

  • Spry tabbed panels - Different Hover Class for each tab

    Already posted this in the general Dreamweaver section, but just realized there was a specific Spry section. So, my apologies for the repost.
    I'm setting up spry tabbed panels, and I'm wanting to use an image for each tab, with the text already on it. I've figured this much out by creating a different class for each in the spry tabbed panel css.
    However, I'd also like to have a second hover image for each tab. I'm having trouble figuring out how to set up separate classes for each tab's hover state.
    Any help?
    Thanks.

    Just in case you did not notice the announce at the top of this forum's main page, I have copied it here.
    Announcement: New to Spry, or  the Spry forums?
    Hide Details
    Before you post a topic please verify  that:
    You  are using the latest Spry files
    The latest version of  the Adobe Spry Framework is 1.6.1, this is the same version that ships  with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its  wise to upgrade your files to the latest version. This can easily be  done using the Spry Updater that can be found here.
    Your  question was not asked before
    Using the search  functionality on forums you can easily find out if your question has  been answered before. While you are in search, you can specify the  search locations. The Spry forum can be found under:
    Adobe  Labs > Spry Framework for Ajax
    Yoru question can not be  found in the existing documentation
    Spry provides you  with allot of documentation this can found on different locations. In  the sidebar of this forum you can find a small summary of resources that  will help you on your way.
    If these options do not apply to your question,  please be so kind to also supply the following information in your topic  together with a clear description of your issue:
    What  browsers does this issue occure:
    example: Internet Explorer 8 on  Window 7 and Firefox 3.0 on Mac OSX
    What version  of Spry are using:
    example: Spry 1.6.1 ( the version number can  be found in license header of the .css and .js files )
    What  is the url of your website or page in issue:
    example: http://www.example.com/page/in/issue.html
    Step  to reproduce the issue:
    example: Scroll down till you find the  header "help", there you will see a Spry Accordion. When you click on it  it will not open or close.
    So users can provide you with a  better answer, without having to ask you for further details.
    by Arnout Kazemier at Oct 23, 2009 2:47 PM                        
    landon_tc wrote:
    Actually, I do remember posting that, and have updated it with what worked for me. However, I could not recall posting it in a specific ajax spry forum, so I assumed I just posted in the general forum. Hence the current situation.
    Yeah and my name is not Ben Pleysier.
    landon_tc wrote:
    Any help with the current problem?
    Please have a look at this thread http://forums.adobe.com/message/2662019#2662019
    I hope this helps.
    Ben Pleysier

  • Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like

    Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like it was all created on one page, plus mouse over doesnt work on them.
    This started all of a sudden.
    The entire website is a series of spry tabbed panels.
    http://pacificlaser.com/const.html
    if you click on General construction tab things work ok...
    if you click on Machine control tab, mouse over doesnt work and all page content of each tab show through.
    ive been looking for the answer for 4 months with no success.
    Hope a fellow dreamwever-person can help
    Thanks Rick

    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

  • Embedding more than one google map in a tabbed panel

    Hi, I wonder if anyone knows if this is possible.  I am building google maps in  business catalyst and what I want to do is add multiple maps into my muse site.  For example, restaurants on one map, coffee shops on another, local produce on another.  Does anyone know if this is possible? Each time I try and enter the snippet of code I get to add to muse from business catalyst it is fine if I just enter on blank page, but when I try and enter the html in the tabbed panel it doesnt work.  Does anyone know of a solution ? I would really appreciate any feedback, Michele

    Strange to be the first to reply to my own question but here goes, it may help someone with similar woes. I had been following the wiring colour code stringently. That being GREEN=FRONT, BLACK=REAR and ORANGE=SUBWOOF/CENTRE.
    After clicking the Universal audio jack button on the realtek sound manager C.P and manually setting the blue port to be rear I took the Jack for my rear channels that had been in the BLACK port, and plugged it to the BLUE. I then tested all the speakers and "VOILA" every speaker channel works.
    Im somewhere between NOOB and have to fix all my familys PC problems because they know even less than I do. Not sure what that makes me, a bit of a chancer probably, who gets lucky more than anything, anyway I can only guess that there is a problem with the onboard "BLACK" port. In saying that I have just came from a 2.1 setup for front and built in flat panel srs monitor speakers for rear, all this was setup as quadrophonic and as I recall the Black port worked fine whenever I used it as the rear channel. So anyway its working, Im not sweating too much about the whys and how comes. I am a little concerned about the 6700 reputation for a certain volume controller inner part burning out (TRANSISTOR)? I think is the culprit. Anyway I will deal with that if and when the time arises. Only 2 months left on my warranty and my speakers have been sat doing nothing for over 6 months maybe more so I should get some life out of them, fingers crossed.

  • Spry Validation in Tabbed Panel

    I've created a form that has a number of sections which I
    have separated out using a spry tabbed panel. So far, so good.
    On one of the panels, however, is a select box that is
    required, so I have used a spry validation widget to look after it.
    Now, if the select box hasn't been used then and the submit button
    is clicked while one of the other panels is open, because the
    validation widget halts the form it makes it look as though nothing
    has happened. The warning message is only visible when the correct
    panel is open.
    My question is this: how do I either (a) force the panel with
    the error on to reopen or (b) make the error message show up
    elsewhere on the page so that it is visible? I tried positioning it
    absolutely above the whole panel but it still only shows up when
    the relevant panel is oen.

    I have actually added multiple tabbed panels inside of tabbed
    panels as well as collapsible panels inside of tabbed panels and
    vise versa. This works across all browsers (IE 6 & 7, FF 2,
    Safari 2 & 3).
    The key for me was to use <div style="clear: both"> (I
    put a comment here to satisfy IE6) </div> at the bottom of
    the tab, before the closing of the tab since I was using a lot of
    floating within the tabbed panels.
    If you share some code, I'm sure someone could give you a
    more specific answer.

  • Embedding HTML in Tabbed Panels

    I created a campaign in Mailchimp and downloaded it as HTML so i could show the newsletter on my Muse site, with working links to emails, subscription and interviews.
    I placed the HTML Element inside a Tabbed Panels widget and that caused alot of issues with the other elements on my Muse page.
    It seems to be rather random in nature, sometimes moving a subheader, other times changing the color of the header or expanding rectangle elements.
    Any suggestions or questions welcomed!

    Michael,
    We might be experiencing similar issues. I posted this yesterday:  HTML inserted into a MUSE accordion widget issue
    In Adobe MUSE 2014.3.1.44, I have inserted an HTML snippet into an accordion widget:
    <script type=”text/javascript” src=”https://burkeauto.workstiming.com/external/next_available_time.js”></script>
    When published all I see is the clock numbers to the top left corner of the page—no other page content and no accordion—just the unformatted clock at the top left corner.
    The snippet works fine outside the accordion widget.
    When not inside the accordion the HTML frame is normal, but as soon as I insert it into the accordion it adopts the attributes like other widgets, with the round blue icon on the top right corner of the frame and a stripped down context menu.
    Adobe chat support has duplicated this on their end and suggested that I post the issue in the forum.
    Any thoughts?
    I will be watching you post.

  • Vertical tabbed panel with background image

    Hi all,
    I have a working vertical tabbed panel.  For the text that's shown, there's a background image assigned to the associated DIV.
    However...
    The background image that's shown is clipped to the bottom of the text.
    In other words, if I have 3 lines of text, the bottom of the background image only goes as far down as the bottom line of text.  In order to show the entire image, I have to put in a lot of </ br> tags for "empty" text, not a very good approach.
    More of the backgound will show if I increase the text text size via the browser.
    To try to describe this more accurately,
    Let's say I have a background image that's 600 px in height, but the lines of text only measure to 400px.  That means that the bottom 200 px of the image doesn't show, unless I add more lines of text.
    Hoping someone has an answer!
    Thanks,
    Jerry

    Gramps,
    Again, thanks for your time.  While we're now full time commercial photographers (http://www.jerryandlois.com), I was a software engineer for some 20+ years in an earlier life, all on the application side of things.  Not really any appreciable time with website stuff.
    There are a few more tech/how-to questions I have that are specific to CSS, in terms of polishing up the small site I'm working on.  However these are not SPRY related, unless SPRY can solve this for me.
    In particular, suppose I have a large block with a background image and a body of text.  I want to ensure the text wraps around the image, rather than being a complete overlay where the text can collide with the main body of the photo.
    Example:
    http://jerryandloisstudios.com/about.html
    The issue is that the text is resizable, by design of course.  Is there any way to manage these two elements (text and image) so they get along the right way?  We want the text to overlay some of the image, but only on the periphery, if that makes sense.  So far, the only solution I've seen is to keep the text formatted roughly in a column so that if its size increases all will still be OK.  But...  artistically that just doesn't look right.
    If you're up for it, I'd certainly welcome a private email thread, unless others can also benefit from the rather newbie questions I'm raising:  [email protected]
    Again, thank you for your help!!!
    Jerry

Maybe you are looking for

  • Game Center Friends are Missing

    This morning Game Center says I have no friends.  However, under the ME tab it still lists the correct number of friends, games and achievements (but shows no games in the six squares to the left and right).  I've restarted the iPad and signed in/out

  • Export Control: list of blocked orders is incomplete (ENGK, RVEXAU03)

    Hi community, I have a strange behaviour on the system. We have activated the credit control some months ago. When there are some orders blocked by credit control, a collegue opens transaction ENGK and runs the report of blocked sales order (report R

  • Sending Email in Adobe Reader XI with Outlook 2003

    After upgrading the Acrobat Reader on our Terminal Servers with Windows Server 2008 R2 and Outlook 2003, it is not possible to send pdf from Acrobat Reader via E-Mail. When we select the function to send the document per mail (with the default mail p

  • What does a service assembly consist of?

    My boss is looking at the feasibilities of adopting servicemix. From reading the documentation I understand that servicemix can deploy a service on-the-fly when a "service assembly" is dropped into some designated directory. So what does this "servic

  • Passing Field Symbols in FM

    Hi Friends,                         In my FM, i want to pass field symbol back to my main program for further use. How can i achieve the same.                         In my source code section of FM, FIELD-SYMBOLS: <t_dyntable> TYPE STANDARD TABLE,