Putting Spry Tabs below the content

I need to put the navigation tabs below the content and have tried to
cut-n-paste the [BULLET][/BULLET] tags that hold the navigation but I just mess
up the structure.

How can I do this?

Thanks ahead of time.

C

SecretSanta wrote:

I need to put the navigation tabs below the content and have tried to
cut-n-paste the [BULLET][/BULLET] tags that hold the navigation but I just mess
up the structure.

How can I do this?

FYI: Spry questions are probably best asked in the Spry forums:
http://www.adobe.com/cfusion/webforu...d=72&catid=602


The Spry tabbed panels are set up for top tabs or vertical left tabs (although you have to change classes in code view to get a vertical view of the tabs). So you'd have to go in and rearrange the HTML code, change a little CSS and a couple of lines of JavaScript for the tabbed panels in order to accomplish what you're trying to do.



Please note that you'll not see this visually within Dreamweaver properly as these changes will change the code base and Dreamweaver won't recognize what to do with the changes, however, a browser should show you what you want.

Ok, first add a tabbed panel to your document and save the page to get the Spry assets into place. Next go into code view and move the UL that has the tabs below the DIV that has the content panels.

Next we'll make the changes to the CSS and JavaScript within this page rather than modifying the Spry files. This will allow you to override the Spry defaults without messing up the base files in case you need the "regular" functionality later.

So add a STYLE block to your page and open the SpryTabbedPanels.css file. Copy the .TabbedPanelsTab selector (lines 67-83) into your new style block. Then copy .TabbedPanelsTabSelected selector (lins 105-108) into the style block.

In .TabbedPanelsTab change top:1px to top: -1px. Then in .TabbedPanelsTabSelected change border-bottom to border-top. These changes will allow the bottom tab to overlap the bottom of the content making it look seamless for the "selected" tab.

You'll have this when you're done:
<style type="text/css">
<!--
..TabbedPanelsTab {
position: relative;
top: -1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
}

..TabbedPanelsTabSelected {
background-color: #EEE;
border-top: 1px solid #EEE;
}
-->
</style>



Next create a SCRIPT block then copy the Spry.Widget.TabbedPanels.prototype.getTabGroup function (lines 124-133) and Spry.Widget.TabbedPanels.prototype.getContentPanel Group (lines 144-153) into your script block. Next change the Spry.Widget.TabbedPanels.prototype.getTabGroup function return to return children[1] in its 7th line, and change Spry.Widget.TabbedPanels.prototype.getContentPanel Group to return children[0] in its 7th lines as well. You'll have something like this in your page:

<script type="text/javascript">
<!--
Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
{
if (this.element)
{
var children = this.getElementChildren(this.element);
if (children.length)
return children[1];
}
return null;
};


Spry.Widget.TabbedPanels.prototype.getContentPanel Group = function()
{
if (this.element)
{
var children = this.getElementChildren(this.element);
if (children.length > 1)
return children[0];
}
return null;
};
-->
</script>

Basically what this JavaScript change does is to move from the tabs being the first element within the div that wraps the tabs and panels, that is children[0] to its new position of the second element children[1]. Same thing with the content panels, except in the opposite direction, moving from second child element to first child element (JavaScript uses a start position of 0 for the first element).

Should be good to go from there. If not, please post in the Spry forums.


--
Danilo Celic

http://blog.extensioneering.com/
WebAssist Extensioneer
Adobe Community Expert