Tabbed Panel
Hi All,
I am new in ADF and using jdeveloper 11.1.1.4.
I have create a page which contains tabbed panel. My table is large and is have created 5 tabs in my tabbed panel. I have so many required fields on my table and distribute them on different tabs. I entered the data on first page then i moved to second tab it gives error to enter values which are placed on second tab, third tab and so on, and unable to move on that pages. Please help me how can i move to other tabs and enter the required fields.
Thanks
Hi,
I would look into surrounding the required fields on the tab with a af:SubForm tag. See this excellent example: www.oracle.com/technetwork/developer-tools/adf/learnmore/40-ppr-subform-169182.pdf
It worked for me.
Nigel
Similar Messages
-
On a tabbed panel, I am trying to create a form, but...
On a tabbed panel I am trying to create a form, but I am having a couple of issues.
The coding on my form is yellow - I can't figure out what is wrong. Also, I can't see the tab on the browser, only in live view. I haven't loaded it to my site as I haven't finished it yet. I don't want to go any further, until I solve the issues I have now. Any ideas?
thanks,
deb
<form id="registrationForm" name="registrationform" method="post" action="">
<fieldset>
<legend>Contact Information</legend>
<span id="sprytextfield1">
<label>Name <span class="inforequired">*</span><br />
<input type="text" name="name" id="name" />
<br />
</label>
<span class="textfieldRequiredMsg">value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield2">
<label for="businessname">(Business or Organization) Name<br />
</label>
<input type="text" name="businessname" id="businessname" />
<br />
<span class="textfieldRequiredMsg">value is required.</span></span> <span id="sprytextfield3">
<label for="address">Address <span class="inforequired">*</span><br />
</label>
<input type="text" name="address" id="address" />
<br />
<span class="textfieldRequiredMsg">value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield4">
<label for="email">City</label>
<span class="inforequired">*</span><br />
<input type="text" name="city id="city="city"" />
<br />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield5">
<label for="province">Province</label>
<span class="inforequired">*</span><br />
<input type="text" name="province" id="province" />
<br />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield6">
<label for="postalcode">Postal Code</label>
<span class="inforequired">*</span><br />
<input type="text" name="postalcode" id="postalcode" />
<br />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield7">
<label for="phone">Phone Number (including area code) <span class="inforequired">*</span><br />
</label>
<input type="text" name="phone" id="phone" />
<br />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield8">
<label for="fax">Fax Number</label>
(including area code) <br />
<input type="text" name="fax" id="fax" />
<br />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield9">
<label for="email">Email Address <span class="inforequired">*</span><br />
</label>
<input type="text" name="email" id="email" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="spryconfirm1">
<label for="emailconfirm"><br />
Re-enter Email Address <span class="inforequired">*</span><br />
</label>
<input type="text" name="emailconfirm" id="emailconfirm" />
<span class="confirmRequiredMsg">A value is required.</span><span class="confirmInvalidMsg">The values don't match.</span></span>
<p> My Interest in the Ability Axis Employment Expo is as a </p>
<p><span id="spryradio1">
<label>
<input type="radio" name="RadioGroup1" value="business" id="RadioGroup1_0" />
Business/Employer</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="nonprofit" id="RadioGroup1_1" />
Non-Profit/Service Organizatin</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="jobseeker" id="RadioGroup1_2" />
Job Seeker</label>
<br />
<label>
<input type="radio" name="RadioGroup1" value="other)" id="RadioGroup1_3" />
Other (please specify below)</label>
<br />
</span><br />
<span id="sprytextarea1">
<label for="contactcomments"> Comments or other information</label>
<br />
<textarea name="contactcomments" id="contactcomments" cols="45" rows="5"></textarea>
</span> </p>
</fieldset>
<p></p>
<fieldset>
<legend>Booth Options</legend>
<span id="spryselect1">
<label for="premierearlybird">Premiere (10 X 10) until April 21 $375</label>
<span class="earlybirdpricing">Early Bird Pricing</span><br />
<select name="premierearlybird" id="premierearlybird">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3+">More than 3 - please enter details in the comments box below</option>
</select>
<br />
<br />
<span class="selectRequiredMsg">lease select an item.</span></span> <span id="spryselect2">
<label for="premierereg">Premiere (10 x 10) after April 21 $425</label>
<br />
<select name="premierereg" id="premierereg">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3+">More than 3 - please enter details in the comments box below</option>
</select>
<br />
<br />
<span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect3">
<label for="premierenpearlybird">Premiere Non-Profit (10 X 10) until April 21 $325 <span class="earlybirdpricing">Early Bird Pricing</span><br />
</label>
<select name="premierenpearlybird" id="premierenpearlybird">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3+">More than 3 - please enter details in the comments box below</option>
</select>
<br />
<br />
<span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect4">
<label for="premierenp">Premiere Non-Profit (10 X 10) after April 21 $375</label>
<br />
<select name="premierenp" id="premierenp">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3+">More than 3 - please enter details in the comments box below</option>
</select>
<br />
<br />
<br />
<span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect5">
<label for="standardregearlybird">Standard (8 X 10) until April 21 $250 <span class="earlybirdpricing">Early Bird Pricing</span><br />
</label>
<select name="standardregearlybird" id="standardregearlybird">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3+">More than 3 - please enter details in the comments box below</option>
</select>
<br />
<br />
<span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect6">
<label for="standardreg">Standard (8 X 10) after April 21 $300</label>
<br />
<select name="standardreg" id="standardreg">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3+">More than 3 - please enter details in the comments box below</option>
</select>
<br />
<br />
<span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect7">
<label for="standardnpearlybird">Standard Non-Profit (8 X 10) until April 21 $200</label>
<span class="earlybirdpricing">Early Bird Pricing</span><br />
<select name="standardnpearlybird" id="standardnpearlybird">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3+">More than 3 - please enter details in the comments box below</option>
</select>
<br />
<br />
<span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect8">
<label for="standardnp">Standard Non-Profit (8 X 10) after April 21 $250<br />
</label>
<select name="standardnp" id="standardnp">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3+">More than 3 - please enter details in the comments box below</option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></span>
</fieldset>
<br />
<fieldset>
<legend>Breakfast Tickets</legend>
<span id="spryselect10">
<label for="breakfast1-5">Breakfast Tickets $40 each (up to 5 tickets)</label>
<br />
<select name="breakfast1-5" id="breakfast1-5">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<br />
<br />
<span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect11">
<label for="breakfast+5">Breakfast Tickets $35.00 each (more than 5 tickets)</label>
<br />
<select name="breakfast+5" id="breakfast+5">
<option value="0" selected="selected">Please Choose</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="10+">more than 10 (please comment below)</option>
</select>
<br />
<br />
<span class="selectRequiredMsg">Please select an item.</span></span> <span id="spryselect12">
<label for="breakfasttable">Breakfast Tickets $400 each (table of 8 plus two event hosts)<br />
</label>
<select name="breakfasttable" id="breakfasttable">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="3+">More than 3</option>
</select>
<br />
<br />
<span class="selectRequiredMsg">Please select an item.</span></span> <span id="sprytextarea2">
<label for="breakfastticketscomment">Additional Information about Breakfast Tickets</label>
<span class="textareaRequiredMsg">A value is required.</span></span>
</fieldset>
<br />
<fieldset>
<legend>Seminar Tickets</legend>
<p>Shayn Anderson, author of Taking Pride in That Which Sets US Apart, will host a one hour seminar at 11:00 am. </p>
<p>
<label for="shayn11amreg">Shayn Anderson Seminar tickets $40 each</label>
<br />
<select name="shayn11amreg" id="shayn11amreg">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="10+">more than 10</option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></p>
<p>
<label for="shayn11amnp">Shayn Anderson Seminar tickets (Non-Profit) $30 each</label>
<br />
<select name="shayn11amnp" id="shayn11amnp">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="10+">more than 10</option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></p>
<p>Denise Bissonnette will do a seminar presentation at 1:00 pm on the topic Being True to the Dream of Diversity. Denise's presentation will run approximately 1.5 hours. </p>
<p>
<label for="denise1pmreg">Denise Bissonnette Seminar tickets $50</label>
each <br />
<select name="denise1pmreg" id="denise1pmreg">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="10+">more than 10</option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></p>
<p>
<label for="denise1pmnp">Denise Bissonnette Seminar tickets (Non-Profit) $40 each<br />
</label>
<select name="denise1pmnp" id="denise1pmnp">
<option value="0" selected="selected">Please Choose</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="10+">more than 10</option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></p>
<p><span id="sprytextarea3">
<label for="seminarcomments">Other Information About Seminar Tickets</label>
<textarea name="seminarcomments" id="seminarcomments" cols="45" rows="5"></textarea>
</span></p>
</fieldset>
<br />
<fieldset>
<legend>Processing Information</legend>
<span id="spryradio2">
<label>
<input type="radio" name="RadioGroup2" value="invoice" id="RadioGroup2_0" />
Please invoice me</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="printmail" id="RadioGroup2_1" />
I will print and mail my form with my payment</label>
<br />
<label>
<input type="radio" name="RadioGroup2" value="emailcreditcard" id="RadioGroup2_2" />
I will submit my information and provide my credit card information</label>
in the box below <br />
<label>
<input type="radio" name="RadioGroup2" value="other" id="RadioGroup2_3" />
Other - I will provide full details below<br />
</label>
</span><span id="sprytextarea4"><span id="sprytextarea5">
<label for="processingcomments"><br />
Further Information for Processing Registration</label>
<textarea name="textarea1" id="textarea1" cols="45" rows="5"></textarea>
<span class="textareaRequiredMsg">A value is required.</span></span></span> <span id="sprytextarea6"> <span class="textareaRequiredMsg">A value is required.</span></span>
</fieldset>
<p>
<input name="submit" type="submit" class="buttons" id="submit" value="Submit Information" />
<input name="reset" type="reset" class="buttons" id="reset" value="Reset Form" />
</p>
</form>Gramps, you are always coming to my rescue.
Okay, I loaded the page under a different name http://abilityaxis.com/test.html. Viewing the source code doesn't show the yellow.
For demonstration purposes I copied a small amount of the text and changed the colour of what is yellow in Dreamweaver to this pinkish colour (I tried yellow but you couldn't read it)
<form id="registrationForm" name="registrationForm1" method="post" action="">
<fieldset>
<legend>Contact Information</legend>
<span id="sprytextfield1">
<label>Name <span class="inforequired">*</span><br />
<input type="text" name="name" id="name" />
<br />
</label>
<span class="textfieldRequiredMsg">value is required.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMaxCharsMsg">Exceeded maximum number of characters.</span></span> <span id="sprytextfield2">
<label for="businessname">(Business or Organization) Name<br />
</label>
<input type="text" name="businessname" id="businessname" />
It basically goes all the way through the form.
Any advice?
thanks,
deb -
Spry Tab Panel is not working properly on remote server
Hello All,
I have a problem with spry tab panel, it is not displaying image in the background when it is active, it is working properly in local server but when i upload to remote it vanishes.
Here is the link
http://www.geftas.com/temaritestpage/about.html
Also I am uploading Css and html code below
Any help would be exteremely appreciated.
Thanks
<!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=utf8"/>
<meta http-equiv="content-type" content="cache" />
<meta http-equiv="robots" content="INDEX,FOLLOW" />
<meta http-equiv="keywords" content="Enter Keywords"/>
<meta http-equiv="description" content="Description Here" />
<title>TEMARI&CO. | Business Strategists</title>
<link href="css/about.css" rel="stylesheet" type="text/css" media="screen" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="index.html">HOME</a></li>
<li><a href="about.html" class="current">ABOUT</a></li>
<li><a href="#" class="MenuBarItemSubmenu">CONSULTING</a>
<ul>
<li><a href="#">Business Plan</a></li>
<li><a href="#">Marketing Plan</a></li>
<li><a href="#">Incorporation</a></li>
<li><a href="#">Accounting System</a></li>
</ul>
</li>
<li><a href="#" class="MenuBarItemSubmenu">INDUSTRIES</a>
<ul>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
<li><a href="#">Untitled Item</a></li>
</ul>
</li>
<li><a href="#">OUR PROCESS</a></li>
<li><a href="#">CAREERS</a> </li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<div class="shadow" id="content">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">values</li>
<li class="TabbedPanelsTab" tabindex="0">people</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="scrolltext">
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. N</p>
</div>
</div>
<div class="TabbedPanelsContent">
<div id="scrolltext">
<h1>Heading1</h1>
<p>Lorem n, </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, , </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit a, </p>
<h1>Heading1</h1>
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="legal">
<ul>
<li>Copyright © 2012 Temari&Co</li>
<li>| Privacy Policy |</li>
<li>Terms of Use</li>
</ul>
</div>
<div id="socialmedia">
<ul>
<li><img src="images/fbicongri.png" width="20" height="20" alt="fbicon" /></li>
<li><img src="images/gicongri.png" width="20" height="20" alt="gicon"/></li>
<li><img src="images/linkedinicongri.png" width="20" height="20" alt="linkedin"/></li>
<li><img src="images/twittericongri.png" width="20" height="20" alt="twitter"/></li>
</ul>
</div>
</div><!-- end footer-->
</div><!-- end wrapper-->
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.6 - 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.
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 100%;
height:100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
.TabbedPanelsTab {
position: relative;
float: left;
background-color: #FFF;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
font-weight: normal;
color: #666;
height: 30px;
width: 116px;
text-transform: uppercase;
text-align: center;
line-height: 30px;
margin: 0px;
padding: 0px;
.TabbedPanelsTabHover {
background-image: url(../../SUPEROLDU/images/menubaractive.png);
background-repeat: repeat-x;
color: #FFF;
.TabbedPanelsTabSelected {
background-image: url(../../SUPEROLDU/images/menubaractive.png);
background-repeat: repeat-x;
color: #FFF;
height: 30px;
width: 116px;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
clear: both;
background-color: #FFF;
height: 100%;
width: 824px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
color: #666;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: dotted;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
.TabbedPanelsContent {
height: 100%;
width: 100%;
overflow:hidden;
.TabbedPanelsContentVisible {
.VTabbedPanels {
overflow: hidden;
zoom: 1;
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
background-color: #EEE;
position: relative;
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
.TabbedPanelsContent {
clear:both !important;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 744px;
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;Hi
Please Upload SpryTabbed Panels.css and menubaractive.png to their respective remote directories/folders.
The images have not been uploaded at all, the online CSS is the one without a link to the images
Regards
Adaan Pre-Media Services
For more image editing services follow us @
web designing services -
Spry Tabbed panels + Progressive Enhancement and Dynamic Loading of Content With Spry
Is there any way to combine tabbed panels together with "Progressive Enhancement and Dynamic Loading of Content With Spry"?
Visit: http://labs.adobe.com/technologies/spry/articles/best_practices/progressive_enhancement.ht ml#updatecontent
And click on the "Using Spry.Utils.updateContent()"
The 3rd example shows how to use a fade transition whenever the content changes.
I already have tabbed panels. My menu contains buttons (on tabs) and my Content div contains the panels.
Tabs code;
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab">
<table class="Button" >
<tr>
<td style="padding-right:0px" title ="Home">
<a href="javascript:TabbedPanels1.showPanel(1);" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
</td>
</tr>
</table>
</li>
etc
etc
etc
and the panel code:
<div class="TabbedPanelsContent" id="Home">
CONTENT
</div>
I hoped i can use the example code from the link into my tabbed panels.
I thought this code:
onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;"
could be added to the tab code like this:
<a href="javascript:TabbedPanels1.showPanel(1);" onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
But the content doesnt fade...
I know i need to change the header etc.
The following is from the link:
<!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>Aquo Events</title>
<script src="../../../includes/SpryEffects.js" type="text/javascript"></script>
<script src="../../../includes/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function FadeAndUpdateContent(ele, url)
try {
Spry.Effect.DoFade(ele,{ duration: 500, from: 100, to: 0, finish: function() {
Spry.Utils.updateContent(ele, url, function() {
Spry.Effect.DoFade(ele,{ duration: 500, from: 0, to: 100 });
}catch(e){ alert(e); }
-->
</script>
<style type="text/css">
/* IE HACK to prevent bad rendering when fading. */
#event { background-color: white; }
</style>
</head>
So i changed my header etc, put the SpryEffects.js and SpryData.js into position and nothing changed...
Is there a way to keep my tabbed panel (or change as less as possible) and let
A. The fade work
B. The loading work.
The problem now is that it loads all pages instead of only the home. Therefore i wanted this Progressive Enhancement.
And the fading part is just because its nice...It doesnt show in the post but off course i changed this link;
"data/AquoThonFrag.html"
into;
"javascript:TabbedPanels1.showPanel(1);"
I must say i dont know if this even works... -
More than one spry tabbed panels
Hi,
On my index page I have a tabbed panel with it own css (size,
color, etc.)
I would like to insert another tabbed panel on another page
(tabbed panel2). I would like this to have its own css style
(different size, color scheme, etc.)
When I insert a spry tabbed panel in dreamweaver it
automatically takes on the css of my original tab panel design! How
can I let the second tabbed panel take on its own life, completely
independent of the first one?
Thank you."chris.cavage" <[email protected]> wrote in
message
news:gnuk7l$hoj$[email protected]..
> How can I let the second tabbed panel
> take on its own life, completely independent of the
first one?
Create a second set of CSS rules for it. The easiest way is
to make a
copy of SpryTabbedPanels.css, and call it
SpryTabbedPanels2.css. Link
SpryTabbedPanels.css to the original page, and
SpryTabbedPanels2.css
to the page that you want to look different.
David Powers
Adobe Community Expert, Dreamweaver
http://foundationphp.com -
Is there a way to use css media="print" to print all Spry tabbed panels
By setting up a special style sheet and calling that with media="print" I can control all other content that I want to appear in the printed webpage but since the tabbed panels display="none" or display="block" are controlled by the SpryTabbedPanels.js I haven't found a way to force all panels to be display="block" in the print style sheet.
The requirement is for a seminar timetable where each day is on a separate tab but if you want hard copy then printing all days in one go is best.
Any suggestions would be most welcome.Yeah! I found the answer in another forum topic - See
http://forums.adobe.com/message/636534#636534
Use
<style type="text/css" media="print">
.TabbedPanelsTabGroup {
display: none !important;
.TabbedPanelsContent {
display: block !important;
overflow: visible !important;
height: auto !important;
</style> -
How can I add a shadow to a tabbed panel?
Trying to put a shadow on the active state of a tabbed panel so the tab and the content areas share one continuous shadow. Want the active panel to look like it's sitting above the other, inactive panels - the way a stack of file folders would look: shadows on all the tabs, but the folder on the top of the stack would have a shadow around the tab and the rest of the folder.
I can get the shadows to work on the tabs - where the active tab has a larger shadow than the normal (inactive) tabs and they look like they're sitting behind it - but when I try to add a shadow to the content panel it makes the panel appear to sit above the tab that goes with it. I tried arranging the tab on top ("Bring to front") but it still sits behind the content panel. Also tried pulling all the tabs to the front, but the content panel still sits in front and any shadow on the active panel is still over the active tab.
I know I can get an effect that's kinda-sorta what I'm going for with flat color (lighter for active, etc.) but would love to add some truer-looking depth to the active tabbed panel.
Any suggestions?you can control the dropshadow's angle property dynamically. and, yes the dropshadowfilter has an alpha and strength properties you can use.
use the help files to see all the properties you can use. -
I can't view multiple images in tabbed panels in photoshop CC (do not have this problem in PS5 or 6)
I can't set up multiple images in tabbed panels in photoshop CC (do not have this problem in PS5 or 6). Has anyone had this problem with CC and if so do they know the fix?
I just discovered something really weird. If I open the images in
photoshop (and the tabs are not showing) and then open another window on
top of photoshop (for example word or safari) , then the images and tabs
show in the photoshop window. But if I move Pshop to the front screen then
the tabs disappear! -
Spry tabbed panels, all content showing on one page, please help?
Hi there,
I'm developing a website for my friend and i'm using DW CS5 spry tabbed panels. Everything looks great in DW but when i load the page to the server all of the content shows as one page and i can't navigate through tabs.http://dndperspective.co.cc/
I'll give you the whole code, I am fairly experienced in html but have never used spry before, so it may be a silly mistake. Any Suggestions?
Here is the code:
<!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>DND Perspective</title>
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #2B3856;
.style1 {
color: #FFFFFF;
.style4 {
color: #FFFFFF;
font-size: 36px;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
margin-left: 250px;
.style5 {color: #CCCCCC}
.style11 {
font-size: 18pt;
font-style: italic;
a:link {
color: #FFFF00;
a:visited {
color: #000000;
a:hover {
color: #000033;
-->
</style></head>
<body>
<div align="center">
<p align="left" class="style4">DND </p>
</div>
<p align="left">
<img style="border:6px inset #545565; margin-left: 150px; margin-bottom: 50px;" src="newbanner.jpg" width="701" height="244" /> </p>
<p align="center">
<p align="center">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup" >
<li class="TabbedPanelsTab" tabindex="0"><img src="images/homebar.jpg" width="125" height="50" /> </li>
<li class="TabbedPanelsTab" tabindex="0"><img src="images/aboutbar.jpg" width="125" height="50" /></li>
<li class="style11 TabbedPanelsTab" tabindex="0"><em><img src="images/servicesbar.jpg" width="125" height="50" /></em></li>
<li class="TabbedPanelsTab style11" tabindex="0"><img src="images/gallerybar.jpg" width="125" height="50" /></li>
<li class="TabbedPanelsTab style11" tabindex="0"><img src="images/pricingbar.jpg" width="125" height="50" /></li>
<li class="TabbedPanelsTab style11" tabindex="0"><img src="images/contactbar.jpg" width="125" height="50" /></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent style1">
<div align="center">
<p class="style11">Welcome to DND </p>
<p>We are so glad you took the time to visit our site during your busy planning schedule. We have tried to make this site as user friendly as possible so you can get back to planning your big day. We provide straight foward and dependable services so you've got nothing to worry about.</p>
<p>We are located in Rhode Island, but service Massachusetts and Connecticut as well. </p>
<p>Please visit our services page to discover all photography sessions we have available such as:</p>
<p>Wedding Photography</p>
<p> Engament Photos</p>
<p>Senior Portraits </p>
<p>Anniversary</p>
<p>& More!!!</p>
<p> </p>
</div>
</div>
<div class="TabbedPanelsContent">
<p class="style1"><strong><u>S.W</u></strong> -<em> Owner and Photographer</em>. For more information about her please click <a href="Untitled-11.pdf">here</a>!
</div>
<div class="TabbedPanelsContent">Under Construction...</div>
<div class="TabbedPanelsContent">Under Construction....</div>
<div class="TabbedPanelsContent style1">
<p>We hear at DND understand that packages and pricing may not provide the precise accomadations to fit you unique and carefully planned big day. We are very open and happy to discuss with you an individual catered package or plan that fits your style and most of all your budget. Whether you need us for just an hour or a full day we want to make your day as special as possible. We have services available starting at just $200.00. Below you will find our most popular packages, printing prices &
packages, custom videos, thank you cards and albums.</p>
<hr width="50%" align="left" />
<p><strong>Package 1 - $500.00</strong></p>
<p>3 Hours; 1 location - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
<p><strong>Package 2 - $575.00</strong></p>
<p>3 Hours; 2 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
<p><strong>Package 3 - $700.00</strong></p>
<p>4 Hours; 3 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
<p>*Each additional hour or location available for $100.00. Locations beyond 20 miles will require additional fees. Additional DVD priced at $25.00 each.</p>
<hr width="50%" align="left" />
<p><strong>Prints</strong>: (Fine Art High Quality)**</p>
<p>Individual prices: 8"x10" = $12.99; 10"x13" = $19.99; 2 - 5"x7" = $12.99; 4 - 4"x6" = $11.99</p>
<p>(Custom sizes available - Custom framing available)</p>
<p><strong>Package 1:</strong></p>
<p>3 - 8"x10"; 4 - 5"x7"; 4 - 4"x6" = $50.00</p>
<p><strong>Package 2:</strong></p>
<p>5 - 8"x10"; 6 - 5"x7"; 6 - 4"x6" = $90.00</p>
<p><strong>Package 3:</strong></p>
<p>8 - 8"x10"; 4 - 5"x7"; 4 - 4"x6" = $125.00</p>
<p><strong>Package 4:</strong> (Basic Prints)</p>
<p>Any 100 photos printed 4"x6" = $100.00</p>
<hr width="50%" align="left" />
<p><strong>Custom video:</strong>**</p>
<p>Any 100 photos put to royalty-free music = $50.00</p>
<hr width="50%" align="left" />
<p><strong>Custom thank you cards for your guests:</strong>**</p>
<p>300 cards - 4"x6" = $350.00</p>
<p>100 cards - 4"x6" = $150.00</p>
<hr width="50%" align="left" />
<p><strong>Custom Albums Available: </strong>(prices vary - special order)</p>
<p>Bride & Groom Albums</p>
<p>Parent Albums</p>
<hr width="50%" align="left" />
<p>**Please be aware that your DVD will be available within a week; Web Gallery within 5-7 business days; Prints, Cards or Video within 2-6 weeks. Thank you!</p>
</div>
<div class="TabbedPanelsContent style5">
<p> Contact DND Perspective:</p>
<p>The best way to reach us is via email .</p>
<p>You can alternately reach us anytime at ...!</p>
</div>
<div class="TabbedPanelsContent">
<div align="center">
<p><span class="style1">About Info</span></p>
<p> </p>
</div>
</div>
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
</body>
</html>You called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
Correct these links:
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
And you should be good to go.
Beth
ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
B -
Spry Active Tables in Spry tabbed panels
Hi everyone and thanks for advance for dealing with my inexperience.
I'm using dreamweaver cs4 on a mac and I'm trying to create 2 tabbed panels, each with a Spry active table within it that uses a nondestructive filter wired to a spry select menu to navigate through galleries. When I make 1 of these, it works perfectly. The problem is that when I try to create the second one, it screws everything up. Sometimes it can't find the datasets for the select lists anymore, sometimes nothing shows up in one of the tables. I've run a lot of trial and error, and I just can't detect a pattern. I have very little experience coding and I'm working form a tutorial book. I didn't think adding the second table in would cause a problem, but apparently it does. Can anybody help make this work? I'll post the code below.
Thanks!
-CB
This works just fine for one of the tabs:
var rs_SpryCasteAbilities = new Spry.Data.HTMLDataSet(null, "CasteAbilities");
var rs_SpryProfAbilities = new Spry.Data.HTMLDataSet(null, "ProfessionAbilities");
rs_SpryProfAbilities.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
if (row['Prof_ID'] == rs_SpryProfAbilities.gallery) {
return row;
return null;
rs_SpryProfAbilities.filter(chooseSet);
function changeSet(set)
rs_SpryProfAbilities.gallery = set;
rs_SpryProfAbilities.filter(chooseSet);
rs_SpryProfAbilities.setCurrentRowNumber(0);
var rows = rs_SpryProfAbilities.getData();
for (var i = 0; i < rows.length; i++) {
if (rows[i]['Prof_ID'] == set) {
rs_SpryProfAbilities.setCurrentRowNumber(i);
break;
var rs_Professions = new Spry.Data.HTMLDataSet(null, "Professions");
var rs_Castes = new Spry.Data.HTMLDataSet(null, "Castes");
//with this being the code for the selectors further down the page//
<div spry:region="rs_Castes">
<select name="select2" spry:repeatchildren="rs_Castes">
<option value="{Caste_ID}">{Caste_Name}</option>
</select>
</div>
//and//
<div spry:region="rs_Professions">
<select name="select" spry:repeatchildren="rs_Professions" onchange="changeSet(this.value)">
<option value="{Profession_ID}">{Profession_Name}</option>
</select>
</div>
This does not work for both:
var rs_SpryCasteAbilities = new Spry.Data.HTMLDataSet(null, "CasteAbilities");
rs_SpryCasteAbilities.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
if (row[Caste_ID'] == rs_SpryCasteAbilities.gallery) {
return row;
return null;
rs_SpryCasteAbilities.filter(chooseSet);
function changeSet(set)
rs_SpryCasteAbilities.gallery = set;
rs_SpryCasteAbilities.filter(chooseSet);
rs_SpryCasteAbilities.setCurrentRowNumber(0);
var rows = rs_SpryCasteAbilities.getData();
for (var i = 0; i < rows.length; i++) {
if (rows[i]['Caste_ID'] == set) {
rs_SpryCasteAbilities.setCurrentRowNumber(i);
break;
var rs_SpryProfAbilities = new Spry.Data.HTMLDataSet(null, "ProfessionAbilities");
rs_SpryProfAbilities.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
if (row['Prof_ID'] == rs_SpryProfAbilities.gallery) {
return row;
return null;
rs_SpryProfAbilities.filter(chooseSet);
function changeSet(set)
rs_SpryProfAbilities.gallery = set;
rs_SpryProfAbilities.filter(chooseSet);
rs_SpryProfAbilities.setCurrentRowNumber(0);
var rows = rs_SpryProfAbilities.getData();
for (var i = 0; i < rows.length; i++) {
if (rows[i]['Prof_ID'] == set) {
rs_SpryProfAbilities.setCurrentRowNumber(i);
break;
var rs_SpryProfessions = new Spry.Data.HTMLDataSet(null, "Professions");
var rs_Castes = new Spry.Data.HTMLDataSet(null, "Castes");
//With this being the code for the selectors further down the page//
<div spry:region="rs_Castes">
<select name="select" spry:repeatchildren="rs_Castes" onchange="changeSet(this.value)">
<option value="{Caste_ID}">{Caste_Name}</option>
</select>
</div>
//and//
<div spry:region="rs_SpryProfessions">
<select name="select2" spry:repeatchildren="rs_Professions" onchange="changeSet(this.value)">
<option value="{Profession_ID}">{Profession_Name}</option>
</select>
</div>Thanks for the reply Ben!
Here's the url:
http://www.iotheatre.com/GoldenAgeAbilities.php
As you can see, the filter in the 2nd tab works as intended, but there is nothing showing up at all in the first tab! Any help would be greatly appreciated.
-CB -
Using fade/appear transition in spry tabbed panels
I've implemented the fade/appear transition into a spry
tabbed panel set up. The effect works in that when one clicks on a
tab, the content in that panel will "appear" in using a opacity
transition.
The problem I am encountering is a pre-load of the content..
almost a flicker at 100% opacity... and then the transition from 0%
to 100% resumes. This flicker effect or visible pre-load of the
content really takes away from the effect of the transition.
Does anyone know how to solve this or correct my set up?
I'm using the following...
<li class="TabbedPanelsTab"
onclick="MM_effectAppearFade('fade-guestrooms', 1000, 0, 100,
false)" tabindex="0" onfocus="this.blur()">GUEST
ROOMS</li>Yes this was a tough one to pull off in Spry. I have worked up a solution that fades between the panels. Please have a look at the following post:
http://blog.infrontweb.com/ajax/spry/spry-tabbed-panel-fade-transition/
Good Luck -
Tabbed panels no longer showing up
Hi folks, for quite some time I have used the widge Spry Tabbed Panels 2.0 in this page: www.arrowmark.co.nz/clients and on this pagehttp://tatlerprime.co.nz/conference.html but the tabs no longer show up and all the content is laid out vertically down the page. With Altruistic Gramps' help I have customised my pages to enable quick links to tabs and named anchors and other helpful tweaks to help visitors navigate around the tabs and their contents.
Several things have happened since I built those pages: my Windows 7 profile became corrupted and I had to start a new profile which meant I lost access to app data. I also upgraded to DW cs6. And I also lost access to my widgets panel.
Any one of these issues could have caused the problem but it may also be that this widget no longer works in Cs6.
However, there is a further possibility: that I have inadvertently made a change in code which is preventing the tabs from appearing. Is anyone able to take a quick look and let me know which is the most likely before I start a rebuild from scratch?
Thanks in advance,
Jo
[update: I have narrowed down the problem. The panels fall apart when I change the defaultTab value from 0 to "params.tab ? params.tab : 0", (which I am using as part of a script that enables me to send email links and set menu bar links to particular tabs and their contents. If anyone knows another way to achieve this aim without affecting tab behaviour, I'd be really grateful. As Altruistic Gramps kindly provided me with the code I have messaged him but am also asking here in case anyone is able to help me before he gets on line next]
Message was edited by: BoppyW to provide updateThe problem is because you're linking to Adobe Labs for SpryURLUtils.js:
<script src="http://labs.adobe.com/technologies/spry/includes/SpryURLUtils.js"></script>
Adobe announced a couple of weeks ago that it was no longer investing in the development of Spry (see
http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l). As a consequence, the files are no longer available on Adobe Labs.
You need to download the Spry files from GitHub. Copy SpryURLUtils.js into your local site, and link to the local version rather than the one on Adobe Labs. -
I have a perplexing problem, in firefox the iframe in the spry tabbed panel doesn't work any ideas?
I have made a page with spry tabbed panels, i have embedded an iframe in the content section of the second tab, this works perfectly well with Google, IE, Safari, Opera etc but just doesnt work in Firefox.
If I make the tab panel containing the iframe the Default tab then it works, i just cant figure out why,
By the way new to all this so be gentle please
<div id="main_column">
<div class="section_w500">
<h2>North Bali Listings</h2>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">About North Bali</li>
<li class="TabbedPanelsTab" tabindex="0">Land</li> <<<<< This is the tab where the iframe is embedded in the content panel>>>>>
<li class="TabbedPanelsTab" tabindex="0">Houses / Villas /Apartments / Rooms</li>
<li class="TabbedPanelsTab" tabindex="0">Commercial</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">A property analyst recently said that limited land availability in the southern parts of Bali, especially in and around the Badung and Denpasar areas, has driven investors northward, in our opinion at this time it is an ideal opportunity to acquire property still at very sensible prices in this area, be it for investment or as a place of residence.. <br />
<p> <img src="../../../Images/Bali Scenes General/panoramic-views.jpg" alt="views" width="183" height="140" align="left" />Over the last few of years, investors have been targeting the northern area, principally along the coastline , with its variety of pristine black sandy beaches, pebble beaches and rugged coastline, offering a variety of activities; scuba diving, snorkelling, water sports, fishing, sailing. trekking gives this area the potential to be world-class tourist destination. Research has shown that property prices are set to rise above the average due to increased infrastructure development, and the planned opening of a new International Airport in the North shows the Bali Government's commitment to the develop this area as a future tourist destination.<br />
<br />
The Northern part of Bali is also an excellent base for exploration further afield, close to the main portal for trips to other parts of Indonesia. <br />
Although it is largely undeveloped there is a wide range of properties and land with beach front to panoramic rice paddy views still to be found at good value for money. </p>
<table width="100%">
<tr>
<td align="left" valign="top"><div class="AreasOfBaliHighlight" style="color: #60C; font-weight: bolder;">This is an ideal time to consider your dream property in this area; be it for investment, development or private use.</div></td>
</tr>
</table>
<p> The main tourist area in the North is arguably <span style="color: #F00">Lovina</span>, with property prices reflecting this especially beach front or with panoramic views so expect to see prices a little bit more expensive in and around this area. However inland prices are still very reasonable.<br />
<br />
<img src="../../../Images/Bali Scenes General/Traditional-lifestyle.gif" alt="village life" width="188" height="137" hspace="2" align="right" />Other areas to be found in the North going towards <span style="color: #F00">Gillimanuk</span> the main portal for the ferry to and from Java; include: <span style="color: #F00">Pemuteran</span> popular diving area, <span style="color: #F00">Menjangan</span> <span style="color: #F00">Island</span>, a popular diving and nature reserve; are also beginning to attract investors, resulting in prices rising.<br />
The area of the North of Bali travelling East from <span style="color: #F00">Lovina</span> towards the eastern part of Bali is quieter and more rural, with stunning coastline and secluded traditional village life, here life slows down, people are very friendly and happy to integrate with "Bule (Foreigner), this life style is definitely completely different to the hustle and bustle of the South of Bali, perfect for future development and peaceful retirement, and with the development of the new <span style="color: #F00">International Airport</span> in this area, about 1/2 way between <span style="color: #F00">Singaraja</span> and <span style="color: #F00">Almpura</span> in the East, which makes this area an ideal investment opportunity as property and land prices are set to grow in this part of North Bali faster than other areas.<br />
<br />
<img src="../../../Images/Bali Scenes General/img_bali_1.jpg" alt="Quiet Lanes" width="189" height="124" hspace="2" align="left" />It has to be said that facilities for schooling, medical services and shopping are not as good as in the South or around Ubud area, which have higher concentrations of established ex pat communities, and better facilities also the job opportunities are not anywhere near as plentiful as in the South or Ubud areas, which limits the lifestyle for many people looking to settle in Bali, careful consideration has to be given if your intention is for a place for you to reside, and it is possibly an area for consideration as an investment opportunity, or for a development of hotel or villa resort, or as a second retirement home. </p>
<p>There are of course facilities for all the usual services and plenty of job opportunities, and a small but growing ex-pat community, especially in and around <span style="color: #F00">Lovina</span> and <span style="color: #F00">Singaraja</span> just not as many as in the other popular areas for ex pat's. </p>
</div>
<div class="TabbedPanelsContent">
<p> </p>
<table width="100%" border="0">
<tr>
<td valign="top"><h7 style="color: #C03"><span style="font-weight: bold"><span style="font-size: 12px; color: #FFF;">Property Code BSP 00130101</span><span style="font-size: 16px"> </span>SAMBIRENTENG - North East Bali 7,300 meters (</span></h7>
<span style="font-weight: bold; color: #B90033;">73 ARE) Beach front flat wooded land for Sale/ Rent</span></td>
<td><span class="button_01"><a href="#" onclick="MM_openBrWindow('North Bali/Gold Package Listings/BSP-00130101/Sambirenteng Property Location Map.html',width=750,height=200')">Location Map</a></span></td>
</tr>
<tr>
<td width="77%" valign="top"><p>A golden opportunity to acquire a prime plot of beach front land in the North East of Bali in an area that enjoys newly awarded "Tourism Status" ideal for the development of a small hotel or villa complex, easy access to many popular tourist spots already developing in the North.</p>
<p> A 3 meter wide sealed road gives acces to the whole length of this prime plot of land: Electric (PLN) Water (PDAM) Telephone & Internet close to hand and readilly available</p></td>
<td width="23%"><a href="Carousel Sambirneteng Listings.html target="_parent"></a><iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></td>
</tr>
<tr>
<td valign="top">Purchase price<span style="color: #33C; font-weight: bold;"> 12,500,000,000 Rp</span><br />
Rental Price (25 years) <span style="font-weight: bold">9,450,000,000</span> <span style="font-weight: bold">Rp</span> <span style="color: #FFF"> (<span style="font-weight: bold; color: #3333D0;"> 5,200,000 Rp</span><span style="color: #3933D5"> </span> per are per year )<br />
Min Rental Period 25 Years, extendable to to a max of 75 years
(with full "Right Of Use" issued by owner)</span></td>
<td valign="top"><p class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101 Details.html">Find out more</a></p>
<br />
<span class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101_Enquiry Form.html" target="_parent">Make Enquiry</a></span></td>
</tr>
</table>
<p><br />
</p>
<hr width="100%" noshade="noshade" />
<p> </p>
</div>
<div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.<iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></div>
<div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.</div>
</div>
</div>
<p> </p>
<p>
<h7 style="color: #C03"></h7>
</p>
<h2></h2><!-- this stays empty to put dotted line under listings block -->
</div>
<div class="cleaner"></div>
</div> <!-- end of main column -->Could you share a link to the page?
Seeing it in context and in our browsers is much easier to debug.
If not, make sure to run the validator here The W3C Markup Validation Service and clear out any problems. HTML errors, especially structural ones, will cause all kinds of display problems in various browsers/versions/platforms. -
How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel?
I have 5 of them all containing nested Apdiv within nested ApDivs (a long storie ) that I would like to insert into 5 tabs in the Spry Tabbed Panel.
Please help."Hi Gramp,I realize I have made hard work for myself but I really don't know any better. I also realize now that taking on this project may have been a mistake :-)I taught myself how to use the design side of Dream Weaver. These five ApDivs were created in the content area of the spry tool and it worked fine. (yes a lot of work though)For the first time I looked at the code side. I wanted to try to bring a peace of code from another page for something unrelated and when it didn't work I took it out and without noticing, deleting a line from the Spry tool.Of course like a classic newbe I was working without a backup copy so here I am. Loosing hours of tedious work and on the verve of tears :-)I do have some questions though. My APDiv
What does "apDiv1" stands for and what does "My APDiv" stands for?Is the only thing I have to do is changing this line for my five ApDivs and paste it in the appropriate places in the code? Thanks again,Gilaad
Date: Sat, 16 Jun 2012 20:39:07 -0600
From: [email protected]
To: [email protected]
Subject: How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel?
Re: How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel?
created by Altruistic Gramps in Spry Framework for Ajax - View the full discussion
You have really made hard work for yourself by using APDiv's. I suppose it can be done, but I would not. To answer your question, I have create an example as per#apDiv1
My APDiv
Content 2
Tab 1
Gramps
Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/4498679#4498679
To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/4498679#4498679. In the Actions box on the right, click the Stop Email Notifications link.
Start a new discussion in Spry Framework for Ajax by email or at Adobe Forums
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746. -
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 -
Tabbed panels repeat region in cms displays 2nd item as a block of content
Hi everyone, hope someone can help:
I have a test page live
http://aegmotorhomes.co.uk/usedtest1.php
Problem is this-
I have added a repeat region on my dreamweaver template
I use Perch CMS as my management for staff to add new items for sale on this page
I have built a tabbed panels to list the item
On my CMS it allows me to press "add another" which then adds the tabbed panels again as a new item and the staff input the details
My problem is the first item works perfect and all tabbs work fine, each item after that doesn't have tabbs and shows all content as one whole block
I think it is to do with the ID and applies the java file only to item one, thats my guess.
I have attached code below for my tabbed panels template, .js file and .css file - can anyone shed any light on this issue"
TEMPLATE
<style type="text/css">
#container1 {
width: 700px;
background-color: #E6E6E6;
border: .1em solid #999;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
height: auto;
margin-bottom: 30px;
#item_description {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.3em;
color: #333;
background-color: #FFF;
height: 30px;
border-bottom-width: .1em;
border-bottom-style: dotted;
border-bottom-color: #333;
font-weight: bold;
margin-bottom: 10px;
#price {
margin-top: 5px;
float: right;
width: 150px;
background-color: #EAEAEA;
border: 0.1em solid #CCC;
.BOLDTEXT {
font-weight: bold;
text-align: center;
color: #FFF;
.BOLDTEXT_PRICE {
color: #333;
#engine_spec {
float: left;
width: 190px;
font-family: Arial, Helvetica, sans-serif;
font-size: .75em;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
#top_price {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
color: #099;
float: right;
width: 150px;
font-weight: bold;
text-align: right;
#top_price {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
color: #099;
#overview_picture {
height: 150px;
width: 200px;
background-color: #CCC;
float: left;
margin-right: 10px;
margin-top: 5px;
.BOLDTEXT_blackprice {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.4em;
color: #099;
#smallprint {
font-family: Arial, Helvetica, sans-serif;
font-size: .5em;
color: #666;
margin-top: 2px;
table tr td {
font-size: 0.75em;
font-family: Arial, Helvetica, sans-serif;
.specwhite {
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
#reserve {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
color: #FFF;
background-color: #099;
width: 140px;
float: right;
margin-top: 10px;
padding: 5px;
text-align: center;
border: .1em solid #999;
</style>
<script src="../../../../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="../../../../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<div id="container1">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Overview</li>
<li class="TabbedPanelsTab" tabindex="0">Description</li>
<li class="TabbedPanelsTab" tabindex="0">Images</li>
<li class="TabbedPanelsTab" tabindex="0">Specification</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div id="item_description"><perch:content id="Title1" label="Title" type="text" />
<div id="top_price">£<perch:content id="Title2" label="Top Price" type="text" /></div>
</div>
<div id="overview_picture"><img src="<perch:content id="photo" label="Photo" type="image" />" class="photo" /></div>
<div class="engine_spec" id="engine_spec">
<table width="100%" border="0" cellpadding="5" cellspacing="7">
<tr>
<td width="35%" bgcolor="#EAEAEA">Year of Make</td>
<td width="65%" bgcolor="#999999"><strong class="spec_white"><span class="engine_spec"><span class="specwhite"><perch:content id="Title3" label="Year" type="text" /></span></span></strong></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">Current Miles</td>
<td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title4" label="Mileage" type="text" /></span></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">Engine Size</td>
<td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title5" label="Engine" type="text" /></span></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">Body Colour</td>
<td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title6" label="Colour" type="text" /></span></td>
</tr>
<tr>
<td bgcolor="#EAEAEA">Transmission</td>
<td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title7" label="Transmission" type="text" /></span></td>
</tr>
</table>
</div>
<div id="price">
<table width="150" border="0" cellspacing="9">
<tr>
<td width="50" height="25" bgcolor="#999999" class="BOLDTEXT">WAS</td>
<td width="81" class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title8" label="Old Price" type="text" /></span></td>
</tr>
<tr>
<td height="25" bgcolor="#999999" class="BOLDTEXT">NOW</td>
<td class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title9" label="New Price" type="text" /></span></td>
</tr>
<tr>
<td height="25" bgcolor="#999999" class="BOLDTEXT">SAVE</td>
<td class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title9a" label="Save" type="text" /></span></td>
</tr>
</table>
</div>
<div id="reserve">Reserve Motorhome</div>
</div>
<div class="TabbedPanelsContent"><perch:content id="Text" label="Description" type="textarea" editor="ckeditor" html="true" /></div>
<div class="TabbedPanelsContent"><table width="650" cellspacing="5">
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
<tr>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
<td width="106" height="80" bgcolor="#CCCCCC"> </td>
</tr>
</table></div>
<div class="TabbedPanelsContent"><perch:content id="Text1" label="Specification" type="textarea" editor="ckeditor" html="true" /></div>
</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
.JS file
(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, "click", 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);
})(); // EndSpryComponent
>CSS file
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.6 - 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 {
overflow: hidden;
margin: 0px;
padding: 0px;
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;
background-color: #DDD;
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
font-family: sans-serif;
font-size: small;
font-weight: bold;
margin-top: 0px;
margin-right: 1px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 10px;
padding-left: 10px;
padding-bottom: 4px;
/* 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: #FFF;
color: #333;
border-top-color: fff;
border-right-color: fff;
border-bottom-color: fff;
border-left-color: fff;
border-color: fff;
outline-color: fff;
/* 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;
background-color: #F9F9F1;
height: auto;
margin-bottom: 3px;
border: .1px solid #999;
/* 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;
/* 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 {
background-color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.75em;
color: #333;
padding: 20px;
clear: both;
margin-bottom: 5px;
height: auto;
/* 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".
.VTabbedPanels {
overflow: hidden;
zoom: 1;
/* 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;
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;
/* 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:none !important;
height: 100%;
#TabbedPanels1 {
height: auto;
padding-top: 5px;
background-color: #EAEAEA;
width: 700px;
I did read this but don't know where to start: http://www.webdevforums.com/showthread.php?27428-Dreamweaver-spry-collapsible-panel-amp-re peating-regions
Can anybody HELP PLEASE PLEASEI think I counted three tabbed panels in the markup, each with an ID of TabbedPanels1
You have only one constructor that makes one instance of the tabeed panels with an ID of TabbedPanels1
There are a couple of things that create the problem.
There can only be one ID with the same name in a document, thus the ID's of the TabbedPanels will need to change from TabbedPanels1 for the second and third instances to TabbedPanels2 and TabbedPanels3 (or similar) respectively.
There needs to be a constructor for each tabbed panels like
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3");
Gramps
Maybe you are looking for
-
How do I manage to have ITUNES MATCH work on 2 iphones under 1 icloud account? If I create a second icloud for my wife, will our contacts not be synced anymore? Currently we have 1 Icloud account that we trasitioned from a MobileMe account. We li
-
Once again wpa_supplicant problem:
I'd like to `upgrade' my wireless connection from the not-so-good wep to the shining wpa2, but I continue having problems... Some general informations, I think everything is fine: # lspci | grep lan 02:00.0 Network controller: Intel Corporation PRO/W
-
How can i change arabic interface to english
how can i change firefox interface from arabic to be in english
-
Does anyone have an issue with their "open existing file" search function? If I create a document using pages, numbers, or keynote, I can search for it using finder or spotlight but not with the search feature under "open existing file" window of iWo
-
Using Indesign's effects on photos vs doing it in Photoshop
Heya, hope someone can help me with this. I'm still an Indesign noob. I'm working on a magazine that will be printed through an Offset printer. There are several images that will look like this: http://drop.brizk.com/wWyt What I'm doing here is apply