Return focus to spry tab
Hi,
I know this has been asked previously and I have gone thorugh the posts day after day trying to figure them but am having no luck at all.
Would appreciate someone in the know looking at my code and pointing me in the right direction..
I have an admin section to my site which contains 8 Spry tabs, each one containing a form that I can sue to update my database. I am trying to get the "Submit" button to return me to the tab I was working on but so far either get returnd to the default page or the tabs themselves stop working.. Each seperate tab will have it's own form and so far cannot get even one to work . Can someone advise please.. code below for my admin page. The code I have inserted relating to the Spry tabs I have placed in bold here ..
Any help will be greatly appreciated..
Regards,
gyesdahl
***************** CODE*************
<?php require_once('../Connections/la.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
$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;
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form2")) {
$insertSQL = sprintf("INSERT INTO days (name) VALUES (%s)",
GetSQLValueString($_POST['day'], "text"));
//////////// MY INSERT //////////////////////
$tabToShow = 7; // 2 = 3rd tab
mysql_select_db($database_la, $la);
$Result1 = mysql_query($insertSQL, $la) or die(mysql_error());
$insertGoTo = "admin.php";
if (isset($_SERVER['QUERY_STRING'])) {
$insertGoTo .= (strpos($insertGoTo, '?')) ? "" : "";
$insertGoTo .= $_SERVER['QUERY_STRING'];
header(sprintf("Location: %s", $insertGoTo));
mysql_select_db($database_la, $la);
$query_days = "SELECT days.name FROM days";
$days = mysql_query($query_days, $la) or die(mysql_error());
$row_days = mysql_fetch_assoc($days);
$totalRows_days = mysql_num_rows($days);
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/sub.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// Grabs the values of the URL parameters for the current URL.
var params = Spry.Utils.getLocationParamsAsObject();
</script>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
@import url("../la.css");
body {
background-color: #000033;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
color: #CC6666;
.style1 {font-size: 12px}
.links {color: #CCCC66}
-->
</style>
<link href="backup/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="65%" height="430" border="3" align="center" bordercolor="#666666" bgcolor="#FFFFFF">
<tr>
<td valign="top"><table width="100%" height="134" border="0" align="center" bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<tr>
<td width="523" height="72" align="center" valign="top"><div align="left"><img src="../Images/logo.jpg" width="259" height="72" /></div></td>
<td width="1" height="72"> </td>
<td width="200
" height="72" border="2" bordercolor="#000033"><div align="center"><img src="images/la<?php echo rand(1,10); ?>.jpg" width="159" height="72" /></div></td>
</tr>
<tr align="center" valign="top">
<td height="23" colspan="3" bgcolor="#993300"><div align="center" class="links"><a href="../index.php">Home</a> | About Us | Contact Us | Tours | Air Charter | Managed Properties
<div align="right" style="font-size: 8pt;">
<div align="center"><b><?php echo date("l d M Y"); ?></b></div>
</div>
</div></td>
</tr>
<tr align="center" valign="top">
<th height="17" colspan="3" background="backup/images/sub_feature.jpg"> </th>
</tr>
</table>
<hr align="center" width="100%" size="2" class="brown" />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="610" valign="top"><!-- InstanceBeginEditable name="Sub_main" -->
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">View Tours</li>
<li class="TabbedPanelsTab" tabindex="0">Create Tour</li>
<li class="TabbedPanelsTab" tabindex="0">Delete Tour</li>
<li class="TabbedPanelsTab" tabindex="0">Add Country</li>
<li class="TabbedPanelsTab" tabindex="0">Inclusions</li>
<li class="TabbedPanelsTab" tabindex="0">Exclusions</li>
<li class="TabbedPanelsTab" tabindex="0">Currency</li>
<li class="TabbedPanelsTab" tabindex="0">Days</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent" style="display: none">Content 1</div>
<div class="TabbedPanelsContent" style="display: block">Content 2</div>
<div class="TabbedPanelsContent" style="display: none">Content 3</div>
<div class="TabbedPanelsContent" style="display: none">Content 4</div>
<div class="TabbedPanelsContent" style="display: none">Content 5</div>
<div class="TabbedPanelsContent" style="display: none">Content 6</div>
<div class="TabbedPanelsContent" style="display: none">Content 7</div>
<div class="TabbedPanelsContent" style="display: none">
<form action="admin.php" method="post" name="form2" id="form2">
<table align="center">
<tr valign="baseline">
<td nowrap="nowrap" align="right">Day:</td>
<td><p>
<input type="text" name="day" value="" size="32" />
</p>
<p>
<input type="submit" name="button" id="button" value="Submit" />
</p></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right"> </td>
</tr>
</table>
<input type="hidden" name="MM_insert" value="form2" />
</form>
<p> </p>
ontent 8</div>
</div>
</div>
<div align="center"></div>
<script type="text/javascript">
HAVE TRIED BOTH OF THE BELOW CODES WITH NO RESULTS. EITHERE RETURNS TO DEFAULT (0) TAB OR THE TABS STOP WORKING
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1",{defaultTab:<?php echo($tabToShow);?> });
//-->
</script>
<script type="text/javascript">
<!--
//var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab:(params.panel ? params.panel :7 )});
//-->
</script>
<!-- InstanceEndEditable --></td>
</tr>
</table>
<p> </p></td>
</tr>
<tr>
<td valign="top"><div align="center" class="style1">Copyright © 2009 Leisure Africa - All Rights Reserved</div></td>
</tr>
</table>
<p> </p>
</body>
<!-- InstanceEnd --></html>
<?php
mysql_free_result($days);
?>
Hi David,
Many thanks for replying to my post and the time taken. I have tried your advice but my tabs are not working. Seems like everything I try ends up in this state Have checked the submit format as POST
I added the code and when the page loads the tabs are non-active.. code below with added parts in bold
***** code*****
<?php require_once('../Connections/la.php'); ?>
<?php
if (isset($_POST['tab']) && !empty($_POST['tab'])) {
$tabToShow = $_POST['tab'];
} else {
$tabToShow = 0;
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
$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;
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form2")) {
$insertSQL = sprintf("INSERT INTO days (name) VALUES (%s)",
GetSQLValueString($_POST['day'], "text"));
//////////// MY INSERT //////////////////////
$tabToShow = 7; // 2 = 3rd tab
mysql_select_db($database_la, $la);
$Result1 = mysql_query($insertSQL, $la) or die(mysql_error());
$insertGoTo = "admin.php";
if (isset($_SERVER['QUERY_STRING'])) {
$insertGoTo .= (strpos($insertGoTo, '?')) ? "" : "";
$insertGoTo .= $_SERVER['QUERY_STRING'];
header(sprintf("Location: %s", $insertGoTo));
mysql_select_db($database_la, $la);
$query_days = "SELECT days.name FROM days";
$days = mysql_query($query_days, $la) or die(mysql_error());
$row_days = mysql_fetch_assoc($days);
$totalRows_days = mysql_num_rows($days);
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/sub.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<script src="../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<link href="../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
// Grabs the values of the URL parameters for the current URL.
var params = Spry.Utils.getLocationParamsAsObject();
</script>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
@import url("../la.css");
body {
background-color: #000033;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
color: #CC6666;
.style1 {font-size: 12px}
.links {color: #CCCC66}
-->
</style>
<link href="backup/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="65%" height="430" border="3" align="center" bordercolor="#666666" bgcolor="#FFFFFF">
<tr>
<td valign="top"><table width="100%" height="134" border="0" align="center" bordercolor="#FFFFFF" bgcolor="#FFFFFF">
<tr>
<td width="523" height="72" align="center" valign="top"><div align="left"><img src="../Images/logo.jpg" width="259" height="72" /></div></td>
<td width="1" height="72"> </td>
<td width="200
" height="72" border="2" bordercolor="#000033"><div align="center"><img src="images/la<?php echo rand(1,10); ?>.jpg" width="159" height="72" /></div></td>
</tr>
<tr align="center" valign="top">
<td height="23" colspan="3" bgcolor="#993300"><div align="center" class="links"><a href="../index.php">Home</a> | About Us | Contact Us | Tours | Air Charter | Managed Properties
<div align="right" style="font-size: 8pt;">
<div align="center"><b><?php echo date("l d M Y"); ?></b></div>
</div>
</div></td>
</tr>
<tr align="center" valign="top">
<th height="17" colspan="3" background="backup/images/sub_feature.jpg"> </th>
</tr>
</table>
<hr align="center" width="100%" size="2" class="brown" />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="610" valign="top"><!-- InstanceBeginEditable name="Sub_main" -->
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">View Tours</li>
<li class="TabbedPanelsTab" tabindex="0">Create Tour</li>
<li class="TabbedPanelsTab" tabindex="0">Delete Tour</li>
<li class="TabbedPanelsTab" tabindex="0">Add Country</li>
<li class="TabbedPanelsTab" tabindex="0">Inclusions</li>
<li class="TabbedPanelsTab" tabindex="0">Exclusions</li>
<li class="TabbedPanelsTab" tabindex="0">Currency</li>
<li class="TabbedPanelsTab" tabindex="0">Days</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent" style="display: none">Content 1</div>
<div class="TabbedPanelsContent" style="display: block">Content 2</div>
<div class="TabbedPanelsContent" style="display: none">Content 3</div>
<div class="TabbedPanelsContent" style="display: none">Content 4</div>
<div class="TabbedPanelsContent" style="display: none">Content 5</div>
<div class="TabbedPanelsContent" style="display: none">Content 6</div>
<div class="TabbedPanelsContent" style="display: none">Content 7</div>
<div class="TabbedPanelsContent" style="display: none">
<form action="admin.php" method="post" name="form2" id="form2">
<input name="tab" type="hidden" value="7" /> <table align="center">
<tr valign="baseline">
<td nowrap="nowrap" align="right">Day:</td>
<td><p>
<input type="text" name="day" value="" size="32" />
</p>
<p>
<input type="submit" name="button" id="button" value="Submit" />
</p></td>
</tr>
<tr valign="baseline">
<td nowrap="nowrap" align="right"> </td>
</tr>
</table>
<input type="hidden" name="MM_insert" value="form2" />
</form>
<p> </p>
ontent 8</div>
</div>
</div>
<div align="center"></div>
<script type="text/javascript">
<!--
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1",{defaultTab:<?php echo $tabToShow;?> });
//-->
</script>
<!-- InstanceEndEditable --></td>
</tr>
</table>
<p> </p></td>
</tr>
<tr>
<td valign="top"><div align="center" class="style1">Copyright © 2009 Leisure Africa - All Rights Reserved</div></td>
</tr>
</table>
<p> </p>
</body>
<!-- InstanceEnd --></html>
<?php
mysql_free_result($days);
?>
Similar Messages
-
Spry - Changing focus on each tabbed panel
Hello,
I am not sure if this is the correct place to post this.
I have been asked to modify this page, http://webpac.lvlspa.org/screens/moco_mainmenu.html , and I was wondering how I could have the focus be on the input box when a patron clicks on each tabbed panel?
Thanks for your time,
MattAutomatically setting the focus in a form field is normally a trivial operation. However, it's not so simple with tabbed panels because the tabs and their content are all on the same web page.
I decided to give this a try, and think that I have come up with a solution. The code is specific to your setup, which uses "targetEncore" and "searcharg" as the name of the input fields you want to have focus when a tab is clicked. Add the following script block at the bottom of the page, just before the closing </body> tag:
<script>
if (document.getElementsByClassName) {
function findField(node) {
var node = node || document.getElementsByClassName('TabbedPanelsContentVisible')[0];
if (node.hasChildNodes()) {
var child = node.firstChild;
while (child) {
if (child.nodeType === 1 && child.nodeName == 'INPUT') {
if (child.name == 'targetEncore' || child.name == "searcharg") {
child.focus();
break;
} else {
findField(child);
child = child.nextSibling;
findField();
var tabs = document.getElementsByClassName('TabbedPanelsTab');
for (var i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', (function (num) {
return function() {
findField();
})(i), false);
</script>
This script works in all modern browsers, included Internet Explorer 9. However, it does not work in IE 8 or earlier. Getting it to do so would involve a lot more scripting, so is probably not worthwhile.
Message was edited by: David_Powers to wrap script in conditional statement that tests support for document.getElementsByClassName. -
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);
})(); // EndSpryComponentNote - 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 -
Set Default Spry Tabbed Panel As Close Until Mouse Over
Dear All,
Is there a way to set the default spry tabbed panel to be closed when the page load untilI mouse over it??
here is the link to my page http://www.senhuiauto.com/model_code_link.html. As you can see, it roll down by default.
How to fix??
Below is my SpryTabbedPanel.js
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();
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.onTabClick = function(e, tab)
this.showPanel(tab);
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
this.addClassName(tab, this.tabHoverClass);
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
this.removeClassName(tab, this.tabHoverClass);
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
this.hasFocus = true;
this.addClassName(this.element, this.tabFocusedClass);
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
this.hasFocus = false;
this.removeClassName(this.element, this.tabFocusedClass);
Spry.Widget.TabbedPanels.ENTER_KEY = 13;
Spry.Widget.TabbedPanels.SPACE_KEY = 32;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
var key = e.keyCode;
if (!this.hasFocus || (key != Spry.Widget.TabbedPanels.ENTER_KEY && key != Spry.Widget.TabbedPanels.SPACE_KEY))
return true;
this.showPanel(tab);
if (e.stopPropagation)
e.stopPropagation();
if (e.preventDefault)
e.preventDefault();
return false;
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) { return self.onTabClick(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { 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);You may be better off asking this question over at the forum dedicated to the Spry Widgets:
Spry forum. -
PHP Form in Spry Tabbed Content Div
I have placed some PHP forms inside some Spry Tabbed Content
divs. When the forms are submitted, the page reloads with the
default tabbed content displayed instead of the tab where the form
is. If I click to the tab with the form, I can see the information
PHP properly returned.
Does anybody know how to make the Spry Tabbed Content script
return to the tab that had focus when a PHP form is submitted
instead of the default tab?
Thanks in advance for any advice.Hi,
On the main forum page you will have read the following.
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.
After you have upgraded and not removed the remarks from the Spry files, we will have another look at it.
Ben -
Spry Tabbed XML data panels within HTMLPanel not working.
Many thanks for reading.
s
I trying to provide a rapid solution using adobe's samples
to make Spry Tabs work within an html panel (in order to avoid
many links in my page).
I am using the following code:
initial page with html panel with the ready products.js to parse the links:
<script src="../SpryAssets/xpath.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryPagedView.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryHTMLPanel.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src="../SpryAssets/SpryDataExtensions.js"></script>
<script src="SpryNestedXMLDataSet.js" type="text/javascript"></script>
<script src="../SpryAssets/products.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="TabbedPanels/SpryTabbedPanels.css"/>
<script src="TabbedPanels/SpryTabbedPanels.js"></script<script type="text/javascript">
var ds1 = new Spry.Data.XMLDataSet("ajaxbibliaxmlbridgetitle.php", "root/row[katigoria=1]", {sortOnLoad: "ID_BIBLIOU", sortOrderOnLoad: "ascending"});
var pv1 = new Spry.Data.PagedView( ds1 ,{ pageSize:10 });
var pv1PagedInfo = pv1.getPagingInfo();
//var TabbedPanels1 = new Spry.Widget.TabbedPanels();
</script>
</head>
<body class="twoColFixRtHdr">
<div id="container">
<div id="sidebar1">
<div id="productPageLinks">
<ul>
<li><a href="index.php">Index</a></li>
<li><a href="booklist.php">Product List</a></li>
<li><a href="test.php">Σχετικά με τη Βιβλιοθήκη</a></li>
</ul>
</div>
</div>
<div id="mainContent">
<br />
<div class="HTMLPanelLoadingContent"> Waiting</div>
<div class="HTMLPanelErrorContent"> error </div>
</div>
</div>
</body>
</html>
Products.js (adobe'S change to can load xml dataset)
var mainPanel = null;
// Our initialization function which unobtrusively attaches
// click handlers on the product links within the page.
function InitProductPage()
mainPanel = new Spry.Widget.HTMLPanel("mainContent" , { evalScripts: true });
var observer = {onPostUpdate: function(){ Spry.Data.initRegions('mainContent');
mainPanel.addObserver(observer);
// For every link on the page which points to a product page,
// attach an onclick handler that will intercept clicks and
// and fire off a request to load the URL via the HTMLPanel.
// For these links, we want to load the static product page
// and extract out the content underneath the "mainContent"
// node.
Spry.$$("#productPageLinks a").addEventListener("click", function(e)
mainPanel.loadContent(this.href, { id: "mainContent" });
return false;
}, false);
// For every link on the page which points to a product HTML
// fragment, attach an onclick handler that will intercept clicks and
// and fire off a request to load the URL via the HTMLPanel.
// For these links, we are loading HTML fragments, so there is no
// need to specify an ID to extract out. The HTMLPanel will insert
// all of the content recieved.
Spry.$$("#productFragmentLinks a").addEventListener("click", function(e)
mainPanel.loadContent(this.href);
return false;
}, false);
// Add our InitProductPage() function as a load listener
// so that it gets executed once the page has fully loaded.
Spry.Utils.addLoadListener(InitProductPage);
XML data and stuff all loaded correctly
What I am trying to do is to load a second page from a link in my initial page
that contains a Tabbed Panel.
The page loads but no panel functionality exists. The first Panel load correctly but behaves as a simple html page .
I have searched several hours the forums and playing around by moving the definition of Spry.Widget.TabbedPanels within
the initial HTMLPanel page and other spots but this produced js errors as expected (because the tab panel definitions exist in bookcategories.php)
which is loaded only when it is called.
Any ideas?
Page to load is like this :
<bookcategories.php>
<link rel="stylesheet" type="text/css" href="TabbedPanels/SpryTabbedPanels.css"/>
<script src="TabbedPanels/SpryTabbedPanels.js"></script>
<script language="JavaScript" type="text/javascript" src="../SpryAssets/SpryDataExtensions.js"></script>
</head>
<body >
<div id="container">
<div id="mainContent">
<div class="TabbedPanels" id="TabbedPanels1">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab">SOmething ... </li>
<li class="TabbedPanelsTab">Something else </li>
<
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Blah Blah
<div spry:region="pv1" id="bibliapv"><br />
<br />
<div spry:state="ready">
<table width="775" height="42" >
<tr style="color:#900"; >
<th etc>
</tr>
<tr spry:repeat="pv1" spry:even="even" spry:odd="odd">
<td > {ID_}
</td>
<td>{Writer}</td>
<td>{Book_Title}</td>
</tr>
</table>
</div>
</div>
<div class="TabbedPanelsContent">Tab 2 Content</div>
<div class="TabbedPanelsContent">Tab 3 Content</div>
<div class="TabbedPanelsContent">Tab 4 Content</div>
</div>
</div>
</div>
<br class="clearfloat" />
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
Many thanksOk I went back through everything and checked to make sure my
files were in the right places both my SpryTabbedPanels.css and my
SpryTabbedPanels.js are in the SpryAssets folder and they work fine
until I try and add data from an xml file to them then the tabs
populate with the info but become unclickable and the content area
has every bit of content in on tab. Below is what I have let me
know what I'm doing wrong I am using Spry 1.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/xpath.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryData.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<script type="text/javascript">
<!--
var ds1 = new Spry.Data.XMLDataSet("solutions3.xml",
"solutions/solution");
//-->
</script>
<link href="SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div spry:region="ds1">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li spry:repeat="ds1" class="TabbedPanelsTab"
tabindex="0">{name}</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div spry:repeat="ds1"
class="TabbedPanelsContent">{desc}</div>
</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new
Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
</body>
</html> -
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
JohnHi
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> <!-- end of TabbedPanelsContent div Results -->
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);
?> -
Is it possible to change the selectedTab text color in SPRY Tabs?
Was working with SPRY tabs and the client would like the font color to change to white on roll over and select.
Is this possible through simply adding a single line of code to the css file of the SPRY file under
.TabbedPanelsTabSelected {
height: 46px;
width: 168px;
background-color: #a7b9c3;
color: #f7f7f7;
as you can see I already attempted to change the color and wasn't able to achieve the results on
http://ebnerproductions.com/index22.html
If it is possible, awesome, if not, I will replace with rollover images to get the desired result.
Adam Ebner
Thank you again to everyone in the forum as you have all helped me big time in the last couple of days!!!!!I've gone through the coding now for a couple of days and still cannot get the font color to change on select.
I tried to inserted the recommended
<style>
.TabbedPanelsTabSelected,
.TabbedPanelsTabHover {
color: #FFF;
</style>
coding that was offered earlier, and it did nothing....
here is the CSS for my tabbed panels... PLEASE LET ME KNOW WHAT I HAVE DONE WRONG, OR FORGOT!!!!
site is ... http://ebnerproductions.com/index22.html
Here is the Spry css ....
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 810px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
position: absolute;
left: auto;
top: auto;
color: #666;
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
width: 840px;
color: #666;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
position: relative;
top: 0px;
float: left;
padding: 0px;
margin: 0px;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
height: 41px;
width: 158px;
outline:none;
text-align: center;
font-family: Archer-Medium-Pro.otf;
font-size: 1.4em;
font-weight: normal;
color: #666;
font-style: normal;
padding-top: 8px;
-moz-border-top-right-radius: 8px;
-moz-border-top-left-radius: 8px;/* for older versions of Firefox) */
-webkit-border-top-right-radius: 8px;
-webkit-border-top-left-radius: 8px;/* for older versions of Safari and Chrome */
border-top-right-radius: 8px;
border-top-left-radius: 8px;/* Newer browsers */
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
background-color: #EEE;
color: #FFF;
width: 158px;
outline:none;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
height: 41px;
width: 158px;
background-color: #a7b9c3;
font: Archer-Pro-Medium;
color: #FFF;
outline:none;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
color: #666;
text-decoration: none;
outline:none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
clear: both;
background-color: ;
outline:none;
/* 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 {
padding: 0px;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.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;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
Thank everyone again for all the help! -
Spry tabbed panels java script error screwing up whole page when I reopen document in dreamweaver
I need help!
I am creating a site in dreamweaver and I am using spry tabbed panels for my content on every page. I've created 4 pages. When I go to reopen the pages after quitting dreamweaver 2 open and work just fine. However, for the other two I receive a window that says,
this document contains javascript code for a widget that no longer exists. If you don't remove the code, the browser may display javascript errors when loading the page. Would you like dreamweaver to find all instances of this code for you.
I've selected both yes and no options and either way my entire page becomes all jumbled. I've tried deleting the script in code view and it doesn't help?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LEAP 2 GROW</title>
<style type="text/css">
<!--
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-color: #090909;
background-image: url(k2-mountain-1280x800-1.jpg);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center top;
.twoColFixLtHdr #container {
width: 1200px;
margin: 0 auto;
text-align: left; /* this overrides the text-align: center on the body element. */
.twoColFixLtHdr #header {
padding: 0;
margin-top: 10px;
border-bottom-width: medium;
border-bottom-style: solid;
border-bottom-color: #8CC543;
.twoColFixLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 230px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 0;
background-color: #25A8E0;
margin-top: 40px;
height: 400px;
.twoColFixLtHdr #mainContent {
margin-right: 0;
margin-bottom: 0px;
margin-left: 248px;
border: 1px solid #8CC543;
margin-top: 40px;
text-align: center;
background-position: center center;
color: #8CC543;
font-family: "Century Gothic";
font-size: medium;
text-transform: none;
height: 400px;
background-image: url(k2-faded.jpg);
.twoColFixLtHdr #footer {
padding: 0;
text-align: left;
font-family: "Century Gothic";
text-transform: uppercase;
color: #25A8E0;
letter-spacing: 5px;
font-size: small;
word-spacing: normal;
display: block;
margin-left: 0px;
margin-top: 10px;
.twoColFixLtHdr #footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
-->
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #25A8E0;
text-decoration: none;
a:hover {
color: #8CC543;
text-decoration: none;
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
//-->
</script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style2 {font-size: xx-small; color: #EEEEEE; }
a:visited {
text-decoration: none;
color: #25A8E0;
a:active {
text-decoration: none;
.style3 {
color: #FFFFFF;
font-weight: bold;
.style4 {color: #FFFFFF}
-->
</style>
<style type="text/css">
<!--
.style5 {font-size: x-large}
h1 {
font-size: medium;
color: #25A8E0;
.style6 {color: #444444}
.style8 {color: #444444; font-weight: bold; }
-->
</style>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body class="twoColFixLtHdr" onload="MM_preloadImages('HS-MENTOR-OVER.png')">
<div id="container">
<div id="header">
<h1><a href="index.html"><img src="web-banner.png" width="514" height="127" /></a>
<!-- end #header --></h1>
<ul id="MenuBar2" class="MenuBarHorizontal">
<li><a href="volunteer.html">VOLUNTEER</a> </li>
<li><a href="parentcollege.enroll.html">PARENT COLLEGE: ENROLL</a></li>
<li><a href="https://leapfrog-usa.com/AOE/Parent-Resources/Enrollment-Form.aspx">AFTER SCHOOL: ENROLL</a> </li>
</ul>
</div>
<div id="sidebar1">
<ul id="MenuBar1" class="MenuBarVertical">
<li><a href="#" class="MenuBarItemSubmenu">ABOUT US</a>
<ul>
<li><a href="mission.html">mission/overview</a></li>
<li><a href="ourteam.html">OUR team</a></li>
</ul>
</li>
<li><a href="problem.html">THE PROBLEM</a></li>
<li><a href="#" class="MenuBarItemSubmenu">THE SOLUTION</a>
<ul>
<li><a href="solution.overview.html">overview</a></li>
<li><a href="solution.structure.html">structure</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">PROGRAMS</a>
<ul>
<li><a href="parentcollege.html">parent college</a></li>
<li><a href="mentor.html">MENTOR program</a></li>
<li><a href="farming.html">urban farming</a></li>
<li><a href="afterschool.html">CHARTER AFTER SCHOOL</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">LOCATIONS</a>
<ul>
<li><a href="location.fulton.html">fulton county ga</a></li>
<li><a href="location.haiti.html">haiti</a></li>
<li><a href="location.tribe.html">native american tribe</a></li>
</ul>
</li>
<li><a href="news.html">NEWS|RESOURCES</a></li>
<li><a href="contact.html">CONTACT US</a></li>
<li><a href="#">DONATE</a></li>
</ul>
</div>
<div class="style3" id="mainContent">
<div align="left" class="style4">
<p class="style5">MENTOR PROGRAM</p>
<div id="TabbedPanels2" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">ABOUT</li>
<li class="TabbedPanelsTab" tabindex="0">PROGRAM DIRECTOR</li>
<li class="TabbedPanelsTab" tabindex="0">L2G CERTIFICATION</li>
<li class="TabbedPanelsTab" tabindex="0">PHOTO GALLERY</li>
<li class="TabbedPanelsTab" tabindex="0">HIGH SCHOOL ACADEMIC MENTOR</li>
<li class="TabbedPanelsTab" tabindex="0">COMMUNITY-LEADER MENTOR</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<blockquote>
<p><em>“Those who have the ability, have the responsibility”</em></p>
<p><u>Avenue of attention:</u> <strong> MENTOR PROGRAM</strong> <br />
Unites local society, by focusing the <u>attention</u> of the community’s talent, on children (ages 7 – 12) who are in need of positive role models. </p>
<p>Two levels of involvement: </p>
<ol>
<li>High School Academic Mentors</li>
<li>Community-Leader Mentors</li>
</ol>
<p><u>Program title:</u> <strong>Talent 2 Kids</strong> </p>
<p><u>Why Program Important</u><strong>:</strong> </p>
<ol>
<ul>
<li><strong>Motivates</strong> children by providing successful, caring role models into their lives, and in accordance, exposing them to realistic paths towards financial success. </li>
<li>High school juniors and seniors on the honor roll are eligible to tutor elementary school children, utilizing their skills in helping with homework and comprehension.</li>
<li>Community business leaders will act as “big brother/big sisters,” mentoring and monitoring a child’s well being and academic progress. Also, sharing career information and the associated path to success, along with teaching real-life problem solving skills.</li>
</ul>
</blockquote>
</div>
<div class="TabbedPanelsContent">Content 2</div>
<div class="TabbedPanelsContent">Content 3</div>
<div class="TabbedPanelsContent">Content 4</div>
<div class="TabbedPanelsContent">Content 5</div>
<div class="TabbedPanelsContent">Content 6</div>
</div>
</div>
<p> </p>
</div>
<p> </p>
<p> </p>
</div>
<div id="footer">
<table width="1200" border="0">
<tr>
<td><div align="left"><a href="parentcollege.html">parent college</a></div></td>
<td><div align="center"><a href="mentor.html">MENTOR program</a></div></td>
<td><div align="center"><a href="farming.html">urban farming</a></div></td>
<td><div align="right"><a href="afterschool.html">charter after school</a></div></td>
</tr>
</table>
<p align="center" class="style2">A NON-PROFIT ORGANIZATION, EMPOWERING COMMUNITIES TO MOTIVATE THEIR CHILDREN, CREATING LASTING CHANGE</p>
<!-- end #footer --></div>
<!-- end #container --></div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels2");
//-->
</script>
</body>
</html> -
Trying to add OnCick to Spry Tab
I have a page that has 4 Spry tabbed panels...within each panel are sets of sliding panels. All works perfectly.
However, if I navigate to tab 1, sliding panel 3, then click on tab 2, and then back to tab 1, the sliding panel in tab 1 has remained at sliding panel 3 ... but I always want the sliding panel to start at panel 1 when you click on a tab.
My solution was to add an OnClick event where tab 1 is defined to return the sliding panel to the first position:
<li class="TabbedPanelsTab" tabindex="0" onclick="sp1.showPanel(0); return false;">
But this doesn't work...
How can I add an onclick event when a tab is clicked?
Here is the URL of the page...http://www.parishpublishing.org/index_test.htmlI am sorry that I cannot help you offhand but have a look here http://foundationphp.com/blog/2008/02/09/spry-tutorial-linking-to-a-non-default-panel/comm ent-page-1/
I hope it helps.
Ben
PS Third time lucky? -
Datasets in Spry Tabbed Panels
Hey guys,
I have a spry tabbed panel in which the contents are iframes that load a spry xml dataset. The problem I am encountering is that while the "default tab" spry loads...when toggling the other tab I get the errors
Failed to retrieve data set (pagingInfoDs) for spry:repeat
FF Firebug shows me
uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMScreen.width]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://192.168.0.1:93/vadmin/includes/cms.js :: BrowserInfo :: line 51" data: no]among other things...
Now I'm developing on localhost so I'm not able to show an example...the thing is if I were to change the default tab (from 0 to 1) the default tab now will work whislt the other would trigger the error. This means that some thing with the tab NOT being "open" or "shown" is affecting the dataset. I find this wierd as the datasets are loading within iframes...
Any idea as to what can be causing this reaction in the tabs?well the code to the spry tabbed panel
<div class="contentList">
<div class="TabbedPanels" id="TabbedPanels_links">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" title="View Webpages">View Webpages</li>
<li class="TabbedPanelsTab" title="View Non-HTML Docs">View Non-HTML Docs</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<iframe src="../../../../?task=menus&a=browse&menu_id=true" width="100%" height="500" ></iframe>
</div>
<div class="TabbedPanelsContent"> <iframe src="../../../../?task=docs&a=browse&doc_id=true" width="100%" height="500" ></iframe></div>
</div>
</div>
</div>
</fieldset>
<script type="text/javascript">var TabbedPanels_links = new Spry.Widget.TabbedPanels("TabbedPanels_links", { defaultTab: 2 });</script>
If I were to switch iframe sources the one thats in the "default" tab will list while the the tab that isn't will error
This was the first error
uncaught exception:
[Exception... "Component returned failure code: 0x80004005
(NS_ERROR_FAILURE) [nsIDOMScreen.width]" nsresult: "0x80004005
(NS_ERROR_FAILURE)" location: "JS frame ::
http://orin.mshome.net:93/vadmin/includes/cms.js :: BrowserInfo :: line
51" data: no]
After that its more that the dataset wasn't a property -
I have a problem where I have Spry Tabbed Panels 2 implemented in a Magento CMS page. In Opera, Firefox, Safari it works exactly as I want. In IE (I have IE8, but I've been told the problem also shows up in IE7) the content displays for the first tab only. The 2nd and 3rd tabs do not show the content. The web page is at http://www.gulfcoastvirtualmall.com. Here is the html for the tabbed panel:
<script src="/js/spry/SpryDOMUtils.js" type="text/javascript"></script>
<script src="/js/spry/SpryDOMEffects.js" type="text/javascript"></script>
<script src="/js/spry/SpryWidget.js" type="text/javascript"></script>
<script src="/js/spry/SpryPanelSet.js" type="text/javascript"></script>
<script src="/js/spry/SpryPanelSelector.js" type="text/javascript"></script>
<script src="/js/spry/SpryFadingPanels.js" type="text/javascript"></script>
<script src="/js/spry/SpryTabbedPanels2.js" type="text/javascript"></script>
<script src="/js/spry/plugins/TabbedPanels2/SpryFadingPanelsPlugin.js" type="text/javascript"></script>
<script src="/js/spry/plugins/TabbedPanels2/SpryTabbedPanelsKeyNavigationPlugin.js" type="text/javascript"></script>
<script src="/js/mapper/mapper.js" type="text/javascript"></script>
<!-- /* TabbedPanelsTabGroup */ #TabbedPanels2 .TabbedPanelsTabGroup { top: 1px; left: 0px; font-family: inherit; font-weight: inherit; font-size: inherit; color: #000000; background-color: transparent; border-left: solid 0px #000000; border-bottom: solid 0px #000000; border-top: solid 0px #000000; border-right: solid 0px #000000; padding: 0px 0px 0px 0px; } /* TabbedPanelsTab */ #TabbedPanels2.TabbedPanels .TabbedPanelsTab, #TabbedPanels2.VTabbedPanels .TabbedPanelsTab { font-family: inherit; font-weight: normal; font-size: 10px; color: #ffffff; background-color: #009900; border-left: solid 1px #cccccc; border-bottom: solid 1px #999999; border-top: solid 1px #999999; border-right: solid 1px #999999; padding: 4px 10px 4px 10px; } #TabbedPanels2.TabbedPanels .TabbedPanelsTab a, #TabbedPanels2.VTabbedPanels .TabbedPanelsTab a { font-family: inherit; font-weight: normal; font-size: 10px; color: #ffffff; } /* TabbedPanelsTabHover */ #TabbedPanels2.TabbedPanels .TabbedPanelsTabHover, #TabbedPanels2.VTabbedPanels .TabbedPanelsTabHover { font-family: inherit; font-weight: inherit; font-size: inherit; color: #ffffff; background-color: #33cc00; border-left: solid 1px #cccccc; border-bottom: solid 1px #999999; border-top: solid 1px #999999; border-right: solid 1px #999999; padding: 4px 10px 4px 10px; } #TabbedPanels2.TabbedPanels .TabbedPanelsTabHover a, #TabbedPanels2.VTabbedPanels .TabbedPanelsTabHover a { font-family: inherit; font-weight: inherit; font-size: inherit; color: #ffffff; } /* TabbedPanelsTabSelected */ #TabbedPanels2.TabbedPanels .TabbedPanelsTabSelected, #TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected { font-family: inherit; font-weight: inherit; font-size: 12px; color: #ffffff; background-color: #339933; border-left: solid 1px #cccccc; border-bottom: solid 1px #eeeeee; border-top: solid 1px #999999; border-right: solid 1px #999999; padding: 4px 10px 4px 10px; } #TabbedPanels2.TabbedPanels .TabbedPanelsTabSelected a, #TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected a { font-family: inherit; font-weight: inherit; font-size: 12px; color: #ffffff; } /* TabbedPanelsTabFocused */ #TabbedPanels2.TabbedPanels .TabbedPanelsTabFocused, #TabbedPanels2.VTabbedPanels .TabbedPanelsTabFocused { font-family: inherit; font-weight: inherit; font-size: inherit; color: #ffffff; background-color: #00ff00; border-left: solid 1px #cccccc; border-bottom: solid 1px #eeeeee; border-top: solid 1px #999999; border-right: solid 1px #999999; padding: 4px 10px 4px 10px; } #TabbedPanels2.TabbedPanels .TabbedPanelsTabFocused a, #TabbedPanels2.VTabbedPanels .TabbedPanelsTabFocused a { font-family: inherit; font-weight: inherit; font-size: inherit; color: #ffffff; } /* TabbedPanelsContentGroup */ #TabbedPanels2 .TabbedPanelsContentGroup { font-family: inherit; font-weight: inherit; font-size: inherit; color: #000000; background-color: #eeeeee; border-left: solid 1px #cccccc; border-bottom: solid 1px #cccccc; border-top: solid 1px #999999; border-right: solid 1px #999999; padding: 0px 0px 0px 0px; } /* TabbedPanelsContentVisible */ #TabbedPanels2 .TabbedPanelsContentVisible { font-family: inherit; font-weight: inherit; font-size: inherit; color: #000000; background-color: transparent; border-left: solid 0px #cccccc; border-bottom: solid 0px #cccccc; border-top: solid 0px #999999; border-right: solid 0px #999999; padding: 4px 12px 4px 12px; } #TabbedPanels2.BTabbedPanels .TabbedPanelsTab { border-bottom: solid 1px #999999; border-top: solid 1px #999999; } #TabbedPanels2.BTabbedPanels .TabbedPanelsTabSelected { border-top: solid 1px #999999; } #TabbedPanels2.VTabbedPanels .TabbedPanelsTabGroup { width: 10em; height: 20em; top: 1px; left: 0px; } #TabbedPanels2.VTabbedPanels .TabbedPanelsTabSelected { background-color: #339933; border-bottom: solid 1px #eeeeee; } -->
<h1 style="text-align: center;"><span style="text-decoration: underline; color: #ff6600;"><strong>Mall Stores</strong></span></h1>
<div id="TabbedPanels2">
<h2>GROUND FLOOR</h2>
<p><img class="mapper" style="border-style: none; display: block;" usemap="#gulf-coast-virtual-mall-map" src="/media/gulf-coast-virtual-mall-map.png" alt="Gulf Coast Virtual Mall Ground Floor" />
<map id="gulf-coast-virtual-mall-map" name="gulf-coast-virtual-mall-map">
<area class="noborder icolorff9900" title="Inspired Silk - Silk florist that produces custom arrangements and has a floral warehouse containing a huge selection of floral supplies." shape="rect" coords="11,151,160,206" href="http://store.inspiredsilk.com" alt="Inspired Silk" />
<area class="noborder icolorff9900" title="The Main Event has very high quality leather belts, buckles and motorcycle leathers including jackets, vests and chaps." shape="poly" coords="275,17,369,17,369,151,343,151,297,104,280,105,276,100" href="http://www.themaineventofflorida.com" alt="The Main Event has very high quality leather belts, buckles and motorcycle leathers including jackets, vests and chaps." />
<area class="noborder icolor00ff00" title="The Atrium is integrated within the Mall and is our Social Network which is open to the public." shape="poly" coords="229,136,242,121,255,120,266,129,276,121,286,121,302,134,303,147,294,157,304,168,3 03,180,291,195,274,195,267,186,260,192,245,194,230,181,229,169,239,158,229,147" href="http://social.gulfcoastvirtualmall.com" alt="The Atrium" />
<area class="noborder icolorff9900" title="VzPrints has very high quality prints of sports, famous people, actors and actresses, movies and much more." shape="poly" coords="390,203,402,203,417,217,470,218,470,233,452,234,452,245,447,250,450,256,462,259,4 48,269,389,269" href="http://www.vzprints.com" alt="VzPrints" />
<area class="noborder icolorff9900" title="Put Your Store Here - Completely turn-key solution for your online store." shape="poly" coords="8,14,8,91,159,93,160,83,147,81,148,51,127,31,103,30,103,38,88,38,88,14" href="http://www.gulfcoastvirtualmall.com/index.php/eStores/ready-to-use-host-ecommerce-site.htm l" alt="Put Your Store Here" />
<area shape="default" />
</map>
</p>
<h2>FLOOR 2</h2>
<p><img class="mapper" style="border-style: none; display: block;" usemap="#gulf-coast-virtual-mall-map-floor2" src="/media/gulf-coast-virtual-mall-map-floor2.png" alt="" />
<map id="gulf-coast-virtual-mall-map-floor2" name="gulf-coast-virtual-mall-map-floor2">
<area class="noborder icolorff9900" title="Put Your Store Here - Completely turn-key solution for your online store." shape="poly" coords="13,208,12,208,159,208,160,238,158,239,157,250,11,251" href="http://www.gulfcoastvirtualmall.com/index.php/eStores/ready-to-use-host-ecommerce-site.htm l" alt="Put Your Store here" />
<area class="noborder icolorff9900" title="Put Your Store Here - Completely turn-key solution for your online store." shape="poly" coords="370,21,369,151,418,151,417,123,419,123,420,114,484,114,484,68,452,68,451,31,460,3 1,461,18" href="http://www.gulfcoastvirtualmall.com/index.php/eStores/ready-to-use-host-ecommerce-site.htm l" alt="Put Your Store here" />
<area class="noborder icolor00ff00" title="The Atrium is integrated within the Mall and is our Social Network which is open to the public." shape="poly" coords="229,135,229,148,239,158,230,168,230,180,242,194,255,195,267,186,275,194,289,195,3 04,181,305,168,293,157,304,148,304,135,289,120,277,120,267,130,256,121,244,121" href="http://social.gulfcoastvirtualmall.com" alt="The Atrium" />
<area shape="default" />
</map>
</p>
<h2>FLOOR 3</h2>
<p><img class="mapper" style="border-style: none; display: block;" usemap="#gulf-coast-virtual-mall-map-floor3" src="/media/gulf-coast-virtual-mall-map-floor3.png" alt="" />
<map id="gulf-coast-virtual-mall-map-floor3" name="gulf-coast-virtual-mall-map-floor3">
<area class="noborder icolorff9900" title="Put Your Store Here - Completely turn-key solution for your online store." shape="poly" coords="12,252,12,294,153,295,153,252,156,252" href="http://www.gulfcoastvirtualmall.com/index.php/eStores/ready-to-use-host-ecommerce-site.htm l" alt="Put Your Store here" />
<area class="noborder icolorff9900" title="Put Your Store Here - Completely turn-key solution for your online store." shape="poly" coords="306,244,306,229,315,219,316,202,387,203,388,267,386,269,386,296,341,295,342,262,3 45,262,346,255,319,255" href="http://www.gulfcoastvirtualmall.com/index.php/eStores/ready-to-use-host-ecommerce-site.htm l" alt="Put Your Store Here" />
<area class="noborder icolor00ff00" title="The Atrium is integrated within the Mall and is our Social Network which is open to the public." shape="poly" coords="230,135,244,121,255,121,265,130,278,121,289,121,304,136,303,145,295,155,294,158,3 04,167,303,180,291,195,275,195,267,186,258,194,243,194,230,182,229,168,238,158,230,146" href="http://social.gulfcoastvirtualmall.com" alt="The Atrium" />
<area shape="default" />
</map>
</p>
</div>
<script type="text/javascript">// <![CDATA[
var TabbedPanels2 = new Spry.Widget.TabbedPanels2("TabbedPanels2", {
injectionType: "inside",
widgetID: "TabbedPanels2",
autoPlay: false,
defaultTab: 0,
enableKeyboardNavigation: true,
hideHeader: true,
tabsPosition: "bottom",
event:"click",
stopOnUserAction: true,
displayInterval: 5000,
minDuration: 300,
maxDuration: 500,
stoppedMinDuration: 100,
stoppedMaxDuration: 200,
plugIns:[]
// ]]></script>
<p> </p>
<p> </p>
<h1 style="color: #ff9900; text-decoration: underline; text-align: center;">A New Approach to Online Selling</h1>
<table style="width: 594px; height: 290px;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td align="center" valign="middle">
<p style="text-align: center;"><a href="http://www.magento-mall.com/" target="_blank"> </a><a href="http://www.magento-mall.com/" target="_blank"><img title="Front End Demo" src="http://www.gulfcoastvirtualmall.com/index.php/admin/cms_wysiwyg/directive/key/ab5bb11d2d7f 999ec514519137cd6011/___directive/e3ttZWRpYSB1cmw9Ii9mcm9udGVuZGRlbW8uanBnIn19/" alt="Front End Demo" /></a></p>
</td>
<td> </td>
<td align="center" valign="middle">
<p style="text-align: center;"><a href="http://demo-admin.magentocommerce.com/index.php/admin/" target="_blank"> </a><a href="http://demo-admin.magentocommerce.com/index.php/admin/" target="_blank"> <img title="Admin Panel Demo" src="http://www.gulfcoastvirtualmall.com/index.php/admin/cms_wysiwyg/directive/key/ab5bb11d2d7f 999ec514519137cd6011/___directive/e3ttZWRpYSB1cmw9Ii9hZG1pbmRlbW8uanBnIn19/" alt="Admin Panel Demo" /></a></p>
</td>
</tr>
<tr style="text-align: center;">
<td>
<h3 style="text-align: center;"><span style="color: #ff9900;">Front End Demo</span></h3>
</td>
<td> </td>
<td>
<h3><span style="color: #ff9900;">Admin Panel Demo</span></h3>
</td>
</tr>
</tbody>
</table>
<p><span style="color: #ffffff;">So many of the choices out there that “claim” they have more features for your money fall short once you’ve signed up. What is actually being offered to you is a plain “vanilla” web site that looks just like many of the others you’ve seen. When you start working to get your store up and running you depend on reading documents from the hosting company’s web site. If you have to call for help you wait on hold and when you finally get someone on the phone they can’t answer your questions. You finally get your web site set up, your products loaded, but no one buys anything. You can’t tell if people are really even able to find your store. After spending hundreds of dollars you’re frustrated and angry. You should be. Now wouldn’t it be great to have a site that was all set up for you, ready for your products to be entered? And of course since you’ve decided to market your products online, it would be great if this site had a way to put your products in front of people looking for them. And last but certainly not least, it would be really nice to be able to pick up the phone and have a real person answer that is knowledgeable and really cares about helping you. It isn’t a dream any more, it has become reality.</span></p>
<p> </p>
<h3 style="text-align: center;"><span style="color: #ff9900;">An Overview of Our Solution Compared to Other Hosting Solutions</span></h3>
<h4> </h4>
<h4 style="text-align: center;"><img src="/media/upload/image/Features1.png" border="0" alt="" hspace="0" width="350" height="211" align="middle" /></h4>
<h4 style="text-align: center;"><img src="/media/upload/image/Features2.png" border="0" alt="" hspace="0" width="350" height="233" align="middle" /> <img src="/media/upload/image/Features3.png" border="0" alt="" hspace="0" width="350" height="243" align="middle" /></h4>
<h4> </h4>
<h3><span style="color: #ff9900;">Enterprise Class e-Commerce</span></h3>
<p><span style="color: #ffffff;">The software running the Mall site and all of the stores is new written by a commercial software company that specializes in e-commerce. Although the software is new it is extremely stable and has features other e-commerce software can’t match.</span></p>
<h4> </h4>
<h3><span style="color: #ff9900;">Feature Rich</span></h3>
<p><span style="color: #ffffff;">Getting past the shopping cart which is the one common thread among all e-commerce software there are many store owner and customer centric features. To start, you need to get your products in front of people that are looking for them. The system uploads your products to Google Merchant Center (formerly Froogle). If you change a price, an item goes out of stock the system automatically updates Google. The software has the ability to use almost any payment gateway. We chose PayPal as our initial offering since almost everyone is familiar with it. The shipping portion of the software allows a customer, in real time to find out (through an interface to the major shipping companies) what it costs for all of the shipping options available. Automated email communication with your customers which is triggered by you processing your orders. Unlike other e-commerce offerings, we do not limit how many products you can market or how many photos you use. The software allows you to create “configurable” products (multiple colors and sizes), bundled products (like custom built computers) where the customer can choose which options or sizes and colors they want. The system takes care of price differences as well with these types of product. And finally, although your online store is a business and businesses require time and energy to be successful the system emails you when you receive an order. You don’t have to stare at the screen waiting for orders. By now you’re probably thinking this is going to cost a fortune. Well, it doesn’t. We charge a $75.00 one time setup fee which also gives you 2 dedicated hours of training when you start. Each month you’ll be billed $50.00 and 3% (cumulative) of your transactions. The only other cost would be for templates to change the look and feel of your store. If you need an e-commerce site you owe it to yourself to talk it over with us.</span></p>
<h4> </h4>
<h3><span style="color: #ff9900;">Why A Virtual Mall?</span></h3>
<p><span style="color: #ffffff;">As with any other venture in life, strength comes in numbers or groups. People want “one stop shopping”, search engines love links and content rich sites. Grouping online stores creates an environment where customers will jump from store to store. Your products will be seen by more people. We also give you a site where you can see not just how many people, but where they are, where they came from, what search terms they used and how long they stayed along with much more information critical to make your business a success. The concept is simple, we do all the configuration and support you. You focus on your business. The link provided below is the front end of the mall. Go have a look, go through the stores. When you’re ready to move forward with a store or want more information, call or email us. The systems running the mall are owned by the company and are located on the company’s property. We have up to 15MB of network bandwidth which is scalable to 30MB (that’s quite a bit). As the mall grows we will monitor and add additional systems and network bandwidth to maintain the same level of service you enjoy today.</span></p>
I've tried everything I can think of to get this woking 100% and am getting a bit frustrated with it. Any help would be really appreciated!!!!
Thanks in advance!Hi,
It is hard to guess where you have gone wrong with you modified CSS without actually seeing the code.
Have a look here for more background info.
I hope this helps.
Ben -
Spry Tabbed Panel Defaults to home page with recordset paging
I have Spry ver. 1.6.1. A Spry Tabbed Panel titled "Check Ride Activity Report" (Tab 6) accesses a mysql database and shows the records in a table format. Instead of having all the records display at once I want to limit the records displayed to a few at a time. e.g. 5 per page. I added a recordset navigation bar and set the $maxRows_GetChkRideRecs = 5; It works but each time the navigation bar "Next" or "Last" or "First" or "Previous" is clicked the page reloads with the default Home page Tab displayed. The user then has to click on Tab 6 to view the new results. The url where this can be viewed is at http://Training.reliantair.com. Is there a way to code this tab so that Tab 6 remains the default tab once it is selected until the user selects another tab?
I want to avoid putting another button on the page to accomplish this as shown in the spry utils samples where the user clicks to set the default tab.
Can this be done within the recordset paging code similar to how it is done on a form submit to keep the focus on the current tab?I didn't try the cookie method suggested. The tab method listed in spry utils does work but requires an additional button, so I came up with this solution.
In the Head of the HTML document I put this code. It searches for the query string in the HREF when any of the record paging buttons is pressed.
<script type="text/javascript" src="SpryURLUtils.js"></script>
<script type="text/javascript">
var params = Spry.Utils.getLocationParamsAsObject();
if (location.href.indexOf("GetChkRideRecs") != -1 && location.href.indexOf("tab") == -1)
location.href +="&tab=5#TabbedPanels1";
</script>
Then in the body of the HTML document at the bottom of the page the tabbed panel widget is changed like this:
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1",{defaultTab: (params.tab ? params.tab:0)});
The first time a recordset paging link is clicked the HREF attribute of &tab=5#TabbedPanels1 is added to the location HREF. Subsequent clicks of any of the links do not change the HREF because the code looks for "tab" and does nothing if it is found. -
Thanks in advance to anyone who can help. I'm having a problem with my spry tabbed panel. It works but the actual CSS isn't working on the spry. The panel goes down onto the content.
Here is a screen cap: http://img32.imageshack.us/img32/2598/53451133.jpg
Coding:
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
background-color: #CCC;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: 1px solid #EEE;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
color: black;
text-decoration: none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #EEE;
/* 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 {
padding: 4px;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: absolute;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;Hi Ben,
I creat a new page ( a simple page...):
http://dev.achab.it/test/test.htm
Our web-graphics are insert into
<script type="text/javascript" src="../common/js_func/parameters.js"></script>
the SpryTabbedPanels.js scripts.
On the new simple, you can click to 4 Tabs on the left.
If you want to see the 5 or 6 content tab you can click the label into the 3 or 5 content tab.
When you click on the label "here" on the 3° Tab (for example), you can see the content change and the "Tab 3" is not selected.
I'd like to change the content and leave the "Tab 3" selected.
I hope in your help :-)
thank in advance
regards
Stefano -
Spry Tabbed Panel - Dotted outline around selected tab
Hello there,
I noticed in Spry Tabbed Panels, once a tab is selected,
there is a dotted outline around the selected tab (the 'focus').
How do I hide it? I've seen a similar set up using JQuery which has
the dotted outline automatically disappear after a tab is selected.
I've set up a demo at my personal website to illustrate what I'm
getting at.
http://www.sgdanielwang.com/spry/tabbed.htm
Could someone spare a bit of time to have a look and advise
me?
Thanks in advance.
DanThanks, Arnout.
Your solution got rid of the dotted focus outline. However
the problem persists in Internet Explorer. I read at the following
site:
http://codylindley.com/Javascript/223/hiding-the-browsers-focus-borders-should-i-shouldnt- i
that the focus can be hidden using a javascript which looks
for all <a> element in the HTML file and disables the focus.
But in the case of the Spry Tabbed Panel, the <a> is actually
specified in CSS. Is there a CSS 'hack' to make the focus disappear
in Internet Explorer?
Rgds,
Dan
Maybe you are looking for
-
I am getting a weird green line at the bottom of my screen...
I am trying to burn a DVD in iDVD. I keep getting a green line at the bottom of the screen. I tried "squaring" the pixels before outputting the project, but I didn't render the project this way in FCP before trying that. Could that be the problem? I
-
I have tried various suggestions in the discussion forum to delete all old backups and am still having difficulty. I enter time machine and choose to delete all backups, then it makes a sound as if if moved to the trash but then there is nothing actu
-
Hello Experts, We have a requirement of sending SMS alert to the Vendor (Multiple Numbers) once the Purchase Order is created and released against that vendor. We have SAP ECC 6.0 , please let me know whether it is possible if yes what settings we ne
-
Strange problem with Mighty Mouse scroll ball
Hi, yesterday suddenly my Mighty Mouse start to have a strange mood. Using scroll ball to go down in a page I haven't problem, but trying to go up don't happened nothing! The problem seems to be software, because the hardware seems to be good. What c
-
Informix HDR support use with iPlanet 6.5
Has anyone out there implemented Informix high-availability data replication client support on an iPlanet 6.5sp1 application? I'm interested in finding out how and if it's possible to register datasources with the application server using an object o