Targeting a specific Spry tab in an A Href

Can i somehow tell the Spry tabs to focus on a tab other than
the first one on page load?

Due to the Spry framework being fairly new, you may be best
asking this
question in the Spry specific forum:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
Nadia
Adobe® Community Expert : Dreamweaver
CSS Templates |Tutorials |SEO Articles
http://www.DreamweaverResources.com
~ Customisation Service Available ~
http://www.csstemplates.com.au
"jasals" <[email protected]> wrote in
message
news:f5e38m$dnu$[email protected]..
> Can i somehow tell the Spry tabs to focus on a tab other
than the first
> one on page load?

Similar Messages

Linking to specific spry tabbed panel - code not working

Hi,
I have followed the tutorial at
http://foundationphp.com/tutorials/spry_url_utils.php
with regard to being able to link to a specific tab. For some
reason though, my code doesn't work. I am usign Dreamweaver cs3,
and as soon as I head back to the design view, or preview it in a
browser for that matter, all I see is each tab one above the other,
and the tabs no longer work.
My code is as follows:
<script src="../SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<link href="../SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
<script type="text/javascript"
src="SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript"> var params =
Spry.Utils.getLocationParamsAsObject(); </script>
is in the head, and the body for the tabbed panels is:
<div id="mainContent">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">1st
Team</li>
<li class="TabbedPanelsTab" tabindex="0">2nd
Team</li>
<li class="TabbedPanelsTab" tabindex="0">3rd
Team</li>
<li class="TabbedPanelsTab" tabindex="0">4th
Team</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%">
<div align="center" class="style3 style5">Player
name</div>

<p align="center"><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic" /></p>

<p align="center" class="style3 style6 style4">Click a
player name to view their profile. </p>

<p align="center"> </p></td>
<td width="46%"><p align="center"><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto" /></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center" class="style5"> </p>
<p></p></td>
</tr>
</table>
<p> </p>
<p> </p>
</div>
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%">
<div align="center" class="style3"><span
class="style5">Player name</span></div>
<p align="center"><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic2" /></p>

<p align="center" class="style3 style4 style6">Click a
player name to view their profile.</p>
</td>
<td width="46%"><p align="center"><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto2" /></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center"> </p>
<p></p></td>
</tr>
</table>
</div>
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%">
<p align="center" class="style3 style6 style4">Player
name</p>

<p align="center"><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic3" /></p>

<p align="center" class="style3 style6 style4">Click a
player name to view their profile.</p>

<p align="center"> </p></td>
<td width="46%"><p align="center"><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto3" /></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center"> </p>
<p></p></td>
</tr>
</table>
</div>
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%">
<div align="center" class="style3 style4
style6">Player name</div>

<p align="center"><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic4" /></p>

<p align="center" class="style3 style4 style6">Click a
player name to view their profile.</p>

<p align="center"> </p></td>
<td width="46%"><p align="center"><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto4" /></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center" class="style5"> </p>
<p></p></td>
</tr>
</table>
</div>
</div>
</div>
<p> </p>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new
Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab:(params.tab ?
params.tab : 0)});
The link I would then use to link to tab 2 say, would be:
../"pagename".php?tab=2#TabbedPanels2
Also, when I then go to click on the Spry tabbed panels
region in design view, I get an error message saying:
while executing inspectSelection in spry_tabbedpanels.htm, a
javascript error occurred.
I am pretty inexperienced with Spry and Java so I may have
missed something simple.
A solution would be much appreciated as this is driving me
mad!
Please let me know if you need me to post more code.
Thanks in advance.
p.s. I am using Dreamweaver CS3 and the SpryURLUtils.js
script is from the Spry 1.6.1 prerelease framework.

quote:
Originally posted by:
brownie_jedi
Ok, so I've just changed the code to <script
type="text/javascript"
src="../SpryAssets/SpryURLUtils.js"></script>
to mimic the code for <script
src="../SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
since the spry files are all in the same folder. Is this what
you meant?
Having just installed firebug, I get the error params is not
defined. So I guess that this all together means that the
SpryURLUtils.js file is not being called correctly?
p.s. Thanks for the speedy replies, much appreciated.
Yes it means it cant find the file SpryURLUtils.js.
in firebug theres a tab called scripts, if u click on it, u
can see wich scripts are loaded. i suggest u check that out. Or
post a online URL so we can see the problem for our selfs..

Pemanent link to specific spry tab

Hi,
I have a webpage that containd dynamically loaded spry tabs.
I need to creat a permanent link to a specific tab on that page
from my server for a different domain. What I have been tryiong to
do is write a normal link to use for this, something like:
http://
www.XXX.com?TabbedPanels1.showPanel(13);getPage('FrameSiten', '
http://XXX.com/directory/index.php'
but of course that will not work...
The tab is setup like this :
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="9"
onClick="getPage('FrameSiten', '
http://XXX.com/directory/index.php')">Directory</li>
Can anyone please help me with this as I have now searched
hundreds of pages on the web and found nothing that I can make
sence of...
Thanks

Add something like this under your tabbed panels constructor;
if(params.panel){
switch(params.panel){
case 1: getPage('FrameSiten', 'directoryindex.php');
break;
case 2: getPage('FrameSiten', 'whatever.php');
break;
case 3: getPage('FrameSiten', 'whatever.php');
break;
case 4: getPage('FrameSiten', 'whatever.php');
break;
case 5: getPage('FrameSiten', 'whatever.php');
break;
case 6: getPage('FrameSiten', 'whatever.php');
break;
default: null;
break;
(change the getPage to the event that matches the tab
number)

Opening specific Spry tabbed panels not working or displaying in IE

I have a tabbed panel spry widget on an asp page in Dreawmweaver (http://www.herbsmithinc.com/casedog.asp) that worked marverously across IE, Firefox and Safari until I tried to get different panels to open on load through links. I used the following tutorial: http://foundationphp.com/tutorials/spry_url_utils.php
Everything works as it should in Firefox and Safari but the panels all appear at once, stacked down the page in IE. Does anyone have a fix for this or see what it is I'm doing wrong?
Thanks!!

I added the code, but It didn't work
I just noticed that there's an error on the page when it loads in IE:
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6.6; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
Timestamp: Thu, 24 Mar 2011 15:05:33 UTC
Message: 'Spry.Widget.TabbedPanels' is null or not an object
Line: 292
Char: 1
Code: 0
URI: http://www.herbsmithinc.com/casedog.asp
I searched the error but didn't come up with too much. Any other suggestions? I really appreciate the help!!

Linking to a specific spry tab in design view

hi there,
I am a dreamweaver novice and i only use design view for the most part. I am trying to make a link from some content in one tab to another tab. I looked up many such threads and they say that the spryurlutils.js is to be used. I do not know how and where to insert the script, because that area is uneditable in the code view. Here is the link to the URL.
http://192.168.17.13/testpagetraining.html
In the 'About training' tab, in the 2nd paragraph , there are the words "The Partnership".
I would like to make a link to the 3rd tab "The Partnership" from those words in the first tab.
Thanks.
A

I cannot open the page at the location you specified, it looks like a local server.
I you want a tutorial on the subject, have a look here http://foundationphp.com/tutorials/spry_url_utils.php

Setting dynamic Spry tab

Can anyone tell me how to target a specific Spry tab from an
external link?

This is the correct answer - thanks. - searched all day for this
In the head JS tag add the following after
var dsCities = new Spry.Data.XMLDataSet("xml/{dsStates::url}", "state/cities/city");
var statenum = 20; // Sets dsStates to the 21st node value = MA Massachusetts - observer will default the dsCities to massachusetts.xml
// add an array search to return the index for statenum
dsStates.addObserver({ onDataChanged: function(ds, type) { dsStates.setCurrentRowNumber(statenum); } });
There should be a a cookbook on SPRY of popular needed functions - the samples are fragments but it takes a lot of work, the hard way to learn and piece it together..

Need help linking spry tabbed panel from external page

Could use some help. I need to link to a specific spry tabbed panel on page "A" from a link on page "B" I have tried several "solutions" on the web and had no luck. When I add the code needed at the bottom of the code where you initiate the instance, it stacks the content of ALL panels in the first panel, and renders the tabs inoperable. This is a key feature I need in a new site being developed.

I need to link to a specific spry tabbed panel on page "A" from a link on page "B" I have tried several "solutions" on the web and had no luck.
Have you tried http://foundationphp.com/tutorials/spry_url_utils.php ?
When I add the code needed at the bottom of the code where you initiate the instance, it stacks the content of ALL panels in the first panel, and renders the tabs inoperable.
Depending on what the code looks like, it can do all sorts of things.
Please be reminded that the best way for us to help you is by you supplying a link to your site with a one sentence description of the problem.
Gramps

How do i link to a specific tab using the spry tabbed widget

Hello i'm working on a microsite using the spry tabbed widget. I'm having trouble figuring out how to link to a specific tab using a an external link.
here is the site. http://www.efaxcorporate.co.uk
for example: if i wanted to give a user a url link specifically tab#2.
Im sure this is really easy i just can't seem to figure it out.

Try http://foundationphp.com/tutorials/spry_url_utils.php

Spry Tabs - target different tab via url?

I have a page that uses the Spry tabs. It's set to use the
first tab (default).
I have another page wherein I'd like to put a link to this
page but have the link display the SECOND tab.
Is this possible? How is it done?

Thanks!
BTW, for anyone else, it threw me for a moment until I
realized than in addition to linking to SpryURLUtils.js you need to
add this to the head:
<script type="text/javascript">
// Grabs the values of the URL parameters for the current
URL.
var params = Spry.Utils.getLocationParamsAsObject();
</script>
The rest is clear in the example's code.

Submitting a Form in a Spry Tabbed Region

I have a spry tabbed region with 6 tabs.
I have constructed a menu which targets and opens the specific tab using the ?tab=4 type notation. I have also created links between tabs using the same notation. All works fine.
I have a form in one tab which, when I submit it, I want to return to the same tab. However when I use the notation <form action="index.php?tab=4" > the page just reloads on the first tab, stripping off the ?tab=4 part of the url. I have searched the forums but can't find any reference to how to target a specific tab when submitting a form.
Any help much appreciated.
Thanks
John

Hi
Thanks for your patience.
Because there are 8 tabs on this page there is a lot of code, much of it irrelevant, so I have copied below the chunks which relate to this part of the page.
When the form is submitted the data being returned from the database is correct and is loaded into the page. It is just that the page loads the first tab and you then have to click on the 'Results' tab to see the data which has been returned.
Ok, from the top of the page the php code which filters the recordset is as follows;
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
return $theValue;
// recordset for results
$var1_rsCompResults = "-1";
if (isset($_GET["event_ID"])) {
$var1_rsCompResults = $_GET["event_ID"];
$var2_rsCompResults = "-1";
if (isset($_GET["age_group"])) {
$var2_rsCompResults = $_GET["age_group"];
$var3_rsCompResults = "-1";
if (isset($_GET["gender"])) {
$var3_rsCompResults = $_GET["gender"];
mysql_select_db($database_connPublic, $connPublic);
$query_rsCompResults = sprintf("SELECT tblResults.result_ID, DATE_FORMAT(tblEvents.event_start_date, '%%Y') AS year, tblResults.event_ID, tblEvents.event_name, tblResults.age_group, tblResults.points, tblIndividuals.forename, tblIndividuals.surname, tblIndividuals.sex FROM tblEvents INNER JOIN tblResults ON tblEvents.event_id = tblResults.event_ID INNER JOIN tblIndividuals ON tblResults.individual_ID = tblIndividuals.individual_id WHERE tblResults.event_ID = %s AND age_group = %s AND sex = %s ORDER BY tblResults.points", GetSQLValueString($var1_rsCompResults, "int"),GetSQLValueString($var2_rsCompResults, "text"),GetSQLValueString($var3_rsCompResults, "text"));
$rsCompResults = mysql_query($query_rsCompResults, $connPublic) or die(mysql_error());
$row_rsCompResults = mysql_fetch_assoc($rsCompResults);
$totalRows_rsCompResults = mysql_num_rows($rsCompResults);
?>
then the links to the Spry Assets and the js which creates the datasets is as follows;
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryDataExtensions.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryHTMLDataSet.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryNestedXMLDataSet.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryXML.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryPagedView.js" type="text/javascript"></script>
<script src="../SpryAssets/xpath.js" type="text/javascript"></script>
<script type="text/javascript">
var dsYears = new Spry.Data.XMLDataSet("competitions_year_data_xml.php", "root/row");
var dsCompetitions = new Spry.Data.XMLDataSet("calendar_competitions_data_xml.php", "root/row[year = '{dsYears::year}']");
var dsAgeGroups = new Spry.Data.XMLDataSet("competitions_age_group_data_xml.php", "root/row[event_ID = '{dsCompetitions::event_ID}']");
var dsGender = new Spry.Data.XMLDataSet("competitions_sex_data_xml.php", "root/row[age_group = '{dsAgeGroups::age_group}']");
</script>
Then the html which creates the tabbed region is as follows;
                  <div id="TabbedPanels1" class="TabbedPanels">
                      <ul class="TabbedPanelsTabGroup">
                        <li class="TabbedPanelsTabLeft" tabindex="0">News</li>
                        <li class="TabbedPanelsTab" tabindex="1">Calendar</li>
                        <li class="TabbedPanelsTab" tabindex="2">Rules</li>
                        <li class="TabbedPanelsTab" tabindex="3">Competition Entries</li>
                        <li class="TabbedPanelsTab" tabindex="4">Results</li>
                        <li class="TabbedPanelsTab" tabindex="5">Rankings</li>
                        <li class="TabbedPanelsTab" tabindex="6">Contacts</li>
                        <li class="TabbedPanelsTabRight" tabindex="7">FAQ</li>
                      </ul>
                      <div class="TabbedPanelsContentGroup">
Then the form which includes the four select statements is as follows;
<div class="TabbedPanelsContent" id ="results_data">
               <h3>Results</h3>
<form name="selectForm" action="index.php?tab=4&" method="get">
        Year:
<span spry:region="dsYears" id="yearSelector">
        <select spry:repeatchildren="dsYears" spry:choose="spry:choose" name="year" onchange="dsYears.setCurrentRowNumber(this.selectedIndex);">
            <option value="{year}" spry:when="{ds_CurrentRowID} == {ds_RowID}" selected="selected">{year}</option>
            <option value="{year}" spry:default="spry:default" >{year}</option>
        </select>
</span>
        Event:
<span spry:region="dsCompetitions" id="eventSelector">
        <select spry:repeatchildren="dsCompetitions" name="event_ID" onchange="dsCompetitions.setCurrentRowNumber(this.selectedIndex);">
            <option value="{event_ID}">{event_name}</option>
        </select>
</span>
        Age Groups:
<span spry:region="dsAgeGroups" id="agegroupSelector">
        <select spry:repeatchildren="dsAgeGroups" name="age_group" onchange="dsAgeGroups.setCurrentRowNumber(this.selectedIndex);">
            <option value="{age_group}">{age_group}</option>
        </select>
</span>
        Gender:
<span spry:region="dsGender" id="genderSelector">
        <select spry:repeatchildren="dsGender" name="gender">
            <option value="{sex}">{sex}</option>
        </select>
</span>
<input type="submit" value="Submit" />
</form>
<?php if ($totalRows_rsCompResults > 0) { // Show if recordset not empty ?>
<div id="result_ID" name="result_ID">
    <table>
      <tr>
        <th>Athlete Name</th>
        <th>Event</th>
        <th>Score</th>
      </tr>
      <?php do { ?>
        <tr>
          <td><?php echo $row_rsCompResults['forename']; ?> <?php echo $row_rsCompResults['surname']; ?></td>
          <td><?php echo $row_rsCompResults['event_name']; ?></td>
          <td><?php echo $row_rsCompResults['points']; ?></td>
        </tr>
        <?php } while ($row_rsCompResults = mysql_fetch_assoc($rsCompResults)); ?>
    </table>
</div>
<?php } // Show if recordset not empty ?>
       </div> 
Then at the end of the page is this code;
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
</script>
</body>
</html>
<?php
mysql_free_result($rsCompResults);
?>

Linking between spry tabs

I've created a page with spry tabs and want to place a link
on a tab that will take the user to a place on another tab. I
assumed that I would use named achors but can't get them to work.
Any ideas?

RSW14 wrote:
> I've created a page with spry tabs and want to place a
link on a tab that will
> take the user to a place on another tab.
To open another tab from anywhere in the same page, give the
target tab
an ID, and create the link like this:
<a href="javascript:;"
onclick="TabbedPanels1.showPanel('targetID')">Go
to other tab</a>
To go to a specific place within a tabbed panel, you would
need to use
SpryURLUtils.js, which is part of the Spry framework that you
can
download from Adobe Labs. Details of how to use it are on the
following
page:
http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS4",
"PHP Solutions" & "PHP Object-Oriented Solutions"
http://foundationphp.com/

I have a perplexing problem, in firefox the iframe in the spry tabbed panel doesn't work any ideas?

I have made a page with spry tabbed panels, i have embedded an iframe in the content section of the second tab, this works perfectly well with Google, IE, Safari, Opera etc but just doesnt work in Firefox.
If I make the tab panel containing the iframe the Default tab then it works, i just cant figure out why,
By the way new to all this so be gentle please
<div id="main_column">
     <div class="section_w500">
        <h2>North Bali Listings</h2>
        <div id="TabbedPanels1" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">About North Bali</li>
            <li class="TabbedPanelsTab" tabindex="0">Land</li>   <<<<< This is the tab where the iframe is embedded in the content panel>>>>>
            <li class="TabbedPanelsTab" tabindex="0">Houses / Villas /Apartments / Rooms</li>
            <li class="TabbedPanelsTab" tabindex="0">Commercial</li>
</ul>
          <div class="TabbedPanelsContentGroup">
            <div class="TabbedPanelsContent">A property analyst recently said that limited land availability in the southern parts of Bali, especially in and around the Badung and Denpasar areas, has driven investors northward, in our opinion   at this time it is an ideal opportunity to acquire property still at very sensible prices in this area, be it for investment or as a place of residence.. <br />
              <p> <img src="../../../Images/Bali Scenes General/panoramic-views.jpg" alt="views" width="183" height="140" align="left" />Over the last few of years, investors have been targeting the northern area, principally along the coastline , with its variety of pristine black sandy beaches, pebble beaches and rugged coastline, offering a variety of activities; scuba diving, snorkelling, water sports, fishing, sailing. trekking gives this area the potential to be world-class tourist destination. Research has shown that property prices are set to rise above the average due to increased infrastructure development, and the planned opening of a new International Airport in the North shows the Bali Government's commitment to the develop this area as a future tourist destination.<br />
                <br />
                The Northern part of Bali is also an excellent base for exploration further afield, close to the main portal for trips to other parts of Indonesia. <br />
              Although it is largely undeveloped there is a wide range of properties and land with beach front to panoramic rice paddy views still to be found at good value for money. </p>
              <table width="100%">
                <tr>
                  <td align="left" valign="top"><div class="AreasOfBaliHighlight" style="color: #60C; font-weight: bolder;">This is an ideal time to consider your dream property in this area; be it for investment, development or private use.</div></td>
                </tr>
              </table>
              <p> The main tourist area in the North is arguably <span style="color: #F00">Lovina</span>, with property prices reflecting this especially beach front or with panoramic views so expect to see prices a little bit more expensive in and around this area. However inland prices are still very reasonable.<br />
                <br />
                <img src="../../../Images/Bali Scenes General/Traditional-lifestyle.gif" alt="village life" width="188" height="137" hspace="2" align="right" />Other areas to be found in the North going towards <span style="color: #F00">Gillimanuk</span> the main portal for the ferry to and from Java; include: <span style="color: #F00">Pemuteran</span> popular diving area, <span style="color: #F00">Menjangan</span> <span style="color: #F00">Island</span>, a popular diving and nature reserve; are also beginning to attract investors, resulting in prices rising.<br />
                The area of the North of Bali travelling East from <span style="color: #F00">Lovina</span> towards the eastern part of Bali is quieter and more rural, with stunning coastline and secluded traditional village life, here life slows down, people are very friendly and happy to integrate with "Bule (Foreigner), this life style is definitely completely different to the hustle and bustle of the South of Bali, perfect for future development and peaceful retirement, and with the development of the new <span style="color: #F00">International Airport</span> in this area, about 1/2 way between <span style="color: #F00">Singaraja</span> and <span style="color: #F00">Almpura</span> in the East, which makes this area an ideal investment opportunity as property and land prices are set to grow in this part of North Bali faster than other areas.<br />
                <br />
                <img src="../../../Images/Bali Scenes General/img_bali_1.jpg" alt="Quiet Lanes" width="189" height="124" hspace="2" align="left" />It has to be said that facilities for schooling, medical services and shopping are not as good as in the South or around Ubud area, which have higher concentrations of established ex pat communities, and better facilities also the job opportunities are not anywhere near as plentiful as in the South or Ubud areas, which limits the lifestyle for many people looking to settle in Bali, careful consideration has to be given if your intention is for a place for you to reside, and it is possibly an area for consideration as an investment opportunity, or for a development of hotel or villa resort, or as a second retirement home. </p>
              <p>There are of course facilities for all the usual services and plenty of job opportunities, and a small but growing ex-pat community, especially in and around <span style="color: #F00">Lovina</span> and <span style="color: #F00">Singaraja</span> just not as many as in the other popular areas for ex pat's. </p>
            </div>
            <div class="TabbedPanelsContent">
              <p> </p>
              <table width="100%" border="0">
                <tr>
                  <td valign="top"><h7 style="color: #C03"><span style="font-weight: bold"><span style="font-size: 12px; color: #FFF;">Property Code BSP 00130101</span><span style="font-size: 16px"> </span>SAMBIRENTENG - North East Bali 7,300 meters (</span></h7>
                    <span style="font-weight: bold; color: #B90033;">73 ARE) Beach front flat wooded land for Sale/ Rent</span></td>
                  <td><span class="button_01"><a href="#" onclick="MM_openBrWindow('North Bali/Gold Package Listings/BSP-00130101/Sambirenteng Property Location Map.html',width=750,height=200')">Location Map</a></span></td>
                </tr>
                <tr>
                  <td width="77%" valign="top"><p>A golden opportunity to acquire a prime plot of beach front land in the North East of Bali in an area that enjoys newly awarded "Tourism Status" ideal for the development of a small hotel or villa complex, easy access to many popular tourist spots already developing in the North.</p>
                    <p> A 3 meter wide sealed road gives acces to the whole length of this prime plot of land: Electric (PLN) Water (PDAM) Telephone & Internet close to hand and readilly available</p></td>
                  <td width="23%"><a href="Carousel Sambirneteng Listings.html target="_parent"></a><iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></td>
                </tr>
                <tr>
                  <td valign="top">Purchase price<span style="color: #33C; font-weight: bold;"> 12,500,000,000 Rp</span><br />
                    Rental Price (25 years) <span style="font-weight: bold">9,450,000,000</span> <span style="font-weight: bold">Rp</span> <span style="color: #FFF"> (<span style="font-weight: bold; color: #3333D0;"> 5,200,000 Rp</span><span style="color: #3933D5"> </span> per are per year )<br />
                      Min Rental Period 25 Years, extendable to to a max of 75 years
                      (with full "Right Of Use" issued by owner)</span></td>
                  <td valign="top"><p class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101 Details.html">Find out more</a></p>
                    <br />
                    <span class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101_Enquiry Form.html" target="_parent">Make Enquiry</a></span></td>
                </tr>
              </table>
              <p><br />
              </p>
              <hr width="100%" noshade="noshade" />
              <p> </p>
            </div>
<div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.<iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></div>
            <div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.</div>
</div>
        </div>
        <p> </p>
      <p>
        <h7 style="color: #C03"></h7>
      </p>
<h2></h2>
     </div>
     <div class="cleaner"></div>
    </div> 

Could you share a link to the page?
Seeing it in context and in our browsers is much easier to debug.
If not, make sure to run the validator here The W3C Markup Validation Service and clear out any problems. HTML errors, especially structural ones, will cause all kinds of display problems in various browsers/versions/platforms.

Spry tabbed panels as menu system

Hi,
This is actually for Dreamweaver CS6.    What I'm trying to do is use spry tabbed panels as horizontal my menu system.    I want to have basically the functionality of the adobe.com menu system where the drop downs are tabbed and the content box size varies depending on the tab and the content box moves it's position relative to the tab that's selected.     I did manage to get the mouseover working so the tab's change according to which tab the mouse passes over.
My current problems are these:
I managed to change the content panel box size so it's not the same width as the full panel tab group however I cannot get it to move relative to which tab is selected, it just stays fixed in one location.
The content tabs are pushing the body of my page down instead of showing up over top of it which is obvioulsy not very condusive for a menu system.
I would like the default to show none of the panels until someone mouseover's one of the tab's and for the panels to dissapear when the mouse is not in the menu system.
For something similar to the adobe.com menu system am i using the right feature (it looks like tabbed panels to me) or should I be using a different spry feature, I would like to have text and an image in the content box under each tab just for overall effect.
I'm quite inexperienced with CSS and Javascripting and have basically gotten this far with trial and error modifying the CSS settings but I'm unable to modify the javascript on my own.
Any help or suggestions would be greatly appreciated!!
Below is my tabbed panels css:
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 1000px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
color: #FFF;
background-color: #000;
width: 1000px;
height: 25px;
.TabbedPanelsTab {
position: relative;
top: 0px;
float: left;
padding: 4px 21px;
margin: 0px 0px 0px 0px;
background-color: #000;
list-style: none;
border-left: solid 0px #000;
border-bottom: solid 0px #000;
border-top: solid 2px #000;
border-right: solid 0px #000;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
width: 1000;
height: 15px;
font-family: "Myriad Pro";
font-size: 1em;
font-weight: normal;
.TabbedPanelsTabHover {
background-color: #D31145;
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
.TabbedPanelsTabSelected {
background-color: #D31145;
border-bottom: 0px solid #D31145;
color: #FFFFFF;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 2px #D31145;
border-bottom: solid 2px #D31145;
border-top: solid 2px #D31145;
border-right: solid 2px #D31145;
background-color: #FFFFFF;
visibility: visible;
width: 50%;
position: inherit;
height: auto;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
overflow: hidden;
padding: 4px;
.TabbedPanelsContentVisible {
.VTabbedPanels {
overflow: hidden;
zoom: 1;
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
.TabbedPanelsContent {
overflow: visible !important;
display: block !important;
clear:both !important;
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;
THe Javascript for my tabbed panels are below:
// SpryTabbedPanels.js - version 0.7 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//   * Redistributions of source code must retain the above copyright notice,
//     this list of conditions and the following disclaimer.
//   * Redistributions in binary form must reproduce the above copyright notice,
//     this list of conditions and the following disclaimer in the documentation
//     and/or other materials provided with the distribution.
//   * Neither the name of Adobe Systems Incorporated nor the names of its
//     contributors may be used to endorse or promote products derived from this
//     software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.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.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;
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();
Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
var children = [];
var child = element.firstChild;
while (child)
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
   children.push(child);
child = child.nextSibling;
return children;
Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
   continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length)
   return children[0];
return null;
Spry.Widget.TabbedPanels.prototype.getTabs = function()
var tabs = [];
var tg = this.getTabGroup();
if (tg)
tabs = this.getElementChildren(tg);
return tabs;
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length > 1)
   return children[1];
return null;
Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
var panels = [];
var pg = this.getContentPanelGroup();
if (pg)
panels = this.getElementChildren(pg);
return panels;
Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
ele = this.getElement(ele);
if (ele && arr && arr.length)
for (var i = 0; i < arr.length; i++)
   if (ele == arr[i])
    return i;
return -1;
Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
var i = this.getIndex(ele, this.getTabs());
if (i < 0)
i = this.getIndex(ele, this.getContentPanels());
return i;
Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
return this.currentTabIndex;
Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
return Math.min(this.getTabs().length, this.getContentPanels().length);
Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
   element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
   element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
this.showPanel(tab);
return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
this.addClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
this.removeClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
this.hasFocus = true;
this.addClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
this.hasFocus = false;
this.removeClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.KEY_UP = 38;
Spry.Widget.TabbedPanels.KEY_DOWN = 40;
Spry.Widget.TabbedPanels.KEY_LEFT = 37;
Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
var tabs = this.getTabs();
for (var i =0; i < tabs.length; i++)
if (tabs[i] == tab)
   var el = false;
   if (key == this.previousPanelKeyCode && i > 0)
    el = tabs[i-1];
   else if (key == this.nextPanelKeyCode && i < tabs.length-1)
    el = tabs[i+1];
   if (el)
    this.showPanel(el);
    el.focus();
    break;
return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
var stopTraversal = false;
if (root)
stopTraversal = func(root);
if (root.hasChildNodes())
   var child = root.firstChild;
   while (!stopTraversal && child)
    stopTraversal = this.preorderTraversal(child, func);
    try { child = child.nextSibling; } catch (e) { child = null; }
return stopTraversal;
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
var self = this;
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { self.onTabClick(e, tab);return self.onTabMouseOver(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
if (this.enableKeyboardNavigation)
// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
// by default.
// Find the first element within the tab container that has a tabindex or the first
// anchor tag.
var tabIndexEle = null;
var tabAnchorEle = null;
this.preorderTraversal(tab, function(node) {
   if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
    var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
    if (tabIndexAttr)
     tabIndexEle = node;
     return true;
    if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
     tabAnchorEle = node;
   return false;
if (tabIndexEle)
   this.focusElement = tabIndexEle;
else if (tabAnchorEle)
   this.focusElement = tabAnchorEle;
if (this.focusElement)
   Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
   Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
   Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
var tpIndex = -1;
if (typeof elementOrIndex == "number")
tpIndex = elementOrIndex;
else // Must be the element for the tab or content panel.
tpIndex = this.getTabIndex(elementOrIndex);
if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
return;
var tabs = this.getTabs();
var panels = this.getContentPanels();
var numTabbedPanels = Math.max(tabs.length, panels.length);
for (var i = 0; i < numTabbedPanels; i++)
if (i != tpIndex)
   if (tabs[i])
    this.removeClassName(tabs[i], this.tabSelectedClass);
   if (panels[i])
    this.removeClassName(panels[i], this.panelVisibleClass);
    panels[i].style.display = "none";
this.addClassName(tabs[tpIndex], this.tabSelectedClass);
this.addClassName(panels[tpIndex], this.panelVisibleClass);
panels[tpIndex].style.display = "block";
this.currentTabIndex = tpIndex;
Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
var tabs = this.getTabs();
var panels = this.getContentPanels();
var panelCount = this.getTabbedPanelCount();
for (var i = 0; i < panelCount; i++)
this.addPanelEventListeners(tabs[i], panels[i]);
this.showPanel(this.defaultTab);
})(); // EndSpryComponent

Note - I agree with Nancy
As for your experiment, to prevent the "drop" reduce the spry CSS padding in line 76 selector from 21px to 18px.
.TabbedPanelsTab {
    -moz-user-select: none;
    background-color: #000000;
    border-color: #000000;
    border-left: 0 solid #000000;
    border-style: solid;
    border-width: 2px 0 0;
    cursor: pointer;
    float: left;
    font-family: "Myriad Pro";
    font-size: 1em;
    font-weight: normal;
    height: 15px;
    list-style: none outside none;
    margin: 0;
    padding: 4px 18px;
    position: relative;
    top: 0;
Don't use dummy text without normal length text with breaks

Spry tabbed panels - Different Hover Class for each tab

Already posted this in the general Dreamweaver section, but just realized there was a specific Spry section. So, my apologies for the repost.
I'm setting up spry tabbed panels, and I'm wanting to use an image for each tab, with the text already on it. I've figured this much out by creating a different class for each in the spry tabbed panel css.
However, I'd also like to have a second hover image for each tab. I'm having trouble figuring out how to set up separate classes for each tab's hover state.
Any help?
Thanks.

Just in case you did not notice the announce at the top of this forum's main page, I have copied it here.
Announcement: New to Spry, or the Spry forums?
Hide Details
Before you post a topic please verify that:
You are using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Your question was not asked before
Using the search functionality on forums you can easily find out if your question has been answered before. While you are in search, you can specify the search locations. The Spry forum can be found under:
Adobe Labs > Spry Framework for Ajax
Yoru question can not be found in the existing documentation
Spry provides you with allot of documentation this can found on different locations. In the sidebar of this forum you can find a small summary of resources that will help you on your way.
If these options do not apply to your question, please be so kind to also supply the following information in your topic together with a clear description of your issue:
What browsers does this issue occure:
example: Internet Explorer 8 on Window 7 and Firefox 3.0 on Mac OSX
What version of Spry are using:
example: Spry 1.6.1 ( the version number can be found in license header of the .css and .js files )
What is the url of your website or page in issue:
example: http://www.example.com/page/in/issue.html
Step to reproduce the issue:
example: Scroll down till you find the header "help", there you will see a Spry Accordion. When you click on it it will not open or close.
So users can provide you with a better answer, without having to ask you for further details.
by Arnout Kazemier at Oct 23, 2009 2:47 PM
landon_tc wrote:
Actually, I do remember posting that, and have updated it with what worked for me. However, I could not recall posting it in a specific ajax spry forum, so I assumed I just posted in the general forum. Hence the current situation.
Yeah and my name is not Ben Pleysier.
landon_tc wrote:
Any help with the current problem?
Please have a look at this thread http://forums.adobe.com/message/2662019#2662019
I hope this helps.
Ben Pleysier

Spry Tab link only works once... why?

Hi all,
I have a spry tabbed area with 4 tabs on my page. Each tab contains data that is dragged from an MSAccess table. A couple of the tabs have repeat regions. This all works fine. One of my tabs has a repeat region where I can click on a button image to change a record status from True to False (or visa versa). The click runs the associated vbscript which executes the SQL update statement no problem. However I noticed that when I changed the data on this tab and reloaded the page using a Response.redirect after the sql update was executed, it would default to the 1st tab and not the one I was viewing that contains the repeat region. A quick search led me to the SpryURLUtils.js file which solved that problem by allowing me to specify which tab to load. I appended the relevant code to give me this:
Response.Redirect("myrecord.asp?" & Request.QueryString & "&tab=1#TabbedPanels1"
As I mentioned, the tab contains a repeat region. If I click on a button to change the status of that record the page reloads fine and displays the correct tab. But this only happens once... each subsequent time I try to change another record my tab contents disappear. The tabs are still visible and if I click on the tab where I've changed the data the tab content is dispalayed, but obvioulsy this isn't right... it should reload and display the correct tab with each call of the code.If I navigate away from this page and then come back to it I can successfully chnage one record and the results are displayed. Change another record and the changes are made, but the tab contents are not displayed again. The interesting thing is that if I reload/refresh the page the problem occurs staright away on the first record change.
So my question is 2-fold... Why is this happening and how do I solve the problem?
Here is the vbscript that updates the record and does the Response.redirect
<%
'Change Notification
If (CStr(Request("ToggleNotify")) = "ToggleNotify") Then
dim strSQL
'check to see if notification is currently true or false
    If cstr(Request.Form("NotifyChanges")) = Cstr("True") Then
    'change notifiaction to false
        strSQL = "UPDATE tblUserAccess SET NotifyChanges=0 WHERE AccessID = " & Request.Form("hiddenAccessID")
    else
        strSQL = "UPDATE tblUserAccess SET NotifyChanges=-1 WHERE AccessID = " & Request.Form("hiddenAccessID")
    end if
    Set MM_editCmd = Server.CreateObject ("ADODB.Command")
    MM_editCmd.ActiveConnection = MM_VBUsers_STRING
    MM_editCmd.CommandText = strSQL
    MM_editCmd.Execute
    MM_editCmd.ActiveConnection.Close
    Response.Redirect("myrecord.asp?" & Request.QueryString & "&tab=1#TabbedPanels1" )
End If
%>
Here is my Repeat region with the associated form
<%
While ((Repeat3__numRows <> 0) AND (NOT rsAccessRights.EOF))
%>
<form name="frmNotifications" method="post" action="">
<tr class="PageText">
    <td width="200"><%=(rsAccessRights.Fields.Item("SectionTitle").Value)%>
        <input type="hidden" name="hiddenAccessID" id="hiddenField2" value="<%=(rsAccessRights.Fields.Item("AccessID").Value)%>">
    </td>
    <td width="200">
                <%If (CStr((rsAccessRights.Fields.Item("NotifyChanges").Value)) = CStr("True")) Then %>
          <input type="image" src="../sitegraphics/accept.png" alt="Submit button">
        <%else%>
          <input type="image" src="../sitegraphics/cross.png" alt="Submit button">
        <%end if%>
    <input type="hidden" name="ToggleNotify" value="ToggleNotify">
    <input type="hidden" name="NotifyChanges" id="test" value="<%=cstr((rsAccessRights.Fields.Item("NotifyChanges").Value))%>">
   </td>
</tr>
</form>
<%
Repeat3__index=Repeat3__index+1
Repeat3__numRows=Repeat3__numRows-1
rsAccessRights.MoveNext()
Wend
%>
And here is the bit at the bottom that specifies the default tab if nothing is passed in the URL
<script type="text/javascript">

</script>
Sorry for the long post!
This is my first dabble with Spry stuff, so I'm a bit green. If anyone can explain to me why this is happening that would be most apopreciated. If anyone can tell me how to solve the problem I'll send them a big e-kiss!
Not sure how impotant this is but it happens in both Firefox and IE8.
Thanks in advance
Dan

Hi Ben, thanks for taking the time to read my query.
The site in question is an intranet site, so I am unable to give you a link to the page. Would the entire page of code rather than just the odd bits help?
Cheers
Dan

Targeting a specific Spry tab in an A Href

Similar Messages

Maybe you are looking for