Author Topic: New droplet: Tabby (creates Tabbed and Accordion blocks of sections)  (Read 5463 times)

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
This droplet creates a jquery tabbed or sliding accordion content block from several WYSIWIG sections. Thanks to Marmot for giving me a hand with some code :-)

You can find the code, info and demo at: http://www.argosmedia.net/wb/pages/droplets/tabby.php

You can use other droplets inside the sections that are used. You can even put Tabby droplets inside Tabby Droplets. So you can put an accordion inside a tabbed block. Or tabbed blocks inside tabbed blocks, etc.
« Last Edit: July 11, 2012, 01:38:43 AM by Argos »
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

Offline dana

  • Posts: 51
    • Webdesign by Dana
Re: New droplet: Tabby (creates Tabbed and Accordion blocks of sections)
« Reply #1 on: October 09, 2012, 07:48:12 PM »
Hi Argos,
this is a wonderful droplet and I really thank you for it! One issue I'm having though - when I want to insert an image in one of the tabbed section, it doesn't come up. Inspecting the source code, it shows this:

Code: [Select]
<img src="{SYSVAR:MEDIA_REL}/something.jpg">
Do you think you can help me with this?

Thank you!

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
Re: New droplet: Tabby (creates Tabbed and Accordion blocks of sections)
« Reply #2 on: October 10, 2012, 12:18:24 AM »
Hi dana,

I'm glad you like the droplet, thanks  :-D

I'm sure it must be someting local that causes your problem, but I don't know what, to be honest. As you can see in my demo using a picture in a tabby section should work fine as in any regular section.

I really don't have a clue what's wrong on your site... I'm sorry.
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

Offline pcwacht

  • Posts: 2923
  • Gender: Male
    • Dutch ICT info
Re: New droplet: Tabby (creates Tabbed and Accordion blocks of sections)
« Reply #3 on: October 10, 2012, 08:16:25 AM »
I think the sysvar error is not related to the droplet, look here for more info : http://www.websitebaker2.org/forum/index.php/topic,23569.0.html


Have fun,
John
http://www.ictwacht.nl = Dutch ICT info
http://www.pcwacht.nl = My first
both still work in progress, since years.....

Offline dana

  • Posts: 51
    • Webdesign by Dana
Re: New droplet: Tabby (creates Tabbed and Accordion blocks of sections)
« Reply #4 on: October 10, 2012, 10:02:27 AM »
It's strange, because other images work fine and there is no SYSVAR, only in the tabby ones.  :-( Thanks for the link, though, I'll check it out.

(I've got 2.8.3 - rev 1638)

jacobi22

  • Guest
Re: New droplet: Tabby (creates Tabbed and Accordion blocks of sections)
« Reply #5 on: February 13, 2013, 06:05:33 PM »
is it possible to check my idee?
i use tabby in a page with some content include some media files. i 've 7 tabs with media files in every tab. i called the droplet code in the main page - this page works fine
in the tabs i have the problem that i have picture links like the post from dana
Code: [Select]
<img src="{SYSVAR:MEDIA_REL}/something.jpg">
it works good, if i dont use SYSVAR:MEDIA_REL (i change the picture link in the database)

the module wysiwyg replace this SYSVAR:MEDIA_REL  with the path to the media folder, but i think, its works only one time (in the main page)

i change the droplet code, define at first the media folder like the code in the wysiwyg / view.php
$sMediaUrl = WB_URL.MEDIA_DIRECT ORY;
and replace SYSVAR:MEDIA_REL in line 26 like this.

Code: [Select]
$fetch_content['content']= str_replace('{SYSVAR:MEDIA_REL}', $sMediaUrl, $fetch_content['content'] );
it works without problems

Droplet-Code Tabby

Code: [Select]
$tabs = explode(",",$titles);
$tabs2 = '';
$contentlist = '';
$content = '';
$sMediaUrl = WB_URL.MEDIA_DIRECTORY;

if (!isset($cssclass)) $cssclass = "";
if (!isset($cssstyle)) $cssstyle = "";

global $database, $wb;
$sections1 = explode(",",$sections);
reset($sections1);
array_unshift($sections1," ");
while($sectionid = next($sections1)){

if($type == "1") {
$tabs2 .= '<li><a href="#">'.(array_shift($tabs)).'</a></li>';
}
elseif($type == "2") {
$tabs2 = array_shift($tabs);
}

$get_content = $database->query("SELECT content FROM ".TABLE_PREFIX."mod_wysiwyg WHERE section_id = '$sectionid'");
while ( $fetch_content = $get_content->fetchRow()){

$fetch_content['content']= str_replace('{SYSVAR:MEDIA_REL}', $sMediaUrl, $fetch_content['content'] );

if($type == "1") {
$contentlist .= '<div class="pane">'.$content.($fetch_content['content']).'</div>';
}
elseif($type == "2") {
$contentlist .= '<div class="title">'.$tabs2.'</div><div class="pane">'.$content.($fetch_content['content']).'</div>';
}

}
}
$wb->preprocess($content);

if($type == "1") {
return '<div class="wrap-tabs '.$cssclass.'" style="'.$cssstyle.'"><ul class="tabs">'.$tabs2.'</ul>'.$contentlist.'</div>';
}
elseif($type == "2") {
return '<div class="wrap-accordion">'.$contentlist.'</div>';
}

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
Re: New droplet: Tabby (creates Tabbed and Accordion blocks of sections)
« Reply #6 on: February 14, 2013, 04:04:44 PM »
Thanks for your improvement. It seems to work fine. See http://www.argosmedia.net/wb/pages/tabby2.php where I use your code.

Maybe some others are willing to try it too, let's wait and see. But I think I will change the Tabby droplet to this new version soon. Thanks again!
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!