Help with Tabbed Panel Content, Please

[concession-supply.com]

We have the tabbed panel content working pretty well now with our site. We would like to get the reviews code working in one of the tabs. How can we get this code:

<tr>
    <td colspan="2"><!--START: reviews-->
      <p>
      <table width="100%" cellpadding="1" cellspacing="1" border="0" >
        <tr>
          <td colspan="4"><table width="100%" cellpadding="2" cellspacing="0" class="titles">
              <tr>
                <td class="titles"> [reviews_header]</td>
                <td align="right" class="titles"><span class="item"><b>[reviews_total] [totalrating]</b>  [review_link]</span></td>
              </tr>
            </table></td>
        </tr>
        <!--START: user_reviews-->
        <tr>
          <td><table width="100%" cellpadding="4" cellspacing="0">
              <tr>
                <td align="left" width="80" class="checkout-headers"><img src="assets/templates/common/images/star[rating].gif"></td>
                <td class="checkout-headers"><b>[short_review]</b></td>
              </tr>
              <tr>
                <td> </td>
                <td class="item">[long_review]</td>
              </tr>
              <tr>
                <td> </td>
                <td class="item">Reviewed by:  <b>[user_name]</b> from [user_city].
                  <!--START: user_email-->
                  <a href="mailto:[user_email]">[user_email]</a>
                  <!--END: user_email-->
                  on [review_date]</td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td class="options-titles" colspan="4"><img src="assets/templates/common/images/spacer.gif" border="0" alt="" height="3"></td>
        </tr>
        <!--END: user_reviews-->
      </table>
      <!--END: reviews2--></td>
  </tr>

into one of the tabbed panels??? When we put it within a tab, it breaks the page up and doesn;t work. Does anyone know what tags or code needs to be removed to work inside a panel?
Thanks in advance! :)

[JustPoppin]

I haven't checked out the code you're using for the tabs so I don't know if this is a solution but if you are using the code exactly as you pasted, then the fact that you have partial table code could be causing your tabs to break.

Try removing the beginning
<tr>
<td colspan="2"><!--START: reviews-->
<p>

AND the end
<!--END: reviews2--></td>
</tr>

and see if that helps.

Just a thought.......

[JustPoppin]

When we put it within a tab, it breaks the page up and doesn;t work. Does anyone know what tags or code needs to be removed to work inside a panel?

I see you've fixed the problem. How'd you do it? :)

[concession-supply.com]

Haven't fixed it yet, it still needs the first and last section of code, so, we still haven't figured out the proper code that would work inside the individual panel. I think it's something to do with the table. :confused: Seems there is 2 td at the begining, but, if I eliminate one, it breaks as well.

[JustPoppin]

Think I have it fixed!!

I've been futzing around with this for a while and I think I've fixed it. I'm still working on the layout for my product page, but the tabs part is done and for me, the Reviews work within the tabs.

I know I removed an extra <tr><td> somewhere, but don't remember where. Why don't you try my Reviews code and see if it works for you. Put the following within your <div></div> tags where you want the reviews to go.

Let me know if it works for you too! :)

<table width="100%" cellpadding="2" cellspacing="0" class="titles">
                <tr>
                  <td class="titles">&nbsp;[reviews_header]</td>
                  <td align="right" class="titles"><span class="item"><strong>[reviews_total] [totalrating]</strong>&nbsp;&nbsp;[review_link]</span></td>
                </tr>
          <!--START: user_reviews-->
          <tr>
            <td>
						<table width="100%" cellpadding="4" cellspacing="0">
                <tr>
                  <td align="left" width="80" class="checkout-headers"><img src="assets/templates/common/images/star[rating].gif"></td>
                  <td class="checkout-headers"><strong>[short_review]</strong></td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td class="item">[long_review]</td>
                </tr>
                <tr>
                  <td>&nbsp;</td>
                  <td class="item">Reviewed by: &nbsp;<strong>[user_name]</strong> from [user_city].
                    <!--START: user_email-->
                    <a href="mailto:[user_email]">[user_email]</a>
                    <!--END: user_email-->
                    on [review_date]</td>
                </tr>
              </table></td>
          </tr>
          <tr>
            <td class="options-titles" colspan="4"><img src="assets/templates/common/images/spacer.gif" border="0" alt="" height="3"></td>
          </tr>
          <!--END: user_reviews-->
        </table>
        <!--END: reviews-->

[concession-supply.com]

That's great that you got it working. Question on your category template......how did you get the rating stars to line up vertically with the "number of reviews" text??? :confused:
As you can see on our site the star ratings are too high and do not line up with the text. Thanks for any advice.
http://www.concession-supply.com/Bev...Cups_c_24.html

[JustPoppin]

Question on your category template......how did you get the rating stars to line up vertically with the "number of reviews" text??? :confused:
As you can see on our site the star ratings are too high and do not line up with the text. Thanks for any advice.
http://www.concession-supply.com/Bev...Cups_c_24.html

Hmmm, I'm not sure what you mean. I actually don't have the star ratings on the Category pages yet (still working through upgrading all the different pages).

On the Home Page where you see Featured Products, the star ratings line up horizontally with the text - they are side by side.

I went to your page and it looked pretty much like mine. I took a screen cap in case it looks differently for you. I'm using Firefox 3.6

Let me know if I'm missing something!

[concession-supply.com]

We still can't get the code to work. This is such a bummer. :(
Does anyone have a tabbed panel that contains the review code that we could take a look at?
There is obviously something wrong with the code in V30014.
Thanks in advance! :)

[cannen]

Using the script I showed you, create a static tab that is always there. Do it like this:

<div id="info_s3" class="tabcontent">
   <div class="font1">
         <--- All the Review Code Here --->
   </div>
</div>

[concession-supply.com]

justpopppin, could you please post your code that is within the div tags?
The code posted above appears to be missing the begining. Thanks in advance! :)

[concession-supply.com]

We've got it figured out now. Apparently, the tables wont work inside our panel, so we deleted the table definitions. Is working better now. :)

[SarahInc]

I am still having issues with getting tabbed content to work. Currently, I have tabbed content set up via a listing template that 3dcart provided. However, I have run into some problems with this working in IE8, despite 3dcart not having this problem. So, I decided to try out the Spry Tabbed Panels.

It appears that the Spry Tabbed Panels work across multiply platforms, however I am having some trouble configuring them. I would like have tabs that do not contain data to then not show. I read though the boards, but when I attempt the suggestions on other tabbed threads it just fixes one problem and creates another.

[concession-supply.com]

we use the Spry tabs. Can we help?
We used the Extra Fields to display or hide tabs as necessary. Another thread had a poster that explained in detail. I can share our code, if interested.
What we did was create a permanent tab for the product description that show by default. Then, created a permanent tab for reviews, that displays at the end. The tabs inbetween, only show if there is data in the first 3 extra fields. For example, if a product doesn;'t hhave an associated video, it wont display.
As another user posted, use the first five extra fields as tab names, and the last five extra fields as tab content, make sense? :)

[SarahInc]

concession-supply.com: I would certainly welcome any help you can provide. I actually use extra fields 1-3, and 6-7. I would like to have the option to be able to use 8 and 9 down the road. My point being using the first five extra fields for tab names wouldn't really work for me.

I tried putting the <!--start: content1--><!--end: content1--> around the field but then the problem I got was that the content in all the fields seemed to disappear, not just the content in the field. Although, I wold rather not have the reviews at the end or always showing up, I would make an exception if it mention the tabs otherwise worked.

If you wouldn't mind sharing your code, I would appreciate it. You can PM me if that is more convenient.

[DaveW]

Anybody have any idea why HTML tables blow up the Spry Tabbed panels?

It basically drops the tables out of the tab and puts it below.

DaveW

EDIT - I fixed it. There was an extra <Table Width=100%.... in the front of my code. It was right between <!--START: extrafields--> and <!--Create the Tabbed Panel widget.... part.

<!--START: extrafields-->
<!--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>
		<!--START: extra_field_1--><li class="TabbedPanelsTab" tabindex="0">[extra_field_1]</li><!--END: extra_field_1-->
		<!--START: extra_field_2--><li class="TabbedPanelsTab" tabindex="0">[extra_field_2]</li><!--END: extra_field_2-->
        <!--START: extra_field_3--><li class="TabbedPanelsTab" tabindex="0">[extra_field_3]</li><!--END: extra_field_2-->
        <!--START: extra_field_4--><li class="TabbedPanelsTab" tabindex="0">[extra_field_4]</li><!--END: extra_field_4-->
        <!--START: extra_field_5--><li class="TabbedPanelsTab" tabindex="0">[extra_field_5]</li><!--END: extra_field_5-->
        	</ul>
	<div class="TabbedPanelsContentGroup">
		<div class="TabbedPanelsContent"><span class="item">[extended_description]<br><br><strong></div>
		<!--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_7-->
        <!--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 language="JavaScript" type="text/javascript"> 
var tp1 = new Spry.Widget.TabbedPanels("tp1", { defaultTab: 0 });
</script>
<!--END: extrafields-->