Modify Daily Collapsible Panel

Hi,
The following thread is very similar to what I would like to
do.
Daily
Collapsible Panels
But, instead of opening an additional panel each day, I would
like to replace the content within one panel each day.
Any ideas?
Neal

If you have a feed or a dynamic page that is changing daily,
you can look into the HTML Panel widget.
http://labs.adobe.com/technologies/spry/samples/htmlpanel/html_panel_sample.html

Similar Messages

  • Need help to modify Spry Collapsible Panel js settings

    I posted this in the DW forum, but then found this which seems to be more appropriate....sorry if I'm screwing things up....
    I would very much appreciate if some could help me get rid of the light blue (cyan?) colored blurred 4-6 px frame that appears around the tabs when they're in focus. Or is this a behaviour built into the browsers?
    TIA
    Dan

    Hi Dan,
    I am sorry putting you in the same class as the majority.
    In your case you will probably already know that the CSS file contains everything    necessary for styling the widget, and the JavaScript file gives the widget its    functionality.
    That is why I give Newbies the advice to definately not touch the JavaScript files.
    In your case you are looking at an unwanted border around the selected panel tab. This sounded like a styling matter and, until I have seen an online page containing the problem to prove otherwise, I am staying with my resolution that it is a styling problem. I am even more convinced when I look at a Spry Collapsible Panel that uses the original unadultorated JavaScript and Stylesheets which does not have that problem.
    I hope this helps.
    Ben
    BTW, I enjoy these discussions because I learn from them. So please give it back to me and prove me wrong.

  • Modifying Spry collapsible panels behavior

    I am new to Spry. I've inserted 4 collapsible panels into a web page, all working fine. My question is, rather than having to click the tab to manually close each one, is it possible to have the previously opened panel close when you click on a new panel to open it, so that only one panel is open at a time?

    This
    <SCRIPT type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { defaultPanel: -1 });
    //-->
    </SCRIPT>
    is what the constructor at the bottom of your page wants to be. Delete the constructor for the collapsible panel.
    Your panels all came up variably high in my browsers...depending on the amount of content in each one, but you could do this:
    <SCRIPT type="text/javascript">
    <!--
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { defaultPanel: -1 }, { useFixedPanelHeights: false });
    //-->
    </SCRIPT>
    Beth

  • Daily collapsible panels

    I have a set of five collapsible panels that I would like to
    have open programatically based upon the day of the week:
    CollapsiblePanel1 = opens on saturday and stays open through
    monday
    CollapsiblePanel2 = opens on tuesday
    CollapsiblePanel3 = opens on wednesday
    CollapsiblePanel4 = opens on thursday
    CollapsiblePanel5 = opens on friday
    Does anyone know how to achieve this?

    The dataset which is created at the top of your page is only
    constructed at the onload event of your page. What it does is a
    complete rewrite of the region dslunch which is actually the
    content within the div with id=menu. This means that all attached
    behaviours are removed and you have to re-attache them. That's why
    you use the observer. You could also place the constructor script
    within the region div with id=menu.
    However in your example you are doing an inline constructor
    of the Accordion widget and when the dataset has updated the
    region.
    You could do it with the observer version:
    <script type="text/javascript">
    <!--
    var dslunch = new Spry.Data.XMLDataSet("lunchmenu.xml",
    "lunch/item");
    var observer = { onPostUpdate: function(notifier, data) {
    var dayOfWeek = (new Date).getDay();
    var panel = dayOfWeek-1;
    if (panel == -1 || panel == 5) panel = 0; //set panel to 0
    for saturday,sunday and monday
    var acc1 = new Spry.Widget.Accordion("acc1", { defaultPanel:
    panel});
    Spry.Data.Region.addObserver("Region", observer);
    //-->
    </script>
    <div id="menu" spry:region="dslunch"
    class="liveSample">
    <div id="Acc1" class="Accordion" tabindex="0">
    <div spry:repeat="dslunch" class="AccordionPanel">
    <div class="AccordionPanelTab">{day}</div>
    <div class="AccordionPanelContent">
    <img src="includes/images/{pic}.jpg" vspace="20"
    hspace="10"/>
    <br />
    {food}
    </div>
    </div>
    </div>
    or you could also use the inline version:
    <script type="text/javascript">
    <!--
    var dslunch = new Spry.Data.XMLDataSet("lunchmenu.xml",
    "lunch/item");
    //-->
    </script>
    <div id="menu" spry:region="dslunch"
    class="liveSample">
    <div id="Acc1" class="Accordion" tabindex="0">
    <div spry:repeat="dslunch" class="AccordionPanel">
    <div class="AccordionPanelTab">{day}</div>
    <div class="AccordionPanelContent">
    <img src="includes/images/{pic}.jpg" vspace="20"
    hspace="10"/>
    <br />
    {food}
    </div>
    </div>
    <script type="text/javascript">
    <!--
    var dayOfWeek = (new Date).getDay();
    var panel = dayOfWeek-1;
    if (panel == -1 || panel == 5) panel = 0; //set panel to 0
    for saturday,sunday and monday
    var acc1 = new Spry.Widget.Accordion("acc1", { defaultPanel:
    panel});
    //-->
    </script>
    </div>

  • Script to Close all the collapsible panels on click of one collapsible panel

    Hi All,
    Please help me with modifying the script or a new script to suffice the following.
    I have around 5 to 6 collapsible panels in many html files. There is a huge content under each panel and thats the reason I want to collapse i.e., close all the open panels and open the panel that is clicked on.
    that is initially i click on panel 1 - > Panel 1 opens and contents are displayed.
    now I click on panel 2 - > panel 1 should close and panel 2 should open.
    Please help me acheive this.
    Thanks in advance.

    To close the remaining panels you can just use the onclick method and however many panels you have just add them to the list spacing them out with a " , "
    Here is an example of 3 panels that close and open, upon clicking on one of the panels.
    <div id="CollapsiblePanel1" class="CollapsiblePanel">
      <div class="CollapsiblePanelTab" tabindex="0" onclick="CollapsiblePanel2.close(),CollapsiblePanel3.close()">Tab 1</div>
      <div class="CollapsiblePanelContent">Long-Sleeve Prices</div></div>
    <div id="CollapsiblePanel2" class="CollapsiblePanel">
      <div class="CollapsiblePanelTab" tabindex="0" onclick="CollapsiblePanel1.close(),CollapsiblePanel3.close()">Tab 2</div>
      <div class="CollapsiblePanelContent">T-Shirt Prices</div>
    </div>
    <div id="CollapsiblePanel3" class="CollapsiblePanel">
      <div class="CollapsiblePanelTab" tabindex="0" onclick="CollapsiblePanel1.close(),CollapsiblePanel2.close()">Tab 3</div>
      <div class="CollapsiblePanelContent">Hat Prices</div>
    </div>

  • Tabbed panels, Collapsible Panel, and Server Side Include

    Hi,
    I'm having a problem with the way a Server Side Include inside a Collapsible Panel displays.
    Here is how this particular page is set up.
    The page has spry tabbed panels.
    >>A panel has one overall Collapsible panel (the main product tab)
    >>>>Nested in that Collapsible panel are four other collapsible panels (Overview, Features, Screenshots, What's New).
    >>>>>>In each of these four collapsible panels is a server side Include that features that category's content
    E verything works fine as far as opening and closing is concerned. However, the problem is with the display. The content panel doesn't resize with the Include content, and therefore, the Include content extends outside the border of the content panel.
    I'm thinking this is because it is Include content rather than normal content. Is that right?
    Do I fix this by changing the overflow value of one the Tabbed Panel CSS styles? If so, which one should I change, and to what value?
    Or if that's not how to fix it, can anyone tell me how?
    Thanks a lot,
    Mike

    Hi, I'm using the latest version of Spry. I modified some CSS rules of the tabbed panels, but not the javascript file. I didn't do anything to the Collapsible Panel rules.
    Since first posting this thread, I changed the overflow of the Tabbed Panels Content Group CSS rule to "scroll". That did produce a scroll, but I'd much rather have the panel expand. So, I changed it back the way it was.
    Here's the page I'm working on. Click the Court Solutions tab to get to the problem panel.
    http://www.ptssolutions.com/Test/public_safety_products_3.shtml
    It has different results in IE and FireFox, but doesn't work correctly in either.
    Thanks a lot for all your help,
    Mike

  • Checking for Content in Collapsible Panel

    Is it possible, to programmatically, have Collpasible Panels
    open or closed , based on whether there is content in the panel or
    not? I have a scenario where we have emploeyed the collapsible
    panels, but have some panel sections that do not have content yet,
    and some that do. Eventually they will all have content, but not
    right now. My client still wants to retain those empty panels for
    future use, but only have the populated panels open when first
    entering the page.

    Hi Diana,
    I have a question about your second example above where "all
    panels when page loads are closed" You say that adding the
    following script should work:
    <script language="JavaScript" type="text/javascript">
    var cpg2 = new
    Spry.Widget.CollapsiblePanelGroup("CollapsiblePanelGroup2", {
    contentIsOpen: false });
    </script>
    Since I am using the Spry.widget.Accordian version. I
    modified the above script to read:
    <script language="JavaScript" type="text/javascript">
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", {
    contentIsOpen: false });
    </script>
    for the following elements markup inside of the html tags:
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=iso-8859-1" />
    <title>Spry Accordion</title>
    <script language="JavaScript" type="text/javascript"
    src="javascript/SpryAccordion.js"></script>
    <link href="styles/SpryAccordion.css" rel="stylesheet"
    type="text/css" />
    </head>
    <body>
    <div class="Accordion" id="Accordion1" tabindex="0">
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 1</div>
    <div class="AccordionPanelContent">
    Content for Panel 1 goes here!<br />
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 2</div>
    <div class="AccordionPanelContent">
    Content for Panel 2 goes here!
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 3</div>
    <div class="AccordionPanelContent">
    Content for Panel 3 goes here!
    </div>
    </div>
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Panel 4</div>
    <div class="AccordionPanelContent">
    Content for Panel 4 goes here!
    </div>
    </div>
    </div>
    <script language="JavaScript" type="text/javascript">
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    </script>
    <script language="JavaScript" type="text/javascript">
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", {
    contentIsOpen: false });
    </script>
    </body>
    The result I get is that the first panel still opens by
    default in a new or refreshed browser window. Any ideas how to
    change this so that no panels are open by default?
    Thanks,
    Robert

  • Adjusting isOpen function for Collapsible Panels

    I am interested in modifying the .js file or adding
    additional JS, to allow for when a page loads, to apply the proper
    tab class to the Collapsible tab. It seems with the curent .js as
    contructed, the page does not know to apply the proper class to an
    already opened panel tab, it only applies correctly when a user has
    actually clicked on the tab. How would I do it? All my classes are
    working correctly on the page in the Collapsible panels, I just
    need the proper class(focused or Open?) applied when the page loads
    versus waiting for user interaction.

    Hi JS3der,
    Nice catch. It's a one line fix. If you have the version of
    SpryCollapsiblePanel.js from Spry Pre-Release 1.5, all you need to
    do is find line 287:
    if (this.contentIsOpen || this.hasClassName(panel,
    this.openClass))
    this.removeClassName(panel, this.closedClass);
    and above the removeClassName call, add a call to
    addClassName like this:
    if (this.contentIsOpen || this.hasClassName(panel,
    this.openClass))
    this.addClassName(panel, this.openClass);
    this.removeClassName(panel, this.closedClass);
    --== Kin ==--

  • Checkbox (only) controls open/close function of collapsible panel

    I have a form with several collapsible panels in it, each
    with a checkbox in the tab area, like so:
    <div id="CollapsiblePanel1" class="CollapsiblePanel">
    <div class="CollapsiblePanelTab" tabindex="0">
    <input type="checkbox" name="checkbox_array[]"
    value="i_need_this" />
    I need this!
    </div>
    <div
    class="CollapsiblePanelContent">Content</div>
    </div>
    My question is this: Is there any way to control the
    open/close function of the collapsible panel using only the
    checkbox located within the tab? Ideally, the panel would still
    change based on hover, focus, etc.
    In advance, let me just say thank you so much for any help
    you might provide with this.
    - Devin

    Yessir, it is possible. I was struggling with something
    similar myself, and got it figured out. You'll need to do this in
    two steps.
    First, you should disable the existing listener, so that when
    you click the tab area nothing happens. You'll need to wade into
    your SpryCollapsiblePanel.js file and comment out a line. Somewhere
    around line 191 you'll find a function called
    "Spry.Widget.CollapsiblePanel.prototype.attachPanelHandlers".
    Within that function, around line 198, you'll find the following
    code:
    quote:
    Spry.Widget.CollapsiblePanel.addEventListener(tab, "click",
    function(e) { return self.onTabClick(); }, false);
    Comment it out by typing a double forward slash (//) at the
    beginning of the line like this:
    quote:
    // Spry.Widget.CollapsiblePanel.addEventListener(tab,
    "click", function(e) { return self.onTabClick(); }, false);
    If you test your code at this point, you'll discover that
    you've broken the collapsible panel functionality. The panel won't
    open. Now you need to set up your checkbox to trigger the
    open/close functions. To do this, you just need to add an onclick
    event to your checkbox like this:
    quote:
    <input type="checkbox" name="checkbox_array[]"
    value="i_need_this"
    onclick="CollapsiblePanel1.onTabClick();" />
    The onTabClick() function simply checks if the panel is
    already open, and calls either the open() or close() function as
    appropriate. If you needed to, you could check whether the checkbox
    is checked or not, then call the open() or close() functions
    directly.
    Please note that in modifying your SpryCollapsiblePanel.js
    file like this, you'll be modifying the behavior of all collapsible
    panels built using that file. If you need standard collapsible
    panels as well, you'll need to add the same onclick event to your
    tab panels manually.

  • Spry Collapsible panel - open and closed default question...

    I am using a Spry Collapsible panel in a vertical nav menu (DW CS4) and it's in a template for my site. I want it to be closed as default on the Home page, but when a visitor clicks to open it and selects their option, I would like it to remain open on the selected page - Is there a way to do this?
    Thank you all!
    Aza

    Check out the examples on this page: http://www.spry-it.com/examples/spry-widget-cookie-history/#collapsiblepanel

  • 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

  • How do I make a Spry collapsible panel close by clicking a link in its content?

    People don't understand that they have to close a collapsible panel by clicking on the tab. I want to put the word "close" at the end of the content and have the panel slide closed. Example: http://www.canyonranch.com/miamibeach/our_services/

    People don't understand that they have to close a collapsible panel by clicking on the tab. I want to put the word "close" at the end of the content and have the panel slide closed. Example: http://www.canyonranch.com/miamibeach/our_services/

  • Target Named Anchor in a Spry Collapsible Panel from a different page

    Let me start by saying I have combed this forum (and others) looking for a resolution to this.  I am familiar with David Powers solution on Foundationphp.com and am using that code in project to open the collapsible panel from a separate page and it works beautifullly.  The problem I have is that I want the browser to move down to a specific named anchor inside that opened collapsible panel when clicked from a different page.
    Snippets of my current code here.
    Below is the code that I have on an image that when clicked goes to the correct page and opens Panel1.  Works Perfectly!
    <a href="bamboo-species.php?col1=open#CollapsiblePanel1"><img src="images/Content/Photos/HomeScroll/blackTmbor.jpg" width="227" height="175" /></a>
    Below is the link to the .js file and the script in the head of the target page
    <script type="text/javascript" src="SpryAssets/SpryURLUtils.js"></script>
    <script type="text/javascript">
    // Grabs the values of the URL parameters for the current URL.
    var params = Spry.Utils.getLocationParamsAsObject();
    </script>
    Below is the code that I have on the target page for Panel1
    <script type="text/javascript">
    var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:params.col1 ? true : false},{duration: 1000});
    </script>
    If I have a named anchor say <a name="species1" id="species1"></a> down in the page, how do I target that named anchor from my link on the separate page.  I have tried adding the #species1 to the end of the link on the link page (see below) but with no luck. I believe those were the instructions on foundationphp.com site.
    <a href="bamboo-species.php?col1=open#CollapsiblePanel1#species1"><img  src="images/Content/Photos/HomeScroll/blackTmbor.jpg" width="227"  height="175" /></a>
    I hope (and suspect) that this is an easy fix, I just do not know what it is.  Any help or direction where to look is greatly appreciated.

    I once had the same issue can created a small function that allows me to "jump" to a element.
    function scrollTo( element ){
         var stylize = function( element){ return !+"\v1" ? element.currentStyle : document.defaultView.getComputedStyle( element , null ) },
              getPosition = function( element ){
                   // based on the SpryEffect's module:
                   var computedStyle, tryComputedStyle,
                        position = { x: 0, y: 0 };
                        if ( element.style.left  && /px/i.test(element.style.left) ){
                             position.x = parseInt(element.style.left, 10); // without padding
                        } else {
                             computedStyle = stylize( element );
                             var tryComputedStyle = computedStyle && computedStyle.left && /px/i.test( computedStyle.left );
                             if (tryComputedStyle)
                                  position.x = parseInt( computedStyle.left, 10 ); // without padding, includes css
                             if(!tryComputedStyle || position.x == 0) // otherwise we might run into problems on safari and opera (mac only)
                                  position.x = element.offsetLeft;   // includes padding
                        if ( element.style.top && /px/i.test(element.style.top) )
                             position.y = parseInt( element.style.top, 10); // without padding
                        else
                             if ( !computedStyle )
                                  computedStyle = stylize( element );
                        var tryComputedStyle = computedStyle && computedStyle.top && /px/i.test( computedStyle.top );
                             if ( tryComputedStyle )
                                  position.y = parseInt( computedStyle.top, 10 ); // without padding, includes css
                             if( !tryComputedStyle || position.y == 0 ) // otherwise we might run into problems on safari and opera (mac only)
                                  position.y = element.offsetTop;   // includes padding
                   return position;
              scroll( 0, getPosition( element ).y );
    So now we have a scrollTo function that accepts a pure HTML element as argument, all what is left to do is figure out if we have a hash, and if the anchor exits on the page.
    ( hopes this works, i wrote it without testing, but you get the general idea ):
    if( window.location.hash ){
         var hash = window.location.hash.substr(1), // remove the # from the hash
         element;
         // as anchors can also be used with id attributes, check that first,
         element = document.getElementById( hash );
         // maby we used name="" attribute
         if( !element && ( element = document.getElementsByName( hash )) ){
              element = element[0];
         // if we have a match:
         if( element ){
              // give the collapsible panel some time to init and update the DOM;
              setTimeout(function(){ scrollTo( element ) },0);
    \o/

  • IE 7 issue with Spry Collapsible Panel

    Hi Folks
    My problem is I have dropped in a small collapsible panel at the top (right) of my site pages
    which basically houses a sharing panel and a Google+1 button.
    As ever it works well on all the other major browsers with the exception of IE (7).
    Here it remains in the open position and clicking on the tab has no effect.
    I have tried many of the suggestions put forward including;
    1. Altering the js file (line 431 to now read 'this.content.style.height = "auto";')
    2. Given the panel a height of 'auto'
    3. Tweaked the z-index stacking
    4. Reordered my other js files in case of interference
    5. etc.
    I was wondering whether placing the Google+1 button inside the panel was the issue...
    Needless to say it was not with the other browsers.
    Here is the site URL : hughsitton.com/slideshow/grey_Site/contact_Grey.html
    As per usual the site goes ok then these seemingly inocuous little problems become huge and eat up oceans of time!
    Any help would be greatly appreciated as my tether end is close to being reached!
    (Apologies if you find my coding a little messy. Hope not.)
    Many Thanks
    Chris
    Message was edited by: m4hs33r

    Thank you, that gave me what I was looking for. Although now I have come across another issue when I put text in that is not the same length. What would cause the extra white space in the menu box.

  • Preventing overlapping divs (using spry collapsible panel)?

    I'm using a collapsible panel. below that is another div.
    When user clicks on collapsible panel it revelas it content. The following div with content(i.e. <div class=""> </div>
                 <div class="clean-graypop">
                   <input type="radio" value="a" name="question1" />...) moves down. At least when viewed in a browser.
    However, when viewed in print preview, and when printed. the contents of the collapsible panels now overlaps the content of the following div contents
    <p><strong>Part 1: Statistical inference</strong></p>
                <p> Questions revealed and hidden using buttons.</p>
                <div id="CollapsiblePanel2" class="CollapsiblePanel">
                  <div class="CollapsiblePanelTab" tabindex="0"><a href="#" target="_self" class="button"><span>Question 1</span></a><br />
                    <br />
                  </div>
                  <div class="CollapsiblePanelContent">
                    <p>Read the following statements (1-5) about measures of effect in epidemiological studies. </p>
                    <ol>
                      <li>A measure of effect is a quantity that measures the effect of a factor on the frequency or risk of an outcome.</li>
                      <li>The incidence of a disease cannot be calculated in a case-control study because the controls represent an unknown fraction of the whole population.</li>
                      <li>Rate ratios, risk ratios, odds ratios, differences between means and differences between medians can all be used as effect measures in both cohort and intervention studies.</li>
                      <li>The only measures of effect that can be calculated in a cross-sectional study are prevalence ratios and odds ratios. </li>
                      <li>A prevalence ratio can be calculated in an ecological study.</li>
                    </ol>
                    <p>Which one of the following options (a-e) is correct?</p>
                  </div>
                </div>
                <br />
                <div class=""> </div>
                <div class="clean-graypop">
                  <input type="radio" value="a" name="question1" />
                  a) Statements 1 and 2 are correct<br />
                  <input type="radio" value="b" name="question1" />
                  b) Statements 1, 3 and 5 are correct<br />
                  <input type="radio" value="c" name="question1" />
                  c) Statements 1, 2, 3 and 4 are correct<br />
                  <input type="radio" value="d" name="question1" />
                  d) Statements 2, 3, 4 and 5 are correct<br />
                  <input type="radio" value="e" name="question1" />
                  e) All of the statements are correct<br />
                </div>
                <br />

    Define a media type CSS for print that compensates. Read here: http://www.w3.org/TR/CSS2/media.html
    Mylenium

Maybe you are looking for