Support » Plugin: Post UI Tabs » Cycle Through Tabs Automatically (set time interval)

  • SlimBob

    (@robertwhitis)


    I am trying to write some JS to cycle through each tab as time passes.

    I wrote some very basic JS (not really my area of expertise), however, I have been unable to find the code in the plugin to add an ID to each LI so that the code (would hopefully) work.

    I’m sure there is an easier solution to this, any help is appreciated.

    My approach is to add an ID to each LI tab title, and then using that ID, tell JS to change the CSS classes over time.

    My JS is below:

    var counter = 1;
    
    function flip_tabs(){
    	var active_class = 'ui-state-default ui-corner-top ui-tabs-active ui-state-active';
    	var passive_class = 'ui-state-default ui-corner-top';
    
    	if (counter == 1){
    		document.getElementById("tab-1").className = active_class;
    		document.getElementById("tab-1").setAttritube("aria-selected", "true");
    		document.getElementById("tab-2").className = passive_class;
    		document.getElementById("tab-2").setAttritube("aria-selected", "false");
    		document.getElementById("tab-3").className = passive_class;
    		document.getElementById("tab-3").setAttritube("aria-selected", "false");
    		document.getElementById("tab-4").className = passive_class;
    		document.getElementById("tab-4").setAttritube("aria-selected", "false");
    		counter = 2;
    	}
    	else if (counter == 2) {
    		document.getElementById("tab-1").className = passive_class;
    		document.getElementById("tab-1").setAttritube("aria-selected", "false");
    		document.getElementById("tab-2").className = active_class;
    		document.getElementById("tab-2").setAttritube("aria-selected", "true");
    		document.getElementById("tab-3").className = passive_class;
    		document.getElementById("tab-3").setAttritube("aria-selected", "false");
    		document.getElementById("tab-4").className = passive_class;
    		document.getElementById("tab-4").setAttritube("aria-selected", "false");
    		counter = 3;
    	}
    	else if (counter == 3) {
    		document.getElementById("tab-1").className = passive_class;
    		document.getElementById("tab-1").setAttritube("aria-selected", "false");
    		document.getElementById("tab-2").className = passive_class;
    		document.getElementById("tab-2").setAttritube("aria-selected", "false");
    		document.getElementById("tab-3").className = active_class;
    		document.getElementById("tab-3").setAttritube("aria-selected", "true");
    		document.getElementById("tab-4").className = passive_class;
    		document.getElementById("tab-4").setAttritube("aria-selected", "false");
    		counter = 4;
    	}
    	else {
    		document.getElementById("tab-1").className = passive_class;
    		document.getElementById("tab-1").setAttritube("aria-selected", "false");
    		document.getElementById("tab-2").className = passive_class;
    		document.getElementById("tab-2").setAttritube("aria-selected", "false");
    		document.getElementById("tab-3").className = passive_class;
    		document.getElementById("tab-3").setAttritube("aria-selected", "false");
    		document.getElementById("tab-4").className = active_class;
    		document.getElementById("tab-4").setAttritube("aria-selected", "true");
    		counter = 1;
    	}
    }
    function flip_tabs_timer(time){
    	setInterval ( "flip_tabs()", time );
    }
    window.onload= flip_tabs_timer(3000);

    I think this would be some great functionality for the plugin anyway! 🙂

    http://wordpress.org/plugins/put/

  • The topic ‘Cycle Through Tabs Automatically (set time interval)’ is closed to new replies.