Spry Tabbed Panels

9 posts by 3 authors in: Forums > CMS Builder
Last Post: June 21, 2010   (RSS)

By KCMedia - June 19, 2010 - edited: June 19, 2010

Hi

I want to use a Spry Tabbed Panel to show information.

I have used them before but it was only 2 tabs and they where fixed.
What i need to be able to do is this.
I have setup a multi section in CMSB and i want it so that when i create a new record in the section it will create a new tab in the spry with all the content.

Here is the code i have in there that i thought might work.



<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<?php foreach ($fishing_itinerariesRecords as $record): ?>
<li class="TabbedPanelsTab" tabindex="0"><?php echo $record['title'] ?></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"><?php echo $record['content'] ?></div>
<?php endforeach ?>

<?php if (!$fishing_itinerariesRecords): ?>
No records were found!<br/><br/>
<?php endif ?>
<!-- /STEP2: Display Records -->
</div>
</div>

Anyone able to help with this.

Craig
Thanks



Craig

KC Media Solutions

www.kcmedia.biz

Re: [kcmedia] Spry Tabbed Panels

By Toledoh - June 19, 2010

I think you have to have 2 separate loops running, ie;

<ul>
for each...
<li>..
end
</ul>

<div>
for each
<div></div>
end
</div>

That help?
Cheers,

Tim (toledoh.com.au)

Re: [Toledoh] Spry Tabbed Panels

By KCMedia - June 19, 2010

Hi Tim

Thanks for that but i dont think that is right because you need to have both because that is the way that spry needs it normaly.

anyone able to shed some light on this issue.

Craig
Thanks



Craig

KC Media Solutions

www.kcmedia.biz

Re: [kcmedia] Spry Tabbed Panels

By Jason - June 21, 2010

Hi Craig,

If you could attach the .php file you're currently working with as well as a link to what it's currently outputting, I can take a closer look at this for you.

Thanks.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [kcmedia] Spry Tabbed Panels

By Jason - June 21, 2010

Hi Craig,

It looks like the problem is that you're only creating one <div> tag called <div id="TabbedPanels1"> and then outputting multiple records inside of it. Also, the javascript is only creating a TabbedPanel only for the first one.

What we can do is create a different <div> for each record and output our javascript dynamically.

Something like this:

<?php $count=1; ?>
<?php foreach ($fishing_itinerariesRecords as $record): ?>
<div id="TabbedPanels<?php echo $count;?>" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"><?php echo $record['title'] ?></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"><?php echo $record['content'] ?></div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels<?php echo $count;?> = new Spry.Widget.TabbedPanels("TabbedPanels<?php echo $count;?>");
//-->
</script>
<?php $count++; ?>
<?php endforeach ?>

With this code, we create 1 div for each record in the database and give it a dynamic number (TabbedPanesl1, TabbedPanels2,TabbedPanels3, etc). We then output our content and dynamically create a javascript variable the same way.

Try this and let me know how you make out. If you run into any trouble, please attach your updated .php file.

Hope this helps.
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] Spry Tabbed Panels

By KCMedia - June 21, 2010

Hi jason

I tried that but no good maybe i didnt put it into the code right can you please have a look.
Thanks



Craig

KC Media Solutions

www.kcmedia.biz
Attachments:

fishing-itinerariestest_001.php 10K

Re: [kcmedia] Spry Tabbed Panels

By Jason - June 21, 2010

Hi,

Okay, I think I see better what we're trying for.

I think that Toledoh was right when he said that we needed 2 foreach loops, one for the title, one for the content.

Try this code:

<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<?php foreach ($fishing_itinerariesRecords as $record): ?>
<li class="TabbedPanelsTab" ><?php echo $record['title'] ?></li>
<?php endforeach ?>
</ul>
<div class="TabbedPanelsContentGroup">
<?php foreach ($fishing_itinerariesRecords as $record): ?>
<div class="TabbedPanelsContent"><?php echo $record['content'] ?></div>
<?php endforeach ?>
</div>
</div>

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

Hope this helps
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] Spry Tabbed Panels

By KCMedia - June 21, 2010

Hi Jason

That is perfect thank you very much

Craig
Thanks



Craig

KC Media Solutions

www.kcmedia.biz