Welcome to Geeklog, Anonymous Thursday, March 28 2024 @ 12:04 pm EDT

Geeklog Forums

Tabbed blocks

Page navigation


Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
excited
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.
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

ajzz

Forum User
Regular Poster
Registered: 01/19/05
Posts: 113
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
 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
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:-)
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

gudenuff

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 Just my two cents
 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
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 praying it will work .
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.
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

ronack

Forum User
Full Member
Registered: 05/27/03
Posts: 612
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.
 Quote

Status: offline

ronack

Forum User
Full Member
Registered: 05/27/03
Posts: 612
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
 Quote

Status: offline

ronack

Forum User
Full Member
Registered: 05/27/03
Posts: 612
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.
 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
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:-)
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

ronack

Forum User
Full Member
Registered: 05/27/03
Posts: 612
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.
Text Formatted Code
$tab_content1 = COM_pollVote(poll1);
$tab_content2 = COM_pollVote(poll2);
$tab_content3 = COM_pollVote(poll3);

 
 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
We've got multiple instances working - well sort of.
some bugs to work out yet.
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

ronack

Forum User
Full Member
Registered: 05/27/03
Posts: 612
Any idea what the function is for older stories?
 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
caffeinated
Look to COM_olderStuff() I think.
Dirk would know better.
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
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.
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
determined
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.
Banging your head
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
excited
Well, I've fixed the init problem in both IE and Firefox Big Celebration 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
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
BTW - I forgot to mention that with version 1.2 it is now possible to have as many tabbed blocks as you like Very Happy

Enjoy
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

ronack

Forum User
Full Member
Registered: 05/27/03
Posts: 612
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.
Text Formatted Code
<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.
 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
excited
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:
Text Formatted Code
<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.
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

ronack

Forum User
Full Member
Registered: 05/27/03
Posts: 612
Do you know how to get the Old Stories block?
 Quote

Page navigation

All times are EDT. The time is now 12:04 pm.

  • Normal Topic
  • Sticky Topic
  • Locked Topic
  • New Post
  • Sticky Topic W/ New Post
  • Locked Topic W/ New Post
  •  View Anonymous Posts
  •  Able to post
  •  Filtered HTML Allowed
  •  Censored Content