Spry tabbing and URL variables

Hi there,
Thanks to these forums I can now link to my lovely Spry tabs.
However, I'm no longer able to pass my page variable by URL and I
was wondering if there was a work-around for this. My basic link is
as follows:
<a href="index.cfm?ID=#ID#"
onclick="TabbedPanels1.showPanel('third'); return
false;">#eventName#</a>
The link is tied to a specific database entry and, when
clicked, should load that entry on the panel. The entry is to
display on the third panel. While the panel links fine, the
database entry isn't called as the variable isn't passed.
Any ideas how I can best this little problem?
Thanks!

Kibbage.TEESO wrote:
The biggest reason I try to not use URL parametersis that URL paramteres open you to SQL injection attacks.
No more then Form variables do. If you think that form variables are somehow magically more secure from injection or any other type of tampering then url variables then you have a very week understanding of Internet technology.
It is no harder for me to modify a form [POST] variable then it for me to modify a url [GET] variable on any request I send to your server. If your server trusts the form variables and does not take precautions; then your application is open to SQL injuection and other hacks.

Similar Messages

Seperating Spry Tabs and Panel.

I know this is asked a lot. And on some topic someone said it was impossible.
But i cant believe it cant be done.
I posted the same message here: http://forums.adobe.com/message/2694106
But because no one awnsers to it, and i believe it IS possible to alter the Spry code so it works in a seperate way im posting this as a new topic.
I have a site already and hate to change everything just because i like to use Spry tabbed panels.
I now have this set up with div floats.
HEADER
MENU CONTENT
FOOTER
I already have this working code in the Menu div. The buttons work and the code is ready for Spry if i get the seperate content working.
<div id="WNavigation">
         <div id="TabbedPanels1" class="VTabbedPanels">
            <ul class="TabbedPanelsTabGroup">
         <li class="TabbedPanelsTab" tabindex="0">
          <style>#Home a{display:block;color:transparent;} #Home a:hover{background-position:left bottom;}a#Home {display:none}</style>
          <table id="Home" width=0 cellpadding=0 cellspacing=0 border=0><tr>
          <td style="padding-right:0px" title ="Home">
          <a href="/index.html" title="Home" style="background-image:url(Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a></td>
          </tr></table>
          </li>
         <li class="TabbedPanelsTab" tabindex="0">
          <style>#Info a{display:block;color:transparent;} #Info a:hover{background-position:left bottom;}a#Info {display:none}</style>
          <table id="Info" width=0 cellpadding=0 cellspacing=0 border=0><tr>
          <td style="padding-right:0px" title ="Info">
          <a href="/Info.html" title="Info" style="background-image:url(Buttons/Info.png);width:172px;height:75px;display:block;"><br/></a></td>
          </tr></table>
          </li>
         <li class="TabbedPanelsTab" tabindex="0">
          <style>#Gallerij a{display:block;color:transparent;} #Gallerij a:hover{background-position:left bottom;}a#Gallerij {display:none}</style>
          <table id="Gallerij" width=0 cellpadding=0 cellspacing=0 border=0><tr>
          <td style="padding-right:0px" title ="Gallerij">
          <a href="/gallerij.html" title="Gallerij" style="background-image:url(Buttons/Gallerij.png);width:172px;height:75px;display:block;"><br/></a></td>
          </tr></table>
        </li>
          <li class="TabbedPanelsTab" tabindex="0">
          <style>#Contact a{display:block;color:transparent;} #Contact a:hover{background-position:left bottom;}a#Contact {display:none}</style>
          <table id="Contact" width=0 cellpadding=0 cellspacing=0 border=0><tr>
          <td style="padding-right:0px" title ="Contact">
          <a href="/Contact.html" title="Contact" style="background-image:url(Buttons/Contact.png);width:172px;height:75px;display:block;"><br/></a></td>
          </tr></table>
        </li>
        </ul>
        </div>
     </div>
I put animated buttons on it. And if i ever get the seperate Content div working i need to change the links to open the panel instead of a normal URL.
What i want to do next is put the TabbedPanelsContent into the Content div instead of the Menu div.
But everything i tried didnt work out right.
The TabbedPanelsTabGroup is now completly in the Menu div and i wish someone can post alternate code that i can put in the Content div.
So i am not using this code right now: (my page works without it for now)
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
Please let someone make the content and tabs seperate!!!

WRobN1 wrote:
I know this is asked a lot. And on some topic someone said it was impossible.
But i cant believe it cant be done.
In a previous post I did say that you cannot separate the tabs from the panel. By that I really meant that you must keep the structure, including ID's and CLASSes as follows for the widget to work in its standard format.
<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">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
If you want to use the DIV <div id="TabbedPanels1" class="TabbedPanels"> as your mainContent area, UL <ul class="TabbedPanelsTabGroup"><div class="TabbedPanelsContentGroup"> as your menu and DIV as your content area, then that is OK.
Using style rules you can style the tabs as you wish as well as the content area. You can move the content area down from the tabs using the following style rule
.TabbedPanelsContentGroup {
   margin-top: 150px;
As said, it does not matter how you style the widget, the structure must stay intact.
WRobN1 wrote:
         <li class="TabbedPanelsTab" tabindex="0">
          <style>#Home a{display:block;color:transparent;} #Home a:hover{background-position:left bottom;}a#Home {display:none}</style>
          <table id="Home" width=0 cellpadding=0 cellspacing=0 border=0><tr><td style="padding-right:0px" title ="Home"><a href="/index.html" title="Home" style="background-image:url(Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a></td></tr></table></li>
When you do use the mark-up as above, please remember that by definition the <STYLE>-tag must be within the <HEAD>-area and try to use DIV's, SPAN's etc instead of using tables.
I hope the above helps.
Ben

WebCenter Favicon in browser tab and URL

Hi all,
SR 3-5937292041
How do we place a WebCenter favicon to the browser tabs and in front of the Spaces URL?
In Spaces 11.1.1.6.0 it is empty by default even if there is an ORACLE logo shown in the banner.
There is one for bugdb, MOS, etc...
Any hints?
Thanks
Verena

Verena,
Just check the OHS error log.
It will contain errors getting the favicon image, like:
File does not exist: /oracle/fmw/Oracle_WT1/instances/instance1/config/OHS/ohs1/htdocs/favicon.ico
Simply add the icon in that folder and you're done.
Kind regards,
Rob

Distinguishing between Form and URL variables

My mind isn't working like it should today, but what I am trying to do is:
1) alter a page via passing a argument in the URL
2) store this in a hidden field within the form on the page
3) retrieve the hidden field when the page is refreshed or in this case manipulated again for printing.
Basically, I have a report screen that allows the user to toggle between paging 1 page at a time or show all pages. If they click for all pages I pass a variable (allPages), and store it in a hidden field (allPages). Now if the user presses the "Print" button I reload the page stripping out form elements and put in Page breaks so that the report prints fairly nicely. Whats not working is my ability to differentiate between the parameter passed in the URL and the parameter contained within the form.
I am currently able top get the URL passed parameter via:
request.getParameter("allPages")
Is there a way to check for the form element, if it exist then use it else check for the URL passed parameter, or default it.
Thanks in advance.

I wonder, why you didn't use two different name for the parameter via URL and via Form, so your program should can easily distinguish where come from where, am I right?
The other way, you may check the method, whether it is "post" or "get", the get method is what you said as via URL and post normally use by form. But I think, it is better use two different parameter for Form and URL.

Tabs and url (request) parameters

In our application we use tabs (Folders) and in those we got portlets that submit forms using post method. (so it is not shown on the url)
The problem occures when you change tab. Then all the parameters submitted in the form is shown on the URL. And it seems to add new parameters for all the portlets you are visiting.
Is it possible to set up portal to (clear) the request when you switch between tabs? Is there any other settings?

Please post this question to the PDK forum.
Regards,
Jerry
PortalPM

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.

How to have same spry tab open when validate form?

i have a blog where the insert blog form is on the second spry tab and when the form does not validate it stays on the same page but the spry tab goes to the first tab; i want the second spry tab to remain open.
Can that be done?
see the page here
http://www.golftrailusa.com/golfblog2.php

I have been having this same problem. When I go to close Firefox, I get the message asking if I want to close the 2 tabs, even though I only see one. To view the hidden tab, close the currently open tab. The hidden tab will reveal itself.
This just happened to me and the URL of the hidden tab was:
http : // s . ytimg . com / yts / jsbin / html5player-vfliqjKfF.js
(Spaces added so as to not create a click-able link.)
Hope this helps anyone with the problem and anyone researching the issue.

Unable to get URL Variable

I've seen many posts about URL Variables, and I've tried implementing the solutions, but nothing seems to be working, so I'm hoping that someone out there might be able to help me with my situation.
I have built a JSP page in JDeveloper. The page must identify the visitor using an id (passed as a url variable) as well as an account_id entered by the user on the page. I've created a procedure in my ModuleImpl.java file that receives both the url variable and account_id and then calls a pl/sql transaction I've created in the database.
Thing is, if I take the procedure, which I've allowed to be shared to the Client interface, and plop it on my JSP Page, I get two inputs, one for the account_id and one for the url variable, meaning the user has to enter the url variable in the field for the procedure to work.
I've tried modifying the value of the field and setting it equal to #{param.id}, but when I run the page, the input becomes a display field and is not sent to my java procedure. I've also tried the FacesContext way of getting a url parameter, but I can't get that to work in my java file.
What I would like to have (or at least what my intensions were when I started this project) is to have the url variable field be hidden and automatically populated with the url variable so that when the customer enters their account_id and clicks submit, both the account_id and url variable are passed.
Any idea on how to implement something like this?

You can try setting the value of the parameter in the
pagedef.xml file for your page directly using
expression language.Thanks for your reply! I did that, or at least I think I did. Here is the NameData tag in my pagedef.xml file:
<NamedData NDName="web_hash" NDType="java.lang.String"
NDValue="${bindings.save_new_password_web_hash}"/>
what I've tried doing, is changing the NDValue to the three values below, all of which didn't work (returned null):
NDValue ="${param.id}"
NDValue ="#{param.id}"
NDValue ="${facesContext.externalContext.requestParameterMap['id']}"
is there a different expression I should be using?
Also, I will take a look at the solution you likend to.

Is it possible to change the selectedTab text color in SPRY Tabs?

Was working with SPRY tabs and the client would like the font color to change to white on roll over and select.
Is this possible through simply adding a single line of code to the css file of the SPRY file under
.TabbedPanelsTabSelected {
    height: 46px;
    width: 168px;
    background-color: #a7b9c3;
    color: #f7f7f7;
as you can see I already attempted to change the color and wasn't able to achieve the results on
http://ebnerproductions.com/index22.html
If it is possible, awesome, if not, I will replace with rollover images to get the desired result.
Adam Ebner
Thank you again to everyone in the forum as you have all helped me big time in the last couple of days!!!!!

I've gone through the coding now for a couple of days and still cannot get the font color to change on select.
I tried to inserted the recommended
<style>
.TabbedPanelsTabSelected,
.TabbedPanelsTabHover {
     color: #FFF;
</style>
coding that was offered earlier, and it did nothing....
here is the CSS for my tabbed panels... PLEASE LET ME KNOW WHAT I HAVE DONE WRONG, OR FORGOT!!!!
site is ... http://ebnerproductions.com/index22.html
Here is the Spry css ....
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.4 - 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 {
    margin: 0px;
    padding: 0px;
    float: left;
    clear: none;
    width: 810px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    position: absolute;
    left: auto;
    top: auto;
    color: #666;
/* 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;
    width: 840px;
    color: #666;
/* 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: 0px;
    float: left;
    padding: 0px;
    margin: 0px;
    list-style: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    height: 41px;
    width: 158px;
    outline:none;
    text-align: center;
    font-family: Archer-Medium-Pro.otf;
    font-size: 1.4em;
    font-weight: normal;
    color: #666;
    font-style: normal;
    padding-top: 8px;
    -moz-border-top-right-radius: 8px;
    -moz-border-top-left-radius: 8px;/* for older versions of Firefox) */
    -webkit-border-top-right-radius: 8px;
    -webkit-border-top-left-radius: 8px;/* for older versions of Safari and Chrome */
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;/* Newer browsers */
/* 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: #EEE;
    color: #FFF;
    width: 158px;
    outline:none;
/* 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: 41px;
    width: 158px;
    background-color: #a7b9c3;
    font: Archer-Pro-Medium;
    color: #FFF;
    outline:none;
/* 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: #666;
    text-decoration: none;
    outline: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;
    background-color: ;
    outline:none;
/* 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;
/* 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: #EEE;
    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: #EEE;
/* 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;
Thank everyone again for all the help!

Linking between spry tabs

I've created a page with spry tabs and want to place a link
on a tab that will take the user to a place on another tab. I
assumed that I would use named achors but can't get them to work.
Any ideas?

RSW14 wrote:
> I've created a page with spry tabs and want to place a
link on a tab that will
> take the user to a place on another tab.
To open another tab from anywhere in the same page, give the
target tab
an ID, and create the link like this:
<a href="javascript:;"
onclick="TabbedPanels1.showPanel('targetID')">Go
to other tab</a>
To go to a specific place within a tabbed panel, you would
need to use
SpryURLUtils.js, which is part of the Spry framework that you
can
download from Adobe Labs. Details of how to use it are on the
following
page:
http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS4",
"PHP Solutions" & "PHP Object-Oriented Solutions"
http://foundationphp.com/

Spry Tabs: how to overlap tabs when wrapped.

Hi,
Im new with using spry tabs and will be creating a page that
will require multiple tabs. I really would like to know how this
can be easily done. I had no success editing the CSS styles.
here is a similar example of how i want it.
Frys website with
tabs
but other than that, if its possible, i would also like the
active tab to move down and have its contents under the active tab.
Hope my explanation if clear, thanks in advance.

Hi,
'cause there was no-one who answered to your question till now, you could bring your thread into the Spry-forum:
http://forums.adobe.com/community/labs/spry?view=discussions.
There you will find the experts for all your questions about Spry applications.
Good luck!
Hans-Günter

Webservice , URL & URL Variable

hi all ,
i got a problem with my project and its regarding connectinng
to a webservice page for methods interacting with my SQL server
database and URL variable. (Front end is chinese checker Game )
Is there any related problems with sending URL variable to
another swf files and declaring a webservice address as i use the
URL variable in the methods of the webservices.
i found out that i cannot connect to the webservice page
sometimes ( random occurance) with the page being directed by new
urlrequest with the url variable attached.
However if it has successfully connected , there is no
subsequent problems anymore .
Can someone enlighten mi ?

I resolved...
Thanks
Muvva

I just want to make it go back to spry tabs default like when I started.

I am new with spry tabs and I was messing around with the css changing things " this is how I learn trial and error" well I clicked something and it messed up my tabs and so I though no prob I will just start over but when I go to put the spry tabs in default it stays with the error it wont revert to default tabs. I just want to make it go back to like when I started.

I don't understand, DWCC 2014 doesn't have Spry in it.
Spry was abandoned by Adobe in 2012.
Are you talking about the jQuery UI Tabs in DWCC 2014?

How to use H1, h3, h4 etc when using Spry Tabbed Panels?

Hi folks,
I am using Spry Tabbed Panels 2 on my site as it's the only way I know to direct visitors to particular tabs with links.
Unfortunately I can't use any of my header tags because H2 is dedicated to the Spry tabs, and for some reason has also taken "ownership" o all H tags.
Is there another way to mark my headings accordingly without having them turn into tabs?
My site is at www.qtnz.co.nz/activities
Thanks in advance for advice,
Jo

To help you on your way, have a look at the following. Just copy and paste into a new document and view in your favourite browser.
<!DOCTYPE html>
<html>
<head>

<base href="http://ajax.googleapis.com/" />

<link href="/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css"
        type="text/css" rel="Stylesheet" />

<script src="/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
      // See the jQuery UI Tabs documentation for
      // more information about how this works.
      $('#tabs').tabs();
</script>
</head>
<body>
<div id="tabs">
    <ul>
      <li><a href="#tab-1">Tab 1</a></li>
      <li><a href="#tab-2">Tab 2</a></li>
      <li><a href="#tab-3">Tab 3</a></li>
    </ul>
    <div id="tab-1">
      <p>These tabs were created with JavaScript, CSS, and
        images hosted on Google's AJAX APIs CDN.</p>
      <p>Thanks, Google!</p>
    </div>
    <div id="tab-2">
      <h1>YEAH!</h1>
      <p>My header!</p>
    </div>
    <div id="tab-3">
      
    </div>
</div>
</body>
</html>

Help me control Spry Tabs or Spry Accordion width

I am using Spry Tabs and Spry Accordions in Liquid pages, inside a DIV with ID.
I use an external CSS stytle sheet to control this ID and properly position the Spry Tabs or Spry Accordions inside the page.
I would like to have these Tabs or Accordions panels filling the page with a 10px margin on both sides.
I tried many CSS properties to have the DIV ID position the panel with both 10px margins...
If I use a 100% width, the panel overshoots the width of the page by about 10 to 20 pixels.
Using a 0px position and a 10px border on the right does not work.
The only solution I found is using a 98% width (box and position), but it varies on larger screens...
I am using Dreamweaver CS 5.5 on a Mac Pro.
There must be some CSS trick that I don't know... But CSS should also be easier to use...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
    padding: 0
    margin: 0
html {
    background: #CCC;
    height: 100%;
body {
    width: 960px;
    margin: auto;
    background: #FFF;
    height: 100%;
.aside {
    width: 260px;
    float: left;
    background: #030;
    padding: 10px;
.main {
    background: #6F3;
    padding: 10px;
    margin-left: 280px;
</style>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
</head>
<body>
<div class="aside">
<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">Content 1</div>
      <div class="TabbedPanelsContent">Content 2</div>
    </div>
</div>
</div>
<div class="main">
<div id="Accordion1" class="Accordion" tabindex="0">
    <div class="AccordionPanel">
      <div class="AccordionPanelTab">Label 1</div>
      <div class="AccordionPanelContent">Content 1</div>
    </div>
    <div class="AccordionPanel">
      <div class="AccordionPanelTab">Label 2</div>
      <div class="AccordionPanelContent">Content 2</div>
    </div>
</div>
</div>
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<script src="SpryAssets/SpryAccordion.js"></script>
<script>
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
Gramps
PS Sorry, horible colours

Spry tabbing and URL variables

Similar Messages

Maybe you are looking for