Topic: Making a block a fixed width and side-by-side

[cralor]

    * SMF 2.0 RC3
    * SP 2.3.2
    * www.betahs.com
    * No errors.
    * I want to take middle block and cut it's width in half, so that I can have two blocks side-by-side. Is this possible, and how can I achieve this?

Thank you.

Here is a screenshot for better understanding

[deansmar]

the middle block as you call it, the width is the remainder of the width left over from the left and right block settings.

so if your total width is lets say 950px and you have allocated 200px for each sideblock then the middle block will be 550px

the best way to achieve what you would like would probably be the Block in Block work around.
here's a bit of information, hope it might help

http://simpleportal.net/index.php?topic=6561.msg37807#msg37807
http://simpleportal.net/index.php?topic=5332.0
http://simpleportal.net/index.php?page=blocks_in_block_sample#sp_collapse_54

[AngelinaBelle]

cralor, if I understand you, I think deansmar is correct.
 
There are several blocks-in-blocks approaches you could take. If you give one a try and come up with any questions, we'll try to answer them here.

[cralor]

Great! Thanks for the information. I tried searching, but never came up with results like this, so thanks for pointing them out!

I have decided that the JavaScript example will be the best choice in this case, rather than a 2 column block like I originally intended.

I am using this code:

Code: [Select]

global $txt;

$txt['recent_topics'] = 'Recent Topics'; // not used for now
$txt['recent_posts'] = 'Recent Posts';
$txt['recent_betas'] = 'Recent Betas';
$txt['recent_giveaways'] = 'Recent Giveaways';

$buttons = array(
    'recent_giveaways' => array(
      'text' => 'recent_giveaways',
      'image' => '',
      'lang' => true,
      'url' => '#recent_giveaways" id="b_rg" onclick="change_display(\'rb\'); return false;',
      'active' => true,
   ),
   'recent_betas' => array(
      'text' => 'recent_betas',
      'image' => '',
      'lang' => true,
      'url' => '#recent_betas" id="b_rb" onclick="change_display(\'rp\'); return false;',
   ),
   'recent_posts' => array(
      'text' => 'recent_posts',
      'image' => '',
      'lang' => true,
      'url' => '#recent_posts" id="b_rp" onclick="change_display(\'rg\'); return false;',
   ),
);

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

      document.getElementById(\'recent_giveaways\').style.display = current ? \'none\' : \'\';
      document.getElementById(\'recent_betas\').style.display = current ? \'\' : \'none\';
      document.getElementById(\'recent_posts\').style.display = current ? \'\' : \'none\';
      document.getElementById(\'b_rg\').className = current ? \'button_strip_recent_giveaways\' : \'button_strip_recent_giveaways active\';
      document.getElementById(\'b_rb\').className = current ? \'button_strip_recent_betas active\' : \'button_strip_recent_betas\';
      document.getElementById(\'b_rp\').className = current ? \'button_strip_recent_posts active\' : \'button_strip_recent_posts\';
   }
// ]]></script>';
I like the current functionality of 'recent_posts', but I'd like 'recent_betas' and 'recent_giveaways' to include posts from three separate boards each.

What would be the best way to accomplish this? Is it possible to gather data from three specific boards? Or maybe I should utilize the RSS feeds of each, merge them into a single RSS feed, and then somehow utilize that in the above script?

Thanks for your continued help!

[AngelinaBelle]

The key to all of this is the parameters you use in calling the function that displays the posts.

Code: [Select]

sp_recent(array('type' => 1, 'display' => 1), 0)How can we use all the options we can get when we use the block editor? We can look at the function and learn more.

function sp_recent($parameters, $id, $return_parameters = false)
{
 global $txt, $scripturl, $settings, $context, $color_profile;
 $block_parameters = array(
  'boards' => 'boards',
  'limit' => 'int',
  'type' => 'select',
  'display' => 'select',
 );
 if ($return_parameters)
  return $block_parameters;
 $boards = !empty($parameters['boards']) ? explode('|', $parameters['boards']) : null;
 $limit = !empty($parameters['limit']) ? (int) $parameters['limit'] : 5;
 $type = 'ssi_recent' . (empty($parameters['type']) ? 'Posts' : 'Topics');
 $display = empty($parameters['display']) ? 'compact' : 'full';
 $items = $type($limit, null, $boards, 'array');

So you can see that the function is going to expect the array element $parameters['boards'] to be a string of board ids separated by a '|', that is going to be passed to ssi_recenttPosts or ssi_recentTopics (see those functions to see exactly how $boards is used). So you can choose which boards to use by calling sp_recent with, for example:

Code: [Select]

sp_recent(array('type' => 1, 'display' => 1, 'boards' => '1|10|4'), 0)

[cralor]

Great!

Now, I'm having a little bit of an issue understanding how to modify the JS part to work with three different tabs.

Here it is what I have so far:

Code: [Select]

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

      document.getElementById(\'recent_giveaways\').style.display = current ? \'none\' : \'\' : \'\';
      document.getElementById(\'recent_betas\').style.display = current ? \'\' : \'none\' : \'\';
  document.getElementById(\'recent_posts\').style.display = current ? \'\' : \'\' : \'none\';
      document.getElementById(\'b_rg\').className = current ? \'button_strip_recent_giveaways\' : \'button_strip_recent_betas active\' : \'button_strip_recent_posts active\';
  document.getElementById(\'b_rb\').className = current ? \'button_strip_recent_giveaways active\' : \'button_strip_recent_betas\' : \'button_strip_recent_posts active\';
      document.getElementById(\'b_rp\').className = current ? \'button_strip_recent_giveaways active\' : \'button_strip_recent_betas active\' : \'button_strip_recent_posts\';
   }
// ]]></script>';
But it isn't working, however. What am I doing wrong?

Thank you!!

[AngelinaBelle]

The code you started with is very simple, and you need to make two kinds of changes to get it to do what you want.
 
1) To get posts from just one board, you need to specify the board in the call to sp_recent.
See the parameter list in sp_recent to see how to do this -- 'boards' => '1|2|3', for example.  'boards => '', if you want all boards.
 
2) The javascript conditional operator (or ternary operator) is not as mysterious as it looks http://www.w3schools.com/js/js_comparisons.asp, and it can still be useful in the javascript function if you use it appropriately.  But the function does need to be completely rewritten.  It's a two-state switch.  Instead, you need to be able to go through a list of several states.

---------------------------------
I just realized that you are not the first user to run into this problem.
So I thought about this a little bit.
I am not very good at typing the same thing over and over again correctly, so I made some arrays (php arrays and javascript arrays) to do that for me.
 

Code: [Select]

global $txt;
$things = array(
'rp' => array( 'txt'=>'recent_posts', 'title'=> 'Recent Posts', 'type' => 0, 'boards' =>'14', 'active' => true),
'rb' => array('txt'=>'recent_betas', 'title'=> 'Recent Betas', 'type' => 1, 'boards' =>'28', 'active' => false),
'rg' => array('txt'=>'recent_giveaways', 'title'=> 'Recent Giveaways', 'type' => 1, 'boards' =>'9', 'active' => false),
);
$bFix='b_'; // button prefix
$dIdFix='div_'; // prefix for div id, if needed for uniqueness
$buttons = array();
foreach ($things as $k => $thing)
{
  $button = $bFix . $k;
  $things[$k]['button'] = $button;
  $divid = $dIdfix . $thing['txt'];
  $things[$k]['divid'] = $divid;
 
  $txt[$thing['txt']] = $thing['title'];
 
  $buttons[$thing['txt']] = array (
         'text' => $thing['txt'],
         'image' => '',
         'lang' => true,
         'url' => '#' . $divid . '" id="' . $button . '" onclick="change_display(\'' . $k. '\'); return false;',
  );
  if  ($thing['active'] ) $buttons[$thing['txt']]['active'] = $thing['active'];
}
echo '
<div style="overflow: auto;" >
   ', template_button_strip($buttons), '
</div>';
foreach ($things as $k => $thing)
{
   echo '
<div id="', $thing['divid'] , '"', ($thing['active'] ? '' : ' style="display: none;"') , ' >
   ', sp_recent(array('type' => $thing['type'], 'display' => 1, 'boards' => $thing['boards']), 0), '
</div>
';
}
echo '<!-- tab flip script -->
<script language="JavaScript" type="text/javascript"><!-- // --><![CDATA[
     var things = new Array();
';     
   
$i = 0;
foreach ($things as $k => $thing)
{
      $i++;
      echo '
      things[', $i, ']= ["', $k, '", "', $thing['divid'], '", "', $thing['button'],'"];' ;
}
echo '
   function change_display(block)
   {
       var i;
       for ( i in things )
       {
           document.getElementById(things[i][1]).style.display = (block == things[i][0]) ? \'\' : \'none\';
           document.getElementById(things[i][2]).className = \'button_strip_\' + things[i][1] +
                                                               ((block == things[i][0]) ? \' active\' : \'\');
       }
   }
// ]]></script> ';


[cralor]

Great!! Thanks so much!!!

[AngelinaBelle]

Of course, you need to choose the correct board ids...

[cralor]

Of course, you need to choose the correct board ids...

Yep, I did

[Divecall]

It is possible to add two things:

1. display not recent posts or something, display Block-ID`d ?

2. It is possible to add an aout-rotator, that scrolls thru this ID`s like a slider, if the mouse-pointer is not over a menu?

thank you!

[AngelinaBelle]

Divecall,

I am not sure what you mean, so I cannot tell you if this is possible.
I am sure that, instead of doing all side-by-side, you could come up with some kind of marquee or tabbed interface.  But I am not sure I understand what you are looking for.

All this requires additional HTML, and so additional php