Customization > Custom Coding

Creating a Panels Tab in a Custom PHP Block Completed

<< < (2/21) > >>

Blue:
Something like this?

--- Code: ---<?php 
global $txt;

$txt['all_boards'] = 'All Boards';
$txt['board_1'] = 'Board 1';

$buttons = array(
   'all_boards' => array(
      'text' => 'all_boards',
      'image' => '',
      'lang' => true,
      'url' => '#all_boards" id="b_ab" onclick="change_display(\'b1\'); return false;',
      'active' => true,
   ),
   'board_1' => array(
      'text' => 'board_1',
      'image' => '',
      'lang' => true,
      'url' => '#board_1" id="b_b1" onclick="change_display(\'ab\'); return false;',
   ),
);

echo '
<div style="overflow: auto;">
   ', template_button_strip($buttons), '
</div>
<div id="all_boards">';

global $scripturl, $settings, $context, $txt;
   
$what = ssi_recentTopics('25',NULL,'array');

echo '
<table border="0" width="100%" cellspacing="1" cellpadding="4" class="bordercolor">
<tr class="catbg3">
<td valign="middle"></td>
</tr>';

foreach ($what as $topic)
{
echo '
<tr>
<td class="windowbg" valign="middle">', $topic['link'];

// Is this topic new? (assuming they are logged in!)
if (!$topic['new'] && $context['user']['is_logged'])
echo '
<a href="', $scripturl, '?topic=', $topic['topic'], '.from', $topic['time'], '#new"><img src="', $settings['images_url'], '/', $context['user']['language'], '/new.gif" alt="new" border="0" /></a>';

echo '
</td>
<td class="windowbg2" valign="middle">', $topic['poster']['link'], '</td>
<td class="windowbg2" valign="middle">', $topic['time'], '</td>
<td class="windowbg2" valign="middle">';

if ($settings['images_url'] != $settings['theme_url'] . '/images' || file_exists($settings['theme_dir'] . '/images/icons/last_post.gif'))
echo '
<a href="', $topic['href'], '"><img src="', $settings['images_url'], '/icons/last_post.gif" alt="Last Post" title="Last Post" border="0" style="float: right;" /></a>';
}

echo '
</td>
</tr>
</table>';

echo '</div>

<div id="board_1" style="display: none;">


Second Code in Here


</div>
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
   function change_display(block)
   {
      var current = block == \'ab\' ? 1 : 0;

      document.getElementById(\'all_boards\').style.display = current ? \'none\' : \'\';
      document.getElementById(\'board_1\').style.display = current ? \'\' : \'none\';
      document.getElementById(\'b_ab\').className = current ? \'button_strip_recent_topics\' : \'button_strip_recent_topics active\';
      document.getElementById(\'b_b1\').className = current ? \'button_strip_recent_posts active\' : \'button_strip_recent_posts\';
   }
// ]]></script>';
--- End code ---

I used [SiNaN]'s code so credits to him:
http://simpleportal.net/index.php?topic=5332.0

agent47:
Give me a moment bro as my site crashed a while ago.... So does the above code append them inside of tabs because I see nothing regarding TabsPanelsContent in there? :/

Blue:
Yes, it does.

With the code I gave you you should see like the image attached.

agent47:
Hey bud as awesome as that looks the reason I wanted to use the tabbed panels was because it had an external CSS file which would allow me to fully customize it... I'm taking my site really seriously and I'm making it as professional could be so I guess you understand why an external CSS is important in order to make the homepage sleek & professional.... Isn't it possible to use my code recent topics code with nob4uask's tabbed panels, mate?

agent47:
BTW a good pal of mine cleaned up nob4uask's code on the first post... I suppose this will make things easier.....


--- Code: ---<?php

echo '
<script src="http://www.superheroalliance.net/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script> 
<link href="http://www.superheroalliance.net/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
 
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup"> 
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li> 
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li> 
</ul> 
<div class="TabbedPanelsContentGroup"> 
<div class="TabbedPanelsContent">Content 1</div> 
<div class="TabbedPanelsContent">Content 2</div> 
</div> 
</div>
 
<script type="text/javascript"> 
<!-- 
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1"); 
//--> 
</script>
';


?>
--- End code ---

Navigation

[0] Message Index

[#] Next page

[*] Previous page