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.

Similar Messages

  • Spry links to tabbed panels causing havoc

    I have successfully used the tutorial from David Powers' Foundation blog to create a link to an accordion panel, but when I try to create links to 2 different tabbed panel pages, it causes 2 problems within DW.
    First the links work to open the correct tabs and the pages display fine on IE7, Firefox and Safari.
    Once I add the 'conditional operator' javascript at the end of the page, it causes the tab contents to display continuously out past the end of the widget container in DW, but not on the actual page, live or preview.
    The bad problem is that if I close the file and re-open, and sometimes on save, I get the hourglass while it hangs, then after about 40-60 seconds, I get this message:
    A script file in c:\..........\Spry\EditUtils.js has been running for a long time. Continue?
    I answer No and the page opens and everything seems to work ok, I can edit and such, other than the tab contents running off the page.
    I have checked the pages and removed all errors except tabindex and table bordercolor (which are allowed even though they show error on validate). And I have confirmed that the necessary spry link code is the same as the accordion panel page that works, except for the different identifiers of panel vs tab.
    Here is a link to the page and the page:
    http://www.wilsonchiropractic.net/Services/Hormone.html?tab=1#TabbedPanels1
    http://www.wilsonchiropractic.net/Services/Hormone.html
    This is the relevant spry link code:
    <script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
    <script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject(); </script>
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
    When I take out the latter operator from the bottom line-
    , {defaultTab: params.tab ? params.tab : 0}
      everything goes back to normal.
    Please Help! Thank You!!
    --Jeff
    Message was edited by: jeff_w01 9-24-09:
    I have since re-created a simple page with the only complex element being the spry navigation bar. All else is essentially a stripped down version of the same page with an accordion panel which works. (all my pages are identical in header, navigation and footer - central frame holds differing content within tab or accordion panels).
    I put a simple 2-tab panel onto a new page and added the above JavaScript for linking to spry tabs or accordions. It still does the same thing within DW; the separate tab panels run out down the page and it hangs with the eventual message: A script file in c:\..........\Spry\EditUtils.js has been running for a long time. Continue?
    I have tried isolating as many variables as I can think of, but not having any luck....

    Hi Jeff,
    I am not able to reproduce this issue on a new page, but it looks like you have found that the following code is the problem:
    {defaultTab: params.tab ? params.tab : 0}
    Can you instead try the default constructor and then set the tab via the showTab() function for this tabbed panel?  This is essentially what happens with the constructor you are having trouble with.
    Hope that helps.
    Thanks,
    Josh Margulis
    Adobe Senior Solutions Engineer

  • Accordian & Tabbed Panel Error

    When I have the tabbed panel content set to expand
    automatically (ie scroll bars do no appear, the content just
    expands as the data gets bigger (or vice versa if the content is
    less for the next tab)… it does as it should and the content
    area expands or contracts accordingly.
    However… if I insert the accordion widget within one of
    the content areas, if the accordion is set to auto AND the tabbed
    panels are set to auto, the tabbed content does not expand if the
    data within the accordion requires it to do so.
    Does this make sense?
    Let me know if I need to re-explain.
    Thank you.

    I'm having the same problem. as this problem resides on an
    intranet I don't have a url to a demo.
    However, to make it clearer - I have a spry accordion with
    tabbed panels in it. If the tabbed panel content height is more
    than let's say 500px (which is the accordion content height) then a
    scrollbar appears on the right. BUT this also causes another issue
    which is when you use the scroll bar to scroll through the content,
    the tab panels hover over the content!
    I've tried changing the content height for both BUT the page
    looks stupid when there is content far less than the set content
    height!
    hope you gifted people can help with this issue.
    I have updated my spry to 1.6.
    thanks
    Anis

  • Contact form with Spry 'Tabbed Panels' and 'Validation TextField'

    Hello
    I am considering making a form using Spry tabbed panels (as step 1, step 2, etc.) and the form validation to process name, email, address, credit-card, accept terms and conditions, etc.
    This is instead of a multi-page form, because there could be security flaws there (i.e. passing sensitive information from one page to the next) and it would take longer for the user - needing to open each page, etc. where this is to be used as a buy form (for a single product), sort of like one-click order (but not exactly).
    Overall, it seems like a good idea, someone else has tried it, but I do have some questions that haven't been covered there - relevant for anyone that'd ever want to do this with Spry - that didn't come up there:
    1. Will it degrade gracefully, and still work? For example, when you turn JavaScript, CSS, images, and other things off?
    2. Is it possible to go from Step-to-Step (using the top tabs, or 'Submit' and 'Back' buttons added on the bottom) without entering all of the required information? Because I would like to disable this - perhaps also have the future Steps grayed out and un-clickable.
    3. Is it safe to use this form to enter credit card details, and then email those to the website's account? I am new to SSL, so I'm not sure if I could implement some security feature here? Where should I look?
    4. Does it load the page fast, despite having multiple steps all pre-loaded? Can we make subsequent steps require some 'loading' (without refreshing the page)?
    5. If it doesn't do either of these, how could we make it do that?
    I hope to hear from you!

    Hello
    I am considering making a form using Spry tabbed panels (as step 1, step 2, etc.) and the form validation to process name, email, address, credit-card, accept terms and conditions, etc.
    This is instead of a multi-page form, because there could be security flaws there (i.e. passing sensitive information from one page to the next) and it would take longer for the user - needing to open each page, etc. where this is to be used as a buy form (for a single product), sort of like one-click order (but not exactly).
    Overall, it seems like a good idea, someone else has tried it, but I do have some questions that haven't been covered there - relevant for anyone that'd ever want to do this with Spry - that didn't come up there:
    1. Will it degrade gracefully, and still work? For example, when you turn JavaScript, CSS, images, and other things off?
    2. Is it possible to go from Step-to-Step (using the top tabs, or 'Submit' and 'Back' buttons added on the bottom) without entering all of the required information? Because I would like to disable this - perhaps also have the future Steps grayed out and un-clickable.
    3. Is it safe to use this form to enter credit card details, and then email those to the website's account? I am new to SSL, so I'm not sure if I could implement some security feature here? Where should I look?
    4. Does it load the page fast, despite having multiple steps all pre-loaded? Can we make subsequent steps require some 'loading' (without refreshing the page)?
    5. If it doesn't do either of these, how could we make it do that?
    I hope to hear from you!

  • Validation Errors with Spry tabbed panels with doctype XHTML 1.0 Strict

    I'm getting errors while using the W3C Validation Service on my Strict XHTML 1.0 pages that use the SPRY Tabbed Panels.  I've read a few places that W3C has no plans on 'fixing or relaxing" the restrictions. Is there any type of work around to the Spry Widget Tab panels code ??? All of my other pages validate nicely... hate to go back to Transitional afterconverting all my other code.  
    The DreamWeaver File validation also gives me errors but I think that is fed from W3C.
      Any help would be appreciated. Thanks   Pat
    Line 31, Column 46: there is no attribute "tabindex"
    … <li class="TabbedPanelsTab" tabindex="0">Want a professional looking Logo ?</…

    Use Spry 2.0
    You can see a live demo of Spry 2.0 widgets below (contains valid markup).
    http://alt-web.com/sandbox/Spry-test.html
    Unless you're incorporating XML applications into your web site, there is not much reason to use XHTML Strict doc types. That standard was last revised in 2002.  It has since been replaced with HTML5.
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/

  • I have a perplexing problem, in firefox the iframe in the spry tabbed panel doesn't work any ideas?

    I have made a page with spry tabbed panels, i have embedded an iframe in the content section of the second tab, this works perfectly well with Google, IE, Safari, Opera etc but just doesnt work in Firefox.
    If I make the tab panel containing the iframe the Default tab then it works, i just cant figure out why,
    By the way new to all this so be gentle please
    <div id="main_column">
         <div class="section_w500">
            <h2>North Bali Listings</h2>
            <div id="TabbedPanels1" class="TabbedPanels">
              <ul class="TabbedPanelsTabGroup">
                <li class="TabbedPanelsTab" tabindex="0">About North Bali</li>
                <li class="TabbedPanelsTab" tabindex="0">Land</li>   <<<<< This is the tab where the iframe is embedded in the content panel>>>>>
                <li class="TabbedPanelsTab" tabindex="0">Houses / Villas /Apartments / Rooms</li>
                <li class="TabbedPanelsTab" tabindex="0">Commercial</li>
    </ul>
              <div class="TabbedPanelsContentGroup">
                <div class="TabbedPanelsContent">A property analyst recently said that limited land availability in the southern parts of Bali, especially  in and around the Badung and Denpasar areas, has driven investors northward, in our opinion   at this time it is an ideal opportunity to  acquire property still at very sensible prices in this area, be it for investment or as a place of residence.. <br />
                  <p> <img src="../../../Images/Bali Scenes General/panoramic-views.jpg" alt="views" width="183" height="140" align="left" />Over the last few of years, investors have been targeting the northern area,  principally along the coastline ,  with its variety of pristine black sandy beaches, pebble beaches and rugged coastline, offering a variety of activities; scuba diving, snorkelling,  water sports, fishing, sailing. trekking  gives this area the potential to be world-class tourist destination. Research has shown that  property prices are set to rise above the average due to increased infrastructure development, and the planned opening of a new International Airport in the North shows the Bali Government's commitment to the develop this area as a future tourist destination.<br />
                    <br />
                    The Northern part of Bali  is also an excellent base for exploration further afield, close to the main portal for trips to other parts of Indonesia. <br />
                  Although it is largely undeveloped there is a wide range of properties and land with beach front to panoramic rice paddy views still to be found at good value for money. </p>
                  <table width="100%">
                    <tr>
                      <td align="left" valign="top"><div class="AreasOfBaliHighlight" style="color: #60C; font-weight: bolder;">This is an ideal time to consider your dream property  in this area; be it for investment, development or private use.</div></td>
                    </tr>
                  </table>
                  <p> The main tourist area in the North is arguably <span style="color: #F00">Lovina</span>, with property prices reflecting this especially beach front or with panoramic views so expect to see prices a little bit more expensive in and around this area. However inland prices are still very reasonable.<br />
                    <br />
                    <img src="../../../Images/Bali Scenes General/Traditional-lifestyle.gif" alt="village life" width="188" height="137" hspace="2" align="right" />Other  areas to be found in the North going towards <span style="color: #F00">Gillimanuk</span> the main portal for the ferry to and from Java; include: <span style="color: #F00">Pemuteran</span> popular diving area, <span style="color: #F00">Menjangan</span> <span style="color: #F00">Island</span>, a popular diving and nature reserve;  are also beginning to attract investors, resulting in  prices  rising.<br />
                    The area of the North of Bali travelling East from <span style="color: #F00">Lovina</span> towards the eastern part of Bali is quieter and more rural, with stunning coastline and secluded traditional village life, here life slows down, people are very friendly and happy to integrate with &quot;Bule (Foreigner), this life style is definitely completely different to the hustle and bustle of the South of Bali, perfect for future development and peaceful retirement, and with the development of the new <span style="color: #F00">International Airport</span> in this area, about 1/2 way between <span style="color: #F00">Singaraja</span> and <span style="color: #F00">Almpura</span> in the East, which makes this area an ideal investment opportunity as property and land prices are set to grow in this part of North Bali faster than other areas.<br />
                    <br />
                    <img src="../../../Images/Bali Scenes General/img_bali_1.jpg" alt="Quiet Lanes" width="189" height="124" hspace="2" align="left" />It has to be said that facilities for schooling, medical services and shopping are not as good as in the South or around Ubud area, which have higher concentrations of  established ex pat communities, and better facilities  also the job opportunities are not anywhere near as plentiful as in the South or Ubud areas, which limits the lifestyle for many people looking to settle in Bali, careful consideration has to be given if your intention is for a place for you to reside, and it is possibly an area for consideration as an investment opportunity, or for a development of hotel or villa resort, or as a second retirement home. </p>
                  <p>There are of course facilities for all the usual services and plenty of job opportunities, and a small but growing ex-pat community, especially in and around <span style="color: #F00">Lovina</span> and <span style="color: #F00">Singaraja</span> just not as many as in the other popular areas for ex pat's. </p>
                </div>
                <div class="TabbedPanelsContent">
                  <p> </p>
                  <table width="100%" border="0">
                    <tr>
                      <td valign="top"><h7 style="color: #C03"><span style="font-weight: bold"><span style="font-size: 12px; color: #FFF;">Property Code BSP 00130101</span><span style="font-size: 16px"> </span>SAMBIRENTENG - North East Bali 7,300 meters (</span></h7>
                        <span style="font-weight: bold; color: #B90033;">73 ARE) Beach front flat wooded land for Sale/ Rent</span></td>
                      <td><span class="button_01"><a href="#" onclick="MM_openBrWindow('North Bali/Gold Package Listings/BSP-00130101/Sambirenteng  Property Location Map.html',width=750,height=200')">Location Map</a></span></td>
                    </tr>
                    <tr>
                      <td width="77%" valign="top"><p>A golden opportunity to acquire a prime plot of beach front land in the North East of Bali in an area that enjoys newly awarded &quot;Tourism Status&quot;  ideal for the development of a small hotel or villa complex, easy access to many popular tourist spots already developing in the North.</p>
                        <p> A 3 meter wide sealed road gives acces to the whole length of this prime plot of land: Electric (PLN) Water (PDAM) Telephone &amp; Internet close to hand and readilly available</p></td>
                      <td width="23%"><a href="Carousel Sambirneteng Listings.html target="_parent"></a><iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></td>
                    </tr>
                    <tr>
                      <td valign="top">Purchase price<span style="color: #33C; font-weight: bold;"> 12,500,000,000 Rp</span><br />
                        Rental Price (25 years) <span style="font-weight: bold">9,450,000,000</span> <span style="font-weight: bold">Rp</span> <span style="color: #FFF"> (<span style="font-weight: bold; color: #3333D0;"> 5,200,000 Rp</span><span style="color: #3933D5"> </span> per are per year )<br />
                          Min Rental Period 25 Years, extendable to to a max of 75 years
                          (with full &quot;Right Of Use&quot; issued by owner)</span></td>
                      <td valign="top"><p class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101 Details.html">Find out more</a></p>
                        <br />
                        <span class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101_Enquiry Form.html" target="_parent">Make Enquiry</a></span></td>
                    </tr>
                  </table>
                  <p><br />
                  </p>
                  <hr width="100%" noshade="noshade" />
                  <p> </p>
                </div>
    <div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.<iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></div>
                <div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.</div>
    </div>
            </div>
            <p> </p>
          <p>
            <h7 style="color: #C03"></h7>
          </p>
    <h2></h2><!-- this stays empty to put dotted line under listings block -->
         </div>
         <div class="cleaner"></div>
        </div> <!-- end of main column -->

    Could you share a link to the page?
    Seeing it in context and in our browsers is much easier to debug.
    If not, make sure to run the validator here The W3C Markup Validation Service and clear out any problems. HTML errors, especially structural ones, will cause all kinds of display problems in various browsers/versions/platforms.

  • Spry tabbed panels and "The tag: "li" doesn't have an attribute: "tabindex" ..."

    Hi,
    I've been using the DW CS4 "Spry Tabbed Panels" on a few pages. When I validate the website (with DW tool for that), I get the following messages for each use of the tabbed panels: The tag: "li" doesn't have an attribute: "tabindex" in currently active versions. [XHTML 1.0 Transitional].
    Should I worry about this? I'd like to have a code as clean and XHTML valid as possible. Is there a way to fix this so the message doesn't come up anymore?
    Emilie
    Example of code this message is linked to:
    <div class="TabbedPanels" id="TabbedPanelsADMS">
      <ul id="TabUL" class="TabbedPanelsTabGroup">
        <li id="TabLI1" class="TabbedPanelsTab" tabindex="0">About</li>
        <li id="TabLI2" class="TabbedPanelsTab" tabindex="0">Assets</li>
        <li id="TabLI3" class="TabbedPanelsTab" tabindex="0">Input</li>
        <li id="TabLI4" class="TabbedPanelsTab" tabindex="0">Output</li>
        <li id="TabLI5" class="TabbedPanelsTab" tabindex="0">Support</li>
        <li id="TabLI6" class="TabbedPanelsTab" tabindex="0">Purchase</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <!-- TabLI About -->
        <div class="TabbedPanelsContent">
          <!-- end #TabbedPanelsContent TabLI About -->
        </div>
        <!-- TabLI Assets -->
        <div class="TabbedPanelsContent">
          <!-- end #TabbedPanelsContent TabLI Assets -->
        </div>
        <!-- TabLI Input -->
        <div class="TabbedPanelsContent">
          <!-- end #TabbedPanelsContent TabLI Input -->
        </div>
        <!-- TabLI Output -->
        <div class="TabbedPanelsContent">
          <!-- end #TabbedPanelsContent TabLI Output -->
        </div>
        <!-- TabLI Support -->
        <div class="TabbedPanelsContent">
          <!-- end #TabbedPanelsContent TabLI Support -->
        </div>
        <!-- TabLI Purchase -->
        <div class="TabbedPanelsContent">
          <!-- end #TabbedPanelsContent TabLI Purchase -->
        </div>
        <!-- end #TabbedPanelsContentGroup -->
      </div>
      <!-- end #TabbedPanelsADMS -->
    </div>

    Should I worry about this? I'd like to have a code as clean and XHTML valid as possible. Is there a way to fix this so the message doesn't come up anymore?
    If validation is important to you, you need to remove tabindex. Should you worry about it? Not really. Sometimes it makes sense to ignore validation to achieve a particular goal, which is why Spry widgets use tabindex in a technically invalid way.
    The explanation as to why Spry does that can be found here: http://blogs.adobe.com/spryteam/2007/03/spry_widgets_and_tab_index.html.

  • Spry tabbed panels in firefox

    Hello, I am using the Spry tabbed panels in Dreamweaver CS4 and when I render in firefox there is a large amount of space at the bottom as if the tabbed panels are allowing space for each subsequent tab - even though the text is in the next tab.
    http://www.patternsoftheweb.net/1.htm
    The page link above shows the problem. How do I get rid of the extra space?
    Thank you for your help!

    First you have some code issues.  Run your page through the validator: http://validator.w3.org/ .  You can ignore the tabindex one because Spry uses that even though it's not really valid.  You can't have an h6 tag inside an h6 tag, you are missing some end tags.  CSS seems fine, just the usual Spry items come up.
    Make sure all the tags match up and see if you are still having the issue.  Also, be aware that there is a version 2 of the Spry Tabbed Panels as part of the Widget Browser (integrated in CS5, separate for CS4 use).  See the following page for more details: http://labs.adobe.com/technologies/widgetbrowser/ .

  • Spry Tabs Panel and Paypal

    Is there a way to integrate paypal with Dreamweaver Spry Tab Panels?  I have a site and have used the add to cart code outside of the spry tabs and it works fine as in adds my product to the paypal shopping cart.  When I put the same code into the spry tables, it simply sends me to the paypal homepage and not to the shopping cart.  I need help!!  Any advice would be truly appreciated.
    http://www.takingteainstyle.com/black.html
    Thank you

    Most likely caused by malformed code.  Use the W3C validation tool to check your HTML code for errors.
    http://validator.w3.org/
    You have unclosed <tr> tags in your tables.
    Nancy O.

  • Two or more spry sliding panels nested in tabbed panels?

    Hi
    I have a tabbed panel widget on one page. Inside the first
    tab I inserted a sliding panel widget. Now this works fine.
    I put another sliding panel widget into the second panel.
    I changed the div id ( <div id="panelwidget2"
    class="SlidingPanels"> ) and placed a second variable at the end
    of the code ( var sp2 = new
    Spry.Widget.SlidingPanels("panelwidget2"); ) But the second sliding
    panel doesn't work and Dreamweaver highlights <div
    id="panelwidget2" class="SlidingPanels"> as invalid code.
    What do I do wrong?
    Here's the code of the page:
    <script src="SpryAssets/SpryTabbedPanels.js"
    type="text/javascript"></script>
    <script src="SpryAssets/SprySlidingPanels.js"
    type="text/javascript"></script>
    <link href="SpryAssets/SprySlidingPanels.css"
    rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryTabbedPanels.css"
    rel="stylesheet" type="text/css" />
    </head>
    <body class="oneColElsCtr">
    <div id="container">
    <div id="mainContent">
    <h1> Main Content </h1>
    <table border="0">
    <tr>
    <td><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
    align="center"><span class="style3"><a href="#"
    onclick="sp1.showFirstPanel();">Bild l</a> | <a
    href="#" onclick="sp1.showPanel('p2');">Bild 2</a> | <a
    href="#" onclick="sp1.showPanel('p3');">Bild 3</a> | <a
    href="#" onclick="sp1.showPanel('p4');">Bild 4</a>
    </span> </div>
    <div id="panelwidget" class="SlidingPanels">
    <div class="SlidingPanelsContentGroup">
    <div class="SlidingPanelsContent" id="p1">
    <table border="0">
    <tr>
    <td class="style4">Lorem ipsum dolor sit amet,
    consectetuer adipiscing elit. Praesent aliquam, Phasellus
    trique</td>
    </tr>
    <tr>
    <td class="style3"><div align="center"><img
    src="Schnäppchen/bensonopti.jpg" width="500" height="320"
    /></div></td>
    </tr>
    </table>
    </div>
    <div class="SlidingPanelsContent" id="p2">
    <table border="0">
    <tr>
    <td class="style4">Lorem ipsum dolor sit amet,
    Phasellus trique</td>
    </tr>
    <tr>
    <td class="style3"><div align="center"><img
    src="Schnäppchen/Ibanez1.jpg" width="500" height="320"
    /></div></td>
    </tr>
    </table>
    </div>
    <div class="SlidingPanelsContent" id="p3">
    <table border="0">
    <tr>
    <td class="style4">Lorem ipsum dolor sit amet, commodo
    porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus
    quis ligula. Phasellus trique</td>
    </tr>
    <tr>
    <td class="style3"><div align="center"><img
    src="Schnäppchen/Ibanez2.jpg" width="500" height="320"
    /></div></td>
    </tr>
    </table>
    </div>
    <div class="SlidingPanelsContent" id="p4">
    <table border="0">
    <tr>
    <td class="style4">Lorem ipsum dolor sit amet, commodo
    porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus
    quis ligula. Phasellus trique</td>
    </tr>
    <tr>
    <td class="style3"><div align="center"><img
    src="Schnäppchen/Ibanez3.jpg" width="500" height="320"
    /></div></td>
    </tr>
    </table>
    </div>
    </div>
    </div>
    </div>
    <div class="TabbedPanelsContent">
    <div align="center"><span class="style3"><a
    href="#" onclick="sp1.showFirstPanel();">Bild l</a> |
    <a href="#" onclick="sp1.showPanel('p2');">Bild 2</a> |
    <a href="#" onclick="sp1.showPanel('p3');">Bild 3</a> |
    <a href="#" onclick="sp1.showPanel('p4');">Bild 4</a>
    </span> </div>
    <div id="panelwidget2" class="SlidingPanels">
    <div class="SlidingPanelsContentGroup">
    <div class="SlidingPanelsContent" id="p1">
    <table border="0">
    <tr>
    <td class="style4">Lorem ipsum dolor sit amet,
    Phasellus trique</td>
    </tr>
    <tr>
    <td class="style3"><div align="center"><img
    src="Schnäppchen/bensonopti.jpg" width="500" height="320"
    /></div></td>
    </tr>
    </table>
    </div>
    <div class="SlidingPanelsContent" id="p2">
    <table border="0">
    <tr>
    <td class="style4">Lorem ipsum dolor sit amet,
    Phasellus trique</td>
    </tr>
    <tr>
    <td class="style3"><div align="center"><img
    src="Schnäppchen/Ibanez1.jpg" width="500" height="320"
    /></div></td>
    </tr>
    </table>
    </div>
    <div class="SlidingPanelsContent" id="p3">
    <table border="0">
    <tr>
    <td class="style4">Lorem ipsum dolor sit amet,
    </td>
    </tr>
    <tr>
    <td class="style3"><div align="center"><img
    src="Schnäppchen/Ibanez2.jpg" width="500" height="320"
    /></div></td>
    </tr>
    </table>
    </div>
    <div class="SlidingPanelsContent" id="p4">
    <table border="0">
    <tr>
    <td class="style4">Lorem ipsum dolor sit amet,
    Phasellus trique</td>
    </tr>
    <tr>
    <td class="style3"><div align="center"><img
    src="Schnäppchen/Ibanez3.jpg" width="500" height="320"
    /></div></td>
    </tr>
    </table>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div></td>
    </tr>
    </table>
    <!-- end #mainContent --></div>
    <!-- end #container --></div>
    <script type="text/javascript">
    <!--
    var TabbedPanels1 = new
    Spry.Widget.TabbedPanels("TabbedPanels1");
    var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
    var sp2 = new Spry.Widget.SlidingPanels("panelwidget2");
    //-->
    </script>
    </body>
    </html>

    Add a valid Document Type Declaration on your page. (DTD) and it should work smoothly.. You could have found this out if you would just validate your page. validator.w3.org.

  • Tabbed panel & Validation

    Hello,
    I have a tabbed panel (4 tabs) and across these for tabs
    various input text fields. I have form validation on them. The
    problem is that when a user submits the form and it fails on a tab
    that isn't shown it simply will not submit the form (ofcourse) but
    will not notify the user what / where the validation failed. The
    user will have to go through each tab to check each field.
    Is there a way to automatically open the first tab where
    validation has failed?
    Thanks!!!!

    "Jasmine2002" <[email protected]> wrote in
    message
    news:g4ief6$dd4$[email protected]..
    > I have a tabbed panel (4 tabs) and across these for tabs
    various input
    > text
    > fields. I have form validation on them. The problem is
    that when a user
    > submits
    > the form and it fails on a tab that isn't shown it
    simply will not submit
    > the
    > form (ofcourse) but will not notify the user what /
    where the validation
    > failed. The user will have to go through each tab to
    check each field.
    >
    > Is there a way to automatically open the first tab where
    validation has
    > failed?
    This is something totally different, it doesn't use Spry at
    all. But maybe
    it could fit your scenario:
    http://www.massimocorner.com/libraries/widgets/tabs/sample_form_validator.htm
    Massimo Foti, web-programmer for hire
    Tools for ColdFusion, JavaScript and Dreamweaver:
    http://www.massimocorner.com

  • How do i get two spry tabbed panels to render properly in design view?

    I have inserted two spry tabbed panels into a simple web page.  The second panel appears off to the side of my design view window.  When i preview it in a browser it comes out fine but i can't seem to get the design view the same.  If i insert new paragraphs the tabbed panels look okay in the design view, but when viewing in the browser theres waaay to much space between them.  Any suggestions?

    Without seeing your page, not much to suggest other than making sure your code is valid.  DW is sensitive to coding errors that some browsers will overlook.
    HTML Validator - http://validator.w3.org
    CSS Validator - http://jigsaw.w3.org/css-validator/
    HTML & CSS Tutorials  - http://w3schools.com/
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics |  Print | Media Specialists
    www.alt-web.com/
    www.twitter.com/altweb

  • Spry Tab Panel is not working properly on remote server

    Hello All,
    I have a problem with spry tab panel, it is not displaying image in the background when it is active, it is working properly in local server but when i upload to remote it vanishes.
    Here is the link
    http://www.geftas.com/temaritestpage/about.html
    Also I am uploading Css and html code below
    Any help would be exteremely appreciated.
    Thanks
    <!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=utf8"/>
    <meta http-equiv="content-type" content="cache" />
    <meta http-equiv="robots" content="INDEX,FOLLOW"  />
    <meta http-equiv="keywords" content="Enter Keywords"/>
    <meta http-equiv="description" content="Description Here" />
    <title>TEMARI&CO. | Business Strategists</title>
    <link href="css/about.css" rel="stylesheet" type="text/css" media="screen" />
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="wrapper">
              <div id="header"></div>
      <div id="navigation">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="index.html">HOME</a></li>
          <li><a href="about.html" class="current">ABOUT</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">CONSULTING</a>
            <ul>
              <li><a href="#">Business Plan</a></li>
              <li><a href="#">Marketing Plan</a></li>
              <li><a href="#">Incorporation</a></li>
              <li><a href="#">Accounting System</a></li>
            </ul>
          </li>
          <li><a href="#" class="MenuBarItemSubmenu">INDUSTRIES</a>
            <ul>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
              <li><a href="#">Untitled Item</a></li>
            </ul>
          </li>
          <li><a href="#">OUR PROCESS</a></li>
          <li><a href="#">CAREERS</a>      </li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>
    <div class="shadow" id="content">
      <div id="TabbedPanels1" class="TabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0">values</li>
          <li class="TabbedPanelsTab" tabindex="0">people</li>
        </ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">
                    <div id="scrolltext">
                        <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. N</p>
            </div>
          </div>
          <div class="TabbedPanelsContent">
                      <div id="scrolltext">
                        <h1>Heading1</h1>                 
            <p>Lorem n, </p>
                                <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet, , </p>
                               <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit a, </p>
                               <h1>Heading1</h1>                 
            <p>Lorem ipsum dolor sit amet,  </p>   
            </div>
          </div>
        </div>
      </div>
    </div>
      <div id="footer">
    <div id="legal">
                          <ul>
                              <li>Copyright © 2012 Temari&Co</li>
                        <li>| Privacy Policy |</li>
                        <li>Terms of Use</li>
                    </ul>
        </div>
                <div id="socialmedia">
                          <ul>
                              <li><img src="images/fbicongri.png" width="20" height="20" alt="fbicon" /></li>
                        <li><img src="images/gicongri.png" width="20"          height="20" alt="gicon"/></li>
                        <li><img src="images/linkedinicongri.png" width="20" height="20" alt="linkedin"/></li>
                        <li><img src="images/twittericongri.png" width="20" height="20" alt="twitter"/></li>
                  </ul>
          </div>   
      </div><!-- end footer-->   
    </div><!-- end wrapper-->
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    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.
    .TabbedPanels {
              overflow: hidden;
              margin: 0px;
              padding: 0px;
              clear: none;
              width: 100%;
              height:100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    .TabbedPanelsTabGroup {
              margin: 0px;
              padding: 0px;
    .TabbedPanelsTab {
              position: relative;
              float: left;
              background-color: #FFF;
              list-style: none;
              -moz-user-select: none;
              -khtml-user-select: none;
              cursor: pointer;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 9pt;
              font-weight: normal;
              color: #666;
              height: 30px;
              width: 116px;
              text-transform: uppercase;
              text-align: center;
              line-height: 30px;
              margin: 0px;
              padding: 0px;
    .TabbedPanelsTabHover {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
    .TabbedPanelsTabSelected {
              background-image: url(../../SUPEROLDU/images/menubaractive.png);
              background-repeat: repeat-x;
              color: #FFF;
              height: 30px;
              width: 116px;
    .TabbedPanelsTab a {
              color: black;
              text-decoration: none;
    .TabbedPanelsContentGroup {
              clear: both;
              background-color: #FFF;
              height: 100%;
              width: 824px;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 9pt;
              color: #666;
              border-top-width: 1px;
              border-right-width: 1px;
              border-bottom-width: 1px;
              border-left-width: 1px;
              border-top-style: dotted;
              border-top-color: #CCC;
              border-right-color: #CCC;
              border-bottom-color: #CCC;
              border-left-color: #CCC;
    .TabbedPanelsContent {
              height: 100%;
              width: 100%;
              overflow:hidden;
    .TabbedPanelsContentVisible {
    .VTabbedPanels {
              overflow: hidden;
              zoom: 1;
    .VTabbedPanels .TabbedPanelsTabGroup {
              float: left;
              background-color: #EEE;
              position: relative;
    .VTabbedPanels .TabbedPanelsTab {
              float: none;
              margin: 0px;
              border-top: none;
              border-left: none;
              border-right: none;
    .VTabbedPanels .TabbedPanelsTabSelected {
              background-color: #EEE;
    .VTabbedPanels .TabbedPanelsContentGroup {
              clear: none;
    /* Styles for Printing */
    @media print {
    .TabbedPanels {
              overflow: visible !important;
    .TabbedPanelsContentGroup {
              display: block !important;
              overflow: visible !important;
              height: auto !important;
              margin-top: 0px;
              margin-right: auto;
              margin-bottom: 0px;
              margin-left: auto;
    .TabbedPanelsContent {
              clear:both !important;
              margin-top: 0px;
              margin-right: auto;
              margin-bottom: 0px;
              margin-left: auto;
              width: 744px;
    .TabbedPanelsTab {
               overflow: visible !important;
               display: block !important;
               clear:both !important;

    Hi
    Please Upload SpryTabbed Panels.css and menubaractive.png to their respective remote directories/folders.
    The images have not been uploaded at all, the online CSS is the one without a link to the images
    Regards
    Adaan Pre-Media Services
    For more image editing services follow us @
    web designing services

  • Spry Tabbed panels + Progressive Enhancement and Dynamic Loading of Content With Spry

    Is there any way to combine tabbed panels together with "Progressive Enhancement and Dynamic Loading of Content With Spry"?
    Visit: http://labs.adobe.com/technologies/spry/articles/best_practices/progressive_enhancement.ht ml#updatecontent
    And click on the "Using Spry.Utils.updateContent()"
    The 3rd example shows how to use a fade transition whenever the content changes.
    I already have tabbed panels. My menu contains buttons (on tabs) and my Content div contains the panels.
    Tabs code;
    <ul class="TabbedPanelsTabGroup">
              <li class="TabbedPanelsTab">
                   <table class="Button"  >
                        <tr>
                        <td style="padding-right:0px" title ="Home">
                        <a href="javascript:TabbedPanels1.showPanel(1);" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
                        </td>
                        </tr>
                   </table>
              </li>
    etc
    etc
    etc
    and the panel code:
    <div class="TabbedPanelsContent" id="Home">
         CONTENT
    </div>
    I hoped i can use the example code from the link into my tabbed panels.
    I thought this code:
    onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;"
    could be added to the tab code like this:
    <a href="javascript:TabbedPanels1.showPanel(1);" onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
    But the content doesnt fade...
    I know i need to change the header etc.
    The following is from the link:
    <!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" xmlns:spry="http://ns.adobe.com/spry">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Aquo Events</title>
    <script src="../../../includes/SpryEffects.js" type="text/javascript"></script>
    <script src="../../../includes/SpryData.js" type="text/javascript"></script>
    <script type="text/javascript">
    <!--
    function FadeAndUpdateContent(ele, url)
    try {
         Spry.Effect.DoFade(ele,{ duration: 500, from: 100, to: 0, finish: function() {
              Spry.Utils.updateContent(ele, url, function() {
                        Spry.Effect.DoFade(ele,{ duration: 500, from: 0, to: 100 });
    }catch(e){ alert(e); }
    -->
    </script>
    <style type="text/css">
    /* IE HACK to prevent bad rendering when fading. */
    #event { background-color: white; }
    </style>
    </head>
    So i changed my header etc, put the SpryEffects.js and SpryData.js into position and nothing changed...
    Is there a way to keep my tabbed panel (or change as less as possible) and let
    A. The fade work
    B. The loading work.
    The problem now is that it loads all pages instead of only the home. Therefore i wanted this Progressive Enhancement.
    And the fading part is just because its nice...

    It doesnt show in the post but off course i changed this link;
    "data/AquoThonFrag.html"
    into;
    "javascript:TabbedPanels1.showPanel(1);"
    I must say i dont know if this even works...

  • More than one spry tabbed panels

    Hi,
    On my index page I have a tabbed panel with it own css (size,
    color, etc.)
    I would like to insert another tabbed panel on another page
    (tabbed panel2). I would like this to have its own css style
    (different size, color scheme, etc.)
    When I insert a spry tabbed panel in dreamweaver it
    automatically takes on the css of my original tab panel design! How
    can I let the second tabbed panel take on its own life, completely
    independent of the first one?
    Thank you.

    "chris.cavage" <[email protected]> wrote in
    message
    news:gnuk7l$hoj$[email protected]..
    > How can I let the second tabbed panel
    > take on its own life, completely independent of the
    first one?
    Create a second set of CSS rules for it. The easiest way is
    to make a
    copy of SpryTabbedPanels.css, and call it
    SpryTabbedPanels2.css. Link
    SpryTabbedPanels.css to the original page, and
    SpryTabbedPanels2.css
    to the page that you want to look different.
    David Powers
    Adobe Community Expert, Dreamweaver
    http://foundationphp.com

Maybe you are looking for

  • Sun Studio C++

    we are using SUN SPARC SERVERS. In that SUN STUDIO was loaded. If we create C++ files they are not compiling We are compiling as follows CC <source file name> then we are getting message that CC : not found. Please help me regarding as quickly as pos

  • Unlocked previous documents are blank

    cannot open any recent unlocked docs, pages are blank as if hidden. 

  • Acrobat Reader X druckt falsche Buchstaben / prints wrong letters

    Nach dem Update auf Acrobat Reader 10.0.0 / 10.0.1 werden spontan Buchstaben, Ziffern und Zeichen um 1 versetzt ausgedruckt (z.B. S statt R, 2 statt 1). Beim wiederholten Ausdruck kann das Ergebnis korrekt sein. Betriebssystem: Windows XP / SP3 mit a

  • Handling Changes in Master Pages.

    Hi, I've designed a PDF form using livecycle designer. I got a masterpage which is having an editable area. When this fields are edited in any page, I want this changes to be reflected in other pages also. How can I do that. Is that possible? Regards

  • BootCamp Problem - WIN7 Setup

    Hi all, i want to install Windows 7 64bit on my new MacBook Pro i7 and i used BootCamp. BootCamp make succesfully a Driver-USB-Stick and i have a original Win7-64bit-Ultimate-DVD SP2. Windows 7 Setups boots and its ok, then set language and contiune.