Iframe doesnt show up in collapsible panel

I have put a google calendar on a iframe I want to present on
a collapsible panel. The Iframe doesent show up on firefox when the
default state of the panel is closed. it works in Safari. Both on
OS X. There is an errormessage from Fireworks pasted below.
Is there a way to get the panel to work proper with this
Iframecontent?
This works:
http://www.nuna.no/fabrikken/colpanel_spry_open.html
This doesent:
http://www.nuna.no/fabrikken/colpanel_spry_closed.html
quote:
uncaught exception: [Exception... "Component returned failure
code: 0x80004005 (NS_ERROR_FAILURE)
[nsIDOMNSDocument.getBoxObjectFor]" nsresult: "0x80004005
(NS_ERROR_FAILURE)" location: "JS frame ::
http://www.google.com/calendar/d003e2eff7c42eebf779ecbd527f1fe0embedcompiled__no.js
:: anonymous :: line 134" data: no]
[Break on this error] undefined
[Exception... "Component returned failure code: 0x80004005
(NS_ERROR_FAILURE) [nsIDOMNSDocument.getBoxObjectFor]" nsresult:
"0x80004005 (NS_ERROR_FAILURE)" location: "JS frame ::
http://www.google.com/calendar/d003e2eff7c42eebf779ecbd527f1fe0embedcompiled__no.js
:: anonymous :: line 134" data: no]

Yes I meant to writethat the errormessages was from Firefox,
not Fireworks.
The iframe with the googlekalendar works with both tabbed
panel and accordion. i dont have Blinds in the de insert menu, but
I will try later. Anyway, its the collapsible panel I need to use
because its saves place. ..But so does tha tabbs. I will experiment
som more with this exiting Sprys. Thnks V1 Fusion :)

Similar Messages

  • Collapsible Panels - Links to open one, and close others

    Hi,
    I am new to Dreamweaver and have been creating my site by
    learning as I go along. I have already read through all the other
    related topics associated with Collapsible Panels on this blog and
    have still not found an answer. I have been able to open and close
    Collapsible Panels by using links - but unfortunately, I need more
    than just opening and closing.
    On my site i have approximately 5 pages, all with the same
    header and Menu bar. The Information (that i have presented in
    numerous Collapsible Panels) does however vary from page to page.
    What I need to try and figure out is:
    How can I open one collapsible panel and close all others? I
    have seen the one example which leads to my next question:
    How can I group Panels? Some examples of how to open one and
    close all others use this grouping. Is there any other way of
    opening one and closing all others without grouping?
    Lastly, is it possible to set up a link that can be viewed on
    one page which when clicked opens the relevant page and collapsible
    panel? i.e. on my About Us page there is a link (using the Menu
    bar) for one of my several services on the services drop down menu
    (but services is on a different page with the same setup). When a
    viewer clicks on the specific service, is it possible to get the
    site to open the services page, and open the relevant collapsible
    panel (with all other Panels closed)?
    Any assistance would be greatly appreciated - I have been
    searching for days now and cannot seem to find any
    answers/directions in laymans terms.
    Kind regards,
    John

    wlsjoh013 wrote:
    > Hi,
    >
    > I am new to Dreamweaver and have been creating my site
    by learning as I go
    > along. I have already read through all the other related
    topics associated
    > with Collapsible Panels on this blog and have still not
    found an answer. I
    > have been able to open and close Collapsible Panels by
    using links - but
    > unfortunately, I need more than just opening and
    closing.
    >
    > On my site i have approximately 5 pages, all with the
    same header and Menu
    > bar. The Information (that i have presented in numerous
    Collapsible Panels)
    > does however vary from page to page. What I need to try
    and figure out is:
    >
    > How can I open one collapsible panel and close all
    others? I have seen the one
    > example which leads to my next question:
    This page has an example that has a link that can open and
    close a panel:
    http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. htm
    One way to do this would be to have a single link that would
    open one of your panels using the code, but then add to it code
    that closes each of the other panels, for example:
    <a href="#"
    onclick="CollapsiblePanel4.open();CollapsiblePanel5.close();CollapsiblePanel6.close();">O pen
    4, close 5 and 6</a>
    To make this work, you'll need to look that the panel
    constructors at the bottom of your page and make sure to match up
    the panel variable names i.e. "var CollapsiblePanel1 =...." the
    variable is CollapsiblePanel1.
    You could also write a function that gathers together the
    various panels you have on the page and then pass to it only the
    panel that you want kept open. For now, though, it might be best to
    use the above method, given your expertise. And taking that even
    further, you could apply the function call unobtrusively. Both the
    function call and the unobtrusive part you can work on later to get
    this working for now.
    > How can I group Panels? Some examples of how to open one
    and close all others
    > use this grouping. Is there any other way of opening one
    and closing all
    > others without grouping?
    This is a little confusing, on one hand you ask about how to
    group, but then ask how not to group. There is a concept of a
    collapsible panel group:
    http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
    But there is another type of group, that may be more what
    you're looking for, and that's an Accordion panel, which is similar
    to the collapsible panel group, with the exception that it can only
    have one panel open at a time.
    > Lastly, is it possible to set up a link that can be
    viewed on one page which
    > when clicked opens the relevant page and collapsible
    panel? i.e. on my About Us
    > page there is a link (using the Menu bar) for one of my
    several services on the
    > services drop down menu (but services is on a different
    page with the same
    > setup). When a viewer clicks on the specific service, is
    it possible to get
    > the site to open the services page, and open the
    relevant collapsible panel
    > (with all other Panels closed)?
    Probably the easiest way to do this particular one would be
    to make sure that you have all of the panels set to be closed when
    the page loads, and then take a look at the code for the last
    example on this page:
    http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html
    That example uses a tabbed panel, but the concept is the
    same, use a URL parameter to determine what to show. You'll need to
    link in the SpryURLUtils file in the Spry download package (look in
    the includes folder):
    http://labs.adobe.com/technologies/spry/home.html
    Essentially, your link will look similar to:
    sample.html?panel=1
    Then your code could look something like:
    var params = Spry.Utils.getLocationParamsAsObject();
    var CollapsiblePanel1 = new
    Spry.Widget.CollapsiblePanel("CollapsiblePanel1",
    {contentIsOpen:(params.panel==1 )} );
    var CollapsiblePanel2 = new
    Spry.Widget.CollapsiblePanel("CollapsiblePanel2",
    {contentIsOpen:(params.panel==2 )} );
    Basically what this is doing is creating an object from the
    URL parameters. Then for each of the panels the constructor has
    code that determines whether or not to expand the panel when the
    page loads. So it checks the value of params.panel to see if it
    matches 1 (for the first one), if it does, then that means that
    contentIsOpen is set to true, if it is some other number or is not
    present at all, then that means that the panel is closed. This
    would then be repeated down the line for how ever many panels you
    want to operate like that.
    Danilo Celic
    |
    http://blog.extensioneering.com/
    | WebAssist Extensioneer
    | Adobe Community Expert

  • Google map inside the spry collapsible panel

    So this time I've bumped into interesting 'bug'. I've placed the google map inside the spry collapsible panel. Panel is set to the closed mode on load of page. When I open the tab, map appears, but address marker is hidden behind the top left corner. If I place the same map outside the collapsiple panel it renders all well.
    So my  question is whether there is any way around this issue. When I know where the marker is hidden I can simply move the map and see it, but customer who's not aware of the problem will see only blank map with not marked address which is not acceptable.
    cheers,
    Simon

    Sure mate. Here you go:
    <div id="CollapsiblePanel1" class="CollapsiblePanel">
                  <div class="CollapsiblePanelTab" tabindex="0">SHOW MAP</div>
                  <div class="CollapsiblePanelContent">
                  <cfmap  width="242" height="200" zoomlevel="12" name="mainMap" markercolor="333444" showscale="false"
    typecontrol="none"  showcentermarker="true" centeraddress="#get_event.event_address1#, #get_event.event_address2#, #get_event.event_city#,#get_event.event_county#, #get_event.event_postcode#, #get_event.event_country#  "
    ></cfmap>
                  </div>
                </div>
    And this bit goes at the bottom of the code :
    <script type="text/javascript">
    var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
      </script>
    And that would be the preview that I get once the panel is open:
    And that is the preview of how it should look:
    As you can see the map marker sticks to the top left corner. I was wondering whether there is any way to re-focus it once the panel is open.
    cheers,
    Simon

  • Why is my Spry Collapsible Panel not working in IE

    I have created a very very simple website, in dutch (i'm dutch). http://www.dgvastgoed.nl
    And on the 'projecten' (dutch word for projects) page i've made some collapsible panels.
    The picture is only showing when you click on the text once, when you click again the picture disappears, that's what i want.
    But in Internet Explorer it always shows, and that's not what i want.
    How do I get this right in Internet explorer?
    (if it's possible a second question: How do i get on the 'werkzaamheden' page the 3 links in the top left corner on the position like they are in safari and firefox.)

    It lookslike you fixed it, it works fine in IE7 and 8

  • Spry Collapsible Panel Problem in Safari

    When check my site in Firefox, there are no problems, but
    when I open it in Safari, none of the CSS settings are applied to
    the Collapsible Panel widget. Some settings I have make the widget
    200 px width and make it have a black background, but Safari
    doesn't show these. HERE IS THE CODE OF MY HOMEPAGE:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN" "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="
    http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html;
    charset=UTF-8" />
    <style type="text/css">
    body {
    background: url(Victorias%20Secret%20models.jpg) fixed
    no-repeat center bottom;
    </style>
    <script src="SpryAssets/SpryCollapsiblePanel.js"
    type="text/javascript"></script>
    <link href="SpryAssets/SpryCollapsiblePanel.css"
    rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="CollapsiblePanel1" class="CollapsiblePanel">
    <div class="CollapsiblePanelTab"
    tabindex="0"></div>
    <div class="CollapsiblePanelContent">
    <p>BLOG</p>
    <p>LISTEN</p>
    <p>WATCH</p>
    <p>ABOUT</p>
    </div>
    </div>
    <script type="text/javascript">
    var CollapsiblePanel1 = new
    Spry.Widget.CollapsiblePanel("CollapsiblePanel1",
    {contentIsOpen:false});
    </script>
    </body>
    </html>
    AND HERE IS THE CODE OF MY CSS
    @charset "UTF-8";
    .CollapsiblePanel {
    margin: 0px;
    padding: 0px;
    width: 200px;
    color: #FFFFFF;
    background-color: #000000;
    .CollapsiblePanelTab {
    background-color: #000000;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    font-family: sans-serif;
    font-size: 0.7em;
    font-weight: bold;
    color: #FFFFFF;
    height: 40px;
    .CollapsiblePanelContent {
    margin: 0px;
    padding: 0px;
    background-color: #000;
    .CollapsiblePanelTab a {
    color: black;
    text-decoration: none;
    background-color: #000;
    height: 40px;
    .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-color: #000;
    color: #FFFFFF;
    .CollapsiblePanelTabHover, .CollapsiblePanelOpen
    .CollapsiblePanelTabHover {
    background-color: #000;
    .CollapsiblePanelFocused .CollapsiblePanelTab {
    background-color: #000;
    THANKS FOR YOUR HELP

    Can't tell by that code, can you post a URL to the page?
    Ken Ford
    Adobe Community Expert - Dreamweaver/ColdFusion
    Fordwebs, LLC
    http://www.fordwebs.com
    "kkaiser1" <[email protected]> wrote in
    message news:[email protected]...
    > When check my site in Firefox, there are no problems,
    but when I open it in
    > Safari, none of the CSS settings are applied to the
    Collapsible Panel widget.
    > Some settings I have make the widget 200 px width and
    make it have a black
    > background, but Safari doesn't show these. HERE IS THE
    CODE OF MY HOMEPAGE:
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    Transitional//EN"
    > "
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > <html xmlns="
    http://www.w3.org/1999/xhtml">
    > <head>
    >
    > <title>Untitled Document</title>
    >
    > <meta http-equiv="Content-Type" content="text/html;
    charset=UTF-8" />
    > <style type="text/css">
    >
    > body {
    > background: url(Victorias%20Secret%20models.jpg) fixed
    no-repeat center
    > bottom;
    > }
    >
    > </style>
    > <script src="SpryAssets/SpryCollapsiblePanel.js"
    > type="text/javascript"></script>
    > <link href="SpryAssets/SpryCollapsiblePanel.css"
    rel="stylesheet"
    > type="text/css" />
    > </head>
    > <body>
    > <div id="CollapsiblePanel1"
    class="CollapsiblePanel">
    > <div class="CollapsiblePanelTab"
    tabindex="0"></div>
    > <div class="CollapsiblePanelContent">
    > <p>BLOG</p>
    > <p>LISTEN</p>
    > <p>WATCH</p>
    > <p>ABOUT</p>
    > </div>
    > </div>
    > <script type="text/javascript">
    >
    > var CollapsiblePanel1 = new
    Spry.Widget.CollapsiblePanel("CollapsiblePanel1",
    > {contentIsOpen:false});
    >
    > </script>
    > </body>
    > </html>
    >
    >
    > AND HERE IS THE CODE OF MY CSS
    >
    > @charset "UTF-8";
    >
    > .CollapsiblePanel {
    > margin: 0px;
    > padding: 0px;
    > width: 200px;
    > color: #FFFFFF;
    > background-color: #000000;
    > }
    >
    > .CollapsiblePanelTab {
    > background-color: #000000;
    > margin: 0px;
    > padding: 0px;
    > cursor: pointer;
    > -moz-user-select: none;
    > -khtml-user-select: none;
    > font-family: sans-serif;
    > font-size: 0.7em;
    > font-weight: bold;
    > color: #FFFFFF;
    > height: 40px;
    > }
    >
    > .CollapsiblePanelContent {
    > margin: 0px;
    > padding: 0px;
    > background-color: #000;
    > }
    >
    > .CollapsiblePanelTab a {
    > color: black;
    > text-decoration: none;
    > background-color: #000;
    > height: 40px;
    > }
    >
    > .CollapsiblePanelOpen .CollapsiblePanelTab {
    > background-color: #000;
    > color: #FFFFFF;
    > }
    >
    > .CollapsiblePanelTabHover, .CollapsiblePanelOpen
    .CollapsiblePanelTabHover {
    > background-color: #000;
    > }
    >
    > .CollapsiblePanelFocused .CollapsiblePanelTab {
    > background-color: #000;
    > }
    >
    >
    > THANKS FOR YOUR HELP
    >

  • Spry collapsible panel with spry data

    I have created a spry collapsible panel and wanted to put
    srpy data in it, to dynamically load.
    i also want to hide the entire panel if no data is available.
    It will show the data, but the click to open/close does not
    work.
    here is the code.

    I have made some progress, thanks, however im still getting
    some odd formatting issues, for example, the 1st panel shows with
    different design to the rest of the panels.
    this is my code;
    <div id="region" spry:region="ds1">
    <div id="repeat" spry:repeat="ds1">
    <div id="CollapsiblePanel{ds_RowID}"
    class="CollapsiblePanel">
    <div class="CollapsiblePanelTab"
    tabindex="{ds1::ds_RowID}"> <h1>{title} - last amended
    {amended}</h1></div>
    <div
    class="CollapsiblePanelContent"><strong>{message}</strong>
    Added by <strong>{owner}</strong> on
    <strong>{added} </strong>(REF:
    <strong>{id}</strong>) <a href="/service/index.asp"
    target="_self">View full details</a></div>
    </div>
    <script type="text/javascript">
    <!--
    var CollapsiblePanel{ds_RowID} = new
    Spry.Widget.CollapsiblePanel("CollapsiblePanel{ds_RowID}");
    //-->
    </script>
    As you can see, I am inserting {ds_RowID} in the variable
    name, in order for the panels to operate independantly, however
    have I coded it correctly?

  • Spry Collapsible Panel Problem with Safari

    Hi my Spry Collapsible Panel looks great in Firefox, Camino, and IE, but the top border, which I am using as a line to divide items in the list, and which I have specified in the CSS page, doesn't show up in Safari and Google Chrome.  Just nothing, and everything else works.  Any help would be GREATLY appreciated!   My CSS page reads as follows:
    .CollapsiblePanel {
        color: #000000;
        border-top-style: solid;
        border-top-width: 0.5px;
        padding-top: 3px;
        padding-right: 0px;
        padding-bottom: 3px;
        padding-left: 0px;
    #apDiv3 #CollapsibleLINE {
        border-top-width: 20px;
        border-top-style: solid;
        border-top-color: #330099;
    .CollapsiblePanelTab {
        margin: 0px;
        padding: 20px;
        cursor: pointer;
        -moz-user-select: none;
        -khtml-user-select: none;
        font-family: sans-serif;
        font-size: 0.7em;
        font-weight: bold;
        color: #3366FF;
        border-top-width: thick;
        border-right-width: thin;
        border-bottom-width: thin;
        border-left-width: thin;
        border-top-style: solid;
        border-top-color: #FF00CC;
        border-right-color: #000000;
        border-bottom-color: #000000;
        border-left-color: #000000;
    /* This is the selector for a CollapsiblePanel's Content area. It's important to note that
    * you should never put any padding on the content area element if you plan to
    * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
    * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
    * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style a
    * CollapsiblePanel content container.
    .CollapsiblePanelContent {
        margin: 0px;
        padding: 0px;
    .CollapsiblePanelTab a {
        text-decoration: none;
    /* This is an example of how to change the appearance of the panel tab as the
    * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
    * and removed from panel tab containers as the mouse enters and exits the tab container.
    .CollapsiblePanelTabHover,  .CollapsiblePanelOpen .CollapsiblePanelTabHover {
        color: #666666;
    .CollapsiblePanelFocused .CollapsiblePanelTab {
    #apDiv1 .overlay {
    and my page looks like this:
    <link href="untitled.css" rel="stylesheet" type="text/css">
    <script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
    <style type="text/css">
    <!--
    #apDiv1 {
        position:absolute;
        width:808px;
        height:502px;
        z-index:1;
        left: 0px;
        top: 111px;
    #apDiv2 {
        position:absolute;
        width:2;
        height:747px;
        z-index:2;
        top: 109px;
        left: 34px;
        filter: alpha(opacity=75);
    #apDiv3 {
        position:absolute;
        width:128px;
        height:344px;
        z-index:3;
        left: 57px;
        top: 126px;
        filter: alpha(opacity=75);
    -->
    div:active, div:focus, div:hover {
        outline-style: none;
        -moz-outline-style:none;
    </style>
    <link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" >
    <style type="text/css">
    <!--
    #apDiv4 {
        position:absolute;
        left:403px;
        top:115px;
        width:164px;
        height:312px;
        z-index:4;
    #apDiv3 #CollapsiblePanel2 .CollapsiblePanelContent font {
        color: #000000;
    #apDiv5 {
        position:absolute;
        left:57px;
        top:22px;
        width:722px;
        height:78px;
        z-index:4;
    #apDiv6 {
        position:absolute;
        left:551px;
        top:22px;
        width:397px;
        height:39px;
        z-index:5;
    #apDiv7 {
        position:absolute;
        left:285px;
        top:123px;
        width:478px;
        height:398px;
        z-index:5;
    #apDiv8 {
        position:absolute;
        left:325px;
        top:174px;
        width:276px;
        height:153px;
        z-index:6;
    -->
    </style>
    <div id="apDiv5"><img src="IMAGES/logo3.jpg" width="843" height="83" /></div>
    <div id="frontphoto"></div>
    <div id="apDiv1"><img src="IMAGES/Backgound.jpg" alt="back" width="1032" height="516" /></div>
    <div id="apDiv2"><img src="IMAGES/overlay.png" alt="Overlay" width="174" height="720" /></div>
    <div id="apDiv3">
      <div id="CollapsiblePanel2" class="CollapsiblePanel">
        <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">photography</font></div>
        <div class="CollapsiblePanelContent">
          <table width="118" border="0" align="center" cellpadding="3" cellspacing="0">
            <tr>
              <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">portraits</font></em></td>
            </tr>
            <tr>
              <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">events</font></em></td>
            </tr>
            <tr>
              <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">landscapes</font></em></td>
            </tr>
            <tr>
              <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">experiments</font></em></td>
            </tr>
          </table>
        </div>
      </div>
      <div id="CollapsiblePanel1" class="CollapsiblePanel">
        <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">print</font></div>
        <div class="CollapsiblePanelContent">
          <table width="118" border="0" align="center" cellpadding="3" cellspacing="0">
            <tr>
              <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">posters</font></em></td>
            </tr>
            <tr>
              <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">books &amp; packaging</font></em></td>
            </tr>
            <tr>
              <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">invitations</font></em></td>
            </tr>
          </table>
        </div>
      </div>
      <div id="CollapsiblePanel4" class="CollapsiblePanel">
        <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">motion</font></div>
        <div>
          <table width="120" border="0" align="center" cellpadding="3" cellspacing="0">
            <tr>
              <td width="114"><em><font size="2" face="Georgia, Times New Roman, Times, serif">websites</font></em></td>
            </tr>
            <tr>
              <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">animations</font></em></td>
            </tr>
          </table>
        </div>
      </div>
      <div id="CollapsiblePanel5" class="CollapsiblePanel">
        <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">about</font></div>
        <div>
          <table width="120" border="0" align="center" cellpadding="3" cellspacing="0">
            <tr>
              <td width="114"><em><font size="2" face="Georgia, Times New Roman, Times, serif">honors</font></em></td>
            </tr>
            <tr>
              <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">background</font></em></td>
            </tr>
          </table>
        </div>
      </div>
      <div id="CollapsiblePanel6" class="CollapsiblePanel">
        <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">contact</font></div>
        <div class="CollapsiblePanelContent">
          <table width="120" border="0" align="center" cellpadding="3" cellspacing="0">
            <!--DWLayoutTable-->
            <tr>
              <td width="114"><a href="mailto:[email protected]" style="text-decoration:none"><font color="#333333" size="2" face="Georgia, Times New Roman, Times, serif">email</font></a></td>
            </tr>
            <tr>
              <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">202.321.4248</font></em></td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <script type="text/javascript">
    <!--
    var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4", {contentIsOpen:false});
    var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5", {contentIsOpen:false});
    var CollapsiblePanel6 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel6", {contentIsOpen:false});
    var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
    var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
    //-->
    </script>

    I am sorry, I tried in FF, IE7/8 and Chrome and they all look the same.

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

  • Spry Collapsible Panel animation not working

    I've inserted a spry collapsible panel into a web page and it works fine when I preview it. But when I upload it to the server the animation does not work in both Safari and Firefox (haven't tried any other browsers). The panel is just static, showing the tab and the panel is open showing the content. It is supposed to be closed by default.
    I've added CSS styles but I've also tried it with the default CSS and it didn't work then either.
    Both the .css and .js files that were saved in the SpryAssets folder have been uploaded to the server in the same location as the webpage.
    I'm working on a Mac and CS4.
    URL is www.alpinism.com/New/about.html

    Thanks. That didn't resolve my issues unfortunately and the corrections it was suggesting started interfering with other functions on the page so I've gone back to square one, deleted the Spry collapsible panel and inserted javascript from http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm that does the same thing and seems to work in Safari and Firefox. Just need to check in IE but I expect this is going to be the best solution for me.

  • Spry collapsible panel stays open in Internet Explorer.

    I'm trying to use the spry collapsible panel to hide and show inormation, and it will not stay closed.  I've used the default closed option in the properties panel, and made sure the eye in design view is closed.  Please give some suggestions for correcting this problem.

    The out-of-the-box SpryCollapiblePanel works like a charm.
    This means that you have altered  the HTML, CSS and/or the JS.
    Because we are not privy to what you have done, it is not possible to help you find a solution.
    I recommend that you upload the site and supply a link to that site.

  • Spry Collapsible Panel question

    I have a file online that uses a Spry collapsible panel.  It can be viewed here.  It works beautifully.  For one exception.  The logo is supposed to be up some 10 pixels or so.  The CollapsiblePanelTab is occupying the space.
    So I took the CSS for the CollapsiblePanelContent and moved it up 1em <margin-top: -1em;>.  That put my logo where it should be.  Problem is that when I do this the transparent portion of the logo covers most of the "Hide / Show Logo."  It leaves only a sliver of the right of the tab.  This file can be viewed here.
    The logo consists of the image and the bar underneath it.  Yes, I could crop the image down to the central part, making it narrower, but I do want the bar which is wider.  And I want the bar to disappear when the Spry is activated so that rules out having it as a separate image..
    Even better I would like when the panel is open for the "Hide / Show Logo" to be just above the bar.  I tried that and it threw everything out of kilter.
    Any suggestions!  Thank you in advance for any responses.

    Beth,
       Thought of it, did it, didn't work.
       If I remove the logo from the HTML of the page and instead place it in the "background-image" of the CollapsiblePanelContent CSS I get disastrous results.  The panel collapses (because there is nothing in the DIV) and the CSS placed background image disappears.  Following this thread of thought I could try a much narrower transparent image with nothing in it, just the transparency, and see how that might work.  This would keep the DIV open to the desired height.  Then I could place the actual, true image in the "background-image" of the DIV CSS.
       For the moment I am going to see if someone perhaps comes up with a solution other than this.  The chief reason is that I would lose my dynamic linking of the PSD to the placed image.  This file will be a template of thousands of pages spanning many years so the logo will change appropriately.
       This method, of using the image in the CSS itself, also causes some alignment problems within the DIV.  My background-image does not center properly.  It does so when placed in the HTML of the document.
       Getting back to the original problem, which seems to be the transparency of the image and its width, I don't see any reason why I could not break my image into two pieces and place each one within the CollapsiblePanelContent.  Each image in their own DIV contained within the panel content.  I could then make the logo part separate from the bar but still have the bar collapse.  The logo portion could then be much narrower.  I think I will try this method and see what transpires.  I could then keep my dynamically linked images.  Theoretically!!!
       Thanks for letting me bounce ideas off a fellow thick skull.  Not seeing the trees for the forest and all that.
    Regards,
    Wayne

  • DW CS6 - Spry collapsible panels - How to have panel close when you click away from it?

    I know typically onmouseout is used to close other items, but I could not figure it out with the spry collapsible panel. I have the panel opening onclick and closing onclick, but I would really like for it to close when you click anything else on the page outside of the panel.
    Thank you!

    Sorry, I did not mean other collapsing panels close when you click away from it. I simply meant in general for the closing after clicking away function, you can use onmouseout. I was working on something with collapsing panels and I wanted it to show the information when you clicked on it, but when you click on another panel, they both remain open. I really want both to close. I believe accordion does this, but not quite what I am looking for either.
    Here is a better example of what I would prefer: Houston Public Library
    If you visit their page and click "Find it" a box pops down with information and then when you click anywhere else on the screen, it closes that box. When you click "Research," it closes the "Find It" box and opens the "Research" box. There is likely a much better way to do this, but I am pretty new to this.
    Any assistance is very much appreciated.
    Thank you!

  • How do I place external content in a Collapsible Panel

    I figured out how to add a tooltip to a collapsible panel
    today, but I am having trouble getting content to load in the
    content portion of the panel from another HTML file.
    I have created a loader.gif animation that I would also like
    to appear in the content panel while the content is loading.
    This, like the tooltips, is way above my skill level and any
    help would be appreciated. I am starting from using Spry 1.6's
    built in features in Dreamweaver CS3 and trying to expand on them
    with help using the other spry js found here in the Labs.
    Link to
    collapsible panel page I am working on
    Currently I have all the content panel text in panels. I
    would like to copy the content to another file so it can load only
    when the panel tab is opened.

    Check out this example.
    http://labs.adobe.com/technologies/spry/samples/utils/update_content.html
    its about updateContent which allows u to place content in
    your div.
    U could create a little function for it to load content in
    your divs.
    Example of load indicator + function setup:
    the indicator div
    <div id="indicatorMessageBoxId"><img
    scr="imagehere.gif" /> Please wait loading content </div>
    The function (place in <script> tags and place it in
    header (dont forget to include SpryData.js)
    function updateContent(ele,url){
    //U call this by using the command:
    updateContent('ID_toLoad_contentIn',url_of_new_content');
    document.getElementById('indicatorMessageBoxId').style.display =
    ""; //this will show the indicator loadimage box
    Spry.Utils.updateContent(ele, url, function() {
    document.getElementById('indicatorMessageBoxId').style.display =
    "none"; }); //this will hide the box when loading file is done
    u can attach this function on your collapspannel by adding a
    onclick="updateContent('myId','data/page.html');" to the
    element.
    Hope this helps :)

  • How to create collapsible panel in flex3

    I
    How to create Collapsible panel in flex.
    If you observer above image. There are three panels.For ffirst and last panel i have provided one button where it contains open/close button.When user selects close button left panel should collapse to left hand side and the same should come to its original postion. In case of right panel is the same process except it should collapse to right side.
    Below is my code:
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init()" >
    <mx:Script>
      <![CDATA[
      import flash.net.FileReference;
      import mx.controls.Menu;
      import flash.display.Stage; 
      import mx.events.MenuEvent;
      import mx.controls.Alert;
      import mx.events.ListEvent;
      import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.events.DragEvent;
      import DrawingClasses.Designer;
      [Bindable]
      [Embed(source="/images2/line.png")]
      public var linePicture:Class;
      [Bindable]
      [Embed(source="/images2/box.png")]
      public var boxPicture:Class;
      [Bindable]
      public var xm:XML =
      <AbstractComponentTemplate></AbstractComponentTemplate>;
      public var compType:XML =
       <ComponentTemplateDescriptor>
        <Owner>BackTesting</Owner>
        <Name>Component</Name>
        <Version>1</Version>
       </ComponentTemplateDescriptor>;
      [Bindable]
            private var cm:ContextMenu; 
      public var xm1:XML;
      public var loopparent:Array = new Array();
      private var mouseTarget:DisplayObject;
      private var xOff:Number;
      private var yOff:Number;
      private var designer:Designer = new Designer();  
      private var i:int;
      private var j:int;
      private function init():void
       designer.setDesignArea(designArea);
       var cmi1:ContextMenuItem = new ContextMenuItem("Properties", true);
                cmi1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_propertiesSelect);
       var cmi2:ContextMenuItem = new ContextMenuItem("View XML", true);
       cmi2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_viewXMLSelect);
       var cmi3:ContextMenuItem = new ContextMenuItem("Saved Components", true);
       cmi3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, contextMenuItem_savedListSelect);  
       cm = new ContextMenu();
       cm.hideBuiltInItems();
       cm.customItems = [cmi1, cmi2, cmi3];
       cm.addEventListener(ContextMenuEvent.MENU_SELECT, contextMenu_menuSelect);
      private function contextMenu_menuSelect(evt:ContextMenuEvent):void {
      private function contextMenuItem_propertiesSelect(evt:ContextMenuEvent):void {
        accrCon2.label = "Two Way Split - Properties";   
        accrWin.selectedIndex = 1;
      private function contextMenuItem_viewXMLSelect(evt:ContextMenuEvent):void {               
        viewstack1.selectedIndex = 1;
      private function contextMenuItem_savedListSelect(evt:ContextMenuEvent):void {               
        accrWin.selectedIndex = 0;
      [Bindable]
      private var propValue:String = "Component";
            private function itemClickEvent(event:ListEvent):void {
       var propKey:String = dgProp.selectedItem.@key;
       if (propKey == "name") {
        propValue = dgProp.selectedItem.propvalue;   
      [Bindable]
      private var sourceXML:XML =
      <order>
       <!--This is a comment. -->
       <?PROC_INSTR sample ?>
       <item id='1'>
        <menuName>burger</menuName>
        <price>3.95</price>
       </item>
       <item id='2'>
        <menuName>fries</menuName>
        <price>1.45</price>
       </item>
      </order>;
      [Bindable]
      private var savedComp:Array=['ComponentTemplate',
      'iv85341.EquityCash.v1',
      'ra92724.ThreeWaySplit.EU.US.OTHERS.v1',
      'ra92724.TwoWaySplit.EU.OTHERS.v1',
      'ra92724.TwoWaySplit.US.OTHERS.v1',
      'iv85341.VanillaNode.v1',
      'iv85341.ReadGmrFs.v1'
         [Bindable]
         private var propData:XML =
          <properties>
           <prop key="name">
            <propvalue>Component</propvalue>
         <itemRenderer>mx.controls.NumericStepper</itemRenderer>
           </prop>
           <prop key="Version">
            <propvalue>1.0</propvalue>
         <itemRenderer>mx.controls.NumericStepper</itemRenderer>
           </prop>
           <prop key="Owner">
            <propvalue>iv85341</propvalue>
         <itemRenderer>mx.controls.NumericStepper</itemRenderer>
           </prop>
           <prop key="width">
            <propvalue>250</propvalue>
         <itemRenderer>mx.controls.NumericStepper</itemRenderer>
           </prop>
           <prop key="height">
            <propvalue>300</propvalue>
         <itemRenderer>mx.controls.NumericStepper</itemRenderer>
           </prop>      
           <prop key="X-Pos">
            <propvalue>40</propvalue>
         <itemRenderer>mx.controls.NumericStepper</itemRenderer>
           </prop>
           <prop key="Y-Pos">
            <propvalue>20</propvalue>
         <itemRenderer>mx.controls.NumericStepper</itemRenderer>
           </prop>
          </properties>;
       private function rightClick(event:MouseEvent):void
        Alert.show("Properties ..." + event.currentTarget, "Open");
       // Draging Code Starts Here
       private var curDate:Date = new Date();
       private var dateList:XMLList = null;
       public function pictureDragDrop(event:DragEvent):void { 
        //Alert.show (" com = " + event.dragSource.dataForFormat("key"));
        var nodeName:String = event.dragSource.dataForFormat("key").toString(); //txtInput1.text;
        var nodeValue:String = "";
        if (nodeValue == "")
         if (xm == <AbstractComponentTemplate></AbstractComponentTemplate>)
          xm.appendChild(compType);
          dateList = new XMLList("<DateCreated>" + curDate + "</DateCreated>");
          xm.appendChild(dateList);     
          dateList = new XMLList("<DateModified>" + curDate + "</DateModified>");
          xm.appendChild(dateList);
          xm1 = XML("<" + nodeName + "></" + nodeName + ">");
          xm.appendChild(xm1);
         else
          i++;
          xm1 = XML("<" + nodeName + "></" + nodeName + ">");
          xm.appendChild(xm1);
          //loopparent.push(xmlarray:xm1);
          loopparent[i] = xm1;     
        else
         var xmlList:XMLList = new XMLList("<" + nodeName + ">" + nodeValue + "</" + nodeName + ">");
         if (xm1 == null)
          xm.appendChild(xmlList);
         else
          for (j = i; j>0; j--)
          (loopparent[j]).appendChild(xmlList);
          //Alert.show("alert");
        var x:int = event.currentTarget.mouseX - xOff;
        var y:int = event.currentTarget.mouseY - yOff; 
        if(event.dragSource.dataForFormat("key") == "box")
         designer.addBox(x, y); 
        else  if(event.dragSource.dataForFormat("key") == "circle")
         designer.addCircle(x, y);
        else
         designer.addRectangle(x, y);
        //txtInput1.text = "";
        //txtInput2.text = "";
       // this method gets x and y coordinate of template box image
       private function myoffset(img:Image):void {
        xOff = img.mouseX;
        yOff = img.mouseY;
       // this method does acceptable draging box image
       public function pictureDragEnter(event:DragEvent):void{
        DragManager.acceptDragDrop(Canvas(event.target));       
       // this method supply drag box when mouse move on the design area
       private function dragPicture1(event:MouseEvent, img1:Image,format:String):void{
        var dragInitiator:Image=Image(event.currentTarget);
        var ds:DragSource = new DragSource();
        var imageProxy:Image = new Image();
        imageProxy.source = img1.source;    
        imageProxy.height= 150;
        imageProxy.width= 150;
        ds.addData(format,"key");
        DragManager.doDrag(dragInitiator, ds, event,imageProxy, 0, 0, 1.00);
       // this method works when click on the line button
       // it is make enable to draw line
       public function doDrawEnable():void {
        designer.setIsDrawEnable(true);  
       private var fileRef:FileReference;
       public function createXML():void {
        var fileName:String = "component.xml";
                    fileRef = new FileReference();
        fileRef.browse();
       // Draging code ends here
      ]]>
    </mx:Script>
    <mx:Fade id="theEffect"/>
    <mx:HDividedBox width="100%" height="100%">
      <mx:VDividedBox height="100%" width="20%">  
        <mx:Panel title="Drawing Components" width="100%" height="100%" layout="vertical" >
            <mx:Panel title="Nodes" width="100%" height="100%" layout="vertical">
             <mx:Image id="box" toolTip="TwoWay Split" useHandCursor="true" buttonMode="true" source="@Embed(source='images2/box.png')" mouseMove="dragPicture1(event, box, 'box');myoffset(box);" width="28" height="28" x="84" y="6"></mx:Image>
             <mx:Image id="rectangle" toolTip="MultiWay Split" useHandCursor="true" buttonMode="true" source="@Embed(source='images2/rectangle.png')" mouseMove="dragPicture1(event, rectangle, 'rectangle');myoffset(rectangle);" width="28" height="28" x="160" y="10"></mx:Image>
             <mx:Image id="circle" toolTip="Reader" useHandCursor="true" buttonMode="true"  source="@Embed(source='images2/circle.png')" mouseMove="dragPicture1(event, circle, 'circle');myoffset(circle);" width="28" height="28" x="120" y="8"></mx:Image>
             <mx:Image id="line" toolTip="Line" useHandCursor="true" buttonMode="true" source="@Embed(source='images2/line.png')" click="doDrawEnable()" width="28" height="28"  x="279" y="10"></mx:Image>
             <!--<mx:Image id="dottedline" source="@Embed(source='images2/dottedline.png')" click="doDrawEnable()" width="28" height="35"  x="279" y="10"></mx:Image>
             <mx:Label text="Name" x="350" y="10"/>
             <mx:TextInput id="txtInput1" width="50" height="28" x="400" y="10"/>
             <mx:Label text="Value" x="470" y="10"/>
             <mx:TextInput id="txtInput2" width="50" height="28" x="510" y="10"/>-->
            </mx:Panel>
        </mx:Panel>
      </mx:VDividedBox>
      <mx:VDividedBox height="100%" width="60%">
        <mx:HDividedBox width="100%" height="100%">   
         <mx:Canvas width="100%" height="100%" >
          <mx:TabBar x="0" y="10" dataProvider="viewstack1" />
          <mx:ViewStack id="viewstack1" width="100%" height="100%" y="32">
           <mx:Canvas backgroundColor="#ffffff" borderColor="0xB7BABC" borderStyle="solid" borderThickness="7" label="{propValue}" id="designArea" contextMenu="{cm}" dragEnter="pictureDragEnter(event)" dragDrop="pictureDragDrop(event)" width="100%" height="100%" >
           </mx:Canvas>
           <mx:Panel id="pnlXML" label="XML" width="100%" height="100%" showEffect="{theEffect}" >
            <mx:ControlBar width="100%" barColor="#FF22CC">
             <mx:Spacer width="100%"/>
             <mx:Button id="btnSave" label="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />    
            </mx:ControlBar>
            <mx:TextArea fontSize="12" wordWrap="false" textIndent="8" id="txtAreaXML" text="{xm}" width="100%" height="100%" editable="false" />       
           </mx:Panel>
          </mx:ViewStack>
         </mx:Canvas>
        </mx:HDividedBox> 
      </mx:VDividedBox>
      <mx:VDividedBox height="100%" width="20%">
       <mx:Panel title="Saved Components and Properties" width="100%" height="100%" layout="vertical" >
        <mx:Accordion id="accrWin" x="51" y="35" width="100%" height="100%">
            <mx:Canvas label="Saved Components" width="100%" height="100%">
             <mx:List height="100%" width="100%" dataProvider="{savedComp}" />        
            </mx:Canvas>
            <mx:Canvas id="accrCon2" label="Properties" width="100%" height="100%">
             <mx:DataGrid id="dgProp" dataProvider="{propData.prop}" height="100%" width="100%" editable="true" itemClick="itemClickEvent(event);">
              <mx:columns>
               <mx:DataGridColumn dataField="@key" headerText="Property" editable="false" />
               <mx:DataGridColumn dataField="propvalue" headerText="Value" editable="true" />                 
              </mx:columns>
             </mx:DataGrid>
            </mx:Canvas>
         </mx:Accordion>
       </mx:Panel>
      </mx:VDividedBox>
    </mx:HDividedBox>
    <mx:ApplicationControlBar dock="true"> 
      <mx:Image source="images/Openfile.gif" toolTip="Open" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
      <mx:Image source="images/Savefile.gif" toolTip="Save" useHandCursor="true" buttonMode="true" mouseChildren="false" click="createXML()" />
      <mx:Image source="images/Undo.gif" toolTip="Undo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
      <mx:Image source="images/Redo.gif" toolTip="Redo" useHandCursor="true" buttonMode="true" mouseChildren="false" />
      <mx:Image source="images/Delete.gif" toolTip="Delete" useHandCursor="true" buttonMode="true" mouseChildren="false" />
      <mx:Image source="images/Print.gif" toolTip="Print" useHandCursor="true" buttonMode="true" mouseChildren="false" />
      <mx:Spacer width="100%" />
      <mx:Label text="BackTesting" fontWeight="bold" fontSize="16" />
    </mx:ApplicationControlBar>
    </mx:Application>
    Plz change my code according to the requirement.
    Thanks

    Could you give us the full source code?
    Thanks!!

  • DW crashes when attempting to insert another collapsible panel

    Hello all, please be patient with me as it is my first post...i am trying to insert another collapsible panel into my content div and my Dreamweaver CS5 has crashes multiple times...here are my codes:
    forgive me if i am adding too much, the address is: http://www.crestars.com/accordion.html
    i have a lightbox inserted into my first panel...i'm just trying to add another panel for a different set of pictures.
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Martine &amp; Dewaine's pictures</title>
    <link href="css/chinesecrestedatcrestars.css" rel="stylesheet" type="text/css" />
    <script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
    <!--[if IE]><script type="text/javascript" src="dmx/lib/excanvas-compressed.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="dmx/widgets/Lightbox/styles/default/style.css" />
    <script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
    <script type="text/javascript" src="dmx/dmx.core.js"></script>
    <script type="text/javascript" src="dmx/widgets/Lightbox/dmx.lightbox.js"></script>
    </head>
    <body>
    <div id="wrapper"> <!-- #BeginLibraryItem "/Library/crestars_navigation_menu.lbi" --><img src="pictures/banner/banner.png" width="1000" height="200" alt="Chinese Cresteds at Crestars" /><!-- #BeginLibraryItem "/Library/chinese_crested_navbar.lbi" -->
    <div id="SofteryMenu" style="position:relative; top:0; visibility: visible; z-index: 100;">
      <object id="sf_menu" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100%" height="25">
       <param name="movie" value="SofteryMenus/sf6menu119.swf" />
       <param name="quality" value="high" />
       <param name="wmode" value="transparent" />
       <param name="FlashVars" value="flashlet={_bgPicture:'NA',_googleDomain:'http://www.google.com',_googleSearch:false,_mainButtonHeight:25,_mainButtonTextColor:#E7E9 EC,_mainFont:'Tahoma',_mainFontSize:12,_mainHighlightColor:#999999,_mainTextHighlightColor :#13133C,_menuAlign:'center',_menuColor:#737373,_menuLeftMargin:90,_menuMinimalWidth:493,_ menuRightMargin:100,_menuTopMargin:0,_searchFieldColor:#ffffff,_searchFieldWidth:70,_searc hInputTextColor:#666666,_searchVariable:'searchText',_subButtonHeight:20,_subButtonTextCol or:#E7E9EC,_subFont:'Tahoma',_subFontSize:12,_subHighlightColor:#999999,_subMenuColor:#737 373,_subShowSpeed:20,_subTextHighlightColor:#13133C,_yourDomain:'NA',autosize:true,needSea rch:false,navigationTree:['Mainbut1:Home;http://www.crestars.com;_top','Mainbut2:About Crestars *amp* Us;;','_subbuton1:Crestars Belief;chinese_crested_about_crestars.html;_parent','_subbuton2:Martine *amp* Dewaine;about_dewaine_and_martine.html;_parent','_subbuton3:Contact;mailto:[email protected]?subject=I visited your website and;_top','Mainbut3:General Information;;_parent','_subbuton1:FAQ\'s;chinese_crested_faq.html;_parent','_subbuton2:Ge neral Overview;chinese_crested_info.html;_parent','_subbuton3:Common Health Issues;chinese_crested_common_health_issues.html;_parent','_subbuton4:Exercise;chinese_cr ested_exercising.html;_parent','_subbuton5:Other Links;other_links.html;_parent','Mainbut4:Grooming;;_parent','_subbuton1:Read First;chinese_crested_grooming.html;_parent','_subbuton2:A Hairy Hairless;chinese_crested_grooming_hairy_hairless.html;_parent','_subbuton3:A Medium Hairy Hairless;chinese_crested_grooming_medium_hairy.html;_parent','_subbuton4:A True Hairless;chinese_crested_grooming_true_hairless.html;_parent','_subbuton5:A Powderpuff;chinese_crested_grooming_powderpuff.html;_parent','_subbuton6:Taping Puppy Ears;chinese_crested_ear_taping.html;','_subbuton7:Grooming Supplies;chinese_crested_grooming_supplies.html;','Mainbut5:Our Males;;_parent','_subbuton1:Bootz;chinese_crested_bootz.html;_parent','_subbuton2:Bugzy;c hinese_crested_bugzy.html;_parent','_subbuton3:Oreo;chinese_crested_oreo.html;_parent','Ma inbut6:Our Females;;_parent','_subbuton1:Candy;chinese_crested_candy.html;','_subbuton2:Didi;chinese _crested_didi.html;','_subbuton3:Goldie;chinese_crested_goldie.html;','_subbuton4:Hottie;c hinese_crested_hottie.html;','_subbuton5:Izzee;chinese_crested_izzee.html;_parent','_subbu ton6:Vickie;chinese_crested_vicki.html;','_subbuton7:Zeekitah;chinese_crested_zeekitah.htm l;','Mainbut7:New Generation;;','_subbuton1:Puppies;chinese_crested_puppies.html;','_subbuton2:Show Hopefuls;chinese_crested_hopefuls.html;','_subbuton3:Available;chinese_crested_available. html;','Mainbut8:What\'s New...;crestars_latest_news.html;','Mainbut9:New owners...;chinese_crested_new_owners.html;','Mainbut10:Rainbow Bridge;chinese_crested_rainbow_bridge.html;_parent']}" />
       <embed id="sf_menu2" src="SofteryMenus/sf6menu119.swf" wmode="transparent" quality="high" flashvars="flashlet={_bgPicture:'NA',_googleDomain:'http://www.google.com',_googleSearch:false,_mainButtonHeight:25,_mainButtonTextColor:#E7E9 EC,_mainFont:'Tahoma',_mainFontSize:12,_mainHighlightColor:#999999,_mainTextHighlightColor :#13133C,_menuAlign:'center',_menuColor:#737373,_menuLeftMargin:90,_menuMinimalWidth:493,_ menuRightMargin:100,_menuTopMargin:0,_searchFieldColor:#ffffff,_searchFieldWidth:70,_searc hInputTextColor:#666666,_searchVariable:'searchText',_subButtonHeight:20,_subButtonTextCol or:#E7E9EC,_subFont:'Tahoma',_subFontSize:12,_subHighlightColor:#999999,_subMenuColor:#737 373,_subShowSpeed:20,_subTextHighlightColor:#13133C,_yourDomain:'NA',autosize:true,needSea rch:false,navigationTree:['Mainbut1:Home;http://www.crestars.com;_top','Mainbut2:About Crestars *amp* Us;;','_subbuton1:Crestars Belief;chinese_crested_about_crestars.html;_parent','_subbuton2:Martine *amp* Dewaine;about_dewaine_and_martine.html;_parent','_subbuton3:Contact;mailto:[email protected]?subject=I visited your website and;_top','Mainbut3:General Information;;_parent','_subbuton1:FAQ\'s;chinese_crested_faq.html;_parent','_subbuton2:Ge neral Overview;chinese_crested_info.html;_parent','_subbuton3:Common Health Issues;chinese_crested_common_health_issues.html;_parent','_subbuton4:Exercise;chinese_cr ested_exercising.html;_parent','_subbuton5:Other Links;other_links.html;_parent','Mainbut4:Grooming;;_parent','_subbuton1:Read First;chinese_crested_grooming.html;_parent','_subbuton2:A Hairy Hairless;chinese_crested_grooming_hairy_hairless.html;_parent','_subbuton3:A Medium Hairy Hairless;chinese_crested_grooming_medium_hairy.html;_parent','_subbuton4:A True Hairless;chinese_crested_grooming_true_hairless.html;_parent','_subbuton5:A Powderpuff;chinese_crested_grooming_powderpuff.html;_parent','_subbuton6:Taping Puppy Ears;chinese_crested_ear_taping.html;','_subbuton7:Grooming Supplies;chinese_crested_grooming_supplies.html;','Mainbut5:Our Males;;_parent','_subbuton1:Bootz;chinese_crested_bootz.html;_parent','_subbuton2:Bugzy;c hinese_crested_bugzy.html;_parent','_subbuton3:Oreo;chinese_crested_oreo.html;_parent','Ma inbut6:Our Females;;_parent','_subbuton1:Candy;chinese_crested_candy.html;','_subbuton2:Didi;chinese _crested_didi.html;','_subbuton3:Goldie;chinese_crested_goldie.html;','_subbuton4:Hottie;c hinese_crested_hottie.html;','_subbuton5:Izzee;chinese_crested_izzee.html;_parent','_subbu ton6:Vickie;chinese_crested_vicki.html;','_subbuton7:Zeekitah;chinese_crested_zeekitah.htm l;','Mainbut7:New Generation;;','_subbuton1:Puppies;chinese_crested_puppies.html;','_subbuton2:Show Hopefuls;chinese_crested_hopefuls.html;','_subbuton3:Available;chinese_crested_available. html;','Mainbut8:What\'s New...;crestars_latest_news.html;','Mainbut9:New owners...;chinese_crested_new_owners.html;','Mainbut10:Rainbow Bridge;chinese_crested_rainbow_bridge.html;_parent']}" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100%" height="25"> </embed>
      </object>
    </div>
    <!-- #EndLibraryItem --><!-- #EndLibraryItem -->
    <div id="content">
      <div id="housesurroundings" class="CollapsiblePanel">
       <div class="CollapsiblePanelTab" tabindex="0"> Check out our house surroundings   </div>
       <div class="CollapsiblePanelContent"><a href="pictures/flower1.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/flower1.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/dahlia1.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/dahlia1.jpg" width="66" height="100" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/flower2.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/flower2.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/flower3.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/flower3.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/flower4.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/flower4.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard1.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard1.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard2.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard2.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard3.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard3.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard4.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard4.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard5.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard5.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard6.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard6.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard7.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard7.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard8.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard8.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard9.jpg" title="My pet rock all the way from Quebec!" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard9.jpg" width="100" height="66" alt="My pet rock all the way from Quebec!" border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard10.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard10.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard11.jpg" title="Cute little birdhouse that nobody wants to use..." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard11.jpg" width="66" height="100" alt="Cute little birdhouse that nobody wants to use..." border="0" /></a> <a href="pictures/aboutus/around_the_house/lightning.jpg" title="Lightning show from our back yard" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/lightning.jpg" width="100" height="66" alt="Lightning show from our back yard" border="0" /></a> <a href="pictures/aboutus/around_the_house/lightning1.jpg" title="Lightning show from our back yard" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/lightning1.jpg" width="100" height="66" alt="Lightning show from our back yard" border="0" /></a> <a href="pictures/aboutus/around_the_house/lightning2.jpg" title="Lightning show from our back yard" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/lightning2.jpg" width="100" height="66" alt="Lightning show from our back yard" border="0" /></a> <a href="pictures/aboutus/around_the_house/lilly2.jpg" title="Garden Flowers" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/lilly2.jpg" width="100" height="66" alt="Garden Flowers" border="0" /></a> <a href="pictures/aboutus/around_the_house/lilly3.jpg" title="Garden Flowers" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/lilly3.jpg" width="100" height="66" alt="Garden Flowers" border="0" /></a> <a href="pictures/aboutus/around_the_house/lilly4.jpg" title="Garden Flowers" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/lilly4.jpg" width="100" height="66" alt="Garden Flowers" border="0" /></a> <a href="pictures/aboutus/around_the_house/rose1.jpg" title="Garden Flowers" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/rose1.jpg" width="100" height="69" alt="Garden Flowers" border="0" /></a> <a href="pictures/aboutus/around_the_house/rose2.jpg" title="Garden Flowers" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/rose2.jpg" width="100" height="66" alt="Garden Flowers" border="0" /></a> <a href="pictures/aboutus/around_the_house/rose3.jpg" title="Garden Flowers" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/rose3.jpg" width="100" height="70" alt="Garden Flowers" border="0" /></a> <a href="pictures/aboutus/around_the_house/firepit1.jpg" title="Enjoying a nice fire by the fire pitt with family" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/firepit1.jpg" width="100" height="75" alt="Enjoying a nice fire by the fire pitt with family" border="0" /></a> <a href="pictures/aboutus/around_the_house/dewaine_enjoying_the_sun_on_front_deck.jpg" title="Nothing beats relaxing on the front deck..." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/dewaine_enjoying_the_sun_on_front_deck.jpg" width="100" height="66" alt="Nothing beats relaxing on the front deck..." border="0" /></a> <a href="pictures/aboutus/around_the_house/dewaine_oreo_bugzy_hammack.jpg" title="Dewaine enjoying himself in the hammeck with a couple of dogs" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/dewaine_oreo_bugzy_hammack.jpg" width="100" height="66" alt="Dewaine enjoying himself in the hammeck with a couple of dogs" border="0" /></a> <a href="pictures/aboutus/around_the_house/dewaine_oreo_front_deck1.jpg" title="Someone needs to patrol what's going on...Dewaine and Oreo take their job seriously " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/dewaine_oreo_front_deck1.jpg" width="100" height="68" alt="Someone needs to patrol what's going on...Dewaine and Oreo take their job seriously " border="0" /></a> <a href="pictures/aboutus/around_the_house/firepit2.jpg" title="Let the fire rise!" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/firepit2.jpg" width="66" height="100" alt="Let the fire rise!" border="0" /></a> <a href="pictures/aboutus/around_the_house/fire1.jpg" title="Fire pitt" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/fire1.jpg" width="100" height="66" alt="Fire pitt" border="0" /></a> <a href="pictures/aboutus/around_the_house/seeds_on_table2.jpg" title="Seeds from our back yard Manitoba Maple on a piece of bark" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/seeds_on_table2.jpg" width="100" height="66" alt="Seeds from our back yard Manitoba Maple on a piece of bark" border="0" /></a> <a href="pictures/aboutus/around_the_house/backyard_figurines1.jpg" title="Cute little figurines in the back yard" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/backyard_figurines1.jpg" width="100" height="65" alt="Cute little figurines in the back yard" border="0" /></a> <a href="pictures/aboutus/around_the_house/backyard_figurines2.jpg" title="Cute little figurines in the back yard" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/backyard_figurines2.jpg" width="100" height="66" alt="Cute little figurines in the back yard" border="0" /></a> <a href="pictures/aboutus/around_the_house/backyard_figurines3.jpg" title="Cute little figurines in the back yard" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/backyard_figurines3.jpg" width="100" height="66" alt="Cute little figurines in the back yard" border="0" /></a> <a href="pictures/aboutus/around_the_house/seeds_falling_off_tree.jpg" title="Seeds falling off the Manitoba Maple Tree" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/seeds_falling_off_tree.jpg" width="100" height="66" alt="Seeds falling off the Manitoba Maple Tree" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow1.jpg" title="Ok nobody is going to BBQ today..." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow1.jpg" width="100" height="66" alt="Ok nobody is going to BBQ today..." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow2.jpg" title="Snow pilling up on front deck" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow2.jpg" width="100" height="66" alt="Snow pilling up on front deck" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow3.jpg" title="Snow fall" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow3.jpg" width="100" height="66" alt="Snow fall" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow4.jpg" title="Yuck who wants this much snow!" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow4.jpg" width="100" height="66" alt="Yuck who wants this much snow!" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow5.jpg" title="Yuck who wants this much snow!" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow5.jpg" width="100" height="66" alt="Yuck who wants this much snow!" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow7.jpg" title="Yuck who wants this much snow!" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow7.jpg" width="100" height="66" alt="Yuck who wants this much snow!" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow8.jpg" title="Looks fun?...just for 2 minutes!" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow8.jpg" width="100" height="66" alt="Looks fun?...just for 2 minutes!" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow9.jpg" title="Making a snow angel" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow9.jpg" width="100" height="65" alt="Making a snow angel" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow10.jpg" title="Snow angle snow print" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow10.jpg" width="100" height="66" alt="Snow angle snow print" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow11.jpg" title="BRRRR..." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow11.jpg" width="67" height="100" alt="BRRRR..." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow12.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow12.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow13.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow13.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow14.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow14.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow15.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow15.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow16.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow16.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow17.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow17.jpg" width="75" height="100" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow18.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow18.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow19.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow19.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow20.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow20.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow21.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow21.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow22.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow22.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snowgarlandfence.jpg" title="Cool looking garland" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snowgarlandfence.jpg" width="100" height="66" alt="Cool looking garland" border="0" /></a> <a href="pictures/aboutus/around_the_house/sunset_in_backyard_tree1.jpg" title="Fall funky colors from the sunset" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/sunset_in_backyard_tree1.jpg" width="100" height="66" alt="Fall funky colors from the sunset" border="0" /></a> <a href="pictures/aboutus/around_the_house/sunset_in_backyard_tree2.jpg" title="Fall funky colors from the sunset" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/sunset_in_backyard_tree2.jpg" width="100" height="66" alt="Fall funky colors from the sunset" border="0" /></a> <a href="pictures/aboutus/around_the_house/sunset_in_backyard_tree3.jpg" title="Fall funky colors from the sunset" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/sunset_in_backyard_tree3.jpg" width="66" height="100" alt="Fall funky colors from the sunset" border="0" /></a> <a href="pictures/aboutus/around_the_house/tree_seeds_on_table2.jpg" title="Fall funky colors from the sunset" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/tree_seeds_on_table2.jpg" width="100" height="66" alt="Fall funky colors from the sunset" border="0" /></a> <a href="pictures/aboutus/around_the_house/tree_seeds_on_table.jpg" title="Seeds from our Manitoba Maple tree" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/tree_seeds_on_table.jpg" width="100" height="66" alt="Seeds from our Manitoba Maple tree" border="0" /></a> <a href="pictures/aboutus/around_the_house/woodsplitter1.jpg" title="Preparing for the winter" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/woodsplitter1.jpg" width="100" height="66" alt="Preparing for the winter" border="0" /></a> <a href="pictures/aboutus/around_the_house/woodsplitter2.jpg" title="Fall funky colors from the sunset" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/woodsplitter2.jpg" width="100" height="66" alt="Fall funky colors from the sunset" border="0" /></a><a href="pictures/aboutus/around_the_house/cloud_shadow_1.jpg" title="Weird forming clouds...the shadow was behind" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/cloud_shadow_1.jpg" width="100" height="56" alt="Weird forming clouds...the shadow was behind" border="0" /></a><a href="pictures/aboutus/around_the_house/cloud_shadow_2.jpg" title="Weird cloud" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/cloud_shadow_2.jpg" alt="Weird cloud" width="100" height="56" border="0" /></a><a href="pictures/thumbs/thumbs/laughing_cloud.jpg" title="" rel="dmxLightbox" rev="{group: 'AroundOurHouseGarden', preset: 'thin'}"><img src="pictures/thumbs/thumbs/thumbs/laughing_cloud.jpg" width="100" height="66" alt="" border="0" /></a></div>
      </div>
    <p> </p>
    </div>
    <!-- #BeginLibraryItem "/Library/chinesecrestedfooter.lbi" -->
    <style type="text/css">
    <!--
    .smallercentered {
    text-align: center;
    font-size: 12px;
    -->
    </style>
    <span class="smallercentered">The entire Site is Copyrighted&copy;, 2010. Designed by owner, <a href="mailto:[email protected]?subject=I visited your website and..." target="_blank">Martine Couture</a></span><!-- #EndLibraryItem --> </div>
    <script type="text/javascript">
    var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("housesurroundings", {contentIsOpen:false});
    </script>
    </body>
    </html>

    Depending on the development environment, I can imagine that DW has a problem.
    My systems is Windows7, i7 processor, 8GB ram and it does take a while for DW to add an extra collapsible panel.
    Possible solutions
    use accordion panels
    hand code the second collapsible panel
    use a Collapsible Panel Group
    To hand code all you have to do is add the following to your document, in the appropriate places amking sure that the ID corresponds.
    <div id="CollapsiblePanel2" class="CollapsiblePanel">
       <div class="CollapsiblePanelTab" tabindex="0">Tab</div>
       <div class="CollapsiblePanelContent">Content</div>
    </div>
    and
    var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
    For more info on a Collapsible Panel Group see here http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
    Gramps

Maybe you are looking for

  • After IOS 8 upgrade IPad 2 don't start

    Hi, After IOS 8 upgrade my IPad 2 don't start and just show this screen and nothing works.

  • Batch input with table control

    Hi, i have a problem with the batch input of picking window in vl02n transaction. I need to select a row of the bottom table but i don't know how many lines ara available in the program(different than the number of lines i can see) and it's possible

  • Solaris 8 on SS5

    I currently run Solaris 2.5.1 on my SS5, does anyone think I will have problems running Solaris 8 on a SS5? Thanks! Matt

  • IRC Spammer / Impersonator

    This morning I was informed by a TU via Private Message on IRC that there were spammer impersonating me. He first ask what happened last night and as I had no idea what he was talking about this was when I first discovered what happened. There are so

  • My new MacBook Pro is very slow!

    Over the past month my laptop has been getting slower and slower. It is almost unusable at this point. It locks up first seconds this is if I'm running chrome the App Store pages I try to shut down different applications and it just locks up