Flash Player in Spry Tabbed Panel

I have a Flash video embedded in a Tabbed Panel - not the
default panel. This works fine in FireFox but in IE it seems to
load and run when the page is loaded. I don't see it because the
panel is not displayed yet but I can hear the audio.
Evidently, IE loads all content of a page immediately rather
than waiting for the tabbed panel to be selected. Is ther a way to
prevent this?
Thanks, Joe

That works, but it in my case, I really would like the video
to autoplay when the tab page is selected. Is there something I can
add to the script that would make it work the same way in IE as in
Firefox (Firefox works correctly with autoplay enabled).
Basically, I have a Spry TabPage titled "Installation Video".
When users select this tab they shouldn't then have to also select
the play button to start the video.
Otherwise, is there a modification I can make to the script
that disables autoplay if the browser is IE vs Firefox.

Similar Messages

Spry Tabbed Panels overwritting Flash drop down menu in IE

I am having an issue with Spry Tabbed Panels appearing above
a Flash drop down menu in IE6 & IE7 but it works fine in
Firefox. Would someone be able to educate me on what I can do to
fix this problem. The page that is exhibiting this problem is
http://us.shuttle.com/performance.aspx
I’ve tried adding “WMODE” to my flash menu,
also updated “SpryTabbedPanels.js to version 0.5 –
pre-release 1.6”, but neither way is
helping…….

Thank you very much for the suggestion. Yes, this is how I
tried:
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%;
z-index: 1000;
I’ve been tried setting Z-index to from 50 to 2000 in
attached css, but still not working.

Spry Tabbed Panels overwritting Flash drop down menu in IE but display fine in Firefox

I am having an issue with Spry Tabbed Panels appearing above
a Flash drop down menu in IE6 & IE7 but it works fine in
Firefox. Would someone be able to educate me on what I can do to
fix this problem. The page that is exhibiting this problem is
http://us.shuttle.com/performance.aspx
I’ve add “WMODE” to my flash menu,
also updated “SpryTabbedPanels.js to version 0.5 –
pre-release 1.6”, but neither way is
helping…….

Thank you very much for the suggestion. Yes, this is how I
tried:
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%;
z-index: 1000;
I’ve been tried setting Z-index to from 50 to 2000 in
attached css, but still not working.

Spry tabbed panel

Hi,
I've paced a Spry tabbed panel into a page below 3 thumbnails of images, you click on the tab and a larger image drops down, that works just fine but I can't figure out how to have the contents of all tabs to be empty on load so no large images in the content area are visible, is this possible?
Thanks in advance
Pete

Sorry Ben, don't have this page uploaded yet but I've included the code from the HTML page.
Thanks Pete
<!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=iso-8859-1" />
<title>Web design professional web site design & development Auckland Tauranga Wellington Filemaker Pro relational databases by Trident Solutions</title>
<meta name="Description" content="Trident Solutions build professional websites and develop relational databases for clients in New Zealand and Australia." />
<meta name="Keywords" content="Web site design, New Zealand Australia, Filemaker Pro databases design company," />
<meta name="Copyright" content="Copyright Trident Solutions 2010. All rights reserved" />
<meta name="Publisher" content="web design" />
<meta name="Distribution" content="Global" />
<meta name="Revisit" content="10 days" />
<meta name="Language" content="English" />
<meta name="Rating" content="General" />
<link href="css_files/styles.css" rel="stylesheet" type="text/css" />
<link href="css_files/body_class.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
    position:absolute;
    width:200px;
    height:21px;
    z-index:27;
    left: 689px;
    top: 616px;
    background-color: #FF0000;
#apDiv3 {
    position:absolute;
    width:77px;
    height:30px;
    z-index:1;
#apDiv4 {
    position:absolute;
    width:83px;
    height:26px;
    z-index:1;
    top: 181px;
#apDiv5 {
    position:absolute;
    width:200px;
    height:115px;
    z-index:27;
    left: 68px;
    top: 265px;
body {
    background-color: #FFF;
</style>
<script src="SpryAssets/SpryCollapsiblePanel2.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
</head>
<body class="services">
<div id="centered">
<div id="container">
<div id="buttons">
   <a class="home" href="index.html">Home</a>
    <a class="services" href="services.html">services</a>
    <a class="clients_examples" href="client_examples.html">client examples </a>
    <a class="filemaker_pro_database" href="filemaker_pro_database.html">databases</a>
    <a class="company_info" href="company_info.html">company info </a>
    <a class="contact_us_feedback_form" href="contact_us_feedback_form.html">contact us feedback form</a>
    <a class="photo_gallery" href="photo_gallery.html" target="_blank">photo gallery</a> </div>
<div id="header_text">
    <h1>Web design & development<br />
      Filemaker Pro relational databases</h1>
    <h1>Digital photography</h1>
</div>
<div id="masthead"></div>
<div id="apDiv2"></div>
<div id="rh_title_heading"></div>
<div id="services_table">
    <div id="web_title2">
      <h2>Services provided by Trident
      </h2>
      <div id="dotted_line_top"></div>
    </div>
    <p> </p>
    <p><img src="images/http_icon.jpg" alt="web icon" width="124" height="94" class="img" /><img src="images/database_icon.jpg" alt="filemaker icon" width="124" height="94" class="img" /><img src="images/digital_camera.jpg" alt="photos" width="124" height="94" class="img" />
    </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <div id="services_image3">
      <p><img src="images/sydney_cove_tn.jpg" alt="" width="181" height="121" class="img" /><img src="images/mount_tn.jpg" width="181" height="121" class="img" /><img src="images/bridge_tn.jpg" width="181" height="121" class="img" /></p>
      <p> </p>
      </p>
      <p><br />
    </p>
</div>
<p> </p>
<div id="image_3_large">
<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
      <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
      <li class="TabbedPanelsTab" tabindex="0">Tab 3</li>
</ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent1">Content 1</div>
      <div class="TabbedPanelsContent2">Content 2</div>
      <div class="TabbedPanelsContent3">Content 3</div>
</div>
</div>
<p> </p>
</div>
<p> </p>
</div>
<div id="rh_text_box_css">
    <h3>CSS </h3>
    <p class="main_text"><strong>CSS</strong> stands for <strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets<br />
      Styles define how to display HTML elements<br />
      Styles were added to HTML 4.0 to solve a problem<strong><br />
        </strong>External Style Sheets can save a lot of work<br />
      External Style Sheets are stored in <strong>CSS files</strong></p>
    <div id="read2"><a href="http://www.w3schools.com/css/css_intro.asp" target="_blank"><img src="images/b_read.gif" alt="read" width="72" height="21" border="0" /></a></div>
    <p class="main_text"> </p>
</div>
<div id="index_lh_top_box"></div>
</div>
<div id="back_shadow">Content for id "back_shadow" Goes Here</div>
<p> </p>
<div id="rh_text_box_flash"><span class="main_text_rh_box">
<h3 class="home" id="sprytrigger1"><strong>Flash Animation</strong></h3>
    </span><span class="main_text"><span id="sprytrigger2">Web sites come</span> to life with the power of Flash <br />
    animation, display interactive photo
    </span><span class="main_text">    how to albums, <br />
    diagrams with movement and tutorials can all<br />
be done in Flash</span><span class="main_text">
<p class="main_text"> </p>
    </span>
<div id="read1"><a href="http://www.adobe.com/products/flash/whatisflash/" target="_blank"><img src="images/b_read.gif" alt="read" width="72" height="21" border="0" /></a></div>
</div>
<div id="rh_text_box_seo">
<h3>Search Engine optimisation (SEO) </h3>
      <p class="main_text">As an Internet marketing strategy, SEO <br />
        considers how search engines work and what <br />
        people search for. Optimising a web site primarily <br />
        involves editing its content and HTML and <br />
        associated coding to both increase <br />
        the site's ranking with search engines. </p>
<div id="read3"><a href="http://en.wikipedia.org/wiki/Search_engine_optimization" target="_blank"><img src="images/b_read.gif" alt="read" width="72" height="21" border="0" /></a></div>
</div>
<div id="rh_text_xhtml">
<div id="read4"><a href="http://www.w3schools.com/xhtml/xhtml_intro.asp" target="_blank"><img src="images/b_read.gif" alt="read" width="72" height="21" border="0" /></a></div>
      <h3><span class="main_text_rh_box">XHTML</span> What Is XHTML?</h3>
      <span class="main_text">XHTML stands for EXtensible HyperText Markup<br />
Language<br />
XHTML is almost identical to HTML 4.01<br />
XHTML is a stricter and cleaner version of HTML<br />
XHTML is HTML defined as an XML application<br />
XHTML is a W3C Recommendation</span>
      <p> </p>
</div>
    <div id="footer_text">Copyright 2010. Trident Solutions. Comments regarding this site, <span class="class1"><a href="mailto:[email protected]">please contact the web master.</a></span></div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>

Linking to specific spry tabbed panel - code not working

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

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

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

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

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

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

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

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

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

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

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

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

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>
</div>
<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

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

I can only use Flash Player in one tab at a time, only on Firefox.

Recently, when I downloaded the new Flash Player, I can only use flash player in one tab at a time. This is only in firefox. I'll open youtube, and the visual and sound both play perfectly. I open up a new tab, begin using a flash website in that tab, and the youtube sound is quiet, only the visual continues to play. I need to multitask with flash sometimes, and this is a big problem for me. Help!

By default, Flash 11.3 and higher will spin up a lot of distinct processes. You should be able to get quite a cacophony going.
Have you ever done any troubleshooting that involves changing how Firefox works with plugin-container.exe or the Flash player's protected mode?
Often it is helpful to disable hardware graphics acceleration in Firefox and in Flash:
(A) In Firefox, un-check the box here and restart:
orange Firefox button (or Tools menu) > Options > Advanced > General > "Use hardware acceleration when available"
(B) In Flash, see this support article from Adobe: http://helpx.adobe.com/flash-player/kb/video-playback-issues.html#main_Solve_video_playback_issues
Unrelated, but you can remove the Java Console extensions unless you are a Java developer (and even then, you probably don't need the old ones):
orange Firefox button (or Tools menu) > Add-ons > Extensions category

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">

</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">

</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

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

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

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

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

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);
})(); // EndSpryComponent

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

Spry tabbed panels - Different Hover Class for each tab

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

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

Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like

Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like it was all created on one page, plus mouse over doesnt work on them.
This started all of a sudden.
The entire website is a series of spry tabbed panels.
http://pacificlaser.com/const.html
if you click on General construction tab things work ok...
if you click on Machine control tab, mouse over doesnt work and all page content of each tab show through.
ive been looking for the answer for 4 months with no success.
Hope a fellow dreamwever-person can help
Thanks Rick

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

Flash Player in Spry Tabbed Panel

Similar Messages

Maybe you are looking for