Putting Spry Tabs below the content

Question

I need to put the navigation tabs below the content and have
tried to cut-n-paste the <ul></ul> tags that hold the
navigation but I just mess up the structure.
How can I do this?
Thanks ahead of time.
C

Answer 1

SecretSanta wrote:
> I need to put the navigation tabs below the content and
have tried to
> cut-n-paste the 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/webforums/forum/categories.cfm?forumid=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.getContentPanelGroup (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.getContentPanelGroup 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.getContentPanelGroup =
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