Spry Accordian: Active Tab Depending on Current Date

[TheVendor]

Hello,

I have a spry accordion that I have inserted in Dreamweaver with 5 tabs for Monday-Friday.

How could I make the tab active depending on what day it is?

i.e: So if its Tuesday the Tuesday tab will be active.

<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0">Monday</li>
      <li class="TabbedPanelsTab" tabindex="0">Tuesday</li>
      <li class="TabbedPanelsTab" tabindex="0">Wednesday</li>
      <li class="TabbedPanelsTab" tabindex="0">Thursday</li>
      <li class="TabbedPanelsTab" tabindex="0">Friday</li>
    </ul>

[fxm]

Would javascript
getDay()
document.getElementById('id').focus()
be any help?

[TheVendor]

Where would that code go?

[TheVendor]

So far I have..

My index.html:

<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0">Monday</li>
      <li class="TabbedPanelsTab" tabindex="1">Tuesday</li>
      <li class="TabbedPanelsTab" tabindex="2">Wednesday</li>
      <li class="TabbedPanelsTab" tabindex="3">Thursday</li>
      <li class="TabbedPanelsTab" tabindex="4">Friday</li>
    </ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent">Content 1</div>
      <div class="TabbedPanelsContent">Content 2</div>
      <div class="TabbedPanelsContent">Content 2</div>
      <div class="TabbedPanelsContent">Content 2</div>
      <div class="TabbedPanelsContent">Content 2</div>
    </div>

and my JS file:

var d=new Date();
var weekday=new Array(5);
weekday[0]= 0;
weekday[1]= 1;
weekday[2]= 3;
weekday[3]= 4;
weekday[4]= 5;


Spry.Widget.TabbedPanels = function(element, opts)
{
	this.element = this.getElement(element);
	this.defaultTab = weekday[d.getDay()]; // Panel selector.
	this.tabSelectedClass = "TabbedPanelsTabSelected";
	this.tabHoverClass = "TabbedPanelsTabHover";
	this.tabFocusedClass = "TabbedPanelsTabFocused";
	this.panelVisibleClass = "TabbedPanelsContentVisible";
	this.focusElement = null;
	this.hasFocus = false;
	this.currentTabIndex = 0;
	this.enableKeyboardNavigation = true;
	this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
	this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;

But I still can't seem to get it to work..

Any help would be great.

[fxm]

Where would that code go?

Somewhere after the widget is defined

var d = new Date();
var dn = d.getDay();

Use dn to move the focus in the widget (or assign IDs and use document.getElementById(); as I originally suggested).

[Of course there are ways other than ID to access elements.]

[TheVendor]

Somewhere after the widget is defined

var d = new Date();
var dn = d.getDay();

Use dn to move the focus in the widget (or assign IDs and use document.getElementById(); as I originally suggested).

[Of course there are ways other than ID to access elements.]

Okay so I would put that in the index.html and then how would I assign IDs to each?

Would it be here?:

#
<li class="TabbedPanelsTab" tabindex="0">Monday</li>
#
<li class="TabbedPanelsTab" tabindex="1">Tuesday</li>
#
<li class="TabbedPanelsTab" tabindex="2">Wednesday</li>
#
<li class="TabbedPanelsTab" tabindex="3">Thursday</li>
#
<li class="TabbedPanelsTab" tabindex="4">Friday</li>

[fxm]

how would I assign IDs

There are plenty of tutorials. Google for getElementById().

Alternatively, "id=" appears at least 170 times in the source of the page you are reading right now.