Subject: Tabbed blocks

Posted on: 25/08/05 06:22pm
By: suprsidr

I've got a working function which creates a tabbed block in which you can roll three blocks into one.
You can see it working here. and download it here

I'm planning on making this a true gl plugin if there is enough interest.
Any questions or comments, let me know.

Tabbed blocks

Posted on: 25/08/05 11:30pm
By: ajzz

Sweet - I can think of many uses for such a block especially with multiple RSS feeds and so on.

If you plan to extend this to center-blocks too, its may change quite a few lives... one could think of comments for stories as a tab and related links as another and so on... Even on the main page, one could in theory get rid of the topics block and have each topic shown as a tab...

This gives people making themes liberty to depart a great deal from the current two or three column format....

Cheers to your efforts!

Ajay

Tabbed blocks

Posted on: 26/08/05 06:05am
By: suprsidr

I agree, but for now you can only have one of these running on a page at once. The pluggin would have to have the ability to create different instances of the object with different id's. Although that should not be a problem.
Also I'm working on a js error that rears its ugly head whenever you display a page without the block.

I'll work on that this weekend if I get time:-)

Tabbed blocks

Posted on: 26/08/05 10:31pm
By: Anonymous

How do I add more tabs? If I wanted say six or more.

by the way, I agree this could be very helpful in theme design

Tabbed blocks

Posted on: 27/08/05 08:19am
By: suprsidr

For a block it is only advisable to have three tabs, that would be 150px wide.
but for the centerblock, six or seven would not be too much.
take a look at the code and replicate the tabs in tabthing.php, config.php and in the function in lib-common.
Of course the pluggin will do this for you when I get it finished .
One other cool thing you can do, is have your tabs in one place like a block or header, and your main div in another place like a centerblock, and the tabs will control it like a remote.
So that would make theming kinda fun.

Tabbed blocks

Posted on: 27/08/05 03:45pm
By: ronack

I tried it and I'm hooked. I like it. Have to look at doing at least one on each side and group like blocks together.

Tabbed blocks

Posted on: 27/08/05 05:27pm
By: ronack

I thought of a perfect place to use this.

Polls

I generally have 2 or 3 polls at a time on the site.

Dirk, any ideas on this?

Ron

Tabbed blocks

Posted on: 27/08/05 05:38pm
By: ronack

I guess what I mean Dirk is how to split up the seperate polls so that each can be in a tab since the polls show up as one block in the block list but are actually seperate blocks.

Tabbed blocks

Posted on: 27/08/05 05:46pm
By: suprsidr

for polls, that would be COM_pollVote( $qid )
$qid being say geeklogfeaturepoll
poll name

so COM_pollVote( 'geeklogfeaturepoll' );
for one of your tabs would display the geeklog feature poll
I have it in my centerblock tabs on my site:-)

Tabbed blocks

Posted on: 27/08/05 05:47pm
By: ronack

Never mind I got it.

In the tabs config.php
In the () put the Poll ID that you give it when you create the poll.
$tab_content1 = COM_pollVote(poll1);
$tab_content2 = COM_pollVote(poll2);
$tab_content3 = COM_pollVote(poll3);


Tabbed blocks

Posted on: 28/08/05 08:46am
By: suprsidr

We've got multiple instances working - well sort of.
some bugs to work out yet.

Tabbed blocks

Posted on: 28/08/05 10:41am
By: ronack

Any idea what the function is for older stories?

Tabbed blocks

Posted on: 28/08/05 12:01pm
By: suprsidr

Look to COM_olderStuff() I think.
Dirk would know better.

Tabbed blocks

Posted on: 28/08/05 01:30pm
By: suprsidr

v1.1 with support for centerblocks now out, with one minor bug yet to work out.

get it here.

most files have been changed.
a new function has been added, a separate config for centerblocks, a new class in styles, and tabthing.php has changed, tabthing.js also has changed.
Better tab images too.
Hell even the install.txt has changed.

Tabbed blocks

Posted on: 29/08/05 10:33pm
By: suprsidr

I have an example of a six tabbed centerblock here.


I'm still having trouble getting the centerblock to display the proper default tab while being displayed on a page with another tabbed block. If somebody with fresh eyes and a hearty knowledge of js and DOM would care to take a look. v1.1 is available for download on my site.

Tabbed blocks

Posted on: 15/09/05 04:32pm
By: suprsidr

Well, I've fixed the init problem in both IE and Firefox So it should also work with any other standards complient browser.

Also have added different styles for the centerblocks

Scripting is much more stable - and the plugin is coming along nicely!

version 1.2 is available for download here.
common gl functions to use in your tabs are listed here.

Cheers

Tabbed blocks

Posted on: 16/09/05 05:49am
By: suprsidr

BTW - I forgot to mention that with version 1.2 it is now possible to have as many tabbed blocks as you like

Enjoy

Tabbed blocks

Posted on: 16/09/05 12:28pm
By: ronack

I did this a little differently, and am going to look maybe doing more with it. Right now I am not using the function instead I moved it to a block. I needed or wanted to try to do 2 rows of buttons with a label between the rows and this is what I came up with.



I put this in my block.
<div id=main class=main>
<div onclick="getTabStuff('1')" class=tab id=tab_1>Online</div>
<div onclick="getTabStuff('2')" class=tab id=tab_2>New</div>
<div onclick="getTabStuff('3')" class=tab id=tab_3>Members</div>
<div id="tabtitle">Articles</div>
<div onclick="getTabStuff('4')" class=tab id=tab_4>New</div>

<div onclick="getTabStuff('5')" class=tab id=tab_5>Old</div>
<div onclick="getTabStuff('6')" class=tab id=tab_6></div>
</div>
<div id="mainHolder"></div>


I still need the function for Old Stories tho.
You can see it in action at Dallas NC.com

I think I would like to see the function done a little differently.

Tabbed blocks

Posted on: 16/09/05 04:34pm
By: suprsidr

That is absolutely fine. Actually I tested a block with two rows of tabs stacked on each other like that, and one with three tabs on top and three on the bottom.
One thing though, with the newer code, you don't have to have the onload in the body tags. We are calling the js only from the blocks themselves. This way you don't get the js error(object required) when there is a page without the blocks. You have this error on your site.
So your new code might look like this:
<div id='main1' class='block_tabs'> 
<div onclick="getTabStuff('1')" class=tab id=tab_1>Online</div> 
<div onclick="getTabStuff('2')" class=tab id=tab_2>New</div> 
<div onclick="getTabStuff('3')" class=tab id=tab_3>Members</div> 
<div id="tabtitle">Articles</div> 
<div onclick="getTabStuff('4')" class=tab id=tab_4>New</div> 
<div onclick="getTabStuff('5')" class=tab id=tab_5>Old</div> 
<div onclick="getTabStuff('6')" class=tab id=tab_6></div> 
</div> 
<div id='mainHolder1'></div>
<script language='Javascript' type='text/javascript'>
initJavaScript('1', 'mainHolder', 'main', '1');
</script>

You would of course need the new tabthing.js file, and the css has changed a little too to make room for the ability to have more than one block.
Take a look at the new code, and you will see what I mean. I'm trying to make it easier for the technically challenged.

The plugin will make all this alot easier too. Although I'm having trouble deciding whether to make the block creation process like the existing block editor or more like Blaine's glmenu editor. Tough choice.

Anyways have fun - and more feedback is a must.

Tabbed blocks

Posted on: 17/09/05 11:11am
By: ronack

Do you know how to get the Old Stories block?

Tabbed blocks

Posted on: 17/09/05 11:55am
By: suprsidr

Well, COM_olderstuff is the function, but it does not return anything.
So I made an identical function with a return at the bottom, and it works. You might want to add it to your lib-custom
function TEST_olderStuff()
{
    global $_TABLES, $_CONF;

    $sql = "SELECT sid,tid,title,comments,UNIX_TIMESTAMP(date) AS day FROM {$_TABLES['stories']} WHERE (perm_anon = 2) AND (date <= NOW()) AND (draft_flag = 0)" . COM_getTopicSQL( 'AND', 1 ) . " ORDER BY featured DESC, date DESC LIMIT {$_CONF['limitnews']}, {$_CONF['limitnews']}";
    $result = DB_query( $sql );
    $nrows = DB_numRows( $result );

    if( $nrows > 0 )
    {
        $dateonly = $_CONF['dateonly'];
        if( empty( $dateonly ))
        {
            $dateonly = '%d-%b'; // fallback: day - abbrev. month name
        }

        $day = 'noday';
        $string = '';

        for( $i = 0; $i < $nrows; $i++ )
        {
            $A = DB_fetchArray( $result );

            $daycheck = strftime( '%A', $A['day'] );
            if( $day != $daycheck )
            {
                if( $day != 'noday' )
                {
                    $daylist = COM_makeList( $oldnews, 'list-older-stories' );
                    $daylist = preg_replace( "/(1512)|(15)|(12)/",
                                             '', $daylist );
                    $string .= $daylist . '<br>';
                }

                $day2 = strftime( $dateonly, $A['day'] );
                $string .= '<b>' . $daycheck . '</b> <small>' . $day2
                        . '</small>' . LB;
                $oldnews = array();
                $day = $daycheck;
            }

            $oldnews[] = '<a href="' . COM_buildUrl( $_CONF['site_url']
                . '/article.php?story=' . $A['sid'] ) . '">' . $A['title']
                . '</a> (' . $A['comments'] . ')';
        }

        if( !empty( $oldnews ))
        {
            $daylist = COM_makeList( $oldnews, 'list-older-stories' );
            $daylist = preg_replace( "/(1512)|(15)|(12)/", '', $daylist );
            $string .= $daylist;
            $string = addslashes( $string );

            DB_query( "UPDATE {$_TABLES['blocks']} SET content = '$string' WHERE name = 'older_stories'" );
        }
    }
return $string;
}

There might be a better way of doing this. Dirk would know better.

Tabbed blocks

Posted on: 18/09/05 09:18am
By: ronack

As long as it works I'm good with it, and it does. I'll probably remove the word TEST tho.

Also I changed the buttons a bit but I'm not a very good graphic artist so they are a little cheesey.

Thanks, good job.

Ron

Tabbed blocks

Posted on: 18/09/05 09:23am
By: ronack

I changed TEST to TABS.

Tabbed blocks

Posted on: 18/09/05 10:21am
By: suprsidr

You must have your tabbed blocks hidden to the public, I can't find them.

Also you still have the javascript error on your pages from calling the js functions onload. This can be easily fixed by calling the function initJavaScript from the block itself.

If you would like me to design your tab images I'd be happy to. Or you could get rid of the images all together and just use bgcolor and border changes instead. Some great css tutorials can be found here.

Have fun!

Tabbed blocks

Posted on: 18/09/05 12:44pm
By: ronack

Actually on that site I broke it so bad I had to go back to the original version. So now I'm testing the new version here on my testing site.

The old code is test and the new code is test2. I changed the function to phpblock_tabs2 just for testing purposes so both can be up and running.

It seems to be working except now I'm trying to get the middle seperator to work so that it will have the two rows of tabs with a title between.

Tabbed blocks

Posted on: 18/09/05 12:57pm
By: suprsidr

Well, it looks like you need to either put a br after the members div and the tabtitle div Or makeup a class for tabtitle and give it a span of 100% and maybe a different bgcolor for it too.
I think you will like the newer code better as it is more cross browser compatible, and streamlined.

Cheers

Tabbed blocks

Posted on: 19/09/05 06:51pm
By: suprsidr

Hey Ron, I fixed your layout problem,
add this to your stylesheet:
#tabtitle  { color: #000000; font-size: 7pt; font-family: verdana; font-weight: bold; background: #ffffff; text-align: center; cursor: pointer; display: table-cell; padding: 0; width: 150px; height: 15px; float: left; vertical-align: middle; border-bottom: none }

and this is how your tab layout would look:
<div id='main1' class='block_tabs'>
<div id='tabtitle'>Who's Online</div>
<div onclick="getTabStuff('20','mainHolder','main', '1')" class='tab1' id='tab_20'>Now</div>
<div onclick="getTabStuff('21','mainHolder','main', '1')" class='tab1' id='tab_21'>New</div>
<div onclick="getTabStuff('22','mainHolder','main', '1')" class='tab1' id='tab_22'>Members</div>
<div id='tabtitle'>Articles</div>
<div onclick="getTabStuff('23','mainHolder','main', '1')" class='tab1' id='tab_23'>New</div>
<div onclick="getTabStuff('24','mainHolder','main', '1')" class='tab1' id='tab_24'>Old</div>
<div onclick="getTabStuff('25','mainHolder','main', '1')" class='tab1' id='tab_25'><a href='{$_CONF['site_url']}/submit.php'>Submit</a></div>
</div>
<div id='mainHolder1'></div>
<script language='Javascript' type='text/javascript'>
initJavaScript('20', 'mainHolder', 'main', '1');
</script>

I tried it on my site here.

Hope this helps.

Geeklog - Forum
https://www.geeklog.net/forum/viewtopic.php?showtopic=56851