Automatically select a default Spry Tab

jcstanley · February 18, 2008

Hi Guys

What I am trying to achive is a calendar using Spry Tabs - where each tab is a month of the year.

I originally had a similar thing working in a php script but have decided to migrate and use Dreamweaver CS3 and is Spry features!

Basically when the calendar page is loaded is there a way that the tab that corresponds to the current month is displayed automatically?

In the PHP version i used case statements for each month. When the page loaded $currentmonth = date('m'); and then switch ($currentmonth) to the case.

Would be great if you have any suggestions

Thanks

phpQuestioner · February 18, 2008

Is Spry Tabs the same thing a Tab Content Box; I assume it is. If you are not wanting the end user to interact with your database using these "Spry Tabs"; then AJAX really would not be needed. You could just use basic DHTML. Here is an example that I made you; check it out and see if it is what you are looking for.


<style type="text/css">
#tabcontent DIV {width:100px;height:100px;border:solid 1px black;display:none}
</style>

<script language="javascript">

var TotalTabs = "12"; // amount of tab contents (in your case; this would be "12" for 12 months)
var BaseContentID = "contentTab"; // base content tabs id; excludes unique number to differentiate between different tabs (see html below for further understanding)
var CurrentMonth="02"; // echo out the php month here where the static "02" currently is at - ie: <?php $currentmonth = date('m'); echo "$currentmonth"; ?>

function showMonth() {

switch(CurrentMonth)
{
case "01":
document.getElementById(BaseContentID+1).style.display="block"
break;
case "02":
document.getElementById(BaseContentID+2).style.display="block"
break;
case "03":
document.getElementById(BaseContentID+3).style.display="block"
break;
case "04":
document.getElementById(BaseContentID+4).style.display="block"
break;
case "05":
document.getElementById(BaseContentID+5).style.display="block"
break;
case "06":
document.getElementById(BaseContentID+6).style.display="block"
break;
case "07":
document.getElementById(BaseContentID+7).style.display="block"
break;
case "08":
document.getElementById(BaseContentID+.style.display="block"
break;
case "09":
document.getElementById(BaseContentID+9).style.display="block"
break;
case "10":
document.getElementById(BaseContentID+10).style.display="block"
break;
case "11":
document.getElementById(BaseContentID+11).style.display="block"
break;
case "12":
document.getElementById(BaseContentID+12).style.display="block"
break;
}
}

window.onload=function() {
showMonth();
}

</script>

</head>

<body>


<div id="tabcontent">

<div id="contentTab1">
January
</div>

<div id="contentTab2">
February
</div>

<div id="contentTab3">
March
</div>

<div id="contentTab4">
April
</div>

<div id="contentTab5">
May
</div>

<div id="contentTab6">
June
</div>

<div id="contentTab7">
July
</div>

<div id="contentTab8">
August
</div>

<div id="contentTab9">
September
</div>

<div id="contentTab10">
October
</div>

<div id="contentTab11">
November
</div>

<div id="contentTab12">
December
</div>

</div>

Hope this is what your looking for - good luck

phpQuestioner · February 19, 2008

Also; I didn't put the CSS (in the script above) to make it an actually tab content container, but basically it just for example purposes anyway. You can add/modify the CSS as needed to format/construct the tab content div.

jcstanley · February 19, 2008

Thanks for that although perhaps i didn't explain it properly.

As well as displaying the current month automatically the tabs are still needed to allow the user to select and view a different month if they wish.

I can create the tabs and display the data for each, the problem is just selecting the current month tab when the page loads.

Hope that makes sense

jcstanley · February 19, 2008

just had a play around and found the value that selects the default tab but am not sure how to "edit" it as i am not very familiar with javascript.

The file that Dreamweaver genterated is called SpryTabbedPanels.js and inside is the following:

var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};

Spry.Widget.TabbedPanels = function(element, opts)
{
this.element = this.getElement(element);
    
this.defaultTab = "0"; // Show the first panel by default.	
             this.bindings = [];
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;

Spry.Widget.TabbedPanels.setOptions(this, opts);

// If the defaultTab is expressed as a number/index, convert
// it to an element.

if (typeof (this.defaultTab) == "number")
{
	if (this.defaultTab < 0)
		this.defaultTab = 0;
	else
	{
		var count = this.getTabbedPanelCount();
		if (this.defaultTab >= count)
			this.defaultTab = (count > 1) ? (count - 1) : 0;
	}

	this.defaultTab = this.getTabs()[this.defaultTab];
}

// The defaultTab property is supposed to be the tab element for the tab content
// to show by default. The caller is allowed to pass in the element itself or the
// element's id, so we need to convert the current value to an element if necessary.

if (this.defaultTab)
	this.defaultTab = this.getElement(this.defaultTab);

this.attachBehaviors();
};

How can I change this.defaultTab to equal the current month instead of "0". I tried something along the lines of

var month=getmonth();
.
.
.
this.defaultTab = "month";

but had no luck

Any suggestions welcome.

phpQuestioner · February 19, 2008

try this; I used the javascript date() function; if you need this done with php (to get the month) let me know and I will write you a php script that will work for this too.

var what = new Date();
var currently = what.getMonth();

var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};

Spry.Widget.TabbedPanels = function(element, opts)
{
this.element = this.getElement(element);
    
this.defaultTab = currently; // Show the first panel by default.	
             this.bindings = [];
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;

Spry.Widget.TabbedPanels.setOptions(this, opts);

// If the defaultTab is expressed as a number/index, convert
// it to an element.

if (typeof (this.defaultTab) == "number")
{
	if (this.defaultTab < 0)
		this.defaultTab = 0;
	else
	{
		var count = this.getTabbedPanelCount();
		if (this.defaultTab >= count)
			this.defaultTab = (count > 1) ? (count - 1) : 0;
	}

	this.defaultTab = this.getTabs()[this.defaultTab];
}

// The defaultTab property is supposed to be the tab element for the tab content
// to show by default. The caller is allowed to pass in the element itself or the
// element's id, so we need to convert the current value to an element if necessary.

if (this.defaultTab)
	this.defaultTab = this.getElement(this.defaultTab);

this.attachBehaviors();
};

jcstanley · February 20, 2008

Thank you - that works perfectly!!!!!!

Sign In

Automatically select a default Spry Tab

Recommended Posts

jcstanley

Link to comment

Share on other sites

phpQuestioner

Link to comment

Share on other sites

phpQuestioner

Link to comment

Share on other sites

jcstanley

Link to comment

Share on other sites

jcstanley

Link to comment

Share on other sites

phpQuestioner

Link to comment

Share on other sites

jcstanley

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information