Spry If question

just wondering can you include a large block within a spry
if, like this and it will only render if the case is true ?
<div spry:if="dataFound">
<form id="form1" name="form1" method="post" action=""
>
<div id="optionTable" spry:region="dsOption dsMachine
dsValues" >
<div id="TP2" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li spry:repeat="dsOption" class="TabbedPanelsTab" >
<div id="{dsOption::id}Tab">{dsOption::name}
</div>
</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div spry:repeat="dsOption"
class="TabbedPanelsContent">
<table border="0">
<tr>
<th width="18%">Machine</th>
<th width="82%">{dsOption::name}</th>
</tr>
<tr spry:repeat="dsMachine" spry:even="tableRow-even"
spry:odd="tableRow-odd">
<th width="18%">{dsMachine::machineName}</th>
<td width="82%" >
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="30%">
<table width="85%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td width="25%" spry:repeat="dsValues" ><input
name="{dsOption::id}{dsMachine::id}Radio"
type="radio"
id="{dsOption::id}{dsMachine::id}{dsValues::keyValue}Radio"
onClick="radioValueChange('{dsOption::id}','{dsMachine::id}','{dsMachine::name}')"
value="{dsValues::keyValue}" />
<label
for="{dsOption::id}{dsMachine::id}{dsValues::keyValue}Radio">{dsValues::keyLabel}</label>
</td>
</tr>
</table>
</td>
<td width="2%" > </td>
<td width="60%"
id="{dsOption::id}{dsMachine::id}"></td>
<td width="5%" >{dsMachine::isvalue} </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div><input name="apply" type="button"
class="buttonApply" value="Apply" onClick="applyButton()" />
<script>LoadBuiltPage();</script>
</div>
</form>
</div>

All Spry processing has to happen within a spry:region. If
you have the spry:if within a region, it should work.
Try that and let us know.
Don

Similar Messages

  • Spry Tab question

    I've got the use of the spry tab figured out, but what I'd like to know is if I can change the 'look' of the tabs.  Rather than just have them be plain ol' squares, I'd like to change the style of them (more than just the color).  Is it possible to change the shapes?  Or to specify a .jpg to use as the tab?
    Thanks!

    I appreciate all the feedback, but I have a few more questions...
    I want to do something like the example I've provided, but have two questions in that regard.
    The 1st - those tabs overlap.  Is their an easy way to accomplish that, as a newbie?  I don't know much, still learning.  Obviously it would be easier to create tabs that don't overlap and avoid this issue altogether, but I really like the look.
    My 2nd question is the drop shadow.  I can create the drop shadow in Photoshop, but I'm wondering if there's an easier way to do it in Dreamweaver.  Just apply the Spry Tab Menu and tell it to put a drop shadow behind it.  Is there something that easy, or do I need to create the drop shadow in Photoshop and use div tags to basically put it 'around' the spry tab menu?  Does that even make sense?  I know what I mean in my head, but might not be explaining it properly...

  • Spry link Question

    I have a spry menu which one of the main menus looks like this
    <li><a href="*" class="MenuBarItemSubmenu">PORTFOLIO</a>
              <ul>
                <li><a href="staticdesigns.html">STATIC</a></li>
                <li><a href="flashdesigns.html">FLASH</a></li>
                <li><a href="banners.html">BANNERS - RICH MEDIA</a></li>
            </ul>
    this code presently has a * for the PORTFOLIO link
    i need to know how can I make the PORTFOLIO not have a link and just work with a mouseover so I get the hover but just the <li> items have links?
    Oi tried to remove the href= but then I lose the text in the css sheet.
    any help?
    rd

    If your question is your main menu item is PORTFOLIO and you do not want it linked to another URL then use the default notation as follows:
         <li><a class="MenuBarItemSubmenu" href="#"> PORTFOLIO</a></li>

  • Spry XML question

    can spry read in XML as a string? I have an xml page
    generated by a coldfusion query (.cfm) The page parses correctly as
    an XML file, but when spry reads it in, it does not read it as XML.
    I can save the .cfm results (view source) as an XML file and it
    views perfectly through spry. Wondering if there is a way to do
    this with the original cfm file. NOTE: the example linked
    here
    does not work

    I use CF to generate XML all the time.
    You have to make sure you set the content-type to XML and
    make sure to remove whitespace:
    http://labs.adobe.com/technologies/spry/samples/utils/query2xml.html
    But to answer your questions: yes, Spry can read XML strings:
    http://labs.adobe.com/technologies/spry/samples/data_region/XMLStringSample.html
    Hope this helps.
    Don

  • CS3 Spry css question

    I know basic tableless css, my question is instead of a regular navigation bar I need to use the spry widget for a dropdown navigation bar on an exisitng html page. I'm able to insert the spry in the correct spot on the .html page and get it to work but I have a css sheet already attached to the page I need to know if I can just select all the css from the spry css page and insert it inside my attached css page?
    Any help?

    Yes, you can move the styles, but in my opinion, it is safer to maintain the Spry CSS assets in their own file, safe from inadvertent deletion or harm. There is an inherent logic to the order of styles in the Spry CSS sheets, and you might lose the wisdom of the comments not to mention the orderly consistency as well.
    You may link many style sheets to your .html pages...you are not limited to one per page.
    By using several CSS files attached to one page, you can also have a separate style sheet for different media: one for the Screen, one for Print, one for a Handheld device. There's no reasonable way to keep all these varying uses for different style sheets all one ONE sheet. The Printer will look for your main style sheet AND at the overriding styles in the print style sheet, for instance, so you don't need to print the nav bar when what you want is a print of the content.
    Z
    You do, of course, need to NAME the CSS files with distinct names, for instance, global.css, print.css, handheld.css.
    Message was edited by: Zabeth69

  • CS5 Spry Menu Question

    Aloha,
    I have the menu configured that way i want it, but for the life of me I cant figure out how to do the following.
    I have a menu   home, about, contact etc.........  The menu bar has two background images, one when you load the page and then the mouse over image. What i want to do is when your on the index.html page , the Menu link will be lite up in my case (blue)  and then if you go off of that page the blue will go to the current page that is up on your screen.
    I am not great with code, I have spent a few hours tring to figure it out, i have no idea if it can do that or not, but its prob super easy, I just dont know what setting i am looking for.
    2ns Question.. Is there a way to make the Spry menu to look like this?    HOME    |   ABOUT     |      ETC
    Right now i dont have the | in there, not sure if its possable
    Aloha!

    Thank you for posting your URL, this should be done as a matter of course.
    You do need to have SpryDOMUtils.js uploaded to your SpryAssets folder for the script to work.
    The following explains the working of the script
    function InitPage(){
    Spry.$$('#MenuBar1 li').forEach(function(node){ // check each li within a region with an ID of MenuBar1
        var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]
        if(a.href == window.location){ // if the href is the same as the current window location e.g. index.html
            Spry.Utils.addClassName(node,"activeMenuItem"); // add a class called activeMenuItem
    As soon as a class is added, CSS will take care of the styling. In the case that I have suggested, the CSS merely changes the background colour. This could just as happily be a background image.
    If you want a different image for each menu item, then assign a class to the menu item as in
    <li><a href="index.html">Home</a></li>
    <li><a href="home-services.html" class="red">Home Services</a></li>
    <li><a href="business-services.html">Business Services</a></li>
    <li><a href="web-hosting.html">Web Hosting</a></li>
    <li><a href="online-backup.html">Online Backup</a></li>
    <li><a href="about-us.html">About Us</a></li>
    <li><a href="contact.html">Contact Us</a></li>
    The style rule could then be
    .red .activeMenuItem {  background: url(home-button.png); }
    Cheers,
    Gramps

  • Spry Effects questions

    I have two (2) questions about using the Spry Effects script in a horizontal slide configuration.
    Question 1:
    In DW CS4 if I add the command <duration: 500,> the numerals turn red.  I also get an error in line ???? from DW which is the line the variable is on.  If I go ahead and accept the change I see the desired quicker slide in Firefox and Safari.  The default is 1,000 milliseconds so I am cutting it in half.  But!  In Internet Explorer 7 the script locks the browser window up.  Even if I revert to the saved HTML and JS files the problem still persists.  This problem also occurs if I set the duration higher than 1,000 milliseconds.
    This also happens if I upload the files to the Internet.  I was forced to redo the line in question and copy my saved SpryEffects.js over to my working directory.  This unlocked the file in Internet Explorer 7.  Any suggestions on how to get the quicker response time in Internet Explorer 7?
    Question 2:
    In Firefox I get a border around the button that enacts the Spry Effect.  I set the text decoration to "none" for both of the IDs for the images.  This thin line does not appear in Internet Explorer 7 or Safari 4.0.3.  My version of Firefox is version 3.5.3.
    The file can be viewed here.
    Thank you in advance.

    I have also found that the Spry works better in FireFox than
    IE7, when it comes to video
    http://www.catholicmemphis.com/catholicmensconference.html
    Check out this page and you will see that the Spry tabbed
    menu stops the video in FireFox but not in Explorer. I have seen
    this type of problem in a few forums, but know one gives an answer
    to those looking for solutions....

  • Simple spry menu question

    Hi
    I just need to know how to change the height of my spry menu.
    i did it once before but forgot how to. i think i've tried height
    on every SpryMenuBarHorizontal.css that is there there...
    Thanks

    Great thank you very much, added the code and its working
    now...
    Just one more question, hope this makes sense: I want to put
    the menu along a line that is the same color as the menu so i put
    to menu into a table and used a color background, is this the best
    way to do it? The problem i am having is that the table has this
    padding that i can't get rid of, i want it the same size as the
    menu, but i can make the table any smaller...
    Appreciate the help

  • Spry MenuBar Question

    Hi I'm creating a hobby-related website using Dreamweaver CS3, and I've got it set up to use a Spry menubar for navigation.  The Spry menu itself works great-- I'm not having any issues with the actual formatting or functioning of the menu bar.
    My question has to do with making changes to the menus and submenus.  (I'm still not fully decided on the overall structure of the menu and I know I'll be expanding athe menu options even after the site goes public.)    I know *how* to make those on a page by page basis-- either by using the menu bar panel or just editing the code directly.  That's easy enough.
    But here's the thing--  when I make a change to the text/structure/labels of on the menubar I want to change it sitewide, not just one individual page.
    It's a pain to have to cut and paste that change I've just made onto every other page in the site (or even to use the search and replace function to do it.)   It seems to me that there ought to be a way that I could have the menu code info that's currently indicated on each page (see below) stored in some external file rather than on each individual page, so that whenever I wanted to update the menubar sitewide, I only needed to make a change in *ONE* location .
    That's got to be possible, right?  But how do I do it?

    P.S.
    Here's the menubar code info that currently appears on each individual page of the site-- and which currently has to be updated on every page, any time I  make a change.  There's surely got to be a way I can have this located in an external file, so that I can make changes in just one location rather than on each page? 
    <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="intro_home.html" class="MenuBarItemSubmenu">Intro</a>
              <ul>
                <li><a href="intro_home.html">Intro / Home</a></li>
                <li><a href="intro_bw.html">About BW</a> </li>
                <li><a href="intro_harn.html">About H&acirc;rn</a></li>
                <li><a href="intro_who_are_we.html">Who Are We?</a></li>
              </ul>
          </li>
          <li><a href="general_overview.html" class="MenuBarItemSubmenu">General</a>
              <ul>
                <li><a href="general_overview.html">Overview</a></li>
                <li><a href="general_traits_intro.html" class="MenuBarItemSubmenu">Traits</a>
                    <ul>
                      <li><a href="general_traits_intro.html">Intro</a></li>
                      <li><a href="general_traits_harnic.html">H&acirc;rnic</a></li>
                      <li><a href="general_traits_jarin_ivinian.html">Jarin &amp; Ivinian</a></li>
                      <li><a href="general_traits_barbarians.html">Barbarian</a></li>
                      </ul>
                </li>
                <li><a href="general_affiliations.html">Affiliations</a></li>
                <li><a href="general_skills.html">Skills</a></li>
                <li><a href="general_prices.html">Prices</a></li>
              </ul>
          </li>
          <li><a href="lifepaths_intro.html" class="MenuBarItemSubmenu">Lifepaths</a>
              <ul>
                <li><a href="lifepaths_intro.html">Overview</a></li>
                <li><a href="lifepaths_guilds_intro.html" class="MenuBarItemSubmenu">Guilds</a>
                    <ul>
                      <li><a href="lifepaths_guilds_intro.html">Guilds Intro</a></li>
                      <li><a href="lifepaths_guilds_lps-by-guild.html">Guild LP List</a></li>
                      <li><a href="lifepaths_guilds_new-lps.html">New Lifepaths</a></li>
                    </ul>
                </li>
                <li><a href="lifepaths_churches.html">Churches</a> </li>
                <li><a href="lifepaths_ivinian.html">Ivinian</a></li>
                <li><a href="lifepaths_thardic.html">Thardic</a></li>
                <li><a href="lifepaths_tribal.html">Tribal </a> </li>
                <li><a href="lifepaths_non-human.html">Non-Human</a></li>
            </ul>
          </li>
          <li><a class="MenuBarItemSubmenu" href="magic_intro.html">Magic</a>
              <ul>
                <li><a href="magic_intro.html">Overview</a></li>
                <li><a href="magic_shek-pvar.html">Shek-P'var</a>            </li>
                <li><a href="magic_alchemy.html">Alchemy</a></li>
                <li><a href="magic_talents.html">Talents</a></li>
                </ul>
          </li>
          <li><a href="religion_intro.html" class="MenuBarItemSubmenu">Religion</a>
              <ul>
                <li><a href="religion_intro.html">Overview</a></li>
                <li><a href="religion_faith_general.html" class="MenuBarItemSubmenu">Faith</a>
                    <ul>
                      <li><a href="religion_faith_general.html">About Faith</a></li>
                      <li><a href="religion_the_gods.html">The Gods</a></li>
                      <li><a href="religion_faith_ritual_languages.html">Ritual Languages</a></li>
                    </ul>
                </li>
                <li><a href="religion_spirit_binding.html">Spirit Binding</a></li>
              </ul>
          </li>
          <li><a href="bestiary_intro.html" class="MenuBarItemSubmenu">Bestiary</a>
              <ul>
                <li><a href="bestiary_intro.html">Overview</a></li>
                <li><a href="bestiary_ivashu_general.html" class="MenuBarItemSubmenu">Ivashu</a>
                    <ul>
                      <li><a href="bestiary_ivashu_general.html">About Ivashu</a></li>
                      <li><a href="bestiary_ivashu_aklash.html">Aklash</a></li>
                      <li><a href="bestiary_ivashu_hru.html">Hru</a></li>
                      <li><a href="bestiary_ivashu_nolah.html">Nolah</a></li>
                      <li><a href="bestiary_ivashu_umbathri.html">Umbathri</a></li>
                      <li><a href="bestiary_ivashu_vlasta.html">Vlasta</a></li>
                    </ul>
                </li>
                <li><a href="bestiary_other_creatures.html">Other Creatures</a></li>
              </ul>
          </li>
          <li><a href="other_index.html" class="MenuBarItemSubmenu">Other</a>
              <ul>
                <li><a href="other_earthmasters.html">Earthmasters</a></li>
              </ul>
          </li>
          <li><a href="advice.html">Advice</a></li>
        </ul>

  • Newbie alert spry conditions question

    I am trying to use an XML dataset to draw data for my
    application pages. I have some XML fields, (in this case {helpurl}
    and {moreinfo} ) which may or may not have a value assigned to them
    in each record.
    My question is simple, but I can't find the answer... where I
    originally would write it this way in CF, what is the equivalent in
    CS3/Spry?
    <cfif (#helpurl# is not "")>
    <a href="#helpurl#">HELP</a>
    </cfif>
    <cfif (#moreinfo# is not "")>
    <a href="#moreinfo#">MORE INFORMATION</a>
    Thanks so much!!

    You need to use Spry:if like below
    <p> {Description} <a href="{Link}" target="_blank"
    spry:if="'{Link}' != ''">MORE..</a></p>
    Regards
    Phil

  • A simple Spry Accordion Question (I think)

    Hi all:
    I've searched but can't find, but I think this is a simple one.
    I've created a basic Spry accordion menu with DW/CS3 - Insert/Spry/Spry Accordion. How do I get the first "Content 1" to be hidden/not visible upon page load. Right now, the "Lable 2" must be clicked to hide the "Content 1" which of course shows the "Content 2"? Guessing it's in the JS, but I'm not sure. TIA for any help. HTML and JS Code below.
    <!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="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 1</div>
        <div class="AccordionPanelContent">Content 1</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Label 2</div>
        <div class="AccordionPanelContent">Content 2</div>
      </div>
    </div>
    <script type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    //-->
    </script>
    </body>
    </html>
    JAVASCRIPT
    var Spry;
    if (!Spry) Spry = {};
    if (!Spry.Widget) Spry.Widget = {};
    Spry.Widget.Accordion = function(element, opts)
        this.element = this.getElement(element);
        this.defaultPanel = 0;
        this.hoverClass = "AccordionPanelTabHover";
        this.openClass = "AccordionPanelOpen";
        this.closedClass = "AccordionPanelClosed";
        this.focusedClass = "AccordionFocused";
        this.enableAnimation = true;
        this.enableKeyboardNavigation = true;
        this.currentPanel = null;
        this.animator = null;
        this.hasFocus = null;
        this.duration = 500;
        this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP;
        this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;
        this.useFixedPanelHeights = true;
        this.fixedPanelHeight = 0;
        Spry.Widget.Accordion.setOptions(this, opts, true);
        // Unfortunately in some browsers like Safari, the Stylesheets our
        // page depends on may not have been loaded at the time we are called.
        // This means we have to defer attaching our behaviors until after the
        // onload event fires, since some of our behaviors rely on dimensions
        // specified in the CSS.
        if (Spry.Widget.Accordion.onloadDidFire)
            this.attachBehaviors();
        else
            Spry.Widget.Accordion.loadQueue.push(this);
    Spry.Widget.Accordion.onloadDidFire = false;
    Spry.Widget.Accordion.loadQueue = [];
    Spry.Widget.Accordion.addLoadListener = function(handler)
        if (typeof window.addEventListener != 'undefined')
            window.addEventListener('load', handler, false);
        else if (typeof document.addEventListener != 'undefined')
            document.addEventListener('load', handler, false);
        else if (typeof window.attachEvent != 'undefined')
            window.attachEvent('onload', handler);
    Spry.Widget.Accordion.processLoadQueue = function(handler)
        Spry.Widget.Accordion.onloadDidFire = true;
        var q = Spry.Widget.Accordion.loadQueue;
        var qlen = q.length;
        for (var i = 0; i < qlen; i++)
            q[i].attachBehaviors();
    Spry.Widget.Accordion.addLoadListener(Spry.Widget.Accordion.processLoadQueue);
    Spry.Widget.Accordion.prototype.getElement = function(ele)
        if (ele && typeof ele == "string")
            return document.getElementById(ele);
        return ele;
    Spry.Widget.Accordion.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.Accordion.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.Accordion.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.Accordion.prototype.onPanelTabMouseOver = function(panel)
        if (panel)
            this.addClassName(this.getPanelTab(panel), this.hoverClass);
    Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(panel)
        if (panel)
            this.removeClassName(this.getPanelTab(panel), this.hoverClass);
    Spry.Widget.Accordion.prototype.openPanel = function(panel)
        var panelA = this.currentPanel;
        var panelB = panel;
        if (!panelB || panelA == panelB)   
            return;
        var contentA;
        if( panelA )
            contentA = this.getPanelContent(panelA);
        var contentB = this.getPanelContent(panelB);
        if (! contentB)
            return;
        if (this.useFixedPanelHeights && !this.fixedPanelHeight)
            this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;
        if (this.enableAnimation)
            if (this.animator)
                this.animator.stop();
            this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration });
            this.animator.start();
        else
            if(contentA)
                contentA.style.height = "0px";
            contentB.style.height = (this.useFixedPanelHeights ? this.fixedPanelHeight : contentB.scrollHeight) + "px";
        if(panelA)
            this.removeClassName(panelA, this.openClass);
            this.addClassName(panelA, this.closedClass);
        this.removeClassName(panelB, this.closedClass);
        this.addClassName(panelB, this.openClass);
        this.currentPanel = panelB;
    Spry.Widget.Accordion.prototype.openNextPanel = function()
        var panels = this.getPanels();
        var curPanelIndex = this.getCurrentPanelIndex();
        if( panels && curPanelIndex >= 0 && (curPanelIndex+1) < panels.length )
            this.openPanel(panels[curPanelIndex+1]);
    Spry.Widget.Accordion.prototype.openPreviousPanel = function()
        var panels = this.getPanels();
        var curPanelIndex = this.getCurrentPanelIndex();
        if( panels && curPanelIndex > 0 && curPanelIndex < panels.length )
            this.openPanel(panels[curPanelIndex-1]);
    Spry.Widget.Accordion.prototype.openFirstPanel = function()
        var panels = this.getPanels();
        if( panels )
            this.openPanel(panels[0]);
    Spry.Widget.Accordion.prototype.openLastPanel = function()
        var panels = this.getPanels();
        if( panels )
            this.openPanel(panels[panels.length-1]);
    Spry.Widget.Accordion.prototype.onPanelClick = function(panel)
        // if (this.enableKeyboardNavigation)
        //     this.element.focus();
        if (panel != this.currentPanel)
            this.openPanel(panel);
        this.focus();
    Spry.Widget.Accordion.prototype.onFocus = function(e)
        // this.element.focus();
        this.hasFocus = true;
        this.addClassName(this.element, this.focusedClass);
    Spry.Widget.Accordion.prototype.onBlur = function(e)
        // this.element.blur();
        this.hasFocus = false;
        this.removeClassName(this.element, this.focusedClass);
    Spry.Widget.Accordion.KEY_UP = 38;
    Spry.Widget.Accordion.KEY_DOWN = 40;
    Spry.Widget.Accordion.prototype.onKeyDown = function(e)
        var key = e.keyCode;
        if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
            return true;
        var panels = this.getPanels();
        if (!panels || panels.length < 1)
            return false;
        var currentPanel = this.currentPanel ? this.currentPanel : panels[0];
        var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;
        while (nextPanel)
            if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */)
                break;
            nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling;
        if (nextPanel && currentPanel != nextPanel)
            this.openPanel(nextPanel);
        if (e.stopPropagation)
            e.stopPropagation();
        if (e.preventDefault)
            e.preventDefault();
        return false;
    Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel)
        if (!panel)
            return;
        var tab = this.getPanelTab(panel);
        if (tab)
            var self = this;
            Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelClick(panel); }, false);
            Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(panel); }, false);
            Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(panel); }, false);
    Spry.Widget.Accordion.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.Accordion.prototype.initPanel = function(panel, isDefault)
        var content = this.getPanelContent(panel);
        if (isDefault)
            this.currentPanel = panel;
            this.removeClassName(panel, this.closedClass);
            this.addClassName(panel, this.openClass);
        else
            this.removeClassName(panel, this.openClass);
            this.addClassName(panel, this.closedClass);
            content.style.height = "0px";
        this.attachPanelHandlers(panel);
    Spry.Widget.Accordion.prototype.attachBehaviors = function()
        var panels = this.getPanels();
        for (var i = 0; i < panels.length; i++)
            this.initPanel(panels[i], i == this.defaultPanel);
        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.
            var tabIndexAttr = this.element.attributes.getNamedItem("tabindex");
            // if (!tabIndexAttr) this.element.tabindex = 0;
            if (tabIndexAttr)
                var self = this;
                Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false);
                Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false);
                Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false);
    Spry.Widget.Accordion.prototype.getPanels = function()
        return this.getElementChildren(this.element);
    Spry.Widget.Accordion.prototype.getCurrentPanel = function()
        return this.currentPanel;
    Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function()
        var panels = this.getPanels();
        for( var i = 0 ; i < panels.length; i++ )
            if( this.currentPanel == panels[i] )
                return i;
        return 0;
    Spry.Widget.Accordion.prototype.getPanelTab = function(panel)
        if (!panel)
            return null;
        return this.getElementChildren(panel)[0];
    Spry.Widget.Accordion.prototype.getPanelContent = function(panel)
        if (!panel)
            return null;
        return this.getElementChildren(panel)[1];
    Spry.Widget.Accordion.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.Accordion.prototype.focus = function()
        if (this.element && this.element.focus)
            this.element.focus();
    Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts)
        this.timer = null;
        this.interval = 0;
        this.stepCount = 0;
        this.fps = 0;
        this.steps = 10;
        this.duration = 500;
        this.onComplete = null;
        this.panel = panel;
        this.panelToOpen = accordion.getElement(panel);
        this.panelData = [];
        Spry.Widget.Accordion.setOptions(this, opts, true);
        // If caller specified speed in terms of frames per second,
        // convert them into steps.
        if (this.fps > 0)
            this.interval = Math.floor(1000 / this.fps);
            this.steps = parseInt((this.duration + (this.interval - 1)) / this.interval);
        else if (this.steps > 0)
            this.interval = this.duration / this.steps;
        // Set up the array of panels we want to animate.
        var panels = accordion.getPanels();
        for (var i = 0; i < panels.length; i++)
            var p = panels[i];
            var c = accordion.getPanelContent(p);
            if (c)
                var h = c.offsetHeight;
                if (h == undefined)
                    h = 0;
                if (p == panel || h > 0)
                    var obj = new Object;
                    obj.panel = p;
                    obj.content = c;
                    obj.fromHeight = h;
                    obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0;
                    obj.increment = (obj.toHeight - obj.fromHeight) / this.steps;
                    obj.overflow = c.style.overflow;
                    this.panelData.push(obj);
                    c.style.overflow = "hidden";
                    c.style.height = h + "px";
    Spry.Widget.Accordion.PanelAnimator.prototype.start = function()
        var self = this;
        this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
    Spry.Widget.Accordion.PanelAnimator.prototype.stop = function()
        if (this.timer)
            clearTimeout(this.timer);
            // If we're killing the timer, restore the overflow
            // properties on the panels we were animating!
            if (this.stepCount < this.steps)
                for (i = 0; i < this.panelData.length; i++)
                    obj = this.panelData[i];
                    obj.content.style.overflow = obj.overflow;
        this.timer = null;
    Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function()
        ++this.stepCount;
        this.animate();
        if (this.stepCount < this.steps)
            this.start();
        else if (this.onComplete)
            this.onComplete();
    Spry.Widget.Accordion.PanelAnimator.prototype.animate = function()
        var i, obj;
        if (this.stepCount >= this.steps)
            for (i = 0; i < this.panelData.length; i++)
                obj = this.panelData[i];
                if (obj.panel != this.panel)
                    obj.content.style.height = "0px";
                obj.content.style.overflow = obj.overflow;
                obj.content.style.height = obj.toHeight + "px";
        else
            for (i = 0; i < this.panelData.length; i++)
                obj = this.panelData[i];
                obj.fromHeight += obj.increment;
                obj.content.style.height = obj.fromHeight + "px";

    On the bottom of yourpage you have this:
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    Change it to this:
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel: -1 });
    Ken Ford

  • Quick Spry Menu Question

    I am having CSS issues trying to center a basic horizontal spry menu inside a div tag.
    To keep it simple:
    I have a 990px wide x 40px high Div Tag for my mainNav menu.
    I created a quick horizontal menu using the spry widget... with 7 boxes.
    The menu of 7 boxes is currently left justified within the Div.  I want it to auto center within the Div.  I have tried changing almost every pre-CSS ID in the Spry horizontal menu using AUTO margins for the left and right and I can't get any of them to center then entire menu within the overall Div Tag.
    Please help.
    ul.MenuBarHorizontal.li is floated left so the boxes are side by side... but no matter which CSS ID I change the margins to auto on left and right nothing seems to work.
    Do I need to create a new CSS rule targeting something different to get the entire menu to center properly?
    Thanks for the help
    Tim

    Alter the spry css. If you declare a width of 700px and set margin: 0 auto; (as shown below) then each of your 7 links will be 100px wide and you'll have 145px either side. 990px - 700px = 290px /2 = 145px.
    ul.MenuBarHorizontal
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        cursor: default;
        width: 700px;
    margin: 0 auto;
    Updated: You should also set the below selector to 100px (or whatever you require. But obviously make sure the total width of all the links adds up to the width you set the above css selector to. In this case 700px). This determines the width of your links.
    ul.MenuBarHorizontal li
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 100%;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: 100px;
        float: left;

  • Spry menu question

    Hello....I've created a horizontal spry menu which seemed to
    work fine until I saw it in an older version of Windows at a
    friend's house. In that instance, the default link color of the
    page, which is blue, crept into the spry menu link colors which are
    white. The "visited" links in the spry menu are showing up blue.Is
    there a way to define the visited/hover colors etc...in the spry
    menu so it allstays white? This is the spry code I have now...
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release
    1.6 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights
    reserved. */
    LAYOUT INFORMATION: describes box model, positioning,
    z-order
    /* The outermost container of the Menu Bar, an auto width box
    with no margin or padding */
    ul.MenuBarHorizontal
    width: 32.2em;
    margin: auto;
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    /* Set the active Menu Bar with this class, currently setting
    z-index to accomodate IE rendering bug:
    http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
    ul.MenuBarActive
    z-index: 1000;
    /* Menu item containers, position children relative to this
    container and are a fixed width */
    ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 8.5pt;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 8m;
    float: left;
    font-family: "Trebuchet MS", Verdana, Arial;
    color: #FFFFFF;
    /* Submenus should appear below their parent (top: 0) with a
    higher z-index, but they are initially off the left side of the
    screen (-1000em) */
    ul.MenuBarHorizontal ul
    margin: 0;
    padding: 1;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    position: absolute;
    left: -1000em;
    /* Submenu that is showing with class designation
    MenuBarSubmenuVisible, we set left to auto so it comes onto the
    screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 32.2em;
    /* Submenus should appear slightly overlapping to the right
    (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation
    MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text
    decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: default;
    background-color: #D8161F;
    color: #FFFFFF;
    text-decoration: none;
    padding-top: 0.2em;
    padding-right: 0.7em;
    padding-bottom: 0.2em;
    padding-left: 0.7em;
    /* Menu items that have mouse over or focus have a blue
    background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FAFAFA;
    /* Menu items that are open with submenus are set to
    MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal
    a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal
    a.MenuBarSubmenuVisible
    background-color: #e32032;
    color: #FFF;
    SUBMENU INDICATION: styles if there is a submenu under a
    given menu item
    /* Menu items that have a submenu have the class designation
    MenuBarItemSubmenu and are set to use a background image positioned
    on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that have a submenu have the class designation
    MenuBarItemSubmenu and are set to use a background image positioned
    on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class
    designation MenuBarItemSubmenuHover and are set to use a "hover"
    background image positioned on the far left (95%) and centered
    vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarDownHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that are open with submenus have the class
    designation MenuBarItemSubmenuHover and are set to use a "hover"
    background image positioned on the far left (95%) and centered
    vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    background-image: url(SpryMenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    BROWSER HACKS: the hacks below should not be changed unless
    you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form
    controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the
    slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: left;
    background: #FFF;

    I can solve part of your problem. Check out The Essential
    Guide to Dreamweaver CS3 by David Powers.
    http://www.friendsofed.com/samples/1590598598.pdf.
    All the other colors can be controlled by what is defined in David
    Powers manual.
    The problem that I have not been able to resolve is IE6 picks
    up the colors, fonts, underline from a:active or the
    default.

  • Adjusting arrow in my spry menu question...

    How do I adjust where my arrow is in the spry box?  There are so many functions I'm just plain confused. 

    Have you tried here for info?
    http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSEE4C0148-A6F4-4bf5-9DEF-CE06AB026214a .html
    Brad Lawryk
    Adobe Community Professional: Dreamweaver
    Northern British Columbia Adobe Usergroup: Manager
    Thompson Rivers University: Dreamweaver Instructor
    My Adobe Blog: http://blog.lawryk.com

  • Spry Password Question

    I've been reading a lot about spam protection for contact forms and I have heard a lot of people talking about honeypots. They say just use a field that you tell people not to fill out and if it is field out when submitted ignore the message. My client is tired of the messages all together and wants them to stop. Is there a way to use the spry password validation with a universal password? Then next to the password field I can just say enter this password for spam protection. I’m not opposed to using a honeypot if someone can show me how to block the message altogether. I’m running a script through Godaddy and here is the contact page. Don’t be brutal I’m a noob and keep this in mind when responding. Thanks

    Ok, here is what I found a YouTube video explaining how to use JQuery to submit a form on element change. View it here https://www.youtube.com/watch?v=pVnCkotKFLs
    I just can't seem to get it to work and how would I get it to redirect to the thank page on submit? Here is what I have -
    .js file
    $(document).ready(function () {
        $('#options').change(function()    {
            value = $(this).attr('value');
            if (value !== 'default')    {
              $(this).parent().submit();   
    .html file
    <!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>
    <script type="text/javascript" src="js/java/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js/spam.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <body>
    <div id="content">
                    <h1>Contact Us</h1>
                <h3>Fields marked with * are required</h3>
                <div id="contact-form">    
                <form action="/gdform.php" metod="post" name="form1" id="form">
                <p>*NAME<br />
                <input name="name" type="text" id="name" size="30" maxlength="40" />
                </p>
                <br />
                <p>*EMAIL<br />
                <input name="email" type="text" id="email" size="30" maxlength="40" />
                </p>
                <br />
                <p>PHONE<br />
                <input name="phone" type="text" size="30" maxlength="40" />
                </p>
                <p><br />
                *Comments<br />
                <textarea name="comments" cols="50" rows="10" id="comments"></textarea>
                </p>
                   <select id="options">
                           <option value="default">Not Human</option>
                        <option value="opt1">I'm Human</option>
                   </select>
                  <br />
                  <br />
                  <br />
                  <br />
                  <input type="reset" name="button2" id="button2" value="Reset">
                  <input name="recipient" type="hidden" id="recipient" value="[email protected]">
                  <input name="redirect" type="hidd
                  en" id="redirect" value="thankyou.html">
                  <br />
                    <p>
                  </p>
                </form>
                </div>
                </div><!-- end content -->
    </body>
    </html>

  • Spry Examples - Question

    I'm not sure this is the case but it seems to me there are
    many more examples referenced than on the "samples" page??
    I would like to propose (if not already asked) that we have
    an area that all the Spry examples + some good users examples
    posted with a small description on one page or location. Others may
    have other ideas as well... It just makes it easier than searching
    through the slow forum here.... :o)
    Thanks, Matt M

    You can find it here:
    http://labs.adobe.com/technologies/spry/includes/SpryUtils.js
    Rgds!

Maybe you are looking for

  • Combine PDF's and put filename in footer of each page

    Hello, I've got about a 1000 individual pages to print, so I figured in order to avoid having to click each page open and print it, I can combine the documents into one document, and only launch the print command once, and then have a coffee until it

  • End to End Monitoring

    Hello, I have implemented this scenario : "Flat file ->mapping->BPM (for calling a bapi)->mapping->Flat file" and when i use the message monitoring sometimes end-to-end monitoring is available and sometimes not, Why ??? Is there a specific configurat

  • All possible Strings of 1 and 0

    if i wanted to create all possible strings of n 1's and n 0's where there are never more 0's than 1's using 2 for loops and recursion how would i go about this? (the first for loop controlls how many 1's are in the string the second how many 0's up t

  • Visual Class: Set a label in main window from dialog box

    Hi, Firstly my project is a visual project and at the time being has only 2 classes, both visual. One a main window and then one a dialog. The project is about a gym membership, and what i want it to do at the moment is to set the name text box i hav

  • I have deleted the music button/app from my phone. How do I get it back in my main settings?

    I have deleted the music button/app from my phone. How do I get it back in my main settings?