PHP Form in Spry Tabbed Content Div

I have placed some PHP forms inside some Spry Tabbed Content
divs. When the forms are submitted, the page reloads with the
default tabbed content displayed instead of the tab where the form
is. If I click to the tab with the form, I can see the information
PHP properly returned.
Does anybody know how to make the Spry Tabbed Content script
return to the tab that had focus when a PHP form is submitted
instead of the default tab?
Thanks in advance for any advice.

Hi,
On the main forum page you will have read the following.
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.
After you have upgraded and not removed the remarks from the Spry files, we will have another look at it.
Ben

Similar Messages

Links to spry tab content

Within one html file divided into Spry-tabs, I set a named
anchor in tab-content <div> of one tab and try to link to it
from within a different tab-content division of the same page.
Doesn't work - just sends me to bottom of division in the which
link is located. Surely this is doable -- Am I missing some simple
point?

bob_atlanta wrote:
> Within one html file divided into Spry-tabs, I set a
named anchor in
> tab-content <div> of one tab and try to link to it
from within a different
> tab-content division of the same page. Doesn't work -
just sends me to bottom
> of division in the which link is located. Surely this is
doable -- Am I
> missing some simple point?
You have to know which tab the anchor is within and then you
can show a specific tab. Check out the code on this page:
http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_unobtrusive.htm
FYI: Spry questions are probably best asked in the Spry
forum:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Editing spry tab content using adobe contribute 4

Hi Everyone,
We have used Sprytabs for different tabs section for there respective pages.
We are using Contribute CS4 for editing spry tabs content, But after study I have figured that we can't edit
sprytabs using Contribue CS4
Is there any way in contribute that we can edit Spry tab content in contribue CS4
Thanks in advance!
Rohit Yog

Spry widget editing is allowed from Adobe Contribute CS5 version only. Please refer to http://blogs.adobe.com/contribute/2010/06/spry_widget_rendering.html

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!

How to Display Repeat List In Spry Tab Content

Hello,
I am new to Spry. I thought I could just create an XML
dataset, Insert a Spry Tabbed Panel, and then insert a Spry repeat
list inside the Tabbed Content area of the Tabbed Panel. It is not
working at all for me. Is this doable at all? If so, how?
Thanks!

hi,
i have created an example in http://apex.oracle.com/pls/apex/f?p=44310:1:3623155419174978:::::
username/password: demo/demo
check, it may help you:)
*please mark the thread answered if it done:)
regards
Little Foot

Change text "link" color only in Spry Tab content area

I need to have multiple text link colors in my site for light
and dark background colors. The only regions in my site that have a
white background are in the Spry Tab Panel content area. I can't
figure out how to change the text color for text links in the spry
content only. I tried to add a:link ..etc... to the style sheet,
but it did not effect anything
(I also need to clean my style sheet (s). But that comes
next.
Here
is a Link to a Sample Page in my site
null

Here is the SpryTabbedPanels style sheet in my site. I can't
seem to figure out the changes I need to make to effect the content
area.
I tried to add the following (see .TabbedPanelsContentGroup
below)
a: link {
color: #0099CC;
text-decoration: none
a:active {
color: #99CC33;
text-decoration: none
a:visited {
color: #0099CC;
text-decoration: none
a:hover {
color: #99CC33;
text-decoration: underline
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6
/* 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 {
margin: 0px;
float: right;
clear: none;
width: 82%; /* IE Hack to force proper layout when preceded
by a paragraph. (hasLayout Bug)*/
padding-top: 0px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 0px;
/* 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;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
background-color: #CCCC99;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
/* 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 {
background-color: #99CC33;
color: #000000;
/* 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 {
background-color: #FFFFFF;
border-bottom: 1px solid #EEE;
color: #000000;
/* 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 {
color: black;
text-decoration: none;
/* 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: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #FFFFFF;
color: #000000;
a: link {
color: #0099CC;
text-decoration: none
a:active {
color: #99CC33;
text-decoration: none
a:visited {
color: #0099CC;
text-decoration: none
a:hover {
color: #99CC33;
text-decoration: underline
/* 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: 4px;
/* 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 {
/* 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".
/* 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: 10em;
height: 20em;
background-color: #CCCC99;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
/* 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 .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
/* 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 {
background-color: #CCCC99;
border-bottom: solid 1px #999;
/* 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: 30em;
height: 20em;

Can you split a large PHP form in the tabbed panels?

I have a large PHP customer feedback form that posts to my mySQL server. The customer experience isn't great. Can you split a large form into seperate tabbed panels?

Sure I don't see a reason why not. It's basically using javascript to show/hide active parts of your form. So when you submit your server script would still process the data as though it were one page (ie: all variables are passed even if not on tab).

SPRY tabs content loading

I am using SPRY tabs to display static content. I have 4
tabs. When the page loads the content on all 4 tabs shows up one
below the other.
Could anybody suggest how I can stop that. The content for
first tab should only show up on page load.
Other tab content should load when that tab is
clicked.

My tabs work but the problem I have is that the content of
all tabs loads when the page loads making it extremely slow.
I've got galleries in the tabs, tab1 2008 tab 2 2007 tab 3
2006 and photos in each gallery all load together.
On another site I did I managed to get it to load the images
in the tab when the user clicks on the tab speeding up initial load
times for the page but I can't remember how I did it, it was
accidental!!!

Issue using spry regions in spry tabbed content

I am having a slight issue with making a slideshow in a spry tabbed panel set. I have tested my XML used for the slideshow in a basic blank page, where I created the spry source and detail regions, and it loads fine. When you click on the thumbnail, the detail region loads the image. But when I place the slideshow in my websites page, it is inside a spry tabbed panel set. Where it just doesn't seem to want to work.
Has anyone had this issue?
I posted a copy of the page at the link below. The slideshow is under the portfolio tab
http://www.fscproductions.net/spry/
Thanks
JF

Hi,
On the main forum page you will have read the following.
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.
After you have upgraded and not removed the remarks from the Spry files, we will have another look at it.
Ben

Datasets in Spry Tabbed Panels

Hey guys,
I have a spry tabbed panel in which the contents are iframes that load a spry xml dataset. The problem I am encountering is that while the "default tab" spry loads...when toggling the other tab I get the errors
Failed to retrieve data set (pagingInfoDs) for spry:repeat
FF Firebug shows me
uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMScreen.width]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://192.168.0.1:93/vadmin/includes/cms.js :: BrowserInfo :: line 51" data: no]among other things...
Now I'm developing on localhost so I'm not able to show an example...the thing is if I were to change the default tab (from 0 to 1) the default tab now will work whislt the other would trigger the error. This means that some thing with the tab NOT being "open" or "shown" is affecting the dataset. I find this wierd as the datasets are loading within iframes...
Any idea as to what can be causing this reaction in the tabs?

well the code to the spry tabbed panel
<div class="contentList">
<div class="TabbedPanels" id="TabbedPanels_links">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" title="View Webpages">View Webpages</li>
      <li class="TabbedPanelsTab" title="View Non-HTML Docs">View Non-HTML Docs</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent">
        <iframe src="../../../../?task=menus&a=browse&menu_id=true" width="100%" height="500" ></iframe>
      </div>
      <div class="TabbedPanelsContent"> <iframe src="../../../../?task=docs&a=browse&doc_id=true" width="100%" height="500" ></iframe></div>
    </div>
</div>
</div>
</fieldset>
<script type="text/javascript">var TabbedPanels_links = new Spry.Widget.TabbedPanels("TabbedPanels_links", { defaultTab: 2 });</script>
If I were to switch iframe sources the one thats in the "default" tab will list while the the tab that isn't will error
This was the first error
uncaught exception:
[Exception... "Component returned failure code: 0x80004005
(NS_ERROR_FAILURE) [nsIDOMScreen.width]" nsresult: "0x80004005
(NS_ERROR_FAILURE)" location: "JS frame ::
http://orin.mshome.net:93/vadmin/includes/cms.js :: BrowserInfo :: line
51" data: no]
After that its more that the dataset wasn't a property

Spry tab links

Hello everyone,
Is there a way that inside spry i have links to move to
another tab of that spry?
For example i have 3 tabs A B and C now i want inside the
content of tab A to have links that point and open tab B or C.
Thanks

bob_atlanta wrote:
> Within one html file divided into Spry-tabs, I set a
named anchor in
> tab-content <div> of one tab and try to link to it
from within a different
> tab-content division of the same page. Doesn't work -
just sends me to bottom
> of division in the which link is located. Surely this is
doable -- Am I
> missing some simple point?
You have to know which tab the anchor is within and then you
can show a specific tab. Check out the code on this page:
http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_unobtrusive.htm
FYI: Spry questions are probably best asked in the Spry
forum:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Insert PHP-form into XHTML-div

Maybe a noobish question but i cannot find the solution on the web...
I have a XHTML based index.html.
I use Spry tabbed panels.
In 1 Panel (Contact Panel) i like to have a email form displayed.
How do i show my Form.php inside this div?
I want the Content div to display the php form without putting the php code in the div.
Header
Menu
Content [here do i want to display the form]
Footer

Best to use an external PHP page and link the form to it. Something like:
<form action="php/sendform.php" method="post" name="contactForm" id="contactForm">
Then lay the form out the way you want in the DIV.

Submitting a Form in a Spry Tabbed Region

I have a spry tabbed region with 6 tabs.
I have constructed a menu which targets and opens the specific tab using the ?tab=4 type notation. I have also created links between tabs using the same notation. All works fine.
I have a form in one tab which, when I submit it, I want to return to the same tab. However when I use the notation <form action="index.php?tab=4" > the page just reloads on the first tab, stripping off the ?tab=4 part of the url. I have searched the forums but can't find any reference to how to target a specific tab when submitting a form.
Any help much appreciated.
Thanks
John

Hi
Thanks for your patience.
Because there are 8 tabs on this page there is a lot of code, much of it irrelevant, so I have copied below the chunks which relate to this part of the page.
When the form is submitted the data being returned from the database is correct and is loaded into the page. It is just that the page loads the first tab and you then have to click on the 'Results' tab to see the data which has been returned.
Ok, from the top of the page the php code which filters the recordset is as follows;
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
return $theValue;
// recordset for results
$var1_rsCompResults = "-1";
if (isset($_GET["event_ID"])) {
$var1_rsCompResults = $_GET["event_ID"];
$var2_rsCompResults = "-1";
if (isset($_GET["age_group"])) {
$var2_rsCompResults = $_GET["age_group"];
$var3_rsCompResults = "-1";
if (isset($_GET["gender"])) {
$var3_rsCompResults = $_GET["gender"];
mysql_select_db($database_connPublic, $connPublic);
$query_rsCompResults = sprintf("SELECT tblResults.result_ID, DATE_FORMAT(tblEvents.event_start_date, '%%Y') AS year, tblResults.event_ID, tblEvents.event_name, tblResults.age_group, tblResults.points, tblIndividuals.forename, tblIndividuals.surname, tblIndividuals.sex FROM tblEvents INNER JOIN tblResults ON tblEvents.event_id = tblResults.event_ID INNER JOIN tblIndividuals ON tblResults.individual_ID = tblIndividuals.individual_id WHERE tblResults.event_ID = %s AND age_group = %s AND sex = %s ORDER BY tblResults.points", GetSQLValueString($var1_rsCompResults, "int"),GetSQLValueString($var2_rsCompResults, "text"),GetSQLValueString($var3_rsCompResults, "text"));
$rsCompResults = mysql_query($query_rsCompResults, $connPublic) or die(mysql_error());
$row_rsCompResults = mysql_fetch_assoc($rsCompResults);
$totalRows_rsCompResults = mysql_num_rows($rsCompResults);
?>
then the links to the Spry Assets and the js which creates the datasets is as follows;
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryDataExtensions.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryNestedXMLDataSet.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryXML.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryPagedView.js" type="text/javascript"></script>
<script src="../SpryAssets/xpath.js" type="text/javascript"></script>
<script type="text/javascript">
var dsYears = new Spry.Data.XMLDataSet("competitions_year_data_xml.php", "root/row");
var dsCompetitions = new Spry.Data.XMLDataSet("calendar_competitions_data_xml.php", "root/row[year = '{dsYears::year}']");
var dsAgeGroups = new Spry.Data.XMLDataSet("competitions_age_group_data_xml.php", "root/row[event_ID = '{dsCompetitions::event_ID}']");
var dsGender = new Spry.Data.XMLDataSet("competitions_sex_data_xml.php", "root/row[age_group = '{dsAgeGroups::age_group}']");
</script>
Then the html which creates the tabbed region is as follows;
                  <div id="TabbedPanels1" class="TabbedPanels">
                      <ul class="TabbedPanelsTabGroup">
                        <li class="TabbedPanelsTabLeft" tabindex="0">News</li>
                        <li class="TabbedPanelsTab" tabindex="1">Calendar</li>
                        <li class="TabbedPanelsTab" tabindex="2">Rules</li>
                        <li class="TabbedPanelsTab" tabindex="3">Competition Entries</li>
                        <li class="TabbedPanelsTab" tabindex="4">Results</li>
                        <li class="TabbedPanelsTab" tabindex="5">Rankings</li>
                        <li class="TabbedPanelsTab" tabindex="6">Contacts</li>
                        <li class="TabbedPanelsTabRight" tabindex="7">FAQ</li>
                      </ul>
                      <div class="TabbedPanelsContentGroup">
Then the form which includes the four select statements is as follows;
<div class="TabbedPanelsContent" id ="results_data">
               <h3>Results</h3>
<form name="selectForm" action="index.php?tab=4&" method="get">
        Year:
<span spry:region="dsYears" id="yearSelector">
        <select spry:repeatchildren="dsYears" spry:choose="spry:choose" name="year" onchange="dsYears.setCurrentRowNumber(this.selectedIndex);">
            <option value="{year}" spry:when="{ds_CurrentRowID} == {ds_RowID}" selected="selected">{year}</option>
            <option value="{year}" spry:default="spry:default" >{year}</option>
        </select>
</span>
        Event:
<span spry:region="dsCompetitions" id="eventSelector">
        <select spry:repeatchildren="dsCompetitions" name="event_ID" onchange="dsCompetitions.setCurrentRowNumber(this.selectedIndex);">
            <option value="{event_ID}">{event_name}</option>
        </select>
</span>
        Age Groups:
<span spry:region="dsAgeGroups" id="agegroupSelector">
        <select spry:repeatchildren="dsAgeGroups" name="age_group" onchange="dsAgeGroups.setCurrentRowNumber(this.selectedIndex);">
            <option value="{age_group}">{age_group}</option>
        </select>
</span>
        Gender:
<span spry:region="dsGender" id="genderSelector">
        <select spry:repeatchildren="dsGender" name="gender">
            <option value="{sex}">{sex}</option>
        </select>
</span>
<input type="submit" value="Submit" />
</form>
<?php if ($totalRows_rsCompResults > 0) { // Show if recordset not empty ?>
<div id="result_ID" name="result_ID">
    <table>
      <tr>
        <th>Athlete Name</th>
        <th>Event</th>
        <th>Score</th>
      </tr>
      <?php do { ?>
        <tr>
          <td><?php echo $row_rsCompResults['forename']; ?> <?php echo $row_rsCompResults['surname']; ?></td>
          <td><?php echo $row_rsCompResults['event_name']; ?></td>
          <td><?php echo $row_rsCompResults['points']; ?></td>
        </tr>
        <?php } while ($row_rsCompResults = mysql_fetch_assoc($rsCompResults)); ?>
    </table>
</div>
<?php } // Show if recordset not empty ?>
       </div> 
Then at the end of the page is this code;
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
</script>
</body>
</html>
<?php
mysql_free_result($rsCompResults);
?>

Spry Tabs displaying all content in IE8

Hi,
I have been looking at using the spry tabs panel to display content, it works perfectly fine in Safari and Firefox, but in explorer 8 all the panels display one underneath the other?
I have played around with the layout and am probably out of my depth...
If anyone knows a way I can fix this, otherwise I will use a simpler display.
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=UTF-8" />
<link href="CSS/css.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab1">
      <h1>$500 </h1>
     <p> Starter pack.</p>
      </li>
      <li class="TabbedPanelsTab" >
<h1>$900 </h1>
        <p>A bit more special.</p>
      </li>
      <li class="TabbedPanelsTab">
<h1>Custom </h1>
        <p>For something extra.</p>
      </li>
      <li class="TabbedPanelsTab">
        <h1>Design Services</h1>
        <p>content.</p>
      </li>
      </li>
    </ul>
    <div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent1">
      <div class="contentimage"><img src="images/page-design.gif" width="400" height="312" alt="example of designs" longdesc="images/page-design.gif" /></div>
      <div id="content">
<ol>
<li>option 1.</li>
                    <li>option 2.</li>
              <li>option 3.</li>
              <li>option 4.</li>
              <li>option 5.</li>
                </ol>
<p>Create an interesting space.</p>
<div align="center"><a href="web me.html#pageinfo"><img src="images/auckland-design.gif" width="314" height="62" alt="link to design packages" longdesc="images/auckland-design.gif" /></a></div>
      </div>
</div>
<div class="TabbedPanelsContent2">
      <div class="contentimage"><img src="images/site-design.gif" width="400" height="310" alt="example of design" longdesc="images/site-design.gif" /></div>
      <div id="content">
<ol>
<li>option 1.</li>
                    <li>option 2.</li>
              <li>option 3.</li>
              <li>option 4.</li>
              <li>option 5.</li>
                </ol>
<p>Create an interesting space.</p>
      <div align="center"><a href="web me.html#info"><img src="images/auckland-design.gif" width="314" height="62" alt="link to design packages" longdesc="images/auckland-design.gif" /></a></div>
      </div>
</div>
<div class="TabbedPanelsContent3">
     <div class="contentimage"><img src="images/site-design.gif" width="400" height="310" alt="example of design" longdesc="images/site-design.gif" /></div>
      <div id="content">
<ol>
<li>option 1.</li>
                    <li>option 2.</li>
              <li>option 3.</li>
              <li>option 4.</li>
              <li>option 5.</li>
                </ol>
<p>Create an interesting space.</p>
      <div align="center"><a href="web me.html#info"><img src="images/auckland-design.gif" width="314" height="62" alt="link to design packages" longdesc="images/auckland-design.gif" /></a></div>
      </div>
</div>
<div class="TabbedPanelsContent4">
      <div class="contentimage"><img src="images/site-design.gif" width="400" height="310" alt="example of design" longdesc="images/site-design.gif" /></div>
      <div id="content">
<ol>
<li>option 1.</li>
                    <li>option 2.</li>
              <li>option 3.</li>
              <li>option 4.</li>
              <li>option 5.</li>
                </ol>
<p>Create an interesting space.</p>
      <div align="center"><a href="web me.html#info"><img src="images/auckland-design.gif" width="314" height="62" alt="link to design packages" longdesc="images/auckland-design.gif" /></a></div>
      </div>
</div>
    </div>
</div>
<div id="design">
<div class="topline"></div>
<div id="leftcoloumn">
<h1> Simple affordable website design in Auckland</h1>
     <p>As designers on Auckland's North Shore we set out to offer an affordable easy way to create special spaces etc..</p>
    </div>
<div class="centerline"></div><div id="rightcoloumn">
    <h1>Specialising in creating special spaces. </h1>
   <ol>
      <li>Create a space you'll love.</li>
      <li>Fit your budget.</li>
                         </ol>
    </div>
</div>
<div id="footer">
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
@charset "UTF-8";
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
#container #TabbedPanels1 .TabbedPanelsTabGroup .TabbedPanelsTab1 h1 {
font-size: 18px;
color: #52542D;
#container #TabbedPanels1 .TabbedPanelsTabGroup .TabbedPanelsTab h1 {
font-size: 18px;
color: #52542D;
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
margin-left: 30px;
.TabbedPanelsTab {
position: relative;
top: 435px;
float: left;
width: 203px;
padding: 12px 10px;
margin: 0px 1px 0px 0px;
background-color: #CCC;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #666633;
border-bottom-color: #666633;
border-left-color: #CCC;
overflow: visible;
.TabbedPanelsTab1 {
position: relative;
top: 435px;
float: left;
width: 203px;
padding: 12px 10px;
margin: 0px 1px 0px 0px;
background-color: #CCC;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #666633;
border-bottom-color: #666633;
border-left-color: #666633;
overflow: visible;
.TabbedPanelsTabHover {
background-color: #FFF;
.TabbedPanelsTabSelected {
background-color: #FFF;
border-bottom: 1px solid #666633;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
position: relative;
bottom: 90px;
clear: both;
min-height: 430px;
height: auto;
margin-right:27px;
margin-left: 30px;
background-image: url(../images/content-box.gif);
background-repeat:no-repeat;
.TabbedPanelsContent {
padding: 4px;
.TabbedPanelsContentVisible {
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
#container #content {
width: 395px;
float: right;
margin-top: 35px;
padding-right: 20px;
#container #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent1.TabbedPanelsContentVisible #content .image {
margin-top: 27px;
#container .contentheaders {
margin-right: 8px;
#container .contentimage {
float: left;
margin-top: 35px;
padding-left: 40px;

You are probably getting a javascript error in IE8 preventing the tabs displaying properly. Use the developer tools unde F12 to find the problem line in your code. Sometimes it is just a cariable name you have used that IE does not like....

Creating Single/Multiple Form(s) With Spry Tabbed System

I hope I'm in the right area:
I would like to know if anyone has any success with create a multiple form or a single form with a Spry tabbed system?
The project I'm doing requires an ordering system with the use of Spry tabs and I'm not sure if it will work. I'm familiar with creating forms, but unfamiliar with processing it with this kind of system.
I would appreciate some insight.
Thank you.

Okay, I've reviewed the example you gave me and tested it and it worked fine. But when I tried to implement it on my form, the radio button selection didn't post. I'm going to go through this little by little:
<?php
    if ((isset($_POST['WebPkg']))) {
    echo ($_POST['WebPkg']);
?>
<form id="form1" name="form1" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Choose A Plan</li>
<li class="TabbedPanelsTab" tabindex="0">Website Add-Ons</li>
<li class="TabbedPanelsTab modif" tabindex="0">Premium Upgrades</li>
<li class="TabbedPanelsTab modif" tabindex="0">Review & Complete</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<table width="875" border="0" cellpadding="1" cellspacing="1" class="select-plan-table">
<tr>
    <td class="plans-price"> <span class="price-big"><input value="39.99" title="" class="radio" id="WebsitePkg1" name="WebPkg" type="radio" />$39</span><span class="small-price">.99/mo</span></td>
<td class="plans-price"><span class="price-big"><input value="79.99" title="" class="radio" id="WebsitePkg5" name="WebPkg" type="radio" />$79</span><span class="small-price">.99/mo</span></td>
    <td class="plans-price"><span class="price-big"><input value="114.99" title="" class="radio" id="WebsitePkg10" name="WebPkg" type="radio" />$114</span><span class="small-price">.99/mo</span></td>
    <td class="plans-price"><span class="price-big"><input value="149.99" title="" class="radio" id="WebsitePkg15" name="WebPkg" type="radio" />$149</span><span class="small-price">.99/mo</span></td>
</tr>
</table>
<div class="additional-pages">
      <p><input class="cf_inputbox" maxlength="150" size="30" title="" id="addpages" name="addpages" type="text" value="0"/></p>
</div>
<p><input type="image" src="../images/stories/add-ons.png" width="135" height="33" border="0" style="background: none; border: none; width: 135px; height: 33px; border: none; float: right; cursor: pointer;" onclick="TabbedPanels1.showPanel(1); return false;" name="websiteaddons" alt="Website Add-Ons" ></p>
</div>
<div class="TabbedPanelsContent">--second tab--...more parts to the form...</div>
<div class="TabbedPanelsContent">--third tab--...more parts to the form...
<input type="image" src="../images/review-and-complete.png" height="33" width="135" style="background: none; border: none; width: 135px; height: 33px; border: none; float: right; cursor: pointer; margin-right: 3px;" onclick="TabbedPanels1.showPanel(3); return false;" name="gotoreview" alt="Review & Complete" />
</div>
<div class="TabbedPanelsContent">--fourth tab--
<p><?php echo((isset($_POST["WebPkg"]))?$_POST["WebPkg"]:"") ?></p>
<p><input type="checkbox" name="agreement" id="agreement" />Yes, I have completely read, understand, and agree to all articles and policies as outlined in Rewebbed's <a href="#">Terms & Agreement</a>.</p>
<input name="submit" type="button" value="Account & Billing Info" />
</div>
As you can see on Tab 4, I'm expecting <p><?php echo((isset($_POST["WebPkg"]))?$_POST["WebPkg"]:"") ?></p> to post the sent information with the 'Review & Complete' button clicked in Tab 3. Then in Tab 4, this will be another form that has the posted information to be sent to a payment gateway.
So why wouldn't it post in the fourth tab?

PHP Form in Spry Tabbed Content Div

Similar Messages

Maybe you are looking for