Tabbed Content Panels

[shopgirltx]

I am having alot of trouble trying to make my content panels tabbed. I used Spry Tabbed Panel Widget to generate my code...but it just doesn't format correctly. I looked at all the other posts related to this, and tried to follow other ppls formats...still not working. My tabs don't interact, and the content is displaying all in one tab. :confused:

I added the SpryTabbedPanels.js to my listings.js, and the SpryTabbedPanels.css to my default.css. I'm sure I've just missed something here. Any help would be appreciated.

http://duhastorage.3dcartstores.com/...ault_p_38.html

[concession-supply.com]

you can view how we implemented our Spry Tabbed Content here:
http://www.concession-supply.com/Gol...ine_p_689.html

Still a work in progress, but, it is functioning as far as we can tell.
Just right click our code for details.
Hope this helps!

[shopgirltx]

How did you handle the SpryTabbedPanels.js, and SpryTabbedPanels.css? Did you insert it into your listing.js, and default.css?

[concession-supply.com]

In order to get it to work properly for us, we had to replace the "Extra Fields" section with our tabbed panels section and implemented it this way:

<!--START: extrafields-->
        <table width="100%" cellpadding="2" cellspacing="0">
<!--Create the Tabbed Panel widget and assign classes to each element-->
	<div class="TabbedPanels" id="tp1">
	<ul class="TabbedPanelsTabGroup">
		<li class="TabbedPanelsTab" tabindex="0">Description</li>
		<li class="TabbedPanelsTab" tabindex="0">Additional Info</li>
		<li class="TabbedPanelsTab" tabindex="0">Literature</li>
                                           <li class="TabbedPanelsTab" tabindex="0">Recommended Uses</li>
                                           <li class="TabbedPanelsTab" tabindex="0">Reviews</li>
                                           <li class="TabbedPanelsTab" tabindex="0">Video</li>
	</ul>
	<div class="TabbedPanelsContentGroup">
		<div class="TabbedPanelsContent"><span class="item">[extended_description]<br><br><strong>[product_extrafield1]</strong> [extra_field_1]<br><strong>[product_extrafield2]</strong> [extra_field_2]<br><strong>[product_extrafield3]</strong> [extra_field_3]<br><strong>[product_extrafield4]</strong> [extra_field_4]<br><strong>[product_extrafield5]</strong> [extra_field_5]</span></div>
		<div class="TabbedPanelsContent"><span class="item">[extra_field_6]</div>
                                           <div class="TabbedPanelsContent"><span class="item"><br><CENTER><a style="TEXT-DECORATION: none" align="left" class="price-info" href="assets/images/pdfs/[mfgid].pdf" target="_blank"><img src="assets/images/pdficon.jpg" border="0" alt="Product Spec Sheet" align="middle"><strong>   Product Spec Sheet</strong></a>            <a style="TEXT-DECORATION: none" align="center" class="price-info" href="Operating-Guides_c_26.html" target="_blank"><img src="assets/images/pdficon.jpg" border="0" alt="Product User Manual" align="middle"><strong>   Product User Manual</strong></a>            <a style="TEXT-DECORATION: none" align="right" class="price-info" href="assets/images/pdfs/[manufacturer_name]_warranty.pdf" target="_blank"><img src="assets/images/pdficon.jpg" border="0" alt="Manufacturer's Warranty" align="middle"><strong>   Product Warranty</strong></a></CENTER></span></div>
                                           <div class="TabbedPanelsContent"><span class="item"><strong>Text<br></strong></span><span class="item">  [extra_field_8]</span></div>
                                           <div class="TabbedPanelsContent"><span class="item"></div>
                                         	<div class="TabbedPanelsContent"><span class="item">[extra_field_10]</span></div>
	</div>
</div>
<script language="JavaScript" type="text/javascript"> 
var tp1 = new Spry.Widget.TabbedPanels("tp1", { defaultTab: 0 });
</script>
<!--END: extrafields-->

The java script is also in the listing template or the frame file, I forgot which. The css is also been modified to our liking. Hope this helps!

[DaveW]

The tabs look great. One very silly question, how do you populate/enter the info in the tabs?

Is that part complicated? I don't want to create listings that only I can edit becuase they take coding. :)

Thanks,

DaveW

[shopgirltx]

That is what I did...so it must be something I've done with the javascript (though I just copy pasted!!). I don't know why else this wouldn't work. My divs aren't ending up in separate fields...It works correctly in a basic format in dreamweaver. When I ftp it into the store, it doesn't function correctly. Anyone have an idea??


<!--START: extrafields-->
<tr>
<td colspan="2"><table width="100%" cellpadding="2" cellspacing="0">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Description</li>
<!--START: extra_field_1--><!--END: extra_field_1-->
<!--START: extra_field_2--><!--END: extra_field_2-->
<!--START: extra_field_3--><!--END: extra_field_3-->
<!--START: extra_field_4--><!--END: extra_field_4-->
<!--START: extra_field_5--><!--END: extra_field_5-->
<!--START: extra_field_6--><li class="TabbedPanelsTab" tabindex="0">Includes:</li><!--END: extra_field_6-->
<!--START: extra_field_7--><li class="TabbedPanelsTab" tabindex="0">Features:</li><!--END: extra_field_7-->
<!--START: extra_field_8--><li class="TabbedPanelsTab" tabindex="0">Specifications:</li><!--END: extra_field_8-->
<!--START: extra_field_9--><li class="TabbedPanelsTab" tabindex="0">Compatible With:</li><!--END: extra_field_9-->
<!--START: extra_field_10--><!--END: extra_field_10-->
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"><h2>HitchSafe Key Vault </h2>The <span style="font-weight: bold;">HitchSafe</span>
slides into your current 2" Trailer Hitch Receiver on your Truck, SUV,
Car or Van and is secured inside the Receiver Hitch with two bolt
retaining bars inside the HitchSafe. <br><br>The Hitch Receiver itself
is a solid steel vault that when combined with the HitchSafe provides
the most secure location on your vehicle to store spare keys, credit
cards, cash and driver's license!!&nbsp;

To access your keys you simply lift off the Rubber dust cover (made to
look like any normal Hitch Cover), enter in your personal 4 number dial
combination, which then releases the drawer and allows access to your
keys.

<br><br>This solution is far superior to the magnetic key holders that
eventually fall off (they are never there when you need them!). If your
magnetic Hide-A-Key has not joined the millions of them laying on the
side of the road, you then have an open invitation for someone to steal
your car because everyone knows where they are hidden!&nbsp; The HitchSafe
is contained within the solid steel structure of the Hitch Receiver via a
combination where only YOU can access your keys when needed.<br><br style="color: rgb(0, 191, 255);"><span style="color: rgb(255, 0, 0);"><span style="font-weight: bold; color: rgb(255, 69, 0);">NOTE:</span><span style="color: rgb(255, 69, 0);">&nbsp;</span> </span>The
2005-2010 Toyota Tacoma and 2007-2010 Toyota Tundra OEM
Hitch Receivers require <a href="product.asp?itemid=41">longer pins</a> to work with the Hitchsafe. <br></div>
<!--START: extra_field_1--><div class="TabbedPanelsContent"></div><!--END: extra_field_1-->
<!--START: extra_field_2--><div class="TabbedPanelsContent"></div><!--END: extra_field_2-->
<!--START: extra_field_3--><div class="TabbedPanelsContent"></div><!--END: extra_field_3-->
<!--START: extra_field_4--><div class="TabbedPanelsContent"></div><!--END: extra_field_4-->
<!--START: extra_field_5--><div class="TabbedPanelsContent"></div><!--END: extra_field_5-->
<!--START: extra_field_6--><div class="TabbedPanelsContent"><ul><li>Hitch Cover</li><li>
flange foam pieces</li><li>
standard hitch pins</li><li>
locking drawer</li><li>
instructions</li></ul></div><!--END: extra_field_6-->
<!--START: extra_field_7--><div class="TabbedPanelsContent"><ul><li>Secure- 10,000 possible combinations</li><li>
Durable- All metal constructionZero Locking - Open the HitchSafe
in the dark</li><li>
Easy to Use</li><li>
Easy to Recombinate</li><li>
Rust Resistant</li><li>
NEVER Be Locked Out Again!</li><li>
Fits multiple automotive keys, house keys, credit cards or license</li><li>
One Year Manufacturer Warranty</li></ul></div><!--END: extra_field_7-->
<!--START: extra_field_8--><div class="TabbedPanelsContent"><p style="margin-left: 40px;">HitchSafe body fits standard 2" Hitch Receiver<br>
Adjustable for pin hole variances<br>
Maximum hole reach from front of receiver to middle of pin hole is
2-9/16"<br>
Maximum body depth into receiver is 4-3/8"</p>
<p style="margin-left: 40px;"><span style="font-weight: bold;">Inner Dimensions of drawer</span><br>
Width- 32mm (1-1/4")<br>
Length- 90mm (3-9/16")<br>
Height- 45mm" (1-3/4")<br>
Fits 2 cards diagonally (credit card or license)</p></div><!--END: extra_field_8-->
<!--START: extra_field_9--><div class="TabbedPanelsContent"><p style="margin-left: 40px;">The HitchSafe fits all makes and models of 2 inch trailer hitch to
include RVs, all OEM and all aftermarket hitch receivers except those
noted below.</p>
<div style="margin-left: 40px;">2005-2010 Toyota Tacoma and 2007-2010 Toyota Tundra OEM Hitch
Receivers require <a href="product.asp?itemid=41">longer pins</a> to work with the Hitchsafe. </div></div><!--END: extra_field_9-->
<!--START: extra_field_10--><div class="TabbedPanelsContent"></div><!--END: extra_field_10-->
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>

</table></td>
</tr>
<!--END: extrafields-->

[concession-supply.com]

Is there a reason the script variable is commented out?

<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->

[concession-supply.com]

We had a similar issue when first setting up. We were missing a closing /DIV tag. :eek:
The whole page was messed up. So, it could be something that simple.

[shopgirltx]

I think it was just like that when I created it with the widget...I took that out, but nothing changed :/

this is my html code before it goes into the page...I don't see anything missing :confused:


<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">[product_Header-description]</li>
<!--START: extra_field_1--><li class="TabbedPanelsTab" tabindex="0">[product_extrafield1]</li><!--END: extra_field_1-->
<!--START: extra_field_2--><li class="TabbedPanelsTab" tabindex="0">[product_extrafield2]</li><!--END: extra_field_2-->
<!--START: extra_field_3--><li class="TabbedPanelsTab" tabindex="0">[product_extrafield3]</li><!--END: extra_field_3-->
<!--START: extra_field_4--><li class="TabbedPanelsTab" tabindex="0">[product_extrafield4]</li><!--END: extra_field_4-->
<!--START: extra_field_5--><li class="TabbedPanelsTab" tabindex="0">[product_extrafield5]</li><!--END: extra_field_5-->
<!--START: extra_field_6--><li class="TabbedPanelsTab" tabindex="0">[product_extrafield6]</li><!--END: extra_field_6-->
<!--START: extra_field_7--><li class="TabbedPanelsTab" tabindex="0">[product_extrafield7]</li><!--END: extra_field_7-->
<!--START: extra_field_8--><li class="TabbedPanelsTab" tabindex="0">[product_extrafield8]</li><!--END: extra_field_8-->
<!--START: extra_field_9--><li class="TabbedPanelsTab" tabindex="0">[product_extrafield9]</li><!--END: extra_field_9-->
<!--START: extra_field_10--><li class="TabbedPanelsTab" tabindex="0">[product_extrafield10]</li><!--END: extra_field_10-->
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">[extended_description]</div>
<!--START: extra_field_1--><div class="TabbedPanelsContent">[extra_field_1]</div><!--END: extra_field_1-->
<!--START: extra_field_2--><div class="TabbedPanelsContent">[extra_field_2]</div><!--END: extra_field_2-->
<!--START: extra_field_3--><div class="TabbedPanelsContent">[extra_field_3]</div><!--END: extra_field_3-->
<!--START: extra_field_4--><div class="TabbedPanelsContent">[extra_field_4]</div><!--END: extra_field_4-->
<!--START: extra_field_5--><div class="TabbedPanelsContent">[extra_field_5]</div><!--END: extra_field_5-->
<!--START: extra_field_6--><div class="TabbedPanelsContent">[extra_field_6]</div><!--END: extra_field_6-->
<!--START: extra_field_7--><div class="TabbedPanelsContent">[extra_field_7]</div><!--END: extra_field_7-->
<!--START: extra_field_8--><div class="TabbedPanelsContent">[extra_field_8]</div><!--END: extra_field_8-->
<!--START: extra_field_9--><div class="TabbedPanelsContent">[extra_field_9]</div><!--END: extra_field_9-->
<!--START: extra_field_10--><div class="TabbedPanelsContent">[extra_field_10]</div><!--END: extra_field_10-->
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", { defaultTab: 0 });
</script>

[concession-supply.com]

clear the cache in store settings and maybe it will take effect.
What directory is your files?

[shopgirltx]

did you make any changes to the spry javascript? Do you remember if you pasted it into your listing javascript code?

[shopgirltx]

My cache isn't enabled, but I cleared it anyways...didn't help.

/web/assets/templates/v30034

[concession-supply.com]

actually, I think we had to rename the listing.js or something like that. Try a search for this topic, I think Gonzalo told us how to make it work. I'll look around. Whatever file you rename, be sure to be able to recover your functionality.

[concession-supply.com]

Here is the top of our listing template file:

<script language="JavaScript" src="assets/templates/common/js/listing2.js" type="text/JavaScript"></script>
<!--Link the CSS style sheet that styles the tabbed panel-->
<link href="Spry/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<!--Link the Spry TabbedPanels JavaScript library-->
<script src="Spry/SpryTabbedPanels.js" type="text/javascript"></script>

I recall renaming the listing.js file, but, not sure what we did. Maybe we just added the Spry code. as you can see we added a Spry folder to the web root. Sorry I can't remember more.

[shopgirltx]

I can't edit the listings.js file in the common folder since 3DCart changed the permissions to the common files. I think that my issues are related to some kind of interaction between the listing.js, and my spry javascript. Did you have any problems with figuring this out?