Spry collapsible panel to open horizontally

Greetings,
I am using CS5.
Is there a way to make the sprycollapsiblepanel open horizontally (left to right...right to left) not the default, vertically (up and down)?
Much Thanks!

Hi Gramps,
Much thanks! I was hoping a horizontal feature would have been added by now (the post looks to be 2 years old), but this looks like the slide effect is what I want.
Thanks again!

Similar Messages

  • 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 to open from link on same page

    Hi guys.
    I have a page with about 17 collapsible panels. What I would like to do is in my sidebar have a quicklinks which will 1) anchor down to the relevant panel and 2) open that closed panel.
    My first problem I know can easily be fixed with anchor tags which I have done. I will also assume that I can do something like <a href="#anchorname" onclick="" > to solve my 2nd problem, but can someone maybe advise to what the command is to actually open the panel. I have attached a sample below of one of my panels:
    var banking10 = new Spry.Widget.CollapsiblePanel("banking10", {contentIsOpen:false});
    I have VERY VERY VERY limited experience with Javascript (else I guess this would have been a breeze )
    Thanks in advance!

    The following is a document called untitled.html
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet">
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet">
    </head>
    <body>
    <div>
      <ul id="MenuBar1" class="MenuBarHorizontal">
        <li><a href="untitled.html?col1=1">Open 1st CP</a></li>
        <li><a href="untitled.html?col2=1">Open 2nd CP</a></li>
      </ul>
    </div>
    <div id="CollapsiblePanel1" class="CollapsiblePanel" style="clear:both;">
      <div class="CollapsiblePanelTab" tabindex="0">Tab</div>
      <div class="CollapsiblePanelContent">Content CP1</div>
    </div>
    <div id="CollapsiblePanel2" class="CollapsiblePanel" style="clear:both;">
      <div class="CollapsiblePanelTab" tabindex="0">Tab</div>
      <div class="CollapsiblePanelContent">Content CP2</div>
    </div>
    <script src="SpryAssets/SpryMenuBar.js"></script>
    <script src="SpryAssets/SpryCollapsiblePanel.js"></script>
    <script src="SpryAssets/SpryURLUtils.js"></script>
    <script>
    var params = Spry.Utils.getLocationParamsAsObject();
    var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen: params.col1 ? true : false});
    var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen: params.col2 ? true : false});
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>
    Copy and paste the above into your own document to test the code, making sure that all the linked files are in their correct location. The markup contains a SpryMenuBar and two SpryCollapsiblePanel's
    Gramps

  • 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

  • Make a spry collapsible panel open on hover??

    Hi All,
    I'm trying to play with the Spry Collapsible Panel and would
    like to have it open on hover but not on the on click, I've
    attached the standard js code Dreamweaver produces, and would be
    very grateful if you could highlight what needs to be
    changed,---

    http://labs.adobe.com/technologies/spry/articles/tabbed_panel/index.html
    See the section titled Open panels programmatically
    <li class="TabbedPanelsTab" tabindex="0"
    onmouseover="TabbedPanels1.showPanel(0)">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0"
    onmouseover="TabbedPanels1.showPanel(1)">Tab 2</li>
    Ken Ford
    Adobe Community Expert - Dreamweaver
    Fordwebs, LLC
    http://www.fordwebs.com
    "miachu" <[email protected]> wrote in
    message news:fvihb0$miq$[email protected]..
    > hi there,
    >
    > did you ever find a solution to this dreamweaver
    collapsible panel problem? i
    > am having the same problem...i need it to open on hover
    instead of click. it
    > makes so much more sense for them to have it on
    hover/roll over!
    >
    > help would be much appreciated!
    > thanks.
    >

  • Spry Collapsible Panels - Way to set them open only once per visit?

    I'm wondering if there is a way to set a Spry Collapsible
    Panel to be automatically open on the initial loading of the site,
    but as people navigate around the site and back and forth from the
    home page, to be able to have it closed on subsequent visits to the
    home page.
    Right now I have a collapsible panel set to OPEN by default
    when someone first hits the home page, but if they navigate around
    the site and then click to the home page again, they get the panel
    open again. Naturally, that will end up annoying people.
    Any suggestions?
    Thanks in advance!
    Sara

    Flash local shared object can help with this. Here is some info:
    http://www.bestflashanimationsite.com/tutorials/4/
    http://www.permadi.com/tutorial/flashSharedObject/index.html
    http://www.kirupa.com/developer/mx/sharedobjects.htm
    Best wishes,
    Adninjastrator

  • How to make Spry Collapsible Panels open one at a time?

    Hello,
    I am using CS5 and want to use the spry collapsible panels. What I notice (and I think this wasn't the case in cs3) is that all panels can be open at the same time. I don't want that happen. I only want one panel to be open at a time. If someone clicks on a panel that is closed, I want the current panel to close and the one they clicked on to open. I don't want multiple panels to be opne at once. How can I do this? I am not a web developer by any means, so please be easy on me with code. I think in CS3 it used to work this way. Any help would be appreciated! Thank you in advance!

    GRAMPS!! That's it!! It was the accordian panel I had used in the past!!!! Oh, thank you, I was driving myself crazy as to why it wasn't working the way I had remembered!!!!!!!! THANK YOU!!
    I was told you would probably help me find the right answer by Hans-g!
    Thanks again!

  • Link to tabs in spry collapsible panel work in IE-8; not Firefox or Safari

    I have little experience with Spry. I've asked my question on the user forum in Dreamweaver several times with no response. I am hoping that someone somewhere in the Adobe community can help me resolve this issue.
    I created links from the top of a page to the tabs of a spry collapsible panel underneath.
    In IE-8, on one page, with a small collapsiable panel, clicking the link creates a rollover effect on the appropriate panel. This effect works wonderfully for my purposes.On another page, with a long collapsible panel, clicking the link jumps the user to the panel AND creates a rollover effect. Perfect.
    In Firefox and Safari, clicking the link does nothing. If I right-click the link in Firefox, I create a duplicate of the page.
    I am using Windows XP and Dreamweaver CS4
    http://www.judydiamondstone.net/Writing.html
    click any of the links in the first section of the page
    Thanks.

    Arnout, Thank you so much for the guidance!
    My code now looks like this:
    (Click the first tab
    below to open; click to close.)
    but it still doesn't work
    (I still like the error effect in IE!)
    Do I need to add to the CSS or JS script that comes with the spry widget?
    I am accessing all the tutorials I can find, including a very clear
    explanation of event handlers in a Safari online search but I'm obviously
    missing one or more basic concepts.
    Page with new code on the
    elements:
    http://www.judydiamondstone.net/Writing.html

  • 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

  • Need help with spry collapsible panel (menu)

    I learn as I go when I created my website http://www.invitation-fascination.com/shapes.html and so far I've created a page with 13 spry collapsible panels- I think it came out pretty well.  Now this is what I want to add to the page: 
    I want to create a selector (drop down) menu above the panels with the option to select any one of the 13 panels.
    Once selected it will move directly to that panel and open it. 
    I've tried the piselect thing and with the "open" and "close" button that will programatically open the panels, but what I want is for the panel to be selected from the menu and then the page goes directly to that panel and it then opens.
    Is there a way this can be done?  Please help
    I'm really not that good at this stuff- please be easy with your response- thank you

    Have a look at the last example http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
    Gramps

  • Dynamic data in Spry Collapsible Panel

    Hi guys,
    Am trying to get data from a Data Set into the Spry
    Collapsible Panel, with little luck. Have tried the following and
    was wondering if i am doing something wrong?
    <div spry:region="dsProduct">
    <div id="CollapsiblePanel1" class="CollapsiblePanel">
    <div class="CollapsiblePanelTab"
    tabindex="0">{product_name}</div>
    <div
    class="CollapsiblePanelContent">">{product_details}</div>
    </div>
    </div>
    This example displays the field i want from the data set
    {product_name}, but will not collapse open the panel containing
    {product_details}.
    Any suggestions?

    hi Jay,
    will this help you?
    Forum
    thread

  • Help with spry collapsible panel

    I have several spry collapsible panels that I am using for
    navigation and want an open panel to close automatically when a new
    one is opened. Can this be done? I checked the "customuze this
    widget" in the property inspector but does not give any info on the
    behavior of them. I am sure it is in the java code but I am not a
    Java expert by any means.

    Have a look at the last example http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
    Gramps

  • Spry collapsible panel fix for IE

    hey
    anyone out there knows how to fix the spry collapsible panels to work properly on IE ?
    Firefox is perfect  but  they appear and stay open even when clicked
    how could i make them appear closed and open only if clicked, close again when clicked to close? just like firefox
    ( http://www.pupr.edu/template )

    Remove the empty element
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li class="MAINbtn"><a href="index.asp">Deanship</a></li>
      <li class="MAINbtn"><a href="research.asp">Research</a></li>
      <li class="MAINbtn"><a href="faculty.asp">Faculty</a></li>
      <li class="MAINbtn"><a href="labs.asp">Labs</a></li>
      <li class="MAINbtn"><a href="events.asp">Events</a></li>
      <li class="MAINbtn"><a href="students.asp">Students</a></li>
      <li class="MAINbtn"><a href="Programs2.asp">Programs</a>    </li>
      <!-- <li>
      </li> -->
    <li class="MAINbtn" style="margin-left:400px"><a href="interested.asp">Interested ?</a></li></ul>
    and remove the unused CollapsilbePanel1 constructor
    <script type="text/javascript">
    <!--
    // var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
    var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
    var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
    var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4", {contentIsOpen:false});
    var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5", {contentIsOpen:false});
    //-->
    Gramps

  • Spry Collapsible Panel at bottom of page - how to make the browser scrolldown automatically

    The question is -
    i have a collapsible panel at the bottom of my page that I'm using as a footer menu.
    It is 200px tall. The visitor clicks on "FIND OUT MORE", then the panel opens 200px tall.
    I want the viewing area of browser to focus on the content of this panel, and automatically scroll down 200px to accomodate the new real estate at the bottom of the page.
    Now they click on it, but then have to manually scroll down.
    How can I do this? What do I add to the Spry Collapsible Panel js scripts?
    I tried using a tag at the bottom of the 200px but can't get it to work correctly.
    Dreamweaver CS5.
    thanks

    I have been closing IE and reopening it for 7 months now. I don't of any other way to reload an applet.
    Jason

  • Spry Collapsible Panel Rotation

    I have been looking through many tools that have came with Dream Weaver and the spry collapsible panel would look great in my site but im having trouble putting it in the way I would like it to look.  Im trying to insert the spry so that the tabs are read verticaly and open horizantaly with all of its contents being able to be read normaly instead of verticaly. What would I have to edit to to do this?

    To convert the Spry Collapsible Panel would require a lot of changes in the JS. It is therefore better to find a ready-made solution such as here http://www.portalzine.de/Horizontal_Accordion_Plugin_2/index.html
    Gramps

Maybe you are looking for