Dreamweaver tabbed panels problem

[ewhizz]

I am using v9 Actinic and Dreamweaver cs3 spry tabbed panels.
I have made a new template using a standard layout but added tabbed panels and all looks good on actinic v9 designer but when uploaded, the tabs aren't shown and all the info of all the tabs is layed out one after the other on the internet once uploaded!
I think this may have something to do with the css file???
Can anyone help with this please?

[IanSaunders]

do you have a link...?

[ewhizz]

Yes, http://www.radiatorsandboilers.co.uk...on_Boiler.html
Thank you for looking at this!

[IanSaunders]

Nope, got it.

Right, it looks like the CSS for the specific classes isn't being applied. I can see you have classes of TabbedPanels, TabbedPanelsTabGroup, TabbedPanelsTab and TabbedPanelsContent, as well as an id of TabbedPanels1 within your HTML, but no corresponding CSS declarations.

I've had a look at your actinic.css and theme.css files, but they're not in there.

[IanSaunders]

actually, having thought a little more about it (I'm not good at these early mornings), I also can't see any javascript that looks like it would control this functionality either.

[ewhizz]

The javascript variable declaration was commented out at the bottom of the script so have changed that. The tabbed panels css is at the top of the page and is now uncommented. And the css has been added to the css file along with other declarations for the whole site, but still not working

[ewhizz]

I don't know if this will help you at all!

<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style type="text/css">

.style1 {font-size: x-small;}
.style2 {
font-size: medium;
border-top-color: #33CCFF;
border-right-color: #33CCFF;
border-bottom-color: #33CCFF;
border-left-color: #33CCFF;
}
.TabbedPanelsContent {background-color: #ffffff;}
.style3 {font-size: medium}
.style4 {font-family: Arial, Helvetica, sans-serif}
.style6 {font-family: "Times New Roman", Times, serif}
.style9 {font-family: Verdana, Arial, Helvetica, sans-serif}

</style>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductFormUsed%22%20%2f%3e" >
<form method="post" action="<actinic:variable value="Shopping Cart Script URL" name="OnlineScriptURL" />">
<input type="hidden" name="SID" value="<actinic:variable name="SectionID" />" />
<input type="hidden" name="PAGE" value="PRODUCT" />
<input type="hidden" name="PAGEFILENAME" value="<actinic:variable name="SectionPageName" />" />
<Actinic:SECTION BLOB='<actinic:variable name="SectionCatFile" />'/>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e" >
<!-- Hidden field when in trial mode -->
<input type="hidden" name="SHOP" value="<actinic:variable name="HiddenFields" />" />
</actinic:block>
</actinic:block>

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="30%" align="left" valign="top"><actinic:variable name="ProductImageLayout" />
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsQuantityPromptShown%22%20%2f%3e%20AND%20%28%3cactinic%3avariable%20name%3d%22IsOutOfStockShown%22%20%2f%3e%20%3d%3d%20FALSE%29%20AND%20%28%3cactinic%3avariable%20name%3d%22IsCatalogSuspendedShown%22%20%2f%3e%20%3d%3d%20FALSE%29" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22EnabledForCustomerGroupID%22%20%2f%3e%20%21%3d%20%22%22" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e%20%3d%3d%20FALSE" ><span class=''actrequired''>
<actinic:variable name="QuantityPrompt" />
</span>&nbsp;
<input type=''text'' name='input'Q_<actinic:variable name="ProductID" />'' size=''4'' value=''<actinic:variable name="DefaultQuantity" />'' />
</actinic:block>
</actinic:block>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsQuantityPromptHidden%22%20%2f%3e" >
<input type="hidden" name="Q_<actinic:variable name="ProductID" />2" value="<actinic:variable name="DefaultQuantity" />" />
</actinic:block>
</td>
<td width="70%" align="left" valign="top">
<p><a name="<actinic:variable name="EncodedProductAnchor" />">
<b>
<actinic:variable encoding="actinic" name="ProductName" />
</b></a>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductReferenceVisible%22%20%2f%3e" >
Ref:
<actinic:variable name="ProductReference" />
</actinic:block>
</p>
<p>
<actinic:variable name="RetailCustomerMessage" />
<b>
<actinic:variable name="PriceListRetail" />
</b></p>
<p><span class="actrequired">
<actinic:variable name="QuantityPrompt" />
</span>
<input type="text" name="Q_<actinic:variable name="ProductID" />3" size="4" value="<actinic:variable name="DefaultQuantity" />" />
</p>
<p>
<actinic:variable name="AddToCartButton" />
</p>
</td>
</tr>
</table>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab style1 style2 style9 style4" tabindex="0">Description</li>
<li class="TabbedPanelsTab style2 style6 style4 style4 style9" tabindex="0">Specifications</li>
<li class="TabbedPanelsTab style3 style9" tabindex="0">Info Links</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<actinic:variable name="ProductDescription" />
</div>
<div class="TabbedPanelsContent">
<table width="100%" border="0" cellspacing="2" cellpadding="5">
<tr>
<actinic:block if="%3cactinic%3avariable%20name%3d%22Output%22%20%2f%3e%20%21%3d%27%27" >
<td bgcolor=#00ccff align="center"><b>Output</b> </td>
<td bgcolor=#d6ebff align="center"><actinic:variable name="Output" /> kw </td>
</actinic:block>
</tr>
<tr>
<actinic:block if="%3cactinic%3avariable%20name%3d%22Efficiency%22%20%2f%3e%20%21%3d%27%27" >
<td bgcolor=#00CC66 align="center"><b>Efficiency</b> </td>
<td bgcolor=#99FF99 align="center"><actinic:variable name="Efficiency" /> % </td>
</actinic:block>
</tr>
<tr>
<actinic:block if="%3cactinic%3avariable%20name%3d%22Sedbuk%22%20%2f%3e%20%21%3d%27%27" >
<td bgcolor=#99ccff align="center"><b>Sedbuk Band</b> </td>
<td bgcolor=#d6ebff align="center"><actinic:variable name="Sedbuk" /> </td>
</actinic:block>
</tr>
<tr>
<actinic:block if="%3cactinic%3avariable%20name%3d%22Warranty%22%20%2f%3e%20%21%3d%27%27" >
<td bgcolor=#99ccff align="center"><b>Warranty</b> </td>
<td bgcolor=#d6ebff align="center"><actinic:variable name="Warranty" /> yrs </td>
</actinic:block>
</tr>
<tr>
<actinic:block if="%3cactinic%3avariable%20name%3d%22MaxVertFlueLength%22%20%2f%3e%20%21%3d%27%27" >
<td bgcolor=#99ccff align="center"><b>Max Vertical Flue Length</b></td>
<td bgcolor=#d6ebff align="center"><actinic:variable name="MaxVertFlueLength" /> mtrs </td>
</actinic:block>
</tr>
<tr>
<actinic:block if="%3cactinic%3avariable%20name%3d%22MaxHorizFlueLength%22%20%2f%3e%20%21%3d%27%27" >
<td bgcolor=#99ccff align="center"><b>Max Horizontal Flue Length</b></td>
<td bgcolor=#d6ebff align="center"><actinic:variable name="MaxHorizFlueLength" /> mtrs </td>
</actinic:block>
</tr>
<tr>
<actinic:block if="%3cactinic%3avariable%20name%3d%22Fuel%20type%22%20%2f%3e%20%21%3d%27%27" >
<td bgcolor=#99CCFF align="center"><b>Fuel Type</b> </td>
<td bgcolor=#D6EBFF align="center"><actinic:variable name="Fuel type" /> </td>
</actinic:block>
</td>
</tr>
<tr>
<actinic:block if="%3cactinic%3avariable%20name%3d%22DomesticFlowRate%22%20%2f%3e%20%21%3d%27%27" >
<td bgcolor=#99CCFF align="center"><b>Domestic Flow Rate</b> </td>
<td bgcolor=#D6EBFF align="center"><actinic:variable name="DomesticFlowRate" /> ltrs/min</td>
</actinic:block>
</td>
</tr>
<tr>
<actinic:block if="%3cactinic%3avariable%20name%3d%22FillingLoop%22%20%2f%3e%20%21%3d%27%27" >
<td bgcolor=#99CCFF align="center"><b>Filling Loop inc</b> </td>
<td bgcolor=#D6EBFF align="center"><actinic:variable name="FillingLoop" /> </td>
</actinic:block>
</td>
</tr>
<tr>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IntegralTimeClock%22%20%2f%3e%20%21%3d%27%27" >
<td bgcolor=#99CCFF align="center"><b>Integral Time Clock</b> </td>
<td bgcolor=#D6EBFF align="center"><actinic:variable name="IntegralTimeClock" /> </td>
</actinic:block>
</td>
</tr>
<p></p>
<p></p>
<tr>
<actinic:block if="%3cactinic%3avariable%20name%3d%22Controls%22%20%2f%3e%20%21%3d%27%27" >
<td bgcolor=#99CCFF align="center"><b>Controls</b> </td>
<td bgcolor=#D6EBFF align="center"><actinic:variable name="Controls" /> </td>
</actinic:block>
</td>
</tr>
<p></p>
<p></p>
<tr>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PreCast%22%20%2f%3e%20%21%3d%27%27%20%26%20%3cactinic%3avariable%20name%3d%22PreFab%22%20%2f%3e%20%21%3d%27%27%20%26%20%3cactinic%3avariable%20name%3d%22Chimney%22%20%2f%3e%20%21%3d%27%27" >
<td bgcolor=#99CCFF align="center"><b>Chimney Type(s)</b> </td>
<td bgcolor=#D6EBFF align="center"><actinic:block if="%3cactinic%3avariable%20name%3d%22Chimney%22%20%2f%3e%20%3d%3d%20%271%27" > <a href='http://www.radiatorsandboilers.co.uk/acatalog/Chimney_and_Flue_Types.html'><img src='BrickChimney.jpg' border='0'/></a> </actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PreFab%22%20%2f%3e%20%3d%3d%20%271%27" > <a href='http://www.radiatorsandboilers.co.uk/acatalog/Chimney_and_Flue_Types.html'><img src='PreFabFlue.jpg' border='0'/></a> </actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22PreCast%22%20%2f%3e%20%20%3d%3d%201" > <a href='http://www.radiatorsandboilers.co.uk/acatalog/Chimney_and_Flue_Types.html'><img src='PreCastFlue.jpg' border='0'/></a> </actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22NoChimney%22%20%2f%3e%20%3d%3d%201" > <a href='http://www.radiatorsandboilers.co.uk/acatalog/Chimney_and_Flue_Types.html'><img src='No Chimney.jpg' border='0'/></a> </actinic:block>
</actinic:block>
</td>
<p></p>
<p></p>
</tr>
</table>
<table width="100%" border="0" cellspacing="2" cellpadding="5">
<tr>
<actinic:block if="%3cactinic%3avariable%20name%3d%22Height%22%20%2f%3e%20%21%3d%27%27" >
<td bgcolor=#99CCFF align="center"><b>Height</b> </td>
<td bgcolor=#D6EBFF align="center"><actinic:variable name="Height" selectable="false" />mm </td>
</actinic:block>
</tr>
<tr>
<actinic:block if="%3cactinic%3avariable%20name%3d%22Width%22%20%2f%3e%20%21%3d%27%27" >
<td bgcolor=#99CCFF align="center"><b>Width </b></td>
<td bgcolor=#D6EBFF align="center"><actinic:variable name="Width" />mm </td>
</actinic:block>
</tr>
<tr>
<actinic:block if="%3cactinic%3avariable%20name%3d%22Depth%22%20%2f%3e%20%21%3d%27%27" >
<td bgcolor=#99CCFF align="center"><b>Depth</b> </td>
<td bgcolor=#D6EBFF align="center"><actinic:variable name="Depth" />mm </td>
</actinic:block>
</tr>
</table>
</div>
<div class="TabbedPanelsContent">
<p><a href="<actinic:variable name="ProductLinkInfo" />" target="_blank">
<actinic:variable formatting="font(Color|0000ff)" encoding="actinic" name="ProductLinkText" />
</a><img src="pdficon.gif" width="24" height="24" /></p>
<p><a href="<actinic:variable name="InstallationInstructions" />"target="_blank">
<Font color="blue">Installation Instructions</font>
</a><img src="pdficon.gif" width="24" height="24" /></p>
</div>
</p>
</div>
</div>
</div>
<p><br />
</p>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductDescription%22%20%2f%3e%20%21%3d%20%22%22" > </actinic:block>

</b>
<p>
<actinic:variable name="ExtendedInformationLinks" />
<actinic:block if="%3cactinic%3avariable%20name%3d%22FileURLNotEmpty%22%20%2f%3e" >
<br />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsCustomerMessageUsed%22%20%2f%3e" ><br />
<Actinic:PRICE_EXPLANATION PROD_REF="<actinic:variable name="ProductID" />" COMPONENTID=-1></Actinic:PRICE_EXPLANATION>
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22PriceIsEnabled%22%20%2f%3e" >
<b>
<Actinic:PRICES PROD_REF="<actinic:variable name="ProductID" />" RETAIL_PRICE_PROMPT="<actinic:variable name="ProductPriceDescription" />"></Actinic:PRICES>
</b> </actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e%20%3d%3d%20False" >
<Actinic:NOTINB2B><br />
<strong>
<actinic:variable name="ProductPriceNotEnabledMessage" />
</strong></Actinic:NOTINB2B>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22DiscountDescriptionIsShownForProducts%22%20%2f%3e" >
<br />
<actinic:variable value="Standard Discount List" name="DiscountList" />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsOtherInfoPromptShown%22%20%2f%3e" >
<br />
<span class="actrequired">
<actinic:variable name="OtherInfoPrompt" />
</span><br />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsDatePromptShown%22%20%2f%3e" >
<input type="text" name="O_<actinic:variable name="ProductID" />" size="40" maxlength="1000" value="" />
<br />
<span class="actrequired">
<actinic:variable name="DatePrompt" />
</span><br />
<actinic:variable name="DayList" />
<actinic:variable name="MonthList" />
<actinic:variable name="YearList" />
</actinic:block>

<actinic:variable name="AttributeList" />
<actinic:variable name="ComponentList" />

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsQuantityPromptShown%22%20%2f%3e%20AND%20%28%3cactinic%3avariable%20name%3d%22IsOutOfStockShown%22%20%2f%3e%20%3d%3d%20FALSE%29%20AND%20%28%3cactinic%3avariable%20name%3d%22IsCatalogSuspendedShown%22%20%2f%3e%20%3d%3d%20FALSE%29" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22CartButtonVisibleToAllCustomers%22%20%2f%3e" >
<!-- This code is used when the quantity box is visible to all customers -->
<br />
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22EnabledForCustomerGroupID%22%20%2f%3e%20%21%3d%20%22%22" >
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e" >
<!-- This code is used when the quantity box is visible to retail customers, but not all other customer groups -->
<Actinic:ShowForPriceSchedule Schedules="<actinic:variable name="EnabledForCustomerGroupID" />"><span class="actrequired">
<actinic:variable name="QuantityPrompt" />
</span>
&nbsp;
<input type="text" name="Q_<actinic:variable name="ProductID" />" size="4" value="<actinic:variable name="DefaultQuantity" />" />
</Actinic:ShowForPriceSchedule>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e%20%3d%3d%20FALSE" >
<!-- This code is used when the quantity box needs to hidden from retail customers -->
<Actinic:ShowForPriceSchedule Schedules="<actinic:variable name="EnabledForCustomerGroupID" />" HTML="br /></actinic:block>
</actinic:block>
</actinic:block>
<actinic:variable name="CartError" />

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsAddToCartButtonShown%22%20%2f%3e%20AND%20%0d%28%3cactinic%3avariable%20name%3d%22NumberAttributesInPushButtonGrid%22%20%2f%3e%20%3d%3d%200%29" >
<br />
</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsOutOfStockShown%22%20%2f%3e" ><strong><span class="actrequired">
<actinic:variable name="OutOfStock" />
</span></strong> </actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsCatalogSuspendedShown%22%20%2f%3e" >
<br />
<strong><span class="actrequired">
<actinic:variable name="CatalogSuspended" />
</span></strong> </actinic:block>

<actinic:variable name="ProductAlsoBoughtList" />

<actinic:variable name="ProductRelatedProductsList" />
</p>




<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductFormUsed%22%20%2f%3e">
</form>
</actinic:block>
<script type="text/javascript">

var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");

</script>

[IanSaunders]

Not really...

I think this is your problem(s):

The requested URL /acatalog/SpryAssets/SpryTabbedPanels.js was not found on this server.

...and...

The requested URL /acatalog/SpryAssets/SpryTabbedPanels.css was not found on this server.

The page can't see these assets. I believe the path is wrong since all Actinic content is uploaded to the acatalog folder. Try changing the path in the <style> and <script> tags to remove the "/SpryAssets/" folder,
eg. <script src="SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryTabbedPanels.css" rel="stylesheet" type="text/css" />

[ewhizz]

When I removed the spryasset path the widget didn't appear as tabbed panels.
I looked at the documentation for the widget and it tells me to insert in the page <head> section, but there is no head section on an inner layout!
Would this make a difference?

[IanSaunders]

The <head> section ought to be in the outer layout. Put <script> and <style> parts in there.

[ewhizz]

Thanks again for spending time on this problem.
I have moved and deleted and changed the suggestion you have given, but each time something else doesn't work. The ridiculous thing about this is that the widget works fine on my computer but not after loading to the internet!

[IanSaunders]

http://www.radiatorsandboilers.co.uk...bbedPanels.css does not exist on the webserver.

Make sure it's in your site folder. If it's already there, add it to the upload via design > additional files

[ewhizz]

I have added the spryassets folder and associated .js and .css files to the root directory if actinic and and error comes up when uploading site saying that there is a path error in the .css file.

[ewhizz]

Problem solved!
I just copied and pasted the tabbedpanels.css file contents into the actinic stylesheet and all is fine.
Thanks again for your input.