Slide show in a Tabbed Panel

I created a moving slide show using Creative DW Image Show Pro (a Dreamweaver extension) and inserted it into a tabbed panel created in Dreamweaver using the Tabbed Panel Widget. It's a three tab panel with an image show, SWF, planned for each tab. The first tab accepted the image show and seems to be working fine. But when I loaded the second show in the second tab, it did not work.
I have read the code a number of times and have found nothing wrong, but my knowledge in that area is limited.
I am working in Mac OS 10.6.2 and in Dreamweaver CS4.
You can find the uncooperative page at
http://dcarchts.com/projects.html
Thanks,
Merle

This can be done in iweb using 'my albims' page, I posted various versions of this (of the same javascript). But here it is (again), add the following to your 'My Albums' pae using HTML Snippet:
<script type='text/javascript'>
function redoMediaGridWidget() {
headerControlsDiv = parent.document.getElementsByClassName('com-apple-iweb-widget-headercontrols')[ 0];
headerControlsWidget = headerControlsDiv.widget;
mediaGridID = headerControlsWidget.p_mediaGridID();
mediaGrid = parent.document.getElementById(mediaGridID);
if (mediaGrid) {
mediaGridCount = mediaGrid.childNodes.length;
for (mgi = 0; mgi<mediaGridCount; mgi++) {
mediaDiv = parent.document.getElementById('gridEntry' + mgi);
mediaDiv.removeAttribute('onclick');
slideDiv = mediaDiv.widget.getElementById('slideshow_placeholder');
mediaDiv.widget.p_startSlideshow(slideDiv);
mediaDiv.addEventListener('mouseover', function(){mediaDiv.widget.p_scrub(slideDiv);});
mediaDiv.addEventListener('mouseout', function(){mediaDiv.widget.p_startSlideshow(slideDiv);});
clearInterval(chkMediaGridWidget);
chkMediaGridWidget = setInterval('redoMediaGridWidget()', 500);
</script>
here is my example: http://widgets.cyclosaurus.com/ImageRotate2/ImageRotate/ImageRotate.html

Similar Messages

  • 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>&amp; 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 &amp;
    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&quot;x10&quot; 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&quot;x10&quot; 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&quot;x10&quot; 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&quot;x10&quot; = $12.99; 10&quot;x13&quot; = $19.99; 2 - 5&quot;x7&quot; = $12.99; 4 - 4&quot;x6&quot; = $11.99</p>
          <p>(Custom sizes available - Custom framing available)</p>
          <p><strong>Package 1:</strong></p>
          <p>3 - 8&quot;x10&quot;; 4 - 5&quot;x7&quot;; 4 - 4&quot;x6&quot; = $50.00</p>
          <p><strong>Package 2:</strong></p>
          <p>5 - 8&quot;x10&quot;; 6 - 5&quot;x7&quot;; 6 - 4&quot;x6&quot; = $90.00</p>
          <p><strong>Package 3:</strong></p>
          <p>8 - 8&quot;x10&quot;; 4 - 5&quot;x7&quot;; 4 - 4&quot;x6&quot; = $125.00</p>
          <p><strong>Package 4:</strong> (Basic Prints)</p>
          <p>Any 100 photos printed 4&quot;x6&quot; = $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&quot;x6&quot; = $350.00</p>
          <p>100 cards - 4&quot;x6&quot; = $150.00</p>
         <hr width="50%" align="left" />
          <p><strong>Custom Albums Available: </strong>(prices vary - special order)</p>
          <p>Bride &amp; 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

  • 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 update

    The 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.

  • 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

  • When I open Photoshop CS6, the image does not show in Photoshop. The image IS open, i.e. the filename is shown on a tab and the image layers show in the layer panel. What is going on?

    Both Photoshop and Bridge open as usual. But when I open an image, the image does not show in the image area. The image filename does show in a tab and the layers show in the layer panel. What is going on and how do I fix this.

    I resolved the problem. It was somehow related to my using Microsoft
    theme pictures. I set Windows to use the basic theme and the problem
    went away. Thank you for the suggestions.
    Jac

  • My html table is not showing on the 2nd tab panel (muse widget)

    The same table works just fine on the first tab however when I try to click on the second table in browser mode or preview page on browser, my table does not show up. Any tips for fixing this issue?

    If I get this right, you're using the Tabbed panel widget to display a HTML table in each of the tabs. If that is the case, please make sure you insert the HTML content on each the tab's content area respectively. In order to verify this, switch between the tabs in Design mode to check your content.
    Thanks,
    Vinayak

  • Tabbed Panels Show on Hover, Not Click

    Hi,
    I'm using the Spry Tabbed Panels widget (obviously). I'd like
    the content panels to show on hover, rather than on click.
    Reason being is my content in the content panels are images
    -- as you hover over a tab, the image changes. Clicking on the tab
    takes you to the tab's page. That's the end goal, at least.
    The answer's in the SpryTabbedPanels.js file, I'm positive.
    All my tinkering hasn't produced the desired result, though. Spare
    a few minutes and direct me to the sections of the javascript file
    I need to change?
    var Spry;
    if (!Spry) Spry = {};
    if (!Spry.Widget) Spry.Widget = {};
    Spry.Widget.TabbedPanels = function(element, opts)
    this.element = this.getElement(element);
    this.defaultTab = 0; // Show the first panel by default.
    this.bindings = [];
    this.tabSelectedClass = "TabbedPanelsTabSelected";
    this.tabHoverClass = "TabbedPanelsTabHover";
    this.tabFocusedClass = "TabbedPanelsTabFocused";
    this.panelVisibleClass = "TabbedPanelsContentVisible";
    this.focusElement = null;
    this.hasFocus = false;
    this.currentTabIndex = 0;
    this.enableKeyboardNavigation = true;
    Spry.Widget.TabbedPanels.setOptions(this, opts);
    // If the defaultTab is expressed as a number/index, convert
    // it to an element.
    if (typeof (this.defaultTab) == "number")
    if (this.defaultTab < 0)
    this.defaultTab = 0;
    else
    var count = this.getTabbedPanelCount();
    if (this.defaultTab >= count)
    this.defaultTab = (count > 1) ? (count - 1) : 0;
    this.defaultTab = this.getTabs()[this.defaultTab];
    // The defaultTab property is supposed to be the tab element
    for the tab content
    // to show by default. The caller is allowed to pass in the
    element itself or the
    // element's id, so we need to convert the current value to
    an element if necessary.
    if (this.defaultTab)
    this.defaultTab = this.getElement(this.defaultTab);
    this.attachBehaviors();
    Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
    if (ele && typeof ele == "string")
    return document.getElementById(ele);
    return ele;
    Spry.Widget.TabbedPanels.prototype.getElementChildren =
    function(element)
    var children = [];
    var child = element.firstChild;
    while (child)
    if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
    children.push(child);
    child = child.nextSibling;
    return children;
    Spry.Widget.TabbedPanels.prototype.addClassName =
    function(ele, className)
    if (!ele || !className || (ele.className &&
    ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
    return;
    ele.className += (ele.className ? " " : "") + className;
    Spry.Widget.TabbedPanels.prototype.removeClassName =
    function(ele, className)
    if (!ele || !className || (ele.className &&
    ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
    return;
    ele.className = ele.className.replace(new RegExp("\\s*\\b" +
    className + "\\b", "g"), "");
    Spry.Widget.TabbedPanels.setOptions = function(obj,
    optionsObj, ignoreUndefinedProps)
    if (!optionsObj)
    return;
    for (var optionName in optionsObj)
    if (ignoreUndefinedProps && optionsObj[optionName]
    == undefined)
    continue;
    obj[optionName] = optionsObj[optionName];
    Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
    if (this.element)
    var children = this.getElementChildren(this.element);
    if (children.length)
    return children[0];
    return null;
    Spry.Widget.TabbedPanels.prototype.getTabs = function()
    var tabs = [];
    var tg = this.getTabGroup();
    if (tg)
    tabs = this.getElementChildren(tg);
    return tabs;
    Spry.Widget.TabbedPanels.prototype.getContentPanelGroup =
    function()
    if (this.element)
    var children = this.getElementChildren(this.element);
    if (children.length > 1)
    return children[1];
    return null;
    Spry.Widget.TabbedPanels.prototype.getContentPanels =
    function()
    var panels = [];
    var pg = this.getContentPanelGroup();
    if (pg)
    panels = this.getElementChildren(pg);
    return panels;
    Spry.Widget.TabbedPanels.prototype.getIndex = function(ele,
    arr)
    ele = this.getElement(ele);
    if (ele && arr && arr.length)
    for (var i = 0; i < arr.length; i++)
    if (ele == arr
    return i;
    return -1;
    Spry.Widget.TabbedPanels.prototype.getTabIndex =
    function(ele)
    var i = this.getIndex(ele, this.getTabs());
    if (i < 0)
    i = this.getIndex(ele, this.getContentPanels());
    return i;
    Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex =
    function()
    return this.currentTabIndex;
    Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount =
    function(ele)
    return Math.min(this.getTabs().length,
    this.getContentPanels().length);
    Spry.Widget.TabbedPanels.addEventListener = function(element,
    eventType, handler, capture)
    try
    if (element.addEventListener)
    element.addEventListener(eventType, handler, capture);
    else if (element.attachEvent)
    element.attachEvent("on" + eventType, handler);
    catch (e) {}
    Spry.Widget.TabbedPanels.prototype.onTabClick = function(e,
    tab)
    this.showPanel(tab);
    Spry.Widget.TabbedPanels.prototype.onTabMouseOver =
    function(e, tab)
    this.addClassName(tab, this.tabHoverClass);
    Spry.Widget.TabbedPanels.prototype.onTabMouseOut =
    function(e, tab)
    this.removeClassName(tab, this.tabHoverClass);
    Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e,
    tab)
    this.hasFocus = true;
    this.addClassName(this.element, this.tabFocusedClass);
    Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e,
    tab)
    this.hasFocus = false;
    this.removeClassName(this.element, this.tabFocusedClass);
    Spry.Widget.TabbedPanels.ENTER_KEY = 13;
    Spry.Widget.TabbedPanels.SPACE_KEY = 32;
    Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e,
    tab)
    var key = e.keyCode;
    if (!this.hasFocus || (key !=
    Spry.Widget.TabbedPanels.ENTER_KEY && key !=
    Spry.Widget.TabbedPanels.SPACE_KEY))
    return true;
    this.showPanel(tab);
    if (e.stopPropagation)
    e.stopPropagation();
    if (e.preventDefault)
    e.preventDefault();
    return false;
    Spry.Widget.TabbedPanels.prototype.preorderTraversal =
    function(root, func)
    var stopTraversal = false;
    if (root)
    stopTraversal = func(root);
    if (root.hasChildNodes())
    var child = root.firstChild;
    while (!stopTraversal && child)
    stopTraversal = this.preorderTraversal(child, func);
    try { child = child.nextSibling; } catch (e) { child = null;
    return stopTraversal;
    Spry.Widget.TabbedPanels.prototype.addPanelEventListeners =
    function(tab, panel)
    var self = this;
    Spry.Widget.TabbedPanels.addEventListener(tab, "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)
    this.removeClassName(tabs
    , this.tabSelectedClass);
    if (panels)
    this.removeClassName(panels
    , this.panelVisibleClass);
    panels.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
    , panels);
    this.showPanel(this.defaultTab);

    near line 282 u will see the function:
    Spry.Widget.TabbedPanels.prototype.addPanelEventListeners =
    function(tab, panel)
    in there u will find
    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);
    change this to:
    Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover",
    function(e) { self.onTabClick(e, tab);return self.onTabMouseOver(e,
    tab); }, false);
    and it should work.

  • Spry tabbed panels: Shows everything when it shouldn't

    I have a spry tabbed panel with 2 tabs.
    In design view, this correctly shows me the contect of each of the tabs (a different table in each) when I click on the tab.
    When I run it in live view or the browser however, it displays both tabs TOGETHER, (i.e both table) and I can't select either of the tabs.
    I've attached a screen print.
    Any suggestions.

    The problem is with the tag name "s_phone".
    If iPhone Safari sees a tag name containing "phone", it automatically assumes you need the phone keypad. (Something similar goes for "zip".)
    Here's a test case setup someone made:
    http://www.iphonewebdev.com/examples/input.html

  • Placing an image in a tabbed panel content area, it shows up on all three panels

    This is crazy.  It should be so simple. But sometimes this happens to me. Like today.
    I have many pages that use a simple tabbed panel feature with three tabs.
    Each content area has a text frame and an image frame.
    Sometimes when I try to place an image into the content area of the first tab, the image shows up on all three content areas.  I have tried and tried placing the image, making very sure I am in the "content area" on not just on the page.  But nevertheless, the image seems to be "stuck" on the page, in front of the accordian feature, and therefore showing on all three tabs.
    How am I not targeting the placement of those images correctly? There just aren't that many options for me to screw up, it's a simple tabbed panel, that's all!
    Help please.
    Barbara

    Are you using the latest version of Muse/Air?
    The borders of the Content Area of a tab gets highlighted as soon as you drag over an element over it so it is very unlikely that something like this could happen. However, I believe it could be due to messed up Layers configuration as the only way I could reproduce this problem is through moving the image into a layer above a layer that contains the Tabbed panel or in case of just one layer, you might have the image at the very top.
    Thanks,
    Vinayak

  • Tabbed panel changes not showing up

    I'm using Dreamweaver CS5 on a Mac. A couple of years ago I created a website using tabbed panels (http://www.4dtr.com/Communication_Interpersonal.html), Recently, I went to make some modification to the tabs:
    1. altered the text in the tab
    2. Changed background colour of the tabbed panel)
    3. Changed the font size
    When I preview the changes in DW they seem to have worked...they also show up when I look in the Adobe Browser Lab. When I upload to the server however only the "altered text" modifications shows up. The change to background color as well as change to font size do not. What am I doing wrong? Help please...

    The first thing I notice as I look at your CSS Panel is that many of your styles are existing in the page itself instead of in a linked CSS stylesheet.
    Before you proceed, check through the list of styles in the CSS Styles Panel and delete styles that you don't need. Any style that has been completely superseded by another style further down on the list can be deleted. You should be left with only styles you want to be active.
    It is simple to move those styles to an external stylesheet; you can do it right in the CSS Panel.
    The aim is to have styles associated with the tabbed panels in the "SpryTabbedPanels.css" file, and to have no styles embedded in the page. Then you will make sure those external stylesheets are attached to all the pages that need those style. The on-page, embedded styles are shown in the CSS Panel (with "all" selected as the view) under labels that read: "<style>".
    I would also recommend creating a global.css stylesheet for those other styles that also should occur throughout your site. Do File > New > Blank Page > CSS to create the new stylesheet. After you have created this stylesheet, attach it to your page. If you are working with a true template file (file extension is .dwt), I suggest attaching it to that template. With the page in question open, open the CSS Panel and click the chain icon at the bottom of the Panel. Select the newly created stylesheet to link it to the page.
    Then select the styles you want to move, and keep holding the mouse down while you drag them under the appropriate stylesheet name in the CSS Styles Panel. You could also select them and right click, choosing 'move CSS styles'.
    Here's some links to info about the CSS Styles Panel: http://help.adobe.com/en_US/Dreamweaver/CS5/Using/WSbb8fae38174aec9d-4fb84361126e2b2aaf3-8 000.html
    The long and the short of it is: If a style was changed and the style sits on the page, that change is not reflected throughout the site, only on that page. If the style is moved (or created) on an external stylesheet, and the stylesheet is linked to all pages, that change will be reflected throughout the site.
    N.B.: If you change the template file, be sure to propagate the changes to all the pages that are based on that template. And don't forget to upload the changed files...
    Beth

  • Using Srpy tabbed panels with slidding panels

    I am very new to spry and so I am still just figuring it all
    out. How I found it was I wanted a tabbed panel like the one on the
    IBM website. Anyway, I am trying to
    use the tabbed panels with the sliding panels and it just does not
    seem to be working. I found
    this
    tutorial and followed the codes but it still only works as just the
    tabbed panels - nothing has changed at all. Can someone tell me
    what I might be doing wrong? I am attaching both my html and css
    code for you to inspect.
    HTML 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>Untitled Document</title>
    <script
    src="file://///172.16.10.251/users$/kduverna/Desktop/SpryAssets/SpryTabbedPanels.js"
    type="text/javascript"></script>
    <link
    href="file://///172.16.10.251/users$/kduverna/Desktop/SpryAssets/SpryTabbedPanels.css"
    rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0"><a
    href=”#Tab1″>Tab 1</a></li>
    <li class="TabbedPanelsTab" tabindex="0"><a
    href=”#Tab1″>Tab 2</a></li>
    </ul>
    <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
    </div>
    </div>
    <script type="text/javascript">
    <!--
    var TabbedPanels1 = new
    Spry.Widget.TabbedPanels("TabbedPanels1");
    //-->
    </script>
    </body>
    </html>
    css code to follow in post below - too many characters.

    and here is the css code
    CSS Code
    @charset "UTF-8";
    /* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights
    reserved. */
    /* Horizontal Tabbed Panels
    * The default style for a TabbedPanels widget places all tab
    buttons
    * (left aligned) above the content panel.
    /* This is the selector for the main TabbedPanels container.
    For our
    * default style, this container does not contribute anything
    visually,
    * but it is floated left to make sure that any floating or
    clearing done
    * with any of its child elements are contained completely
    within the
    * TabbedPanels container, to minimize any impact or
    undesireable
    * interaction with other floated elements on the page that
    may be used
    * for layout.
    * If you want to constrain the width of the TabbedPanels
    widget, set a
    * width on the TabbedPanels container. By default, the
    TabbedPanels widget
    * expands horizontally to fill up available space.
    * The name of the class ("TabbedPanels") used in this
    selector is not
    * necessary to make the widget function. You can use any
    class name you
    * want to style the TabbedPanels container.
    .TabbedPanels {
    margin: 0px;
    padding: 0px;
    float: left;
    clear: none;
    width: 100%; /* IE Hack to force proper layout when preceded
    by a paragraph. (hasLayout Bug)*/
    /* This is the selector for the TabGroup. The TabGroup
    container houses
    * all of the tab buttons for each tabbed panel in the
    widget. This container
    * does not contribute anything visually to the look of the
    widget for our
    * default style.
    * The name of the class ("TabbedPanelsTabGroup") used in
    this selector is not
    * necessary to make the widget function. You can use any
    class name you
    * want to style the TabGroup container.
    .TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
    /* This is the selector for the TabbedPanelsTab. This
    container houses
    * the title for the panel. This is also the tab "button"
    that the user clicks
    * on to activate the corresponding content panel so that it
    appears on top
    * of the other tabbed panels contained in the widget.
    * For our default style, each tab is positioned relatively 1
    pixel down from
    * where it wold normally render. This allows each tab to
    overlap the content
    * panel that renders below it. Each tab is rendered with a 1
    pixel bottom
    * border that has a color that matches the top border of the
    current content
    * panel. This gives the appearance that the tab is being
    drawn behind the
    * content panel.
    * The name of the class ("TabbedPanelsTab") used in this
    selector is not
    * necessary to make the widget function. You can use any
    class name you want
    * to style this tab container.
    .TabbedPanelsTab {
    position: relative;
    top: 1px;
    float: left;
    padding: 4px 10px;
    margin: 0px 1px 0px 0px;
    font: bold 0.7em sans-serif;
    background-color: #DDD;
    list-style: none;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #999;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    /* This selector is an example of how to change the appearnce
    of a tab button
    * container as the mouse enters it. The class
    "TabbedPanelsTabHover" is
    * programatically added and removed from the tab element as
    the mouse enters
    * and exits the container.
    .TabbedPanelsTabHover {
    background-color: #CCC;
    /* This selector is an example of how to change the
    appearance of a tab button
    * container after the user has clicked on it to activate a
    content panel.
    * The class "TabbedPanelsTabSelected" is programatically
    added and removed
    * from the tab element as the user clicks on the tab button
    containers in
    * the widget.
    * As mentioned above, for our default style, tab buttons are
    positioned
    * 1 pixel down from where it would normally render. When the
    tab button is
    * selected, we change its bottom border to match the
    background color of the
    * content panel so that it looks like the tab is part of the
    content panel.
    .TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: 1px solid #EEE;
    /* This selector is an example of how to make a link inside
    of a tab button
    * look like normal text. Users may want to use links inside
    of a tab button
    * so that when it gets focus, the text *inside* the tab
    button gets a focus
    * ring around it, instead of the focus ring around the
    entire tab.
    .TabbedPanelsTab a {
    color: black;
    text-decoration: none;
    /* This is the selector for the ContentGroup. The
    ContentGroup container houses
    * all of the content panels for each tabbed panel in the
    widget. For our
    * default style, this container provides the background
    color and borders that
    * surround the content.
    * The name of the class ("TabbedPanelsContentGroup") used in
    this selector is
    * not necessary to make the widget function. You can use any
    class name you
    * want to style the ContentGroup container.
    .TabbedPanelsContentGroup {
    clear: both;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    background-color: #EEE;
    /* This is the selector for the Content panel. The Content
    panel holds the
    * content for a single tabbed panel. For our default style,
    this container
    * provides some padding, so that the content is not pushed
    up against the
    * widget borders.
    * The name of the class ("TabbedPanelsContent") used in this
    selector is
    * not necessary to make the widget function. You can use any
    class name you
    * want to style the Content container.
    .TabbedPanelsContent {
    padding: 4px;
    /* This selector is an example of how to change the appearnce
    of the currently
    * active container panel. The class
    "TabbedPanelsContentVisible" is
    * programatically added and removed from the content element
    as the panel
    * is activated/deactivated.
    .TabbedPanelsContentVisible {
    /* Vertical Tabbed Panels
    * The following rules override some of the default rules
    above so that the
    * TabbedPanels widget renders with its tab buttons along the
    left side of
    * the currently active content panel.
    * With the rules defined below, the only change that will
    have to be made
    * to switch a horizontal tabbed panels widget to a vertical
    tabbed panels
    * widget, is to use the "VTabbedPanels" class on the
    top-level widget
    * container element, instead of "TabbedPanels".
    /* This selector floats the TabGroup so that the tab buttons
    it contains
    * render to the left of the active content panel. A border
    is drawn around
    * the group container to make it look like a list container.
    .VTabbedPanels .TabbedPanelsTabGroup {
    float: left;
    width: 10em;
    height: 20em;
    background-color: #EEE;
    position: 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;
    /* BEGIN: Spry Horizontal Tabbed Panels meets Sliding Door
    and CSS Sprites */
    /* Revision by Craig Malcolm Petrou of CPMMUG.com */
    .TabbedPanels {
    margin: 10px 0 5px 0;
    .TabbedPanelsTab {
    font-weight: bold;
    font-size: 100%;
    background-color: #FFF;
    border: solid 0 #FFF;
    .TabbedPanelsTabHover {
    background-color: #FFF;
    .TabbedPanelsTabSelected {
    background-color: #FFF;
    border-bottom: 1px solid #FFF;
    position: relative;
    .TabbedPanelsContentGroup {
    background-color: #FFF;
    ul.TabbedPanelsTabGroup a {
    display: block;
    ul.TabbedPanelsTabGroup li.TabbedPanelsTab {
    background: url(/images/brown.png) no-repeat 0 0;
    margin: 0 0 0 -1px;
    padding: 0 0 0 10px;
    ul.TabbedPanelsTabGroup li.TabbedPanelsTab a {
    background: url(/images/brown.png) no-repeat 100% 0;
    padding: 7px 10px 5px 0;
    ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected {
    background: url(/images/brown.png) no-repeat 0 -41px;
    ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected a {
    background: url(/images/brown.png) no-repeat 100% -41px;
    /* END: Spry Horizontal Tabbed Panels meets Sliding Door and
    CSS Sprites */
    Also - is there a way to get rounded corners on the tabs in
    spry? Any good tutorials I can follow about spry - more
    specifically about using widgets and effects together.
    Thanks so much

  • Tabbed Panels - Tab shows over a dropdown menu

    Hello,
    As you see in this link
    Tab
    Problem i have a problem the tabbed panel widget. The tab seems
    to come in front of a drop-down menu that i have (not spry)
    Any suggestions are much appreciated

    Hi,
    most probably you have a css problem in your page that refers
    to z-index. Check to see which one, the menu or the tabbed panel
    (if you added a z-index) have the z-index value grater. Normally
    the menu bar should have a bigger z-index to be displayed in top of
    the other elements.
    If you use the Spry menu bar and the Tabbed panel you don't
    have this problem.
    If you want more help from us, please give us a live url to
    investigate the problem.
    Thanks,
    Diana

  • The mini bridge tab does not show up on my panel

    Hello,
         I'm trying to use mini bridge in Photoshop, but it does not show up on my panel on the lower left.  I currently have Bridge open.  I just want to access it through Photoshop. Thanks for any suggestions you might have.

    As far as I everything is up to date.  I have a Macbook Pro. here is the screen shot

  • ANNC: Slide Show Magic

    http://www.projectseven.com/products/galleries/ssm/
    Leaps beyond the ordinary...
    Efficient code and buttery smooth animations make for a truly
    engaging
    user experience. Slide Shows and individual images can be
    bookmarked and
    all images can be viewed - even if JavaScript is disabled.
    Search Engine Friendly
    Unlike many of today's Flash and AJAX applications, Slide
    Show Magic
    markup is always fully visible and indexable by leading
    search engines.
    Auto-Choreographed Animation
    Slide Show Magic detects the size of each incoming full-size
    image. If
    it's the same size as the current image, the system will
    employ a smooth
    cross-fader - simultaneously fading out the current image as
    the new one
    fades in. If the incoming image is a different size than the
    current
    one, the system will fade out the current image, glide the
    image
    container to the size of the incoming image, then fade the
    new image in.
    It's all automatic.
    Staged preloader
    When the slide show is running in automatic mode, the system
    will
    preload the next image as the current one is being shown,
    providing a
    seamless experience in most cases.
    Intuitive toolbar controls
    The on-page toolbar contains conventional media controls:
    First,
    Previous, Play, Pause, Next, and Last buttons. It also
    contains a slider
    bar that allows users to adjust the slide show timing, plus
    buttons to
    toggle visibility of the thumbnail display and navigation
    menu, and an
    image counter.
    Drag-enabled thumbnail panel
    The Thumbnail panel can be dragged about the screen, enabling
    users to
    fine-tune the interface for best viewing of the show.
    Full-Size images can be hyperlinks
    Each full-size image can optionally be set as a hyperlink to
    another
    page, programmed to open in a new window or tab.
    Image descriptions
    Each full-size image can display an optional description,
    which can
    contain any type of valid markup (paragraphs, tables, DIVs,
    lists,
    links, or images).
    Automated image processing with Fireworks...
    Web-ready images are automatically produced from your
    original images,
    which can be located on any drive connected to your computer
    - including
    drives mounted by your digital camera. Slide Show Magic
    handles all
    image processing automatically - preserving your original
    files in their
    original locations in their original and unaltered states.
    Your images
    are scaled, optimized, and neatly organized into folders
    within your
    defined site.
    Import your existing images...
    Point to a folder (or folders) that contain your existing
    full-size and
    thumbnail image and Slide Show Magic will match them up and
    add them to
    your slide show - unaltered and ready to view.
    Organize Images into sets
    Slide Show Magic enables you to define logical image sets and
    organizes
    the thumbnail panel into navigable sets.
    Mix landscape and portrait orientations
    Your images are never distorted in any way. Original aspect
    ratios are
    always preserved. Use both landscape and portrait images in
    the same
    slide show.
    Deploy alone or inside existing layouts
    Slide Show Magic can be inserted on a page by itself or
    inside an
    existing page.
    Select from 6 Themes
    Select a dark toolbar, a light toolbar, shadow boxes (in 3
    sizes), or an
    image rotator interface. Style themes can even be switched
    for existing
    slide shows.
    Manage it all inside a dedicated Dreamweaver Interface
    Add (append) new images
    Delete images or re-order them
    Manage Descriptions, links, and ALT text
    Edit existing full-size or Thumbnail images
    Reprocess all of your slide show's images
    And lots more, including a comprehensive manual and free tech
    support.
    $95
    Al Sparber - PVII
    http://www.projectseven.com
    Extending Dreamweaver - Nav Systems | Galleries | Widgets
    Authors: "42nd Street: Mastering the Art of CSS Design"

    Al,
    Wow. That's extremely cool. I currently don't have a need for
    a slideshow,
    but in the future if I do, you know where I'm heading to.
    Nice product!
    Shane H
    [email protected]
    http://www.avenuedesigners.com
    =============================================
    Back for 2007, close-up magic:
    http://deceptivemagic.com
    Web dev articles, photography, and more:
    http://sourtea.com
    =============================================
    Proud GAWDS member
    http://www.gawds.org/showmember.php?memberid=1495
    Delivering accessible websites to all ...
    =============================================
    "Al Sparber- PVII" <[email protected]> wrote in
    message
    news:[email protected]...
    >
    http://www.projectseven.com/products/galleries/ssm/
    >
    >
    > Leaps beyond the ordinary...
    >
    > Efficient code and buttery smooth animations make for a
    truly engaging
    > user experience. Slide Shows and individual images can
    be bookmarked and
    > all images can be viewed - even if JavaScript is
    disabled.
    >
    >
    > Search Engine Friendly
    >
    > Unlike many of today's Flash and AJAX applications,
    Slide Show Magic
    > markup is always fully visible and indexable by leading
    search engines.
    >
    >
    > Auto-Choreographed Animation
    >
    > Slide Show Magic detects the size of each incoming
    full-size image. If
    > it's the same size as the current image, the system will
    employ a smooth
    > cross-fader - simultaneously fading out the current
    image as the new one
    > fades in. If the incoming image is a different size than
    the current one,
    > the system will fade out the current image, glide the
    image container to
    > the size of the incoming image, then fade the new image
    in. It's all
    > automatic.
    >
    >
    > Staged preloader
    >
    > When the slide show is running in automatic mode, the
    system will preload
    > the next image as the current one is being shown,
    providing a seamless
    > experience in most cases.
    >
    >
    > Intuitive toolbar controls
    >
    > The on-page toolbar contains conventional media
    controls: First, Previous,
    > Play, Pause, Next, and Last buttons. It also contains a
    slider bar that
    > allows users to adjust the slide show timing, plus
    buttons to toggle
    > visibility of the thumbnail display and navigation menu,
    and an image
    > counter.
    >
    >
    > Drag-enabled thumbnail panel
    >
    > The Thumbnail panel can be dragged about the screen,
    enabling users to
    > fine-tune the interface for best viewing of the show.
    >
    >
    > Full-Size images can be hyperlinks
    >
    > Each full-size image can optionally be set as a
    hyperlink to another page,
    > programmed to open in a new window or tab.
    >
    >
    > Image descriptions
    >
    > Each full-size image can display an optional
    description, which can
    > contain any type of valid markup (paragraphs, tables,
    DIVs, lists, links,
    > or images).
    >
    >
    > Automated image processing with Fireworks...
    >
    > Web-ready images are automatically produced from your
    original images,
    > which can be located on any drive connected to your
    computer - including
    > drives mounted by your digital camera. Slide Show Magic
    handles all image
    > processing automatically - preserving your original
    files in their
    > original locations in their original and unaltered
    states. Your images are
    > scaled, optimized, and neatly organized into folders
    within your defined
    > site.
    >
    >
    > Import your existing images...
    >
    > Point to a folder (or folders) that contain your
    existing full-size and
    > thumbnail image and Slide Show Magic will match them up
    and add them to
    > your slide show - unaltered and ready to view.
    >
    >
    > Organize Images into sets
    >
    > Slide Show Magic enables you to define logical image
    sets and organizes
    > the thumbnail panel into navigable sets.
    >
    >
    > Mix landscape and portrait orientations
    >
    > Your images are never distorted in any way. Original
    aspect ratios are
    > always preserved. Use both landscape and portrait images
    in the same slide
    > show.
    >
    >
    > Deploy alone or inside existing layouts
    >
    > Slide Show Magic can be inserted on a page by itself or
    inside an existing
    > page.
    >
    >
    > Select from 6 Themes
    >
    > Select a dark toolbar, a light toolbar, shadow boxes (in
    3 sizes), or an
    > image rotator interface. Style themes can even be
    switched for existing
    > slide shows.
    >
    >
    > Manage it all inside a dedicated Dreamweaver Interface
    >
    > Add (append) new images
    > Delete images or re-order them
    > Manage Descriptions, links, and ALT text
    > Edit existing full-size or Thumbnail images
    > Reprocess all of your slide show's images
    >
    > And lots more, including a comprehensive manual and free
    tech support.
    > $95
    >
    > --
    > Al Sparber - PVII
    >
    http://www.projectseven.com
    > Extending Dreamweaver - Nav Systems | Galleries |
    Widgets
    > Authors: "42nd Street: Mastering the Art of CSS Design"
    >
    >
    >
    >

  • Help needed with spry image slide show

    Im new to dw and am currently building a site for my buisness.  I installed a spry image slide show and it works fine in live view but when I view it on the web
    it was looking for sever .js files. I then checked out the spry forums and noticed that it seems to be a common problem. I tried removing the ui1.7 file from the server and reloading,tried removing from local and remote and reloading, tried to change the line <script.src=spry-ui-1.7 etc. to the adobe site as per gramps advise to another having the same issue.  Now when I view on the web the slideshow wheel keeps turning but images donot apear.  Im lost and can use some help, enclosed is my code also sight is www.patsiga.net
    <!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>pats iga supermarket</title>
    <link href="main.css" rel="stylesheet" type="text/css" />
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
    <script src="http://labs.adobe.com/technologies/spry/ui/includes/SpryWidget.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SprySliderPanels.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryFilmStrip.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryThumbnailFilmStripPlugin.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugin.js" type="text/javascript"></script>
    <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body {
    background-color: #AF692A;
    </style>
    <link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /* BeginOAWidget_Instance_2141543: #frontpageslideshow */
    #frontpageslideshow {
    width: 960px;
    margin: 0px 0px 0px 0px;
    border: solid 0px #aaaaaa;
    background-color: #FFFFFF;
    padding-top: 0px;
    #frontpageslideshow .ISSName {
    top: -24px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 18px;
    text-transform: uppercase;
    color: #AAAAAA;
    #frontpageslideshow .ISSSlideTitle {
    top: -18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 12px;
    overflow: hidden;
    color: #AAAAAA;
    text-transform: none;
    #frontpageslideshow .ISSClip {
    height: 361px;
    margin: 0 0px 0px 0px;
    border: solid 0px #ffffff;
    background-color: #ffffff;
    #frontpageslideshow .ISSControls {
    top: 0px;
    height: 361px;
    #frontpageslideshow .FilmStrip {
    height: 0px;
    background-color: #CCCCCC;
    #frontpageslideshow .FilmStripPreviousButton, #frontpageslideshow .FilmStripNextButton {
    width: 10px;
    height: 0px;
    #frontpageslideshow .FilmStripTrack {
    height: 0px;
    #frontpageslideshow .FilmStripContainer {
    height: 0px;
    #frontpageslideshow .FilmStripPanel {
    height: 0px;
    padding-left: 10px;
    margin-right: 0px;
    #frontpageslideshow .FilmStripPanel .ISSSlideLink {
    margin-top: 10px;
    border: solid 1px #AAAAAA;
    background-color: #FFFFFF;
    #frontpageslideshow .FilmStripPanel .ISSSlideLinkRight {
    border: solid 1px #AAAAAA;
    width: 56px;
    height: 47px;
    margin: 4px 4px 4px 4px;
    #frontpageslideshow .FilmStripCurrentPanel .ISSSlideLink {
    background-color: #ffffff;
    border-color: #000000;
    #frontpageslideshow .FilmStripCurrentPanel .ISSSlideLinkRight {
    border-color: #AAAAAA;
    /* EndOAWidget_Instance_2141543 */
    </style>
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2141543" binding="#frontpageslideshow" />
    </oa:widgets>
    -->
    </script>
    </head>
    <body>
    <div class="container">
      <div class="header"><!-- end .header --><a href="index.html"><img src="images/logoimg.jpg" width="259" height="136" alt="pats_logo" /></a><img src="images/H1180T2.jpg" width="699" height="120" alt="header_graphic" /></div>
      <div class="container">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="weekly_ad.html" title="weekly ad">Weekly ad</a></li>
          <li><a href="recepies.html" title="recepies">Recepies</a></li>
          <li><a href="entertainment.html" title="entertaining" class="MenuBarItemSubmenu">Entertaining</a>
            <ul>
              <li><a href="bakery_brochure.html" title="bakery_brochure">Bakery brochure</a></li>
              <li><a href="deli_platters.html" title="Deli_platters">Deli platters</a></li>
              <li><a href="catering_menu.html" title="Catering_menu">Catering Menu</a></li>
            </ul>
          </li>
          <li><a href="pats_best.html" title="pats best">Pat's Best</a></li>
          <li><a href="organics.html" title="organics">Organics</a></li>
          <li><a href="gift_cards.html" title="gift cards">Gift Cards</a></li>
          <li><a href="#" title="departments" class="MenuBarItemSubmenu">Departments</a>
            <ul>
              <li><a href="meats.html" title="dept_meats">Meats</a></li>
              <li><a href="seafood.html" title="dept_seafood">Seafood</a></li>
              <li><a href="deli.html" title="Dept_deli">Deli</a></li>
              <li><a href="prep_foods.html" title="Dept_prep_foods">Prepared Foods</a></li>
              <li><a href="produce.html" title="dept_produce">Produce</a></li>
              <li><a href="bakery.html" title="Dept_bakery">Bakery</a></li>
            </ul>
          </li>
        </ul>
        <p> </p>
        <ul id="frontpageslideshow" title="">
          <li><a href="images/fall.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-1.jpg" alt="photos-1.jpg" /></a></li>
          <li><a href="images/apples.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-10.jpg" alt="photos-10.jpg" /></a></li>
          <li><a href="images/pumpkinsoup.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-11.jpg" alt="photos-11.jpg" /></a></li>
          <li><a href="images/roast.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-12.jpg" alt="photos-12.jpg" /></a></li>
          <li><a href="images/applepie.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-13.jpg" alt="photos-13.jpg" /></a></li>
        </ul>
        <script type="text/javascript">
    // BeginOAWidget_Instance_2141543: #frontpageslideshow
    var frontpageslideshow = new Spry.Widget.ImageSlideShow("#frontpageslideshow", {
    widgetID: "frontpageslideshow",
    widgetClass: "BasicSlideShowFS",
    injectionType: "replace",
    autoPlay: true,
    displayInterval: 4500,
    transitionDuration: 2000,
    componentOrder: ["name", "title", "view", "controls", "links"],
    sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" },
    plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugin ],
    TFSP: { pageIncrement: 4, wraparound: true }
    // EndOAWidget_Instance_2141543
        </script>
    <p>Since this is a one-column layout, the .content is not floated. </p>
        <h3>Logo Replacement</h3>
        <p>An image placeholder was used in this layout in the .header where you'll likely want to place  a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </p>
        <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
        <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
      <!-- end .content --></div>
      <div class="footer">
        <p><a href="about_us.html" title="about_us">About Us</a><a href="#">  </a>   <a href="employment.html" title="employment">Employment</a>    <a href="store_info.html" title="store_info"> Store Info.</a>     <a href="#" title="contact_us">Contact Us</a>    <a href="terms_of_use.html" title="terms_of_use">Terms of Use</a>   <a href="privacy.html" title="Privacy_policy"> Privacy Policy</a><br />
    &copy;2011 Pat's IGA     <br />
        </p>
        <!-- end .footer --></div>
      <!-- end .container --></div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>

    Your spry assets folder MUST be in the same folder as that of your webpage with the slideshow (html, php... whatever)
    Check your folder configuration on the server by clicking on the "Remote Button" on the DW Assets Tab.
    Example 1:  This will not work:
    WEBPAGE HERE:    /server/public/myfolder/slideshow.html
    SPRY ASSETS HERE:  /server/public/SpryAssets/....your javascript files
    Example 2: This will work:
    WEB PAGE HERE:  /server/public/myfolder/slideshow.html
    SPRY ASSETS HERE:  /server/public/myfolder/SpryAssets/....your javascript files
    Hope this helps.

Maybe you are looking for

  • Organizing music on iPod mini

    My iTunes library is larger than my mini will hold, so iTunes created a "selection" for it, which I have been able to edit. However, I can't figure out how to move playlists to the mini - it seems as though the "selection" overrides playlists. Also,

  • Migration of Storage

    Hi Gurus, We are running application on Oracle 10g RAC with ASM storage (NETAPPS) on IBM machine with Windows 2003 64-bit OS. Planning to upgrade the storage, note that the new storage is EMC. Please kindly help me with moving the database from one s

  • Issues with  Partial Procesing

    Hi , I am facing problems in working with partial processing BPEL Processes. I am able to work with this in a Standalone / sinlge node SOA Environment , but the process fails in Clustered environment . Any one faced similar problem , is there any sol

  • InDesign CS5.5 crashes at launch in specific user account

    restarted in safe boot - repaired permissions - deleted .plist file. App launches when logged in as a different user. what next?

  • Active and inactive program

    Hello Gurus,       I have following three question about active and inactive program:       (1)  what is the difference for active program and inactive program ?       (2) I wonder if  there are inactive and active version for all program ?       (3)