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
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
Craig
KC Media Solutions
www.kcmedia.biz
Re: [kcmedia] Spry Tabbed Panels
By Toledoh - June 19, 2010
<ul>
for each...
<li>..
end
</ul>
<div>
for each
<div></div>
end
</div>
That help?
Tim (toledoh.com.au)
Re: [Toledoh] Spry Tabbed Panels
By KCMedia - June 19, 2010
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
Craig
KC Media Solutions
www.kcmedia.biz
Re: [kcmedia] Spry Tabbed Panels
By Jason - June 21, 2010
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: [Jason] Spry Tabbed Panels
By KCMedia - June 21, 2010
Here is the link to the output file http://www.goldeneaglefiji.com/fishing-itinerariestest.php
and also the file.
thanks
Craig
Craig
KC Media Solutions
www.kcmedia.biz
Re: [kcmedia] Spry Tabbed Panels
By Jason - June 21, 2010
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
I tried that but no good maybe i didnt put it into the code right can you please have a look.
Craig
KC Media Solutions
www.kcmedia.biz
Re: [kcmedia] Spry Tabbed Panels
By Jason - June 21, 2010
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
That is perfect thank you very much
Craig
Craig
KC Media Solutions
www.kcmedia.biz