How can we help you today?

How to Automatically Rotate ShortPoint Tabs Every Few Seconds Using Code Design Element

If you are using ShortPoint Tabs Design Element, and you want to it to automatically rotate every few seconds, then this article will tell you how to achieve that.


Here's a quick preview on how it will look like on your page:


Tabs automatic rotation


TABLE OF CONTENTS


Before we begin

  • This article is only for the Tabs Design Element on a Classic or Modern SharePoint page.
  • Make sure you are a ShortPoint user with an active license.
  • Make sure to always have the latest version installed. Visit our Download ShortPoint page and get the latest version of ShortPoint.

Prerequisite


 Please make sure that you already have the Tabs Design Element added on your SharePoint page.


Step 1: Add Class to the Tabs Design Element


As a prerequisite for this article, we assume that the Tabs Design Element is already added on your page. Click the cog wheel icon to proceed to the settings option:


click the cog wheel icon


Then, go to the Custom CSS tab:


go to the custom css tab 

On the Custom CSS tab, scroll down to Class, and add my-rotating-tabs as the class name of your Tabs Design Element:


add a class to the design element


Hit the Update button to save the changes:


hit Update to save the changes 

NOTE: Please do not republish the page yet as we are still going to add a Design Element that will contain the code that will make the tabs rotate automatically.

Step 2: Add Code Design Element to the page


The most important part of this procedure is adding the Code Design Element to the page. 


NOTE: You can add this Design Element anywhere on the page, as this won't affect the spacing and won't be visible in your design. This will only be used for the purpose of adding a code for the Tabs Design Element to rotate automatically. 

For modern sites, click the plus sign (1) and select ShortPoint (2) from the list of web parts: 


Insert shortpoint in modern sites


Then, click the blue Insert button to open the ShortPoint Page Builder:


click the insert button to open page builder


Then select the Code Design Element from your ShortPoint Page Builder menu: 


Insert Code design element from page builder


For classic sites, click the blue Insert button from the Insert tab in the ribbon.


Click the big blue plus icon


Then select the Code Design Element from  your ShortPoint Page Builder menu: 


Insert Code design element from page builder


NOTE: If you want to know more about what the Code Design Element can do, you may visit Introducing ShortPoint Code Design Element.



Step 3: Copy the code


Please copy the code that we are going to use for the purpose of this article: 


(function() {
  
'use strict';

var tabsClass = 'my-rotating-tabs'; 
var secondsToRotate = 4;            

  function initHook() {
    if( window.shortPointInserter ) {
        return;
    }

    setTimeout( rotateTabs, 500);
  };

  var currentIndex = 0;

  function rotateTabs() {
    var $ = shortpoint.$;
    $( '.' + tabsClass ).each(function() {

      var $tabTitles = $(this).find( '.shortpoint-tab-title' );
      var totalTabs = $tabTitles.length;

      setInterval(function() {
          currentIndex = ( currentIndex + 1 ) % totalTabs;
          var $a = $tabTitles.eq( currentIndex );
          var $tab = $( $a.attr('href') );
          $a.tab('show');
          $tab.addClass('shortpoint-in').addClass('shortpoint-fade');
      }, secondsToRotate * 1000)

    })
  }

  initHook();

})();
NOTE: If you would like to control how many seconds you like the Tabs Design Element to rotate, you can modify the value of the variable in the JavaScript code called secondsToRotate, as its value represents the duration of the tab rotation (e.g. 3 means 3 seconds).

variable needs to be updated

Step 4: Paste the code into the Code Design Element


Once the code is copied, you may now go to the Settings tab of your Code Design Element:


Code Design Element Settings Tab


Paste and insert the code into the JavaScript field:


Paste the code for javascript


Then, click the Insert/Update button and republish the page to save your changes.


NOTE: It is a best practice to refresh the page after adding changes to it. If you do not see the tabs automatically rotating, please do a hard refresh (You may use Ctrl+Shift+R/Cmd+Shift+R, Ctrl+F5/CMD+F5, depending on the operating system you are using).

Result


That's it! You should now see your Tabs Design Element automatically rotating on your SharePoint page. I hope you enjoyed following this article! 


Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 64 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more