jQuery Tabs & AdvancedContent : a nice combination

Do something cool with CMS? Show us ...
This board is for 'Answers', and the discussion of answers... Not for questions.
User avatar
myleen99
Forum Members
Forum Members
Posts: 23
Joined: Tue Jul 27, 2010 3:07 pm
Location: Belgium

jQuery Tabs & AdvancedContent : a nice combination

Post by myleen99 »

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)

Code: Select all

{* 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 :

Code: Select all

{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.

Code: Select all

/* 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
Wishbone
Power Poster
Power Poster
Posts: 1369
Joined: Tue Dec 23, 2008 8:39 pm

Re: jQuery Tabs & AdvancedContent : a nice combination

Post by Wishbone »

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.
applejack
Power Poster
Power Poster
Posts: 1015
Joined: Fri Mar 30, 2007 2:28 am
Location: London

Re: jQuery Tabs & AdvancedContent : a nice combination

Post by applejack »

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.

Code: Select all

<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>
twwitt
Forum Members
Forum Members
Posts: 149
Joined: Thu Aug 28, 2008 7:45 pm
Location: Minneapolis, MN

Great help

Post by twwitt »

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

Re: jQuery Tabs & AdvancedContent : a nice combination

Post by twwitt »

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).
soportepro
Forum Members
Forum Members
Posts: 57
Joined: Fri Nov 04, 2011 10:10 pm

Re: jQuery Tabs & AdvancedContent : a nice combination

Post by soportepro »

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
Jean le Chauve

Re: jQuery Tabs & AdvancedContent : a nice combination

Post by Jean le Chauve »

You call in the head : <__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... ery.min.js"> </__script>
then before <__body>
<__script__ type="text/javascript" src="http://www.accesoexpress.mx/lib/jquery/ ... "></__script>

Call JQuery only 1 time
soportepro
Forum Members
Forum Members
Posts: 57
Joined: Fri Nov 04, 2011 10:10 pm

Re: jQuery Tabs & AdvancedContent : a nice combination

Post by soportepro »

Thanks (Merci).

Allways your help is appreciated.
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: jQuery Tabs & AdvancedContent : a nice combination

Post by carasmo »

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.
soportepro
Forum Members
Forum Members
Posts: 57
Joined: Fri Nov 04, 2011 10:10 pm

Re: jQuery Tabs & AdvancedContent : a nice combination

Post by soportepro »

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
kendo451

Re: jQuery Tabs & AdvancedContent : a nice combination

Post by kendo451 »

Very nice work, myleen! Would you mind if I used this as an example tutorial for the newsletter?
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: jQuery Tabs & AdvancedContent : a nice combination

Post by carasmo »

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

Code: Select all

<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.
Jean le Chauve

Re: jQuery Tabs & AdvancedContent : a nice combination

Post by Jean le Chauve »

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
carasmo
Power Poster
Power Poster
Posts: 506
Joined: Thu Feb 08, 2007 6:11 pm
Location: Florida

Re: jQuery Tabs & AdvancedContent : a nice combination

Post by carasmo »

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.
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: jQuery Tabs & AdvancedContent : a nice combination

Post by Dr.CSS »

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...
Post Reply

Return to “Tips and Tricks”