Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    New Zealand
    Thanked 0 Times in 0 Posts

    DW Spry Collapsible Panel customisation problem

    I'm using Adobe Dreamweaver CS5 to revamp a site.

    I am using Dreamweaver's built-in Spry Collapsible Panel widget to shorten the length of a bio page by having additional paragraphs about board members extend out when 'more' is clicked, and close when it is clicked again.

    Here's the resulting html when you insert an instance of a Collapsible Panel into your code in DW; the div with the class of CollapsiblePanelTab is the clickable 'more' area, and the div of class CollapsiblePanelContent is the panel area that expands:

    <div id="CollapsiblePanel1" class="CollapsiblePanel">
      <div class="CollapsiblePanelTab" tabindex="0">Tab (more)</div>
      <div class="CollapsiblePanelContent">Content</div>
    Our graphic designer is insisting on the 'more' tab to slide down to rest at the bottom of the panel once fully expanded.

    However, the default behaviour is for more to remain stationary at top with the panel expanding beneath it.

    To achieve this I absolutely positioned the CollapsiblePanelTab div, giving it a left:0; bottom:0 position (this also meant I had to make the containing div of CollapsiblePanel relatively positioned).

    This works great in every browser expect the current IE release, IE8. In IE8, after closing the panel, the more tab (CollapsiblePanelTab div) momentarily moves approx 16px up and flicks back down again.

    I can't work out why (obviously), but think it might have to do with the focus/blur event detection of the javascript (beyond me at this stage of my JS learning).

    You can view the bug at work here:http://www.wakerleybrothers.co.nz/problem/ (view it in IE8).

    The javascript file is here: http://www.wakerleybrothers.co.nz/pr...psiblePanel.js (unaltered from DW's default)

    The CSS file is here: http://www.wakerleybrothers.co.nz/pr...siblePanel.css (with just the few positioning changes to DW's default as described above)

    Any thoughts/suggestions much appreciated - Thanks!
    Last edited by javascriptless; 10-22-2010 at 04:30 AM.

  2. #2
    New Coder
    Join Date
    Jan 2012
    Thanked 0 Times in 0 Posts
    this.content.style.display = "none";

    Change to....

    this.content.style.display = "auto";

    This will be found in the SpryCollapsiblePanel.js code.


Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts