Function Callback - panel ID

I use a button on one tab to change the content of textboxes with one on another different tab.
int CVICALLBACK cbfGetIP (int panel, int control, int event, void *callbackData, int eventData1, int eventData2)
    switch (event)
        case EVENT_LEFT_CLICK:
            ResetTextBox   (panel,   tabPanel1_Textbox_1,   "AAA");   //current panel, works
            ResetTextBox   (panel,   tabPanel2_Textbox_2,   "BBB");  //other panel, not work
            break;
    return 0;
The second line where the textbox on the other tab is does not work.  the ID of the panel is not good.  I use debugging to obtain the integer that make it work.  Problem: that number does not correspond to anything resembling that is the tab number.  Of course, I do not want to be amateur using integer this way.  Can someone explain this to me?  Thanks.

This argument is very common and ihas been discussed several times in the forum.
To make the long story short, each tab page is an independent panel with its own handle, which you must use to correctly address controls on a tab page.
GetPanelhandleFromTabPage function can be used to retrieve tab pages handles.
While inside a control callback, 'panel' variable holds the panel handle of the owning panel, which is different from the panel handles of the other tabs. Your code could be modified as follows (assuming mainPanelHandle is the handle of the panel the tab control is in and assuming tabPanel2 is the second page in the tab control):
ResetTextBox (panel, tabPanel1_Textbox_1, "AAA");
GetPanelHandleFromTabPage (mainPanelHandle, PANEL_TAB, 1, &handle);
ResetTextBox (handle, tabPanel2_Textbox_2, "BBB");
Proud to use LW/CVI from 3.1 on.
My contributions to the Developer Zone Community
If I have helped you, why not giving me a kudos?

Similar Messages

  • Shortkey to merge function from panel

    Hello,
    I'm trying to create a shortkey in Illustrator CS3 to the "merge" function of the "pathfinders".
    I can only find a way to shortkey menu -> effects -> pathfinder -> merge.
    But this don't work. The result is not the same as the "merge icon" clicked form the pathfinder panel.
    Is there a way to make a shortkey to the merge icon from the pathfinders panel?
    Hope so.
    JP

    You can record an action and assign a shortcut to it.

  • Lua Alchemy Demo Preview and Function Callback Question

    Been working with Alchemy some more to get Lua working as a
    scripting language. You can now create any AS class (available at
    runtime) using Lua, call functions, set/get properties, and even
    make Lua functions event listeners. Here is a preview of the demo
    that will go out (including links to the google code project on the
    help tab)
    http://arcanearcade.com/Flex/LuaAlchemyDemoV.1a
    This is just a preview of the V.1a release of the project. At
    this time there isn't any Lua sugar to make calling AS look more
    natural in Lua.
    We have been trying to figure out how to detect when
    ActionScript has cleaned up or no longer has need of a function -
    we would like to cleanup the Lua reference to the function when it
    isn't needed.

    quote:
    Originally posted by:
    emcmanus
    This is great. It'd be alot of fun to play with if exposed to
    JS as a stand-alone Lua interpreter! (IronLua?)
    That would be pretty cool. Lua is a fairly tight language and
    well designed for embedding. It is also pretty small so might not
    be hard to port.
    quote:
    Very cool, Robert!
    My thanks also go out to my team mate Alexander Gladysh.

  • Single Selection function on Panel

    Hi,
    I'm making a project with a Panel (A), inside the panel will contains some self-made components that are listed in the Panel like "Large Icon view mode" in the Window explorer.
    what I want to do is to make this panel to has a single selection mode as same as JTable. I would like to let it able to reset all selection of components, and only able to select one component at every time.
    Any idea I can implement this Panel A ?
    Thanks

    I just tried to implement the Panel to simulate the single selection.
    Inside the PanelA has an ArrayList to collect each inserted components (self created child panel).
    Panel A handle the selection of child objects, if one object selected, PanelA will reset other objects selection.
    It looks work, but is it a good way to do ?

  • Queue with callback function not dequeuing

    Hi,
    I would like to ask you for help or for a hint regarding our problem with the queue:
    A trigger is enqueuing to a queue. This works fine, but the callback function is never called. The queue already worked for a while, but since i changed something at the procedure called by the callback it does not work anymore.
    I already have tried the following:
    -Stopping and restarting
    -Dropping and recreating (with the scheduler having no jobs anymore)
    -Dropping, restarting the database and recreating
    None of these worked. Where do I fail, when considering that the queue with the same scripts worked already? I post the script for creating the queue and adding the subscriber:
    CREATE OR REPLACE TYPE pat_history_queue_payload_type AS OBJECT
    ( TSTAMP VARCHAR2(22 CHAR),
    TYP VARCHAR2(10 CHAR),
    DELTA_MENGE NUMBER,
    ORIGIN VARCHAR2(1 CHAR),
    TEXT VARCHAR2(1000 CHAR),
    QL_TSTAMP VARCHAR2(22 CHAR)
    BEGIN
    DBMS_AQADM.CREATE_QUEUE_TABLE (
    queue_table => 'pat_history_queue_table',
    queue_payload_type => 'pat_history_queue_payload_type',
    multiple_consumers => TRUE
    END;
    BEGIN
    DBMS_AQADM.CREATE_QUEUE (
    queue_name => 'pat_history_queue',
    queue_table => 'pat_history_queue_table',
    max_retries => 10
    DBMS_AQADM.START_QUEUE (
    queue_name => 'pat_history_queue'
    END;
    BEGIN
    DBMS_AQADM.ADD_SUBSCRIBER (
    queue_name => 'pat_history_queue',
    subscriber => SYS.AQ$_AGENT(
    'pat_history_queue_subscriber',
    NULL,
    NULL )
    DBMS_AQ.REGISTER (
    SYS.AQ$_REG_INFO_LIST(
    SYS.AQ$_REG_INFO(
    'pat_history_queue:pat_history_queue_subscriber',
    DBMS_AQ.NAMESPACE_AQ,
    'plsql://PAT.HISTORY_QUEUE_DISTRIBUTION.CALLBACK',
    HEXTORAW('FF')
    1
    END;
    The function CALLBACK which is called by the queue, is never called, I checked that with log messages. Also the package that contains the function is compiled ok.
    Thanks.
    Roland

    Hi,
    Does the subscription show up correct in sys.reg$ ?
    Regards,
    Harry
    http://dbaharrison.blogspot.com/

  • How to create function panels for my own C functions?

    I've been searching for a way to create my own function panels. CVI documentation seems to suggest that this can be done but the explanation inevitably turns to instrument drivers, not C functions.
    I don't yet know what an instrument driver is. So far I've never needed one. I just want to know how to put plain old C functions that I've created into the library tree for coworkers to use. Is that practically possible?

    The facility is couched in terms of "instrument driver" but it can be used for an arbitrary CVI function you've created.
    First make a function tree from File pull down menu   new ... Function Tree
    Then right click in blank function tree panel and create instrument or use Create pulldown menu, enter name as prompted, use help button.  You need to choose a "prefix" for your function names.
    The tricky part is when you want to add a function to your "instrument" you right click on the <create class or function panel window> token the first time, thereafter when adding a function you right click on one of the functions you've already added.  In either case you want to "create function panel window" which brings up the function panel window editor whcih allows you to place input controls that match the function signature.
    There's a learning curve but keep at it.  The help is good, use it.
    Menchar

  • Implementing Detach(as in Panel Collection)like functionality for Bar Graph

    I have created a jsff containing horizontal stacked bar graph through collection model.I have not used any VOs ,but I have created an ArrayList in which I send the values to be shown in the graph by fetching data through jdbc call.
    Now I want the graph to be displayed in a pop up through a link in the jsff so that the data can be viewed in larger screen area,similar to the funnctionality of 'detach' in the panel collection.
    I am using JDev 11.1.1.6 and WLS 10.3.6
    Please suggest a mechanism to achieve this.Any help on this issue is appreciated.

    Hi Saif Kamaal
    The Use Case :
    i. When the page is initially rendered , a bar graph will be shown in a region.
    ii. That region will contain a button ,which on clicking willl bring the graph in the entire page as popup (Similar to the detach functionality in Panel collection,where a table is rendered and clicking on detach brings the table on entire screen)
    I have developed the graph as jsff and that is added to a jspx page and I need that button,if possible, in the jsff itself.

  • This.each and a callback function

    Hi all
    I am having trouble working out how to get this to work. I have a $this.each function that gets all the relavent .attr('href') and I do a replace on it. All this works fine.
    When I do the replace is the item I want is not valid then I need it to stay the same else I get an error. Now to to this I am using function IsValidImageUrl(url). This works but because you cannot turn an asynchonous call into a synchronous one I need to make a callback.
    But here is my problem all the bits work but I cannot get the code to work together because I am using a this.each and the call back. with the validation and I am really stuck. The code is below it is in it bit as I have tried eveything and am just not getting it. Can someone help or point me in the right direction.
    Cheers Daniel
    $this.each(function  {
         var myItem = jQuery(this)
         var myLarge = myItem.attr("href");
         myZoom = myLarge.replace('lrg', 'zoom')
         myItem.attr("href",myZoom);
         myItem.attr("rev",myLarge);
    function myCallback(url, answer) {
              if (answer==false) {
              myItem.attr("href",myLarge);
              myItem.attr("rev",myLarge);
                                  } else {
              myItem.attr("href",myZoom);
              myItem.attr("rev",myLarge);   
    function IsValidImageUrl(url, callback) {
        var img = new Image();
              alert(myZoom);
              img.onerror = function() { callback(url, false); }
        img.onload =  function() { callback(url, true); }
        img.src = url
    IsValidImageUrl(myZoom, myCallback);

    So you basically have large product layout and when you hover over the image there it does a zoom effect?
    If so then you can have a big image for your zoom and for your large image by default use _path in the image tag with thumbnail paramater in the URL to make a smaller version of it outlined in the BC documentation online.
    Many jQuery image zoom plugins will then work. Slight tweaks to that will work.
    If your doing it on the list view then same thing applies with the _path as a link source to fetch.

  • Need help making javascript thumbnail gallery function in javascript tab menu

    Hello all,
    I have implemented a css/javascript tab menu on one of my html pages thanks to Chris Coyier (http://css-tricks.com/learning-jquery-fading-menu-replacing-content/), and within one of the tabs, which I labeled GALLERY, I am trying to place a thumbnail gallery curtosy of Trent (http://www.twospy.com/galleriffic/).
    Before trying to place it in the menu, I made the gallery on a seperate html page to make sure that I could get it to work.  It does. But when I place it in the menu it shows up on page load under the content of the first tab (labeled TOUR) and not in the gallery tab.  In addition, once I click on the "gallery" tab the other tabs stop showing their content.  I feel like I am missing something obvious. But I just can't figure out what.  If anyone can help I would greatly appreciate it.
    Thanks,
    Natalie
    Below is the code of my whole page:
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Tour template</title>
    <!--TABS-->
    <link rel="stylesheet" type="text/css" href="MenuFader/style.css">
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
            $(function(){
                $("#tour-button").css({
                    opacity: 0.3
                $("#gallery-button").css({
                    opacity: 0.3
                $("#page-wrap div.button").click(function(){
                    $clicked = $(this);
                    // if the button is not already "transformed" AND is not animated
                    if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) {
                        $clicked.animate({
                            opacity: 1,
                            borderWidth: 5
                        }, 600 );
                        // each button div MUST have a "xx-button" and the target div must have an id "xx"
                        var idToLoad = $clicked.attr("id").split('-');
                        //we search trough the content for the visible div and we fade it out
                        $("#contents").find("div:visible").fadeOut("fast", function(){
                            //once the fade out is completed, we start to fade in the right div
                            $(this).parent().find("#"+idToLoad[0]).fadeIn();
                    //we reset the other buttons to default style
                    $clicked.siblings(".button").animate({
                        opacity: 0.5,
                        borderWidth: 1
                    }, 600 );
    </script>
    <!--End Tabs-->
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    <style type="text/css">
    <!--
    #realtor panel {
        width: 1000px;
    body {
        background-color: #282828;
        margin: 0px;
    .style4 {color: #A1A1A1}
    -->
    </style>
    <!-- InstanceBeginEditable name="Gallery" -->
    <title>Example tour page</title>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="Gallery/js/jquery.galleriffic.js"></script>
    <script type="text/javascript" src="Gallery/js/jquery.opacityrollover.js"></script>
    <script type="text/javascript">
                document.write('<style>.noscript { display: none; }</style>');
    </script>
    <link rel="stylesheet" type="text/css" href="Gallery/css/galleriffic-2.css">
    <link rel="stylesheet" type="text/css" href="Gallery/css/basic.css">
    <!-- InstanceEndEditable -->
    </head>
    <!-- InstanceBeginEditable name="body" -->
    <body>
    <div id="realtor panel"><table width="100%" border="0">
      <tr>
        <td width="18%"> <div align="center"></div></td>
        <td width="82%"> </td>
      </tr>
    </table>
    </div>
    <div id="page-wrap">
            <div id="tour-button" class="button">
                <img src="MenuFader/images/TOUR.png" alt="tour" class="button" />
            </div>
            <div id="gallery-button" class="button">
                <img src="MenuFader/images/GALLERY.png" alt="property gallery" class="button" />
            </div>
            <div id="info-button" class="button">
                <img src="MenuFader/images/INFO.png" alt="info" class="button" />
            </div>
            <div id="specs-button" class="button">
                <img src="MenuFader/images/SPECS.png" alt="specs" class="button" />
            </div>
            <div class="clear"></div>
      <div id="contents">
        <div id="tour">
          <script type="text/javascript">
    AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','wid th','1270','height','443','src','swf files/Tudor Arms interative floor plan','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movi e','swf files/Tudor Arms interative floor plan' ); //end AC code
    </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="1270" height="443">
            <param name="movie" value="swf files/Tudor Arms interative floor plan.swf" />
            <param name="quality" value="high" />
            <embed src="swf files/Tudor Arms interative floor plan.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1270" height="443"></embed>
          </object></noscript>
        </div>
        <div id="property gallery">
             <div id="container">
                    <div id="gallery" class="content">
                        <div id="controls" class="controls"></div>
                        <div class="slideshow-container">
                            <div id="slideshow" class="slideshow"></div>
                        </div>
                    </div>
                    <div id="thumbs" class="navigation">
                        <ul class="thumbs noscript">
                            <li>
                                <a class="thumb" href="Gallery/images/example/apt entrance1.jpg">
                                <img src="Gallery/images/example/Tudor thumbs/apt face1.jpg" alt="apt entrance1" />
                                </a>
                           </li>
                          <li>
                                <a class="thumb" href="Gallery/images/example/apt entrance2.jpg" >
                                <img src="Gallery/images/example/Tudor thumbs/apt face2.jpg" alt="apt entrance2" />
                                </a>
                          </li>
                          <li>
                                 <a class="thumb" href="Gallery/images/example/apt entrance3.jpg" >
                                <img src="Gallery/images/example/Tudor thumbs/apt face3.jpg" alt="apt entrance3" />
                              </a>
                          </li>   
                            <li>
                                 <a class="thumb" href="Gallery/images/example/apt sign.jpg" >
                                <img src="Gallery/images/example/Tudor thumbs/apt sign.jpg"  alt="apt sign" />
                              </a>
                          </li>
                          <li>
                                 <a class="thumb" href="Gallery/images/example/entryway1.jpg" >
                                <img src="Gallery/images/example/Tudor thumbs/entry.jpg" alt="entry" />
                              </a>
                          </li>
                            <li>
                                 <a class="thumb" href="Gallery/images/example/living room1.jpg" >
                                <img src="Gallery/images/example/Tudor thumbs/living1.jpg"  alt="living1" />
                              </a>
                          </li>
                           <li>
                                 <a class="thumb" href="Gallery/images/example/living room2.jpg" >
                                 <img src="Gallery/images/example/Tudor thumbs/living2.jpg" alt="living3" />
                              </a>
                          </li>
                            <li>
                                 <a class="thumb" href="Gallery/images/example/living room3.jpg" >
                                <img src="Gallery/images/example/Tudor thumbs/living3.jpg"  alt="living3" />
                              </a>
                          </li>
                          <li>
                                 <a class="thumb" href="Gallery/images/example/dining1.jpg" >
                                 <img src="Gallery/images/example/Tudor thumbs/dining1.jpg"  alt="dining1" />
                              </a>
                          </li>
                            <li>
                                 <a class="thumb" href="Gallery/images/example/Dining2.jpg" >
                                <img src="Gallery/images/example/Tudor thumbs/dining2.jpg"  alt="dining2" />
                              </a>
                          </li>
                          <li>
                                 <a class="thumb" href="Gallery/images/example/dining3.jpg" >
                                <img src="Gallery/images/example/Tudor thumbs/dining3.jpg" alt="dining3" />
                              </a>
                          </li>
                            <li>
                                 <a class="thumb" href="Gallery/images/example/Kitchen1.jpg" >
                                <img src="Gallery/images/example/Tudor thumbs/kitchen1.jpg"  alt="kitchen1" />
                              </a>
                          </li>
                          <li>
                                 <a class="thumb" href="Gallery/images/example/Kitchen2.jpg" >
                                <img src="Gallery/images/example/Tudor thumbs/kitchen2.jpg" alt="kitchen2" />
                              </a>
                          </li>
                            <li>
                                 <a class="thumb" href="Gallery/images/example/bedroom1.jpg" >
                                <img src="Gallery/images/example/Tudor thumbs/bed1.jpg"  alt="bed1" />
                              </a>
                          </li>
                           <li>
                                 <a class="thumb" href="Gallery/images/example/bedroom2.jpg">
                                <img src="Gallery/images/example/Tudor thumbs/bed2.jpg"  alt="bed2" />
                              </a>
                          </li>
                            <li>
                                 <a class="thumb" href="Gallery/images/example/bedroom3.jpg" >
                                <img src="Gallery/images/example/Tudor thumbs/bed3.jpg"  alt="bed3" />
                              </a>
                          </li>
                            <li>
                                 <a class="thumb" href="Gallery/images/example/bathroom.jpg">
                                <img src="Gallery/images/example/Tudor thumbs/bath.jpg"  alt="bath" />
                              </a>
                            </li>
                        </ul>
                    </div>
                <div style="clear: both;"></div>
            </div>
        </div>
        <div id="info">
            <p class="style4">Content for info</p>
        </div>
        <div id="specs">
            <p class="style4">This content is for specs.</p>
        </div>
      </div>
    </div>
    <!--script for gallery-->
    <script type="text/javascript">
                jQuery(document).ready(function($) {
                    // We only want these styles applied when javascript is enabled
                    $('div.navigation').css({'width' : '400px', 'float' : 'left'});
                    $('div.content').css('display', 'block');
                    // Initially set opacity on thumbs and add
                    // additional styling for hover effect on thumbs
                    var onMouseOutOpacity = 0.67;
                    $('#thumbs ul.thumbs li').opacityrollover({
                        mouseOutOpacity:   onMouseOutOpacity,
                        mouseOverOpacity:  1.0,
                        fadeSpeed:         'fast',
                        exemptionSelector: '.selected'
                    // Initialize Advanced Galleriffic Gallery
                    var gallery = $('#thumbs').galleriffic({
                        delay:                     2500,
                        numThumbs:                 15,
                        preloadAhead:              10,
                        enableTopPager:            true,
                        enableBottomPager:         true,
                        maxPagesToShow:            7,
                        imageContainerSel:         '#slideshow',
                        controlsContainerSel:      '#controls',
                        captionContainerSel:       '#caption',
                        loadingContainerSel:       '#loading',
                        renderSSControls:          true,
                        renderNavControls:         true,
                        playLinkText:              'Play Slideshow',
                        pauseLinkText:             'Pause Slideshow',
                        prevLinkText:              '&lsaquo; Previous Photo',
                        nextLinkText:              'Next Photo &rsaquo;',
                        nextPageLinkText:          'Next &rsaquo;',
                        prevPageLinkText:          '&lsaquo; Prev',
                        enableHistory:             false,
                        autoStart:                 false,
                        syncTransitions:           true,
                        defaultTransitionDuration: 900,
                        onSlideChange:             function(prevIndex, nextIndex) {
                            // 'this' refers to the gallery, which is an extension of $('#thumbs')
                            this.find('ul.thumbs').children()
                                .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
                                .eq(nextIndex).fadeTo('fast', 1.0);
                        onPageTransitionOut:       function(callback) {
                            this.fadeTo('fast', 0.0, callback);
                        onPageTransitionIn:        function() {
                            this.fadeTo('fast', 1.0);
    </script>  
    </body>
    <!-- InstanceEndEditable -->
    <!-- InstanceEnd --></html>

    Sure thing:
    http://www.acresllc.net/TA501001.html

  • Spry Collapsible Panel problem when previewing in web browser

    Hello.
    I have inserted a spry collapsible panel into my website, made ZERO adjustments to any of the scripting or even css styling, and previewed the panel in my Safari browser. It does not seem to be working correctly. I've attached a couple of images showing what the panel looks like in the browser. My site is not published yet, so I cannot give out the url.
    Is something wrong with the js file? I tried the panel earlier on a different site on the same computer and it was working fine.
    the "Tab" menu text does not fit inside the grey box. Everything collapses fine, however, the gray box is too thin for the text. I've tried adjusting it in the CSS sheet, but it doesn't seem to change anything.
    This is the panel in the collapsed state. It looks bad. I know it's not supposed to work like this.
    When I preview the site in "live view" everything works fine...
    // SpryCollapsiblePanel.js - version 0.8 - Spry Pre-Release 1.6.1
    // Copyright (c) 2006. Adobe Systems Incorporated.
    // All rights reserved.
    // Redistribution and use in source and binary forms, with or without
    // modification, are permitted provided that the following conditions are met:
    //   * Redistributions of source code must retain the above copyright notice,
    //     this list of conditions and the following disclaimer.
    //   * Redistributions in binary form must reproduce the above copyright notice,
    //     this list of conditions and the following disclaimer in the documentation
    //     and/or other materials provided with the distribution.
    //   * Neither the name of Adobe Systems Incorporated nor the names of its
    //     contributors may be used to endorse or promote products derived from this
    //     software without specific prior written permission.
    // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
    // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
    // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
    // ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
    // LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
    // CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
    // SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
    // INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
    // CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
    // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
    // POSSIBILITY OF SUCH DAMAGE.
    (function() { // BeginSpryComponent
    if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
    Spry.Widget.CollapsiblePanel = function(element, opts)
    this.element = this.getElement(element);
    this.focusElement = null;
    this.hoverClass = "CollapsiblePanelTabHover";
    this.openClass = "CollapsiblePanelOpen";
    this.closedClass = "CollapsiblePanelClosed";
    this.focusedClass = "CollapsiblePanelFocused";
    this.enableAnimation = true;
    this.enableKeyboardNavigation = true;
    this.animator = null;
    this.hasFocus = false;
    this.contentIsOpen = false;
    this.openPanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_DOWN;
    this.closePanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_UP;
    Spry.Widget.CollapsiblePanel.setOptions(this, opts);
    this.attachBehaviors();
    Spry.Widget.CollapsiblePanel.prototype.getElement = function(ele)
    if (ele && typeof ele == "string")
    return document.getElementById(ele);
    return ele;
    Spry.Widget.CollapsiblePanel.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.CollapsiblePanel.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.CollapsiblePanel.prototype.hasClassName = function(ele, className)
    if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
    return false;
    return true;
    Spry.Widget.CollapsiblePanel.prototype.setDisplay = function(ele, display)
    if( ele )
    ele.style.display = display;
    Spry.Widget.CollapsiblePanel.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.CollapsiblePanel.prototype.onTabMouseOver = function(e)
    this.addClassName(this.getTab(), this.hoverClass);
    return false;
    Spry.Widget.CollapsiblePanel.prototype.onTabMouseOut = function(e)
    this.removeClassName(this.getTab(), this.hoverClass);
    return false;
    Spry.Widget.CollapsiblePanel.prototype.open = function()
    this.contentIsOpen = true;
    if (this.enableAnimation)
    if (this.animator)
    this.animator.stop();
    this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, true, { duration: this.duration, fps: this.fps, transition: this.transition });
    this.animator.start();
    else
    this.setDisplay(this.getContent(), "block");
    this.removeClassName(this.element, this.closedClass);
    this.addClassName(this.element, this.openClass);
    Spry.Widget.CollapsiblePanel.prototype.close = function()
    this.contentIsOpen = false;
    if (this.enableAnimation)
    if (this.animator)
    this.animator.stop();
    this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, false, { duration: this.duration, fps: this.fps, transition: this.transition });
    this.animator.start();
    else
    this.setDisplay(this.getContent(), "none");
    this.removeClassName(this.element, this.openClass);
    this.addClassName(this.element, this.closedClass);
    Spry.Widget.CollapsiblePanel.prototype.onTabClick = function(e)
    if (this.isOpen())
    this.close();
    else
    this.open();
    this.focus();
    return this.stopPropagation(e);
    Spry.Widget.CollapsiblePanel.prototype.onFocus = function(e)
    this.hasFocus = true;
    this.addClassName(this.element, this.focusedClass);
    return false;
    Spry.Widget.CollapsiblePanel.prototype.onBlur = function(e)
    this.hasFocus = false;
    this.removeClassName(this.element, this.focusedClass);
    return false;
    Spry.Widget.CollapsiblePanel.KEY_UP = 38;
    Spry.Widget.CollapsiblePanel.KEY_DOWN = 40;
    Spry.Widget.CollapsiblePanel.prototype.onKeyDown = function(e)
    var key = e.keyCode;
    if (!this.hasFocus || (key != this.openPanelKeyCode && key != this.closePanelKeyCode))
    return true;
    if (this.isOpen() && key == this.closePanelKeyCode)
    this.close();
    else if ( key == this.openPanelKeyCode)
    this.open();
    return this.stopPropagation(e);
    Spry.Widget.CollapsiblePanel.prototype.stopPropagation = function(e)
    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;
    return false;
    Spry.Widget.CollapsiblePanel.prototype.attachPanelHandlers = function()
    var tab = this.getTab();
    if (!tab)
    return;
    var self = this;
    Spry.Widget.CollapsiblePanel.addEventListener(tab, "click", function(e) { return self.onTabClick(e); }, false);
    Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e); }, false);
    Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e); }, 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.CollapsiblePanel.addEventListener(this.focusElement, "focus", function(e) { return self.onFocus(e); }, false);
    Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "blur", function(e) { return self.onBlur(e); }, false);
    Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "keydown", function(e) { return self.onKeyDown(e); }, false);
    Spry.Widget.CollapsiblePanel.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.CollapsiblePanel.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.CollapsiblePanel.prototype.attachBehaviors = function()
    var panel = this.element;
    var tab = this.getTab();
    var content = this.getContent();
    if (this.contentIsOpen || this.hasClassName(panel, this.openClass))
    this.addClassName(panel, this.openClass);
    this.removeClassName(panel, this.closedClass);
    this.setDisplay(content, "block");
    this.contentIsOpen = true;
    else
    this.removeClassName(panel, this.openClass);
    this.addClassName(panel, this.closedClass);
    this.setDisplay(content, "none");
    this.contentIsOpen = false;
    this.attachPanelHandlers();
    Spry.Widget.CollapsiblePanel.prototype.getTab = function()
    return this.getElementChildren(this.element)[0];
    Spry.Widget.CollapsiblePanel.prototype.getContent = function()
    return this.getElementChildren(this.element)[1];
    Spry.Widget.CollapsiblePanel.prototype.isOpen = function()
    return this.contentIsOpen;
    Spry.Widget.CollapsiblePanel.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.CollapsiblePanel.prototype.focus = function()
    if (this.focusElement && this.focusElement.focus)
    this.focusElement.focus();
    Spry.Widget.CollapsiblePanel.PanelAnimator = function(panel, doOpen, opts)
    this.timer = null;
    this.interval = 0;
    this.fps = 60;
    this.duration = 500;
    this.startTime = 0;
    this.transition = Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition;
    this.onComplete = null;
    this.panel = panel;
    this.content = panel.getContent();
    this.doOpen = doOpen;
    Spry.Widget.CollapsiblePanel.setOptions(this, opts, true);
    this.interval = Math.floor(1000 / this.fps);
    var c = this.content;
    var curHeight = c.offsetHeight ? c.offsetHeight : 0;
    this.fromHeight = (doOpen && c.style.display == "none") ? 0 : curHeight;
    if (!doOpen)
    this.toHeight = 0;
    else
    if (c.style.display == "none")
    // The content area is not displayed so in order to calculate the extent
    // of the content inside it, we have to set its display to block.
    c.style.visibility = "hidden";
    c.style.display = "block";
    // Clear the height property so we can calculate
    // the full height of the content we are going to show.
    c.style.height = "";
    this.toHeight = c.offsetHeight;
    this.distance = this.toHeight - this.fromHeight;
    this.overflow = c.style.overflow;
    c.style.height = this.fromHeight + "px";
    c.style.visibility = "visible";
    c.style.overflow = "hidden";
    c.style.display = "block";
    Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
    Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.start = function()
    var self = this;
    this.startTime = (new Date).getTime();
    this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
    Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stop = function()
    if (this.timer)
    clearTimeout(this.timer);
    // If we're killing the timer, restore the overflow property.
    this.content.style.overflow = this.overflow;
    this.timer = null;
    Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stepAnimation = function()
    var curTime = (new Date).getTime();
    var elapsedTime = curTime - this.startTime;
    if (elapsedTime >= this.duration)
    if (!this.doOpen)
    this.content.style.display = "none";
    this.content.style.overflow = this.overflow;
    this.content.style.height = this.toHeight + "px";
    if (this.onComplete)
    this.onComplete();
    return;
    var ht = this.transition(elapsedTime, this.fromHeight, this.distance, this.duration);
    this.content.style.height = ((ht < 0) ? 0 : ht) + "px";
    var self = this;
    this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
    Spry.Widget.CollapsiblePanelGroup = function(element, opts)
    this.element = this.getElement(element);
    this.opts = opts;
    this.attachBehaviors();
    Spry.Widget.CollapsiblePanelGroup.prototype.setOptions = Spry.Widget.CollapsiblePanel.prototype.setOptions;
    Spry.Widget.CollapsiblePanelGroup.prototype.getElement = Spry.Widget.CollapsiblePanel.prototype.getElement;
    Spry.Widget.CollapsiblePanelGroup.prototype.getElementChildren = Spry.Widget.CollapsiblePanel.prototype.getElementChildren;
    Spry.Widget.CollapsiblePanelGroup.prototype.setElementWidget = function(element, widget)
    if (!element || !widget)
    return;
    if (!element.spry)
    element.spry = new Object;
    element.spry.collapsiblePanel = widget;
    Spry.Widget.CollapsiblePanelGroup.prototype.getElementWidget = function(element)
    return (element && element.spry && element.spry.collapsiblePanel) ? element.spry.collapsiblePanel : null;
    Spry.Widget.CollapsiblePanelGroup.prototype.getPanels = function()
    if (!this.element)
    return [];
    return this.getElementChildren(this.element);
    Spry.Widget.CollapsiblePanelGroup.prototype.getPanel = function(panelIndex)
    return this.getPanels()[panelIndex];
    Spry.Widget.CollapsiblePanelGroup.prototype.attachBehaviors = function()
    if (!this.element)
    return;
    var cpanels = this.getPanels();
    var numCPanels = cpanels.length;
    for (var i = 0; i < numCPanels; i++)
    var cpanel = cpanels[i];
    this.setElementWidget(cpanel, new Spry.Widget.CollapsiblePanel(cpanel, this.opts));
    Spry.Widget.CollapsiblePanelGroup.prototype.openPanel = function(panelIndex)
    var w = this.getElementWidget(this.getPanel(panelIndex));
    if (w && !w.isOpen())
    w.open();
    Spry.Widget.CollapsiblePanelGroup.prototype.closePanel = function(panelIndex)
    var w = this.getElementWidget(this.getPanel(panelIndex));
    if (w && w.isOpen())
    w.close();
    Spry.Widget.CollapsiblePanelGroup.prototype.openAllPanels = function()
    var cpanels = this.getPanels();
    var numCPanels = cpanels.length;
    for (var i = 0; i < numCPanels; i++)
    var w = this.getElementWidget(cpanels[i]);
    if (w && !w.isOpen())
    w.open();
    Spry.Widget.CollapsiblePanelGroup.prototype.closeAllPanels = function()
    var cpanels = this.getPanels();
    var numCPanels = cpanels.length;
    for (var i = 0; i < numCPanels; i++)
    var w = this.getElementWidget(cpanels[i]);
    if (w && w.isOpen())
    w.close();
    })(); // EndSpryComponent

    I have inserted a spry collapsible panel into my website, made ZERO
    adjustments to any of the scripting or even css styling
    That is good, that means that I have a local copy of the scripting and css files eliminating the need to attach the code to a post.
    Is something wrong with the js file? I tried the panel earlier on a
    different site on the same computer and it was working fine
    The fact that it works on a different site means that something is correct. My assumption is that the scripting and css files are doing their job correctly and to answer your question regarding the js file, no.
    Having eliminated the Spry original JavaScript and CSS files as being the culprits, there must be a problem with the rest of the site, incorrect HTML, other interfering JavaScript or CSS.
    I can keep guessing, but only those persons that are privy to your code can give you any positive input. Please find a way to upload your files so that we can see the code in context.
    To this end, screen captures do not assist in solving the problem, they only add to others' amusement at seeing the problem.
    Ben
    PS I forgot to say, welcome to our community and yes I am a cynical old codger, sorry.

  • How can I call a public function in one component from another component?

    I have two components: Form and Confirmation.  Form is a Canvas and Confirmation is a TitleWindow.
    Form contains several controls and a submit button.  Confirmation contains an OK button.  When the user clicks the submit button, the Confirmation appears over the Form (Form is blurred).  When the user clicks the OK button on the Confirmation, I want to run a function on Form to set some default values in the controls.
    How can I address the function in the Form component from the Confirmation component so I can fire the function?
    Thanks!

    Here is the source
    CustomForm.mxml
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
    <mx:Script>
    <![CDATA[
    public function callBack(): void {
    lblStatus.text = "Success";
    ]]>
    </mx:Script>
    <mx:Label id="lblStatus"/>
    <mx:Form x="50" y="50" verticalGap="15">
            <mx:FormHeading label="Send us comments" />
            <mx:FormItem label="Full Name:">
                <mx:TextInput id="fullName" />
            </mx:FormItem>
            <mx:FormItem label="Email:">
                <mx:TextInput id="email" />
            </mx:FormItem>
            <mx:FormItem label="Comments:">
                <mx:TextArea id="comments" />
            </mx:FormItem>
            <mx:FormItem>
                <mx:Button id="submit"
                    label="Submit" />
            </mx:FormItem>
         </mx:Form>
    </mx:Canvas>
    CustomTitle.mxml
    <?xml version="1.0" encoding="utf-8"?>
    <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" width="200" height="80"
    showCloseButton="true" close="closeMe(event)"
    backgroundAlpha="1"
    color="#173553" backgroundColor="#EEEEEE"
    headerColors="#FFFFFF, #CBCCCC"
    borderColor="#666666" borderStyle="solid">
    <mx:Script>
    <![CDATA[
    import mx.managers.PopUpManager;
    public var callBack: Function = new Function();
    private function closeMe(event: Event): void {
    PopUpManager.removePopUp(this);
    callBack();
    ]]>
    </mx:Script>
    <mx:HBox width="100%" height="100%" horizontalAlign="center" verticalAlign="bottom">
    <mx:Button id="btnOK" label="OK" click="closeMe(event)" />
    </mx:HBox>
    </mx:TitleWindow>
    TitleWindowSample.mxml
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns="*"
    layout="absolute"
    width="100%" height="100%"
    creationComplete="init()">
    <mx:Script>
    <![CDATA[
    import mx.managers.PopUpManager;
    private function init(): void {
    customForm.submit.addEventListener(MouseEvent.CLICK, onMouseClick);
    private function onMouseClick(event: MouseEvent): void {
    customForm.lblStatus.text = "";
    var customTitle: CustomTitle = new CustomTitle();
    customTitle.callBack = customForm.callBack;
    PopUpManager.addPopUp(customTitle, this);
    PopUpManager.centerPopUp(customTitle);
    ]]>
    </mx:Script>
    <mx:VBox
    width="100%" height="100%"
    verticalAlign="middle" horizontalAlign="center">
    <CustomForm id="customForm" width="500" height="300">
    </CustomForm>
    </mx:VBox>
    </mx:Application>

  • Spry tabbed panels as menu system

    Hi,
    This is actually for Dreamweaver CS6.    What I'm trying to do is use spry tabbed panels as horizontal my menu system.    I want to have basically the functionality of the adobe.com menu system where the drop downs are tabbed and the content box size varies depending on the tab and the content box moves it's position relative to the tab that's selected.     I did manage to get the mouseover working so the tab's change according to which tab the mouse passes over.
    My current problems are these:
    I managed to change the content panel box size so it's not the same width as the full panel tab group however I cannot get it to move relative to which tab is selected, it just stays fixed in one location.
    The content tabs are pushing the body of my page down instead of showing up over top of it which is obvioulsy not very condusive for a menu system.
    I would like the default to show none of the panels until someone mouseover's one of the tab's and for the panels to dissapear when the mouse is not in the menu system.
    For something similar to the adobe.com menu system am i using the right feature (it looks like tabbed panels to me) or should I be using a different spry feature, I would like to have text and an image in the content box under each tab just for overall effect.
    I'm quite inexperienced with CSS and Javascripting and have basically gotten this far with trial and error modifying the CSS settings but I'm unable to modify the javascript on my own.
    Any help or suggestions would be greatly appreciated!!
    Below is my tabbed panels css:
    .TabbedPanels {
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    clear: none;
    width: 1000px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    -webkit-transition: all;
    -moz-transition: all;
    -ms-transition: all;
    -o-transition: all;
    transition: all;
    .TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
    color: #FFF;
    background-color: #000;
    width: 1000px;
    height: 25px;
    .TabbedPanelsTab {
    position: relative;
    top: 0px;
    float: left;
    padding: 4px 21px;
    margin: 0px 0px 0px 0px;
    background-color: #000;
    list-style: none;
    border-left: solid 0px #000;
    border-bottom: solid 0px #000;
    border-top: solid 2px #000;
    border-right: solid 0px #000;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    width: 1000;
    height: 15px;
    font-family: "Myriad Pro";
    font-size: 1em;
    font-weight: normal;
    .TabbedPanelsTabHover {
    background-color: #D31145;
    -webkit-transition: all;
    -moz-transition: all;
    -ms-transition: all;
    -o-transition: all;
    transition: all;
    .TabbedPanelsTabSelected {
    background-color: #D31145;
    border-bottom: 0px solid #D31145;
    color: #FFFFFF;
    .TabbedPanelsTab a {
    color: black;
    text-decoration: none;
    .TabbedPanelsContentGroup {
    clear: both;
    border-left: solid 2px #D31145;
    border-bottom: solid 2px #D31145;
    border-top: solid 2px #D31145;
    border-right: solid 2px #D31145;
    background-color: #FFFFFF;
    visibility: visible;
    width: 50%;
    position: inherit;
    height: auto;
    /* This is the selector for the Content panel. The Content panel holds the
    * content for a single tabbed panel. For our default style, this container
    * provides some padding, so that the content is not pushed up against the
    * widget borders.
    * The name of the class ("TabbedPanelsContent") used in this selector is
    * not necessary to make the widget function. You can use any class name you
    * want to style the Content container.
    .TabbedPanelsContent {
    overflow: hidden;
    padding: 4px;
    .TabbedPanelsContentVisible {
    .VTabbedPanels {
    overflow: hidden;
    zoom: 1;
    .VTabbedPanels .TabbedPanelsTabGroup {
    float: left;
    width: 10em;
    height: 20em;
    background-color: #EEE;
    position: relative;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
    .VTabbedPanels .TabbedPanelsTab {
    float: none;
    margin: 0px;
    border-top: none;
    border-left: none;
    border-right: none;
    .VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #EEE;
    border-bottom: solid 1px #999;
    .VTabbedPanels .TabbedPanelsContentGroup {
    clear: none;
    float: left;
    padding: 0px;
    width: 30em;
    height: 20em;
    /* Styles for Printing */
    @media print {
    .TabbedPanels {
    overflow: visible !important;
    .TabbedPanelsContentGroup {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    .TabbedPanelsContent {
    overflow: visible !important;
    display: block !important;
    clear:both !important;
    .TabbedPanelsTab {
      overflow: visible !important;
      display: block !important;
      clear:both !important;
    THe Javascript for my tabbed panels are below:
    // SpryTabbedPanels.js - version 0.7 - Spry Pre-Release 1.6.1
    // Copyright (c) 2006. Adobe Systems Incorporated.
    // All rights reserved.
    // Redistribution and use in source and binary forms, with or without
    // modification, are permitted provided that the following conditions are met:
    //   * Redistributions of source code must retain the above copyright notice,
    //     this list of conditions and the following disclaimer.
    //   * Redistributions in binary form must reproduce the above copyright notice,
    //     this list of conditions and the following disclaimer in the documentation
    //     and/or other materials provided with the distribution.
    //   * Neither the name of Adobe Systems Incorporated nor the names of its
    //     contributors may be used to endorse or promote products derived from this
    //     software without specific prior written permission.
    // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
    // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
    // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
    // ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
    // LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
    // CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
    // SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
    // INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
    // CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
    // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
    // POSSIBILITY OF SUCH DAMAGE.
    (function() { // BeginSpryComponent
    if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
    Spry.Widget.TabbedPanels = function(element, opts)
    this.element = this.getElement(element);
    this.defaultTab = 0; // Show the first panel by default.
    this.tabSelectedClass = "TabbedPanelsTabSelected";
    this.tabHoverClass = "TabbedPanelsTabHover";
    this.tabFocusedClass = "TabbedPanelsTabFocused";
    this.panelVisibleClass = "TabbedPanelsContentVisible";
    this.focusElement = null;
    this.hasFocus = false;
    this.currentTabIndex = 0;
    this.enableKeyboardNavigation = true;
    this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
    this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
    Spry.Widget.TabbedPanels.setOptions(this, opts);
    // If the defaultTab is expressed as a number/index, convert
    // it to an element.
    if (typeof (this.defaultTab) == "number")
      if (this.defaultTab < 0)
       this.defaultTab = 0;
      else
       var count = this.getTabbedPanelCount();
       if (this.defaultTab >= count)
        this.defaultTab = (count > 1) ? (count - 1) : 0;
      this.defaultTab = this.getTabs()[this.defaultTab];
    // The defaultTab property is supposed to be the tab element for the tab content
    // to show by default. The caller is allowed to pass in the element itself or the
    // element's id, so we need to convert the current value to an element if necessary.
    if (this.defaultTab)
      this.defaultTab = this.getElement(this.defaultTab);
    this.attachBehaviors();
    Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
    if (ele && typeof ele == "string")
      return document.getElementById(ele);
    return ele;
    Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
    var children = [];
    var child = element.firstChild;
    while (child)
      if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
       children.push(child);
      child = child.nextSibling;
    return children;
    Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
    if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
      return;
    ele.className += (ele.className ? " " : "") + className;
    Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
    if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
      return;
    ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
    Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
    if (!optionsObj)
      return;
    for (var optionName in optionsObj)
      if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
       continue;
      obj[optionName] = optionsObj[optionName];
    Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
    if (this.element)
      var children = this.getElementChildren(this.element);
      if (children.length)
       return children[0];
    return null;
    Spry.Widget.TabbedPanels.prototype.getTabs = function()
    var tabs = [];
    var tg = this.getTabGroup();
    if (tg)
      tabs = this.getElementChildren(tg);
    return tabs;
    Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
    if (this.element)
      var children = this.getElementChildren(this.element);
      if (children.length > 1)
       return children[1];
    return null;
    Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
    var panels = [];
    var pg = this.getContentPanelGroup();
    if (pg)
      panels = this.getElementChildren(pg);
    return panels;
    Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
    ele = this.getElement(ele);
    if (ele && arr && arr.length)
      for (var i = 0; i < arr.length; i++)
       if (ele == arr[i])
        return i;
    return -1;
    Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
    var i = this.getIndex(ele, this.getTabs());
    if (i < 0)
      i = this.getIndex(ele, this.getContentPanels());
    return i;
    Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
    return this.currentTabIndex;
    Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
    return Math.min(this.getTabs().length, this.getContentPanels().length);
    Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
    try
      if (element.addEventListener)
       element.addEventListener(eventType, handler, capture);
      else if (element.attachEvent)
       element.attachEvent("on" + eventType, handler);
    catch (e) {}
    Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
    if (e.preventDefault) e.preventDefault();
    else e.returnValue = false;
    if (e.stopPropagation) e.stopPropagation();
    else e.cancelBubble = true;
    return false;
    Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
    this.showPanel(tab);
    return this.cancelEvent(e);
    Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
    this.addClassName(tab, this.tabHoverClass);
    return false;
    Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
    this.removeClassName(tab, this.tabHoverClass);
    return false;
    Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
    this.hasFocus = true;
    this.addClassName(tab, this.tabFocusedClass);
    return false;
    Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
    this.hasFocus = false;
    this.removeClassName(tab, this.tabFocusedClass);
    return false;
    Spry.Widget.TabbedPanels.KEY_UP = 38;
    Spry.Widget.TabbedPanels.KEY_DOWN = 40;
    Spry.Widget.TabbedPanels.KEY_LEFT = 37;
    Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
    Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
    var key = e.keyCode;
    if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
      return true;
    var tabs = this.getTabs();
    for (var i =0; i < tabs.length; i++)
      if (tabs[i] == tab)
       var el = false;
       if (key == this.previousPanelKeyCode && i > 0)
        el = tabs[i-1];
       else if (key == this.nextPanelKeyCode && i < tabs.length-1)
        el = tabs[i+1];
       if (el)
        this.showPanel(el);
        el.focus();
        break;
    return this.cancelEvent(e);
    Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
    var stopTraversal = false;
    if (root)
      stopTraversal = func(root);
      if (root.hasChildNodes())
       var child = root.firstChild;
       while (!stopTraversal && child)
        stopTraversal = this.preorderTraversal(child, func);
        try { child = child.nextSibling; } catch (e) { child = null; }
    return stopTraversal;
    Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
    var self = this;
    Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { self.onTabClick(e, tab);return self.onTabMouseOver(e, tab); }, false);
    Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
    if (this.enableKeyboardNavigation)
      // XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
      // rely on adding the tabindex attribute if it is missing to enable keyboard navigation
      // by default.
      // Find the first element within the tab container that has a tabindex or the first
      // anchor tag.
      var tabIndexEle = null;
      var tabAnchorEle = null;
      this.preorderTraversal(tab, function(node) {
       if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
        var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
        if (tabIndexAttr)
         tabIndexEle = node;
         return true;
        if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
         tabAnchorEle = node;
       return false;
      if (tabIndexEle)
       this.focusElement = tabIndexEle;
      else if (tabAnchorEle)
       this.focusElement = tabAnchorEle;
      if (this.focusElement)
       Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
       Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
       Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
    Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
    var tpIndex = -1;
    if (typeof elementOrIndex == "number")
      tpIndex = elementOrIndex;
    else // Must be the element for the tab or content panel.
      tpIndex = this.getTabIndex(elementOrIndex);
    if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
      return;
    var tabs = this.getTabs();
    var panels = this.getContentPanels();
    var numTabbedPanels = Math.max(tabs.length, panels.length);
    for (var i = 0; i < numTabbedPanels; i++)
      if (i != tpIndex)
       if (tabs[i])
        this.removeClassName(tabs[i], this.tabSelectedClass);
       if (panels[i])
        this.removeClassName(panels[i], this.panelVisibleClass);
        panels[i].style.display = "none";
    this.addClassName(tabs[tpIndex], this.tabSelectedClass);
    this.addClassName(panels[tpIndex], this.panelVisibleClass);
    panels[tpIndex].style.display = "block";
    this.currentTabIndex = tpIndex;
    Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
    var tabs = this.getTabs();
    var panels = this.getContentPanels();
    var panelCount = this.getTabbedPanelCount();
    for (var i = 0; i < panelCount; i++)
      this.addPanelEventListeners(tabs[i], panels[i]);
    this.showPanel(this.defaultTab);
    })(); // EndSpryComponent

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

  • Tabbed panels repeat region in cms displays 2nd item as a block of content

    Hi everyone, hope someone can help:
    I have a test page live
    http://aegmotorhomes.co.uk/usedtest1.php
    Problem is this-
    I have added a repeat region on my dreamweaver template
    I use Perch CMS as my management for staff to add new items for sale on this page
    I have built a tabbed panels to list the item
    On my CMS it allows me to press "add another" which then adds the tabbed panels again as a new item and the staff input the details
    My problem is the first item works perfect and all tabbs work fine, each item after that doesn't have tabbs and shows all content as one whole block
    I think it is to do with the ID and applies the java file only to item one, thats my guess.
    I have attached code below for my tabbed panels template, .js file and .css file - can anyone shed any light on this issue"
    TEMPLATE
    <style type="text/css">
    #container1 {
              width: 700px;
              background-color: #E6E6E6;
              border: .1em solid #999;
              padding-top: 5px;
              padding-right: 5px;
              padding-left: 5px;
              height: auto;
              margin-bottom: 30px;
    #item_description {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 1.3em;
              color: #333;
              background-color: #FFF;
              height: 30px;
              border-bottom-width: .1em;
              border-bottom-style: dotted;
              border-bottom-color: #333;
              font-weight: bold;
              margin-bottom: 10px;
    #price {
              margin-top: 5px;
              float: right;
              width: 150px;
              background-color: #EAEAEA;
              border: 0.1em solid #CCC;
    .BOLDTEXT {
              font-weight: bold;
              text-align: center;
              color: #FFF;
    .BOLDTEXT_PRICE {
              color: #333;
    #engine_spec {
              float: left;
              width: 190px;
              font-family: Arial, Helvetica, sans-serif;
              font-size: .75em;
              border-top-style: none;
              border-right-style: none;
              border-bottom-style: none;
              border-left-style: none;
    #top_price {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 1.2em;
              color: #099;
              float: right;
              width: 150px;
              font-weight: bold;
              text-align: right;
    #top_price {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 1.4em;
              color: #099;
    #overview_picture {
              height: 150px;
              width: 200px;
              background-color: #CCC;
              float: left;
              margin-right: 10px;
              margin-top: 5px;
    .BOLDTEXT_blackprice {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 1.4em;
              color: #099;
    #smallprint {
              font-family: Arial, Helvetica, sans-serif;
              font-size: .5em;
              color: #666;
              margin-top: 2px;
    table tr td {
              font-size: 0.75em;
              font-family: Arial, Helvetica, sans-serif;
    .specwhite {
              color: #FFF;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 1em;
              font-weight: bold;
    #reserve {
              font-family: Arial, Helvetica, sans-serif;
              font-size: 1.2em;
              font-weight: bold;
              color: #FFF;
              background-color: #099;
              width: 140px;
              float: right;
              margin-top: 10px;
              padding: 5px;
              text-align: center;
              border: .1em solid #999;
    </style>
    <script src="../../../../SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
    <link href="../../../../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    <div id="container1">
      <div id="TabbedPanels1" class="TabbedPanels">
        <ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab" tabindex="0">Overview</li>
          <li class="TabbedPanelsTab" tabindex="0">Description</li>
          <li class="TabbedPanelsTab" tabindex="0">Images</li>
          <li class="TabbedPanelsTab" tabindex="0">Specification</li>
        </ul>
        <div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">
            <div id="item_description"><perch:content id="Title1" label="Title" type="text" />
              <div id="top_price">£<perch:content id="Title2" label="Top Price" type="text" /></div>
            </div>
            <div id="overview_picture"><img src="<perch:content id="photo" label="Photo" type="image" />" class="photo" /></div>
            <div class="engine_spec" id="engine_spec">
              <table width="100%" border="0" cellpadding="5" cellspacing="7">
                <tr>
                  <td width="35%" bgcolor="#EAEAEA">Year of Make</td>
                  <td width="65%" bgcolor="#999999"><strong class="spec_white"><span class="engine_spec"><span class="specwhite"><perch:content id="Title3" label="Year" type="text" /></span></span></strong></td>
                </tr>
                <tr>
                  <td bgcolor="#EAEAEA">Current Miles</td>
                  <td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title4" label="Mileage" type="text" /></span></td>
                </tr>
                <tr>
                  <td bgcolor="#EAEAEA">Engine Size</td>
                  <td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title5" label="Engine" type="text" /></span></td>
                </tr>
                <tr>
                  <td bgcolor="#EAEAEA">Body Colour</td>
                  <td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title6" label="Colour" type="text" /></span></td>
                </tr>
                <tr>
                  <td bgcolor="#EAEAEA">Transmission</td>
                  <td bgcolor="#999999" class="spec_white"><span class="specwhite"><perch:content id="Title7" label="Transmission" type="text" /></span></td>
                </tr>
              </table>
            </div>
            <div id="price">
              <table width="150" border="0" cellspacing="9">
                <tr>
                  <td width="50" height="25" bgcolor="#999999" class="BOLDTEXT">WAS</td>
                  <td width="81" class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title8" label="Old Price" type="text" /></span></td>
                </tr>
                <tr>
                  <td height="25" bgcolor="#999999" class="BOLDTEXT">NOW</td>
                  <td class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title9" label="New Price" type="text" /></span></td>
                </tr>
                <tr>
                  <td height="25" bgcolor="#999999" class="BOLDTEXT">SAVE</td>
                  <td class="BOLDTEXT"><span class="BOLDTEXT_blackprice">£<perch:content id="Title9a" label="Save" type="text" /></span></td>
                </tr>
              </table>
            </div>
            <div id="reserve">Reserve Motorhome</div>
          </div>
          <div class="TabbedPanelsContent"><perch:content id="Text" label="Description" type="textarea" editor="ckeditor" html="true" /></div>
          <div class="TabbedPanelsContent"><table width="650" cellspacing="5">
      <tr>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
      </tr>
      <tr>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
      </tr>
      <tr>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
      </tr>
      <tr>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
      </tr>
      <tr>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
        <td width="106" height="80" bgcolor="#CCCCCC"> </td>
      </tr>
    </table></div>
          <div class="TabbedPanelsContent"><perch:content id="Text1" label="Specification" type="textarea" editor="ckeditor" html="true" /></div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    .JS file
    (function() { // BeginSpryComponent
    if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
    Spry.Widget.TabbedPanels = function(element, opts)
              this.element = this.getElement(element);
              this.defaultTab = 0; // Show the first panel by default.
              this.tabSelectedClass = "TabbedPanelsTabSelected";
              this.tabHoverClass = "TabbedPanelsTabHover";
              this.tabFocusedClass = "TabbedPanelsTabFocused";
              this.panelVisibleClass = "TabbedPanelsContentVisible";
              this.focusElement = null;
              this.hasFocus = false;
              this.currentTabIndex = 0;
              this.enableKeyboardNavigation = true;
              this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
              this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
              Spry.Widget.TabbedPanels.setOptions(this, opts);
              // If the defaultTab is expressed as a number/index, convert
              // it to an element.
              if (typeof (this.defaultTab) == "number")
                        if (this.defaultTab < 0)
                                  this.defaultTab = 0;
                        else
                                  var count = this.getTabbedPanelCount();
                                  if (this.defaultTab >= count)
                                            this.defaultTab = (count > 1) ? (count - 1) : 0;
                        this.defaultTab = this.getTabs()[this.defaultTab];
              // The defaultTab property is supposed to be the tab element for the tab content
              // to show by default. The caller is allowed to pass in the element itself or the
              // element's id, so we need to convert the current value to an element if necessary.
              if (this.defaultTab)
                        this.defaultTab = this.getElement(this.defaultTab);
              this.attachBehaviors();
    Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
              if (ele && typeof ele == "string")
                        return document.getElementById(ele);
              return ele;
    Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
              var children = [];
              var child = element.firstChild;
              while (child)
                        if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
                                  children.push(child);
                        child = child.nextSibling;
              return children;
    Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
              if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
                        return;
              ele.className += (ele.className ? " " : "") + className;
    Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
              if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
                        return;
              ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
    Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
              if (!optionsObj)
                        return;
              for (var optionName in optionsObj)
                        if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
                                  continue;
                        obj[optionName] = optionsObj[optionName];
    Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
              if (this.element)
                        var children = this.getElementChildren(this.element);
                        if (children.length)
                                  return children[0];
              return null;
    Spry.Widget.TabbedPanels.prototype.getTabs = function()
              var tabs = [];
              var tg = this.getTabGroup();
              if (tg)
                        tabs = this.getElementChildren(tg);
              return tabs;
    Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
              if (this.element)
                        var children = this.getElementChildren(this.element);
                        if (children.length > 1)
                                  return children[1];
              return null;
    Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
              var panels = [];
              var pg = this.getContentPanelGroup();
              if (pg)
                        panels = this.getElementChildren(pg);
              return panels;
    Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
              ele = this.getElement(ele);
              if (ele && arr && arr.length)
                        for (var i = 0; i < arr.length; i++)
                                  if (ele == arr[i])
                                            return i;
              return -1;
    Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
              var i = this.getIndex(ele, this.getTabs());
              if (i < 0)
                        i = this.getIndex(ele, this.getContentPanels());
              return i;
    Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
              return this.currentTabIndex;
    Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
              return Math.min(this.getTabs().length, this.getContentPanels().length);
    Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
              try
                        if (element.addEventListener)
                                  element.addEventListener(eventType, handler, capture);
                        else if (element.attachEvent)
                                  element.attachEvent("on" + eventType, handler);
              catch (e) {}
    Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
              if (e.preventDefault) e.preventDefault();
              else e.returnValue = false;
              if (e.stopPropagation) e.stopPropagation();
              else e.cancelBubble = true;
              return false;
    Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
              this.showPanel(tab);
              return this.cancelEvent(e);
    Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
              this.addClassName(tab, this.tabHoverClass);
              return false;
    Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
              this.removeClassName(tab, this.tabHoverClass);
              return false;
    Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
              this.hasFocus = true;
              this.addClassName(tab, this.tabFocusedClass);
              return false;
    Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
              this.hasFocus = false;
              this.removeClassName(tab, this.tabFocusedClass);
              return false;
    Spry.Widget.TabbedPanels.KEY_UP = 38;
    Spry.Widget.TabbedPanels.KEY_DOWN = 40;
    Spry.Widget.TabbedPanels.KEY_LEFT = 37;
    Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
    Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
              var key = e.keyCode;
              if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
                        return true;
              var tabs = this.getTabs();
              for (var i =0; i < tabs.length; i++)
                        if (tabs[i] == tab)
                                  var el = false;
                                  if (key == this.previousPanelKeyCode && i > 0)
                                            el = tabs[i-1];
                                  else if (key == this.nextPanelKeyCode && i < tabs.length-1)
                                            el = tabs[i+1];
                                  if (el)
                                            this.showPanel(el);
                                            el.focus();
                                            break;
              return this.cancelEvent(e);
    Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
              var stopTraversal = false;
              if (root)
                        stopTraversal = func(root);
                        if (root.hasChildNodes())
                                  var child = root.firstChild;
                                  while (!stopTraversal && child)
                                            stopTraversal = this.preorderTraversal(child, func);
                                            try { child = child.nextSibling; } catch (e) { child = null; }
              return stopTraversal;
    Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
              var self = this;
              Spry.Widget.TabbedPanels.addEventListener(tab, "click", function(e) { return self.onTabClick(e, tab); }, false);
              Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e, tab); }, false);
              Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
              if (this.enableKeyboardNavigation)
                        // XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
                        // rely on adding the tabindex attribute if it is missing to enable keyboard navigation
                        // by default.
                        // Find the first element within the tab container that has a tabindex or the first
                        // anchor tag.
                        var tabIndexEle = null;
                        var tabAnchorEle = null;
                        this.preorderTraversal(tab, function(node) {
                                  if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
                                            var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
                                            if (tabIndexAttr)
                                                      tabIndexEle = node;
                                                      return true;
                                            if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
                                                      tabAnchorEle = node;
                                  return false;
                        if (tabIndexEle)
                                  this.focusElement = tabIndexEle;
                        else if (tabAnchorEle)
                                  this.focusElement = tabAnchorEle;
                        if (this.focusElement)
                                  Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
                                  Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
                                  Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
    Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
              var tpIndex = -1;
              if (typeof elementOrIndex == "number")
                        tpIndex = elementOrIndex;
              else // Must be the element for the tab or content panel.
                        tpIndex = this.getTabIndex(elementOrIndex);
              if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
                        return;
              var tabs = this.getTabs();
              var panels = this.getContentPanels();
              var numTabbedPanels = Math.max(tabs.length, panels.length);
              for (var i = 0; i < numTabbedPanels; i++)
                        if (i != tpIndex)
                                  if (tabs[i])
                                            this.removeClassName(tabs[i], this.tabSelectedClass);
                                  if (panels[i])
                                            this.removeClassName(panels[i], this.panelVisibleClass);
                                            panels[i].style.display = "none";
              this.addClassName(tabs[tpIndex], this.tabSelectedClass);
              this.addClassName(panels[tpIndex], this.panelVisibleClass);
              panels[tpIndex].style.display = "block";
              this.currentTabIndex = tpIndex;
    Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
              var tabs = this.getTabs();
              var panels = this.getContentPanels();
              var panelCount = this.getTabbedPanelCount();
              for (var i = 0; i < panelCount; i++)
                        this.addPanelEventListeners(tabs[i], panels[i]);
              this.showPanel(this.defaultTab);
    })(); // EndSpryComponent
    >CSS file
    @charset "UTF-8";
    /* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* Horizontal Tabbed Panels
    * The default style for a TabbedPanels widget places all tab buttons
    * (left aligned) above the content panel.
    /* This is the selector for the main TabbedPanels container. For our
    * default style, this container does not contribute anything visually,
    * but it is floated left to make sure that any floating or clearing done
    * with any of its child elements are contained completely within the
    * TabbedPanels container, to minimize any impact or undesireable
    * interaction with other floated elements on the page that may be used
    * for layout.
    * If you want to constrain the width of the TabbedPanels widget, set a
    * width on the TabbedPanels container. By default, the TabbedPanels widget
    * expands horizontally to fill up available space.
    * The name of the class ("TabbedPanels") used in this selector is not
    * necessary to make the widget function. You can use any class name you
    * want to style the TabbedPanels container.
    .TabbedPanels {
              overflow: hidden;
              margin: 0px;
              padding: 0px;
              clear: none;
              width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    /* This is the selector for the TabGroup. The TabGroup container houses
    * all of the tab buttons for each tabbed panel in the widget. This container
    * does not contribute anything visually to the look of the widget for our
    * default style.
    * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
    * necessary to make the widget function. You can use any class name you
    * want to style the TabGroup container.
    .TabbedPanelsTabGroup {
              margin: 0px;
              padding: 0px;
    /* This is the selector for the TabbedPanelsTab. This container houses
    * the title for the panel. This is also the tab "button" that the user clicks
    * on to activate the corresponding content panel so that it appears on top
    * of the other tabbed panels contained in the widget.
    * For our default style, each tab is positioned relatively 1 pixel down from
    * where it wold normally render. This allows each tab to overlap the content
    * panel that renders below it. Each tab is rendered with a 1 pixel bottom
    * border that has a color that matches the top border of the current content
    * panel. This gives the appearance that the tab is being drawn behind the
    * content panel.
    * The name of the class ("TabbedPanelsTab") used in this selector is not
    * necessary to make the widget function. You can use any class name you want
    * to style this tab container.
    .TabbedPanelsTab {
              position: relative;
              top: 1px;
              float: left;
              background-color: #DDD;
              list-style: none;
              -moz-user-select: none;
              -khtml-user-select: none;
              cursor: pointer;
              font-family: sans-serif;
              font-size: small;
              font-weight: bold;
              margin-top: 0px;
              margin-right: 1px;
              margin-bottom: 0px;
              margin-left: 0px;
              padding-top: 4px;
              padding-right: 10px;
              padding-left: 10px;
              padding-bottom: 4px;
    /* This selector is an example of how to change the appearnce of a tab button
    * container as the mouse enters it. The class "TabbedPanelsTabHover" is
    * programatically added and removed from the tab element as the mouse enters
    * and exits the container.
    .TabbedPanelsTabHover {
              background-color: #CCC;
    /* This selector is an example of how to change the appearance of a tab button
    * container after the user has clicked on it to activate a content panel.
    * The class "TabbedPanelsTabSelected" is programatically added and removed
    * from the tab element as the user clicks on the tab button containers in
    * the widget.
    * As mentioned above, for our default style, tab buttons are positioned
    * 1 pixel down from where it would normally render. When the tab button is
    * selected, we change its bottom border to match the background color of the
    * content panel so that it looks like the tab is part of the content panel.
    .TabbedPanelsTabSelected {
              background-color: #FFF;
              color: #333;
              border-top-color: fff;
              border-right-color: fff;
              border-bottom-color: fff;
              border-left-color: fff;
              border-color: fff;
              outline-color: fff;
    /* This selector is an example of how to make a link inside of a tab button
    * look like normal text. Users may want to use links inside of a tab button
    * so that when it gets focus, the text *inside* the tab button gets a focus
    * ring around it, instead of the focus ring around the entire tab.
    .TabbedPanelsTab a {
              color: black;
              text-decoration: none;
    /* This is the selector for the ContentGroup. The ContentGroup container houses
    * all of the content panels for each tabbed panel in the widget. For our
    * default style, this container provides the background color and borders that
    * surround the content.
    * The name of the class ("TabbedPanelsContentGroup") used in this selector is
    * not necessary to make the widget function. You can use any class name you
    * want to style the ContentGroup container.
    .TabbedPanelsContentGroup {
              clear: both;
              background-color: #F9F9F1;
              height: auto;
              margin-bottom: 3px;
              border: .1px solid #999;
    /* This is the selector for the Content panel. The Content panel holds the
    * content for a single tabbed panel. For our default style, this container
    * provides some padding, so that the content is not pushed up against the
    * widget borders.
    * The name of the class ("TabbedPanelsContent") used in this selector is
    * not necessary to make the widget function. You can use any class name you
    * want to style the Content container.
    .TabbedPanelsContent {
              overflow: hidden;
              padding: 4px;
    /* This selector is an example of how to change the appearnce of the currently
    * active container panel. The class "TabbedPanelsContentVisible" is
    * programatically added and removed from the content element as the panel
    * is activated/deactivated.
    .TabbedPanelsContentVisible {
              background-color: #FFF;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 0.75em;
              color: #333;
              padding: 20px;
              clear: both;
              margin-bottom: 5px;
              height: auto;
    /* Vertical Tabbed Panels
    * The following rules override some of the default rules above so that the
    * TabbedPanels widget renders with its tab buttons along the left side of
    * the currently active content panel.
    * With the rules defined below, the only change that will have to be made
    * to switch a horizontal tabbed panels widget to a vertical tabbed panels
    * widget, is to use the "VTabbedPanels" class on the top-level widget
    * container element, instead of "TabbedPanels".
    .VTabbedPanels {
              overflow: hidden;
              zoom: 1;
    /* This selector floats the TabGroup so that the tab buttons it contains
    * render to the left of the active content panel. A border is drawn around
    * the group container to make it look like a list container.
    .VTabbedPanels .TabbedPanelsTabGroup {
              float: left;
              width: 10em;
              height: 20em;
              background-color: #EEE;
              position: relative;
              border-top: solid 1px #999;
              border-right: solid 1px #999;
              border-left: solid 1px #CCC;
              border-bottom: solid 1px #CCC;
    /* This selector disables the float property that is placed on each tab button
    * by the default TabbedPanelsTab selector rule above. It also draws a bottom
    * border for the tab. The tab button will get its left and right border from
    * the TabGroup, and its top border from the TabGroup or tab button above it.
    .VTabbedPanels .TabbedPanelsTab {
              float: none;
              margin: 0px;
              border-top: none;
              border-left: none;
              border-right: none;
    /* This selector disables the float property that is placed on each tab button
    * by the default TabbedPanelsTab selector rule above. It also draws a bottom
    * border for the tab. The tab button will get its left and right border from
    * the TabGroup, and its top border from the TabGroup or tab button above it.
    .VTabbedPanels .TabbedPanelsTabSelected {
              background-color: #EEE;
              border-bottom: solid 1px #999;
    /* This selector floats the content panels for the widget so that they
    * render to the right of the tabbed buttons.
    .VTabbedPanels .TabbedPanelsContentGroup {
              clear: none;
              float: left;
              padding: 0px;
              width: 30em;
              height: 20em;
    /* Styles for Printing */
    @media print {
    .TabbedPanels {
              overflow: visible !important;
    .TabbedPanelsContentGroup {
              display: block !important;
              overflow: visible !important;
              height: auto !important;
    .TabbedPanelsContent {
              overflow: visible !important;
              display: block !important;
              clear:both !important;
    .TabbedPanelsTab {
              overflow: visible !important;
              display: block !important;
              clear:none !important;
              height: 100%;
    #TabbedPanels1 {
              height: auto;
              padding-top: 5px;
              background-color: #EAEAEA;
              width: 700px;
    I did read this but don't know where to start: http://www.webdevforums.com/showthread.php?27428-Dreamweaver-spry-collapsible-panel-amp-re peating-regions
    Can anybody HELP PLEASE PLEASE

    I think I counted three tabbed panels in the markup, each with an ID of TabbedPanels1
    You have only one constructor that makes one instance of the tabeed panels with an ID of TabbedPanels1
    There are a couple of things that create the problem.
    There can only be one ID with the same name in a document, thus the ID's of the TabbedPanels will need to change from TabbedPanels1 for the second and third instances to TabbedPanels2 and TabbedPanels3 (or similar) respectively.
    There needs to be a constructor for each tabbed panels like
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
    var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3");
    Gramps

  • Photoshop CS4 CRASH on using Flash Panel from SDK examples

    Hi!
    I'm trying to create a panel using Flex, flash and javascript. But I cannot finish tutorials - they all CRASH photoshop with almost the same code in init() function when using CSXSInterface.** functions.
    When I comment those ones, it's all ok (the script loses functionality, but panels don't crash).
    For example this code
    CSXSInterface.instance.evalScript("PhotoshopRegisterEvent", charToInteger("setd").toString());
    crashes my Photoshop CS4.
    What's wrong? AIR logger doesn' say anything.
    Thank you!
    Anastasiy Safari

    I have exactly the same problem. Can anybody put some light on this issue?
    Regards
    Bartek

  • Using a dll function that does not have any inputs from a VI

    Hello all, I'm very new to Labview, I have wraped a dll library using the LVlib wizard and now I am trying to use it in a project.  I have a function that does not take any inputs or return any thing except that a struct is populated with some status information as part of the call.  I am able to draw a StartInterface VI because my void startInterface(const char* configFile, struct status_struct* status) takes the location of a configutation file as an input. But I can not figure out how to connect my Call Library Node to my a function vi that does not have any inputs ( void shutdownInterface(struct status_struct* status)). 
    Note that the status struct is deffined to be only and out put at the creation of the LVLIB.
    Thanks, Mike

    Thanks for the responses guys:
       I think I am aware of the conotations of inputs and outputs when I created the lvlib I specified the argument  struct status_struct* status as only an output instead of the default of input and output.
    I do not think that I am doing anything as complex as function callbacks. My immediate goal is to have an executable (I have application builder) with two buttons and two three text fields one text field for the input of the config file, two text-fields for a cstring that is contained in the status struct; one button to start the interface and one button to stop the interface. 
    This is in all likely hood a case of my self being too dense and missing something fundimental ;-)  I just can't figure out how to wire the shut down method after I've configured the call library node. See the attached pictures:
    Attachments:
    Start.jpg ‏7 KB
    shurtdown.png ‏9 KB

Maybe you are looking for