WordPress.org

Ready to get started?Download WordPress

Forums

Post UI Tabs
Cycle Through Tabs Automatically (set time interval) (1 post)

  1. robertwhitis
    Member
    Posted 6 months ago #

    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/

Reply

You must log in to post.

About this Plugin

About this Topic