HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


[Community Tutorial] Using custom comcode for a tabbed box

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#42994 (In Topic #9566)
Avatar

Community saint

Ver 0.5

Creating a tabbed box for your site is fairly easy using Patrick Fitzgerald's Tabber javascript and css package. Please see the bottom of the post for links to the tools. I will update this post with further examples and refinements as time allows, so please consider this tutorial incomplete until the description reads Ver 1.0 ;).

Two options are available and depending on how many tabbed boxes you'd like on your site determines which method to use based on ease of deployment:

Option #1 - Simple Comcode Page - This option works well if you are only planning on using one box. Simply upload the .js script and cut and paste the .css into the bottom of your global.css. (I'm assuming there is a way to have OCP pick up the css file automatically. I tried by putting the file into the default theme custom_css folder. It was available for selection in the css editor in OCP, however, it did not seem to be called when the page with the tab code on it loaded. I'll have to play with that a 'lil further). Create a new comcode page and paste the following:

Code

[semihtml]
<script type="text/javascript" src="js/tabber.js"></script>
<script type="text/javascript">

/* Optional: Temporarily hide the "tabber" class so it does not "flash"
   on the page as plain HTML. After tabber runs, the class is changed
   to "tabberlive" and it will appear. */

document.write('<style type="text/css">.tabber{display:none;}<\/style>');
</script>

<div class="tabber">

     <div class="tabbertab">
     <h2>Tab One</h2>
     <p>Tab One Content Here</p>
     </div>

     <div class="tabbertab">
     <h2>Tab One</h2>
     <p>Tab Two Content Here</p>
     </div>

     <div class="tabbertab">
     <h2>Tab Three</h2>
     <p>Tab Three Content Here</p>
     </div>

</div>
[/semihtml]
Note the pathing for the Javascript call. I created a directory called js off the root of my site and that worked dandy. You may have to play around with that to get it right for your site. If trouble persists, using an absolute path should solve the issue; this applies in Option #2 as well  (http://www.yourdomain.com/js/tabber.js). Upload the js file to your location. Cut and paste the contents of example.css to the bottom of your global.css and viola!

Option #2 - Custom Comcode - I like this method as after the custom comcode is created once, I can then use the tabbed box all over my site with simple comcode tags. (This section assumes the files tabber.js and example.css have been uploaded to the correct location(s) on your server)
  1. Admin Zone –> Tools –> Custom Comcode –> Add New

    The Comcode Tag, Title and Description can be whatever you like. The Replacement Text is as follows:

    Code

    <script type="text/javascript" src="js/tabber.js">
    </script>
    <script type="text/javascript">

    /* Optional: Temporarily hide the "tabber" class so it does not "flash"
       on the page as plain HTML. After tabber runs, the class is changed
       to "tabberlive" and it will appear. */

    document.write('<style type="text/css">.tabber{display:none;}<\/style>');
    </script>

    <div class="tabber">

    {content}

    </div>
    Parameters can be empty


  2. Create a tag for your first tab: repeat above with the replacement text this time being:

    Code

        <div class="tabbertab">
         <h2>{title}</h2>
         <p>{content}</p>
         </div>
    Parameters:

    Code

    title=Tab One
  3. Repeat step two to match the amount of tabs you would like to have available to you.

  4. Call the tags:

    Code

    [semihtml][tabber]
    [tab_one title="Photos"]Tab One Here[/tab_one]
    [tab_two title="Forums"]Tab Two Here[/tab_two]
    [/tabber][/semihtml]
    Replacing the tag call with your tag names.

Tools
tabber.js
example.css
Complete package with examples


"no violence, no hate, no pain, no enemies
just peace, unity, tolerance and love" - The Beloved

OCP V7 | Advocating monetary reform - FreeOurMoney

Need OCP friendly hosting? Look no further:
Web Hosting, Reseller Hosting, and Dedicated Servers w/cPanel - Elief! - Official hosting partner for ocPortal.
Back to the top
 
Posted
Rating:
#42995
Avatar

Community saint

I'm adding the screenshots here as the attachment process broke in my previous post. Possibly a bug when [/url] is the last tag in a post?




"no violence, no hate, no pain, no enemies
just peace, unity, tolerance and love" - The Beloved

OCP V7 | Advocating monetary reform - FreeOurMoney

Need OCP friendly hosting? Look no further:
Web Hosting, Reseller Hosting, and Dedicated Servers w/cPanel - Elief! - Official hosting partner for ocPortal.
Back to the top
 
Posted
Rating:
#42996
Avatar

Community saint

Hey that looks pretty cool, Thanks!

Rick Henson

OCP 4.3.2 & 5.0.1
PHP 5.2.5
MySQL 5.0.51a
FireFox 3.6.8
Back to the top
 
Posted
Rating:
#42997
Avatar

Thanks for posting this - it's great, especially the Custom Comcode solution :).

(I'm assuming there is a way to have OCP pick up the css file automatically. I tried by putting the file into the default theme custom_css folder. It was available for selection in the css editor in OCP, however, it did not seem to be called when the page with the tab code on it loaded. I'll have to play with that a 'lil further).

This isn't a feature but CSS has a feature that could help:

Code

@import url "{$BASE_URL}/themes/{$THEME}/css_custom/tabber.css";
(tabber.css file put in each themes css_custom folder)

Then again, putting direct into global.css is probably the best way, as it's one less file that needs to be loaded by the browser.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#43056
Avatar

Community saint

Ah cool so its like smf would love to do this my self.

I run http://otakuplayground.com and am hopping to make themes and other things for ocportal even though I no longer use it for otakuplayground.com I still love it and feel it could go far with the right help. It needs themes and needs people to advertise for it.
Back to the top
 
Posted
Rating:
#60453
Avatar

Community saint

I love the idea but for some reason I am unable to get it to work. I am sure it is my fault but I have sat down to this 3 different times for over an hour each. Then get frustrated and walk away.Oh well, I'll figure it out eventually…

Rick Henson

OCP 4.3.2 & 5.0.1
PHP 5.2.5
MySQL 5.0.51a
FireFox 3.6.8
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: