• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 17 posts ]  Go to page 1, 2  Next
Author Message
 Post subject: jQuery Tabs & AdvancedContent : a nice combination
PostPosted: Mon Nov 21, 2011 4:47 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Tue Jul 27, 2010 3:07 pm
Posts: 23
Location: Belgium
For a while I was looking for a user friendly solution that allows non-technical contributors to add tabbed content to webpages, whitout writing specific code HTML, jQuery script, or whatever).

Thanks to a tip from Ken Griffith, I invested some time in analysing and evaluating the features and possibilities of the AdvancedContent Module. Surprisingly it contained all I needed for my solution. Here is my "tip & trick" for this. It is probably not the perfect solution, but it works for me. (sorry for the long post)

The described solution offers the possibility to add a tabbed content container to a webpage, consisting of :
* 4 tabs which can be individually edited (title; content; on/off)
* a pre-text (text paragraph shown before the tabs)
* a post-text (text paragraph shown after the tabs)

Step-by-Step :
1) I made a copy of the existing webpage template and renamed it "tabbed content"
2) I wrote some extra template code, using the parameters of the AC-module which allowed me to define the different content blocks but also to structure the layout of the backend interface in 1 go !
This code is placed in the DIV were the normal page content is shown
3) The template code was further completed with some smarty logic {if}{/if} to analyse the content blocks and HTML code to display tabbed content in the frontend as per editor settings in the backend.

The template code : (check the AC-module help file for clarification of the different parameters)
\$1:
{* Tabbed Content Template layout based on AdvancedContent Module features *}
{* Content can be edited in separate pagetab in backend *}

{* Define & Assign different elements *}
   {content block='tabs_flag' block_type='checkbox' assign='tabs_flag' description='Check this box to turn on the tabs on this page.' default=false wysiwyg="false" page_tab="Tabbed Content" block_tab="General" collapse="false"}
   
   {content block="pretabtext" label="Pre-Tab Container Text" assign="pretabtxt" wysiwyg="true" page_tab="Tabbed Content" block_tab="Pre/Post Text" collapse="true" description="Enter here the text that will be displayed above the Tabbed Content Container"}
   
   {content block="posttabtext" label="Post-Tab Container Text" assign="posttabtxt" wysiwyg="true" page_tab="Tabbed Content" block_tab="Pre/Post Text" collapse="false" description="Enter here the text that will be displayed below the Tabbed Content Container"}
   
   {content block='tab1_flag' label="Active ? " block_type='checkbox' assign='tab1_flag' description='Check this box to activate this panel.' default=false wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 1" block_group="Panel Parameters" no_collapse="true" collapse="false"}
   {content block="tab1_title" label="Title" assign="tab1_title" wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 1" block_group="Panel Parameters" no_collapse="true" collapse="false" oneline="true"}
   {content block="tab1_content" label="Content" assign="tab1_content" wysiwyg="true" page_tab="Tabbed Content" block_tab="Panel 1" block_group="Panel Parameters" no_collapse="true" collapse="false"}
   
   {content block='tab2_flag' label="Active ? " block_type='checkbox' assign='tab2_flag' description='Check this box to activate this panel.' default=false wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 2" block_group="Panel Parameters" no_collapse="true" collapse="false"}
   {content block="tab2_title" label="Title" assign="tab2_title" wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 2" block_group="Panel Parameters" no_collapse="true" collapse="false" oneline="true"}
   {content block="tab2_content" label="Content" assign="tab2_content" wysiwyg="true" page_tab="Tabbed Content" block_tab="Panel 2" block_group="Panel Parameters" no_collapse="true" collapse="false"}

   {content block='tab3_flag' label="Active ? " block_type='checkbox' assign='tab3_flag' description='Check this box to activate this panel.' default=false wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 3" block_group="Panel Parameters" no_collapse="true" collapse="false"}
   {content block="tab3_title" label="Title" assign="tab3_title" wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 3" block_group="Panel Parameters" no_collapse="true" collapse="false" oneline="true"}   
   {content block="tab3_content" label="Content" assign="tab3_content" wysiwyg="true" page_tab="Tabbed Content" block_tab="Panel 3" block_group="Panel Parameters" no_collapse="true" collapse="false"}

   {content block='tab4_flag' label="Active ? " block_type='checkbox' assign='tab4_flag' description='Check this box to activate this panel.' default=false wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 4" block_group="Panel Parameters" no_collapse="true" collapse="false"}
   {content block="tab4_title" label="Title" assign="tab4_title" wysiwyg="false" page_tab="Tabbed Content" block_tab="Panel 4" block_group="Panel Parameters" no_collapse="true" collapse="false" oneline="true"}   
   {content block="tab4_content" label="Content" assign="tab4_content" wysiwyg="true" page_tab="Tabbed Content" block_tab="Panel 4" block_group="Panel Parameters" no_collapse="true" collapse="false"}
{* END define & assign elements*}

{if $tabs_flag} {* check if tabs/panels container needs to be activated *}
   {if $tab1_flag or $tab2_flag or $tab3_flag or $tab4_flag}
      {* at least 1 panel must be activated inside the container to run the script *}
      {global_content name='GCB_jQs_tabs'} {* execute jQueryTools script *}
   {/if}

   {if $pretabtxt !=""}
      <p>{$pretabtxt}</p> {* Display text above container if not empty *}
   {/if}

   {if $tab1_flag or $tab2_flag or $tab3_flag or $tab4_flag}
      {* at least 1 panel must be activated inside the container to display layout *}
   
   <ul class="tabs"> {* show tabbed content container *}
      {if $tab1_flag}
         <li><a href="#tabs-1"> {* Activate panel and show title in tab *}
            {if $tab1_title !=""}
               {$tab1_title}</a>
            {else}
               Panel 1</a>
            {/if}
         </li>
      {/if}
      
      {if $tab2_flag}
         <li><a href="#tabs-2">
            {if $tab2_title !=""}
               {$tab2_title}</a>
            {else}
               Panel 2</a>
            {/if}
         </li>
      {/if}
      
      {if $tab3_flag}
         <li><a href="#tabs-2">
            {if $tab3_title !=""}
               {$tab3_title}</a>
            {else}
               Panel 3</a>
            {/if}
         </li>
      {/if}
      
      {if $tab4_flag}
         <li><a href="#tabs-4">
            {if $tab4_title !=""}
               {$tab4_title}</a>
            {else}
               Panel 4</a>
            {/if}
         </li>
      {/if}
   </ul>
   {/if}

   {if $tab1_flag or $tab2_flag or $tab3_flag or $tab4_flag}
      {* at least 1 panel must be activated inside the container to display layout *}
   <div class="panes"> {* show panels content *}
      {if $tab1_flag}
         <div id="tabs-1">
            {if $tab1_content !=""}
               {$tab1_content}
            {else}
               {* No Text Here *}
            {/if}
         </div>
      {/if}
   
      {if $tab2_flag}
         <div id="tabs-2">
            {if $tab2_content !=""}
               {$tab2_content}
            {else}
               {* No Text Here *}
            {/if}
         </div>
      {/if}

      {if $tab3_flag}
         <div id="tabs-3">
            {if $tab3_content !=""}
               {$tab3_content}
            {else}
               {* No Text Here *}
            {/if}
         </div>
      {/if}

      {if $tab4_flag}
         <div id="tabs-4">
            {if $tab4_content !=""}
               {$tab4_content}
            {else}
               {* No Text Here *}
            {/if}
         </div>
      {/if}
   </div>
   {/if}

   
   {if $posttabtxt !=""}
      <p>{$posttabtxt}</p> {* Display text below container if not empty *}
   {/if}
   
{/if} {* END of tab flag check *}

{* END of Tabbed Content template block *}


4) the jQuery script to show the tabs is included in a Global Content Block. The script was called externally as the CMS jQueryTools module does not contain the Tabs functionallity

the Global Content Block :
\$1:
{literal} <!-- Call jQuery Library + ALL jQuery Tools -->
<__script__ src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></__script>
<__script__ type="text/javascript">

$(function() {
   $("ul.tabs").tabs("div.panes > div", {
      effect: 'fade',
      onBeforeClick: function(event, i) {
         // get the pane to be opened
         var pane = this.getPanes().eq(i);
         // only load once. remove the if ( ... ){ } clause if you want the page to be loaded every time
         if (pane.is(":empty")) {
            // load it with a page specified in the tab's href attribute
            pane.load(this.getTabs().eq(i).attr("href"));
         }
      }
   });
});
</__script>
{/literal}


5) specific CSS page was created and added to the template page for a nice look of the tabs. You will also notice that CSS-sprites technique is used to show the tab picture.

\$1:
/* root element for tabs  */
ul.tabs {
   list-style:none;
   margin:0 !important;
   padding:0;   
   border-bottom:1px solid #666;   
   height:30px;
        list-style-type: none !important;
}

/* single tab */
ul.tabs li {
   float:left;   
   text-indent:0;
   padding:0;
   margin:0 !important;
   list-style-image:none !important;
}

/* link inside the tab. uses a background image */
ul.tabs a {
   background: url([[root_url]]/uploads/images/icon/blue.png) no-repeat -420px 0;
   font-size:11px;
   display:block;
   height: 30px; 
   line-height:30px;
   width: 134px;
   text-align:center;   
   text-decoration:none;
   color:#333;
   padding:0px;
   margin:0px;   
   position:relative;
   top:1px;
}

ul.tabs a:active {
   outline:none;   
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
   background-position: -420px -31px;   
   color:#fff;   
}

/* active tab uses a class name "current". its highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
   background-position: -420px -62px;      
   cursor:default !important;
   color:#000 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


/* width 1 */
ul.tabs a.s       { background-position: -553px 0; width:81px; }
ul.tabs a.s:hover { background-position: -553px -31px; }
ul.tabs a.s.current  { background-position: -553px -62px; }

/* width 2 */
ul.tabs a.l    { background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover    { background-position: -248px -31px; }
ul.tabs a.l.current  { background-position: -248px -62px; }


/* width 3 */
ul.tabs a.xl    { background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover { background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }


/* initially all panes are hidden */
.panes .pane {
   display:none;      
}

/* tab pane styling */
.panes div {
   display:none;      
   padding:15px 10px;
   border:1px solid #999;
   border-top:0;
   
   font-size:12px;
   background-color:#fff;
}


6) Creating page content :
* Set the content type to "Advanced Content"
* Set the page template to "Tabbed Content"
-> you get the extra interface in the page editing backend, containing the checkboxes & contentblocks of the tabbed container element

I'm not a professional webdeveloper, so this solution has a trial & error development path. It contains copy/paste code elements that I've found on different websites covering the use of jQueryTools.
Unfortunately I can't recall the people of whom I've used the code snippets (jQuery script and CSS). Sorry for that.

I hope this will help other people to integrate tabbed content in their website and to further improve this solution.
Kind Regards
Dirk


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: jQuery Tabs & AdvancedContent : a nice combination
PostPosted: Mon Nov 21, 2011 5:09 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Tue Dec 23, 2008 8:39 pm
Posts: 1369
Great tutorial! I used to use AdvancedContent exclusively. Now when I need checkboxes, I just use CGContentUtilities, which I find to be less overhead, which should also work for the purpose of this tutorial.

One issue (not a CGContentUtils issue, but a CMSMS one) is that all blocks defined by {cms_content} show up at the end when editing a page, and not mixed among the regular {content} blocks in the order specified.

AdvancedContent does give more control and more content types, so I use it on occasion when I need it.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: jQuery Tabs & AdvancedContent : a nice combination
PostPosted: Sat Dec 03, 2011 2:21 am 
Offline
Power Poster
Power Poster

Joined: Fri Mar 30, 2007 2:28 am
Posts: 1015
Location: London
Another way of setting up tabbed content using jQuery UI which is used for a set of pages and children where the top levels are the tabs and the rest the panel content using CGSimpleSmarty to pull in the content.

See these as examples.

http://www.essenza.co.uk/menus/a-la-carte/
http://www.essenza.co.uk/wine/

Each individual item on the menu is a separate page which has the advantage that it is easy for a client to re-order the position of any item.

Global content block below.

\$1:
<div id="rotate">
{assign var='count' value='1'}
<ol>
{foreach from=$cgsimple->get_children('a-la-carte','0',$children) item='child'}
   
    <li><a href="/a-la-carte#tabs-{$count++}"><span>{$cgsimple->get_page_title($child.alias)}</span></a></li>
{/foreach}
</ol>

{assign var='count' value='1'}
{foreach from=$cgsimple->get_children('a-la-carte','0',$children) item='child'}
<div id="tabs-{$count++}">
<p>


<table class="table-menus">
<tr class="menus-titles"><td colspan="2">
{$cgsimple->get_page_title($child.alias)}
</td></tr>
{foreach from=$cgsimple->get_children($child.alias,'0',$children) item='child'}
<tr><td class="td-first">
<span class="bold">{$cgsimple->get_page_title($child.alias)}</span><br />
{$cgsimple->get_page_content($child.alias)}<br />
</td><td valign="bottom" class="td-price">
{$cgsimple->get_page_content($child.alias,'Price')}
</td></tr>
{/foreach}
</table>

</p>
</div>
{/foreach}
</div>


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Great help
PostPosted: Mon Mar 05, 2012 9:36 pm 
Offline
Forum Members
Forum Members

Joined: Thu Aug 28, 2008 7:45 pm
Posts: 149
Location: Minneapolis, MN
Nice tutorial


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: jQuery Tabs & AdvancedContent : a nice combination
PostPosted: Tue Jun 19, 2012 8:14 pm 
Offline
Forum Members
Forum Members

Joined: Thu Aug 28, 2008 7:45 pm
Posts: 149
Location: Minneapolis, MN
Great tutorial.

I'm having a weird thing happen in one of my tabbed content areas.

I have inserted a script in there (that should display a news feed hosted elsewhere) that won't show up. I know the script works because when I embed it onto a regular page, it shows up fine; but not in the tabbed content area. It's weird, because in another one of the tabbed panes (tab #2) I have a different news feed and that one shows up fine.

Any ideas? See: http://test.scsynod.com/ (tab #3).


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: jQuery Tabs & AdvancedContent : a nice combination
PostPosted: Mon Aug 06, 2012 10:07 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Fri Nov 04, 2011 10:10 pm
Posts: 57
Hello, very nice Tip.

I m trying to do this with 1.11 release with simplex template.

In admin area all looks very good.

In the webpage I see tabs, but and if you clic over, this send you to the main page.

I thing that this was not tested in 1.11 (superCMS) but sound great to use in it.
If I use a minimal template all works ok.

This is my testing page:

http://www.accesoexpress.mx/index.php?p ... xico-ambar

Any help or comment?

Thanks in advance


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: jQuery Tabs & AdvancedContent : a nice combination
PostPosted: Tue Aug 07, 2012 8:44 am 
Offline
Power Poster
Power Poster

Joined: Thu Mar 01, 2007 9:44 am
Posts: 253
Location: Belgique
You call in the head : <__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"> </__script>
then before <__body>
<__script__ type="text/javascript" src="http://www.accesoexpress.mx/lib/jquery/js/jquery-1.7.2.min.js"></__script>

Call JQuery only 1 time


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: jQuery Tabs & AdvancedContent : a nice combination
PostPosted: Tue Aug 07, 2012 12:31 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Fri Nov 04, 2011 10:10 pm
Posts: 57
Thanks (Merci).

Allways your help is appreciated.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: jQuery Tabs & AdvancedContent : a nice combination
PostPosted: Wed Aug 08, 2012 3:54 am 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Feb 08, 2007 6:11 pm
Posts: 506
Location: Florida
Why not use Listit2? You could just enter each tab heading, then text, load image, all that jazz and put the module on the page.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: jQuery Tabs & AdvancedContent : a nice combination
PostPosted: Wed Aug 08, 2012 2:21 pm 
Offline
Forum Members
Forum Members
User avatar

Joined: Fri Nov 04, 2011 10:10 pm
Posts: 57
Thanks for Listit tip. I like to have more than one options, like your suggestion.

I find something rare with this Jquery Tabs, that do not show smarty tags results inside tab contents... (see atached image) Any solution?

Testing URL:
http://www.accesoexpress.mx/index.php?p ... xico-ambar

This is in order to let this Tip more useful.


Attachments:
tabs_error.png
tabs_error.png [ 22.54 KiB | Viewed 6474 times ]
Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: jQuery Tabs & AdvancedContent : a nice combination
PostPosted: Wed Aug 08, 2012 2:39 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Wed Aug 15, 2007 8:51 pm
Posts: 561
Location: Nairobi, Kenya
Very nice work, myleen! Would you mind if I used this as an example tutorial for the newsletter?


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: jQuery Tabs & AdvancedContent : a nice combination
PostPosted: Wed Aug 08, 2012 3:43 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Feb 08, 2007 6:11 pm
Posts: 506
Location: Florida
The form is showing up in the html on the page, you need to check the source code or use http://chrispederick.com/work/web-developer/ for chrome and/or firefox.

Probably a css issue, your form is inline or the pane is not clearing. Try adding a

\$1:
<br style="clear:both" />


below the call to the module

Though I can't be sure. It's not a CMSMS issue, it's a css or html issue. Also, you've got 39 errors. It's always good to validate to make sure you have no unenclosed divs and other strange things.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: jQuery Tabs & AdvancedContent : a nice combination
PostPosted: Wed Aug 08, 2012 4:26 pm 
Offline
Power Poster
Power Poster

Joined: Thu Mar 01, 2007 9:44 am
Posts: 253
Location: Belgique
I think this is a JS problem for nested divs. Test with firebug and you can see that all internal divs are in display:none.
Here are other solutions for tabbed pages :
with js : http://www.stunicholls.com/various/tabbed_pages.html
only css : http://www.cssplay.co.uk/menu/one_pagev2.html


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: jQuery Tabs & AdvancedContent : a nice combination
PostPosted: Wed Aug 08, 2012 4:47 pm 
Offline
Power Poster
Power Poster
User avatar

Joined: Thu Feb 08, 2007 6:11 pm
Posts: 506
Location: Florida
Yep, that would be it. I think that there's only one div inside pane with that script. Been a long time since using it, there's easier scripts that don't require so much overhead. Here's a small one that won't require a lot of set up

http://gazpo.com/2012/05/jquery-tabs/


Yes, the contact tab, all things inside a div don't show.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: jQuery Tabs & AdvancedContent : a nice combination
PostPosted: Wed Aug 08, 2012 6:44 pm 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 12670
Location: Arizona
I'm surprised any of your jquery/scripts work as you have the main jQuery called twice...

You really need to clean up your HTML before going any farther...

_________________
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
$1


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 17 posts ]  Go to page 1, 2  Next

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting