Topic: Switching block content

[Divecall]

I was doing a code to add "attachmentsImage" (last Pictures). Good is: i have no error-message.

The bad is: it is not working like i want, because it "never clears" the block. All the 3 things are in one block. Can somebody help ?

Code: [Select]

global $txt;

$txt['recent_topics'] = 'Recent Topics';
$txt['recent_posts'] = 'Recent Posts';
$txt['attachment_image'] = 'Letzte Bilder';

$buttons = array(
   'recent_topics' => array(
      'text' => 'recent_topics',
      'image' => '',
      'lang' => true,
      'url' => '#recent_topics" id="b_rt" onclick="change_display(\'rp\'); return false;',
      'active' => true,
   ),
   'recent_posts' => array(
      'text' => 'recent_posts',
      'image' => '',
      'lang' => true,
      'url' => '#recent_posts" id="b_rp" onclick="change_display(\'rt\'); return false;',
   ),
   'attachment_recent' => array(
      'text' => 'attachment_image',
      'image' => '',
      'lang' => true,
      'url' => '#attachments_image" id="b_ai" onclick="change_display(\'ai\'); return false;',
   ),
);

echo '
<div style="overflow: auto;">
   ', template_button_strip($buttons), '
</div>
<div id="recent_topics">
   ', sp_recent(array('type' => 1, 'display' => 1, 'limit' => 10), 0), '
</div>
  <div id="attachent_recent">
   ', sp_attachmentImage(array('display' => 1, 'limit' => 10), 0), '
</div>
<div id="recent_posts" style="display: none;">
   ', sp_recent(array('display' => 1, 'limit' => 10), 0), '
</div>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
   function change_display(block)
   {
      var current = block == \'rt\' ? 1 : 0;

      document.getElementById(\'recent_topics\').style.display = current ? \'none\' : \'\';
      document.getElementById(\'recent_posts\').style.display = current ? \'\' : \'none\';
      document.getElementById(\'attachments_image\').style.display = current ? \'\' : \'none\';
      document.getElementById(\'b_rt\').className = current ? \'button_strip_recent_topics\' : \'button_strip_recent_topics active\';
      document.getElementById(\'b_rp\').className = current ? \'button_strip_recent_posts active\' : \'button_strip_recent_posts\';
      document.getElementById(\'b_aI\').className = current ? \'button_strip_attachment_image active\' : \'button_strip_attachment_image\';
   }
// ]]></script>';

[AngelinaBelle]

When you load the page, the error on the page is the first clue as to what is wrong.
Object Required document.getElementById('attachments_image').style.display = current ? '' : 'none';
and, when you hit the rp button, you will show rp (and vice versa).  Bug or feature?
 
But here's another question -- Don't you want a strip of buttons that, when pushed, will cause different divs to become visible.
 
You seem to be working on a strip of buttons that loads up 3 divs and only shows one. When you press a button, you reload the page, reload all 3 divs, and then choose one to display.
You don't really need to do both.
 
1) You could have just one div, with the contents chosen based on the URL.
2) You could make a button strip that does not reload the page.
 
Actually, a very small modification to template_button_strip could do option 2 for you:
 

Code: (find) [Select]

'" href="' . $value['url'] . '"'


Code: (replace) [Select]

( isset($value['url']) ?  '" href="' . $value['url'] . '"' : '' )

Then you could use 'custom' for your id and onclick stuff.

[AngelinaBelle]

Oh! I wasn't reading very carefully.
I see now what you are up to.
The problem is merely that the logic from Sinan's example is good for 2 tabs, bot no good for three.
 
You are not the only user who wants to expand this to 3 or more tabs.
Please see http://simpleportal.net/index.php?topic=6743.msg38537#msg38537
for an example of a potential solution to your problem.
 
Your things could be something like:

Code: [Select]

$things = array(
'rp' => array( 'txt'=>'recent_posts', 'title'=> 'Recent Posts', 'type' => 0, 'boards' =>'14', 'active' => true),
'rt' => array('txt'=>'recent_topics', 'title'=> 'Recent Topics', 'type' => 1, 'boards' =>'', 'active' => false),
'ai' => array('txt'=>'recent_attachments', 'title'=> 'Letzte Bilder', 'type' => 2, 'boards' =>'', 'active' => false),
);

But you could use your already-working php code to create the divs which contain your content, and you could work with my sample code to create the $things elements and the javascript to make the buttons work.