23 Replies Latest reply on May 9, 2013 9:18 PM by keri

    Content Widget with Tabs

    afinan

      Hello. I'm looking to add a widget to our SBS home page that organizes content into tabs (example screenshot) to maximize the valuable real estate.  Has anyone done this before?  If so, any details or an offline chat would be appreciated!  Thanks!

       

      tabwidget.jpg

        • Re: Content Widget with Tabs
          NCam

          hi angelique, did you ever get a reply?

          • Re: Content Widget with Tabs
            detlefvi

            II wrote the following jquery to display Jive documents on the overview page in tabs. Put it into an HTML widget on your overview page. 

            It uses an external library to do the heavy lifting.

            Just change the HTML to point to your document id's and add/subtract from the overview-tabs list for more or less of them. See the code in blue font.

            Make sure you have an equivalent number of tab names and tab content panes.


            DISCLAIMER NOTE: Only tested with Jive 4.5.6, so please try this in your test pen first

             

            <!-- the tabs -->

            <ul class="overview-tabs" id="overview-tabs">

              <li title="Welcome to your community"><a href="#">Welcome</a></li>

              <li title="Access more resources"><a href="#">Resources</a></li>

              <li title="Steps to get started"><a href="#">Get Started</a></li>

            </ul>

             

            <!-- tab "panes" -->

            <div class="overview-panes" id="overview-panes">

              <div>/docs/DOC-11762</div>

              <div>/docs/DOC-10455</div>

              <div>/docs/DOC-10005</div>

            </div>

             

             

            <script type="text/javascript" src="<path to>jquery.tools.min.js"></script>

            <script type="text/javascript">

            /*

            ****************************************************************************************************

              Description: Takes document id's and displays them as tabs on the overview page in an HTML widget

              Author: Detlef Vischer (detlef.vischer@hp.com)

              Revision: 02/19/2012 Initial version

            ****************************************************************************************************

            */

            $j(document).ready(function() {

              // Get the content for each tab from each document and then make the tabbed interface

              $j('#overview-panes').find('div').each(function() {

                   $j(this).load($j(this).text() + ' ' + 'div.jive-rendered-content', function(response, status, xhr) {

                        if (status == "error")

                             $j(this).html('<strong>There was an error loading '+$j(this).text()+'</strong><p>' + xhr.status + ' ' + xhr.statusText+'</p>');

                   });

              });

             

              $j("ul.overview-tabs").tabs("div.overview-panes > div", {

                   effect : 'slide',

                   fadeInSpeed : 500,

                   fadeOutSpeed: 250,

                   rotate : true

              });//.slideshow({autoplay: true, interval: 10000 });

            });

            </script>

             

             

            <style type="text/css">

            /* root element for tabs  */

            ul.overview-tabs {

              list-style: none;

              margin: 0 !important;

              padding: 0;

              border-bottom: 1px solid rgb(0,153,255);

              height: 32px;

            }

            /* single tab */

            ul.overview-tabs li {

              float: left;

              text-indent: 0;

              padding: 0;

              margin: 0 !important;

              list-style-image:none !important;

              list-style: none !important;

            }

            /* link inside the tab. uses a background image */

            ul.overview-tabs a {

              display: block;

              height: 30px;

              line-height: 30px;

              text-align: center;

              text-decoration:none;

              padding: 0px 10px 0px 6px;

              margin: 0px 3px 0px 0px;

              position: relative;

              top: 1px;

              cursor: pointer;

              background: #999 none;

              border: 1px solid #fff;

              border-bottom: 1px solid rgb(0,153,255);

              color: #000;

              font-size: 12pt;

            }

            ul.overview-tabs a:active {

              outline: none;

            }

            /* when mouse enters the tab move the background image */

            ul.overview-tabs a:hover {

              color: white;

              background: rgb(44,46,49) none;

            }

            /* active tab uses a class name "current". its highlight is also done by moving the background image. */

            ul.overview-tabs a.current, ul.overview-tabs a.current:hover, ul.overview-tabs li.current a {

              cursor: default !important;

              background: #ffffff none;

              border: 1px solid rgb(0,153,255);

              border-bottom: solid #fff 1px;

              font-weight: bold;

              text-align: center;

              color: #09f;

              text-decoration:underline;

              font-size: 12pt;

            }

            /* initially all panes are hidden */

            .overview-panes .pane {

              display: none;

            }

            div.overview-panes {

              background: #ffffff none;

              border: 1px solid rgb(0,153,255);

              border-top: solid #fff 1px;

              padding: 10px;

              overflow-x: auto;

            }

            </style>

            • Re: Content Widget with Tabs
              scottlawley

              Does anybody have this working on Jive 5.0?

                • Re: Content Widget with Tabs
                  detlefvi

                  I started working on it as Jive changed some internal class names.  Once we have our instance upgraded to Jive5, I'll deploy it

                    • Re: Content Widget with Tabs
                      jessekane

                      I am out of the office until 08/15/2012.

                       

                      I will be out of the office today at our team's summer outing. I will be

                      checking my email perodically durning the day. Otherwise I will reply to

                      your message on Wednesday, August 15.

                       

                      Have a great day.

                       

                       

                      Note: This is an automated response to your message  "[Internal Community

                      Managers] New message: "Content Widget with Tabs"" sent on 8/14/12 12:30:26

                      .

                       

                      This is the only notification you will receive while this person is away.

                       

                       

                      Please consider the environment before printing this email.

                      • Re: Content Widget with Tabs
                        keri

                        Hi Detlef,

                         

                        I used your jquery pretty extensively on the HP community when I was there.  The result is a very elegant tab widget.

                         

                        I have since left HP and am trying to get this to work on SBS 5.0.3.0 at my new company, but I am running into some issues.  So my question is actually for the community, though I had to give kudos to Detlef for creating it first.  Does anyone have this working on SBS 5.0.3.0?

                         

                        The tabs show at the top, but the content doesn't display correctly.  Using the code as written in Detlef's first post, the content from all 3 documents is concatenated and displays under the first tab.  With some tweaking, I got the tabs to link to the documents separately, but the link actually takes you to the document rather than displaying the document in the pane below the tab.

                         

                        I don't think it's related to the issues some of the others are having with the location of jquery.tools.min.js.  I get the same result whether I point to http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js or to a local copy, and I haven't had an issue with it getting stuck in a loop.

                         

                        Any suggestions would be appreciated.  I didn't realize how much I loved those tabs until they were gone!

                    • Re: Content Widget with Tabs
                      aaronlyon

                      I'm having a miserable time trying to get jQuery plugin working within an HTML widget. Simplified this example to bare minimum:

                       

                      <div id="tabs">

                          <ul>

                              <li><a href="#tabs-1">Tab 1</a></li>

                              <li><a href="#tabs-2">Tab 2</a></li>

                              <li><a href="#tabs-3">Tab 3</a></li>

                          </ul>

                          <div id="tabs-1">

                              <p>ONE Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.</p>

                          </div>

                          <div id="tabs-2">

                              <p>TWO Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc.</p>

                          </div>

                          <div id="tabs-3">

                              <p>THREE Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante.</p>

                          </div>

                      </div>

                      <script src="[PATH TO MY DIR]/jquery.tools.min.js"></script>

                      <script>

                      $j('#tabs').tabs();

                      </script>

                       

                      In Chrome's dev tools, I can see that the jQuery library is loaded, but I see this error:

                      Uncaught TypeError: Cannot read property 'jquery' of undefined jquery.tools.min.js:37

                       

                      Likewise, when using the jquery-ui.js plugin, I get the error, "Object has no method 'tabs'" or something like.

                       

                      I know jQuery is installed and working, as I can test with simple commands like this:

                      jQuery( "p").css('color','red');

                       

                      Any hints?