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

Similar Messages

  • When I run a web browser immediately loaded two blank tabs. How to make the browser load the only one?

    when I run a web browser immediately loaded two blank tabs. How to make the browser load the only one?

    Did you check the home page setting to make sure that if doesn't have pipe (|) symbols?
    See these articles for some suggestions:
    *https://support.mozilla.org/kb/Firefox+has+just+updated+tab+shows+each+time+you+start+Firefox
    *https://support.mozilla.org/kb/How+to+set+the+home+page - Firefox supports multiple home pages separated by '|' symbols
    *http://kb.mozillazine.org/Preferences_not_saved

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

  • How to make the browser reload an updated jar-file?

    Hi there,
    Previosly when running applets using MSIE, all needed to reload an updated jar-file was pressing CTRL+F5
    Currently I've been assigned to re-develop some of my old applets and now I realize that the old CTRL+F5 won't do the trick any more since the old jar file is still in the cache and the new jar file is not loaded.
    I learned the hard way that all I can do is to manually clear the cache of the browser (Tools | Options | Delete files) and restart the browser and after that the new jar file is correctly loaded.
    Cache settings of the browser is set to "Reload on every visit to the page"
    Currently running Win2k, MSIE 6.0 SP1 and MSJVM 3809 but the problem also exists on Win2k, MSIE 6.0 and MSJVM 3186.
    Isn't there any easier way to do this?
    Currently I don't even mind not caching the jar-files at all as long as I don't get my development work trashed by having to restart the browser after every new build...
    Why has the old CTRL+F5 behaviour been changed?
    BR
    /Jonas

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

  • How to make the Wallet opened automatically?

    Hi All,
    I want any wallet that I created to be opened automatically without executing an order to do it. How Plz?

    there is a choice at the Wallet Manager to set it as opened automatically
    but when I restart Windows and try to use it. SQL Plus tells me that the Wallet is not opened!
    How can I make it opened automatically when starting Windows directly?
    Is there any way to let the Windows to start sql script when it starts direclty?
    like a service or a scheduled task. Or to start automatically as ORCL Oracle Service!

  • How to make the video close automatically?

    Is it possible? Or we need to add a Close button, and let it execute the following JavaScript?
    javascript:window.close()
    It seems that the code does not work in PDF (the format that the project is published in).

    Did you set the Preferences, Project, Start and End, to Close project instead of the default Stop Project?
    Lilybiri

  • IMA 11 (Appropriation request) How to make the partner filled automatically

    Dear All,
    I have requirement to prevent partner (position) to be changed by some users. Is it possible to make the partner filled automatically ? Let say i choose appropriation request type A1. It will belong to 5 positions.
    Let say : Applicant : A
    Approval 1: B 
    Approval 2: C
    Approval 3: D
    APproval 4: E
    Approval 5 :F
    Means everytime user choose Appropriation request type A1 .. the column partner will fill with position A,B,C,D,E,F and cannot be changed.
    PLZ help...
    cheers,
    nies

    ok

  • How to make the browser's menu and web address bar disapper?

    Hi,
    I want to run my application in full window. That is to say, I do not want the browser having menu and URL field.
    Is there any way to do that?
    Stephen

    open method (window object)
    Opens a new web browser window.
    Syntax
    [windowVar = ][window].open("URL", "windowName", ["windowFeatures"])
    windowVar is the name of a new window. Use this variable when referring to a window's properties, methods, and containership.
    URL specifies the URL to open in the new window. See the location object for a description of the URL components.
    windowName is the window name to use in the TARGET attribute of a <FORM> or <A> tag. windowName can contain only alphanumeric or underscore (_) characters.
    windowFeatures is a comma-separated list of any of the following options and values:
    toolbar[=yes|no]|[=1|0]
    location[=yes|no]|[=1|0]
    directories[=yes|no]|[=1|0]
    status[=yes|no]|[=1|0]
    menubar[=yes|no]|[=1|0]
    scrollbars[=yes|no]|[=1|0]
    resizable[=yes|no]|[=1|0]
    width=pixels
    height=pixels
    You may use any subset of these options. Separate options with a comma. Do not put spaces between the options.
    pixels is a positive integer specifying the dimension in pixels.

  • Spry collapsible panel - panel (link) border issue

    Hi folks. I'm new to spry and I'm inserting a spry collapsible panel into a web page in Dreamweaver CS4. It all works fine but i have this very ugly border around the panel tab (the link that you click to open the panel). In frefox its a dotted line and in safari its a blue border. I havent had change to check this in other browsers/platforms. (I'm using a mac) I've read that its an accessabilty thing? which can be overcome in a different way. I have to get rid of this border as it completely spoils the design of the site..
    Anyone know how to remove this?
    Thanks in advance :-)

    Hi, I asked that same question a minute ago, then I saw your solution you wrote to someone else previously.
    Works for me too!
    Thanks for solving it!
    Here is another question if you can help...
    I currently have  ">>read more" at the end of the text in my top content tab panel, so the user knows to click and read more in a lower panel.
    I want that ">>read more" text to disappear when it is clicked and lower content section is open.
    And then a "read less" to appear so user knows to click the top tab content to close the bottom panel.
    Can this be done using this Spry Collapsible technique?
    Thanks!

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

  • Need help with Spry Collapsible panels

    I'm fairly inexperienced with Dreamweaver (CS4) and especially new to the Spry feature, so bear with me... I need all the help I can get! I've inserted six Spry collapsible panels to an HTML page and uploaded everything (including SpryCollapsiblePanel.css and SpryCollapsiblePanel.js), but they're automatically displaying as open and I can't click on them or close them. I'd like them to be closed until selected and opened.
    What am I doing wrong?
    Here's the URL: http://www.nicolegriffith.com/trustm.html
    Thank you!

    I just looked at your code, and your SpryAssets content is not there. This is the extent of your SpryCollapsablePanel.js
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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" xml:lang="en" lang="en">
    <head>
      <title>404 - Not Found</title>
    </head>
    <body>
      <h1>404 - Not Found</h1>
    </body>
    </html>
    Make sure your spry assests folder is in your root directory and upload the files once you know they are where they should be.
    Gary

  • 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

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

Maybe you are looking for

  • CCM 2.0 upgrade problem..

    Hi all, I have upgrad CCM 1.0 to CCM 2.0. After upgrade while go to Edit catalog: Following Error was coming: "Error when reading catalogs; error when reading master catalog". So i ran the report: /CCM/INITIALIZE_CME. After that i am facing problem..

  • Cisco Nexus 5000 upgrade

        Is there any gotchas or things we should know when going from version  5.1(3)N2(1)   to a  7.X level code ?   Is it as simple as getting the code and kickstarter images on and then using the install command.  these are all single supervisor modul

  • IMac G5 - Can't find accurate tech info

    Hello, Forum; My G5 iMac developed a problem last week where it tries to start, the screen stays dark (no activity what so ever) and the fan goes into overdrive. All conventional work-arounds have had no effect (restarting from DVD drive to reinstall

  • ALBPM5.7: Using ALUI with struts application??

    I have a fully functional struts application that uses PAPI to interact with ALBPM5.7. Now I want to Expose all UI screens on the portal server. This need not be portlets, rather using ALUI framework/ EDK to wrap the UI JSPs and expose them in our po

  • Iphoto keeps freezing then crashing upon opening

    my iphoto keeps freezing then crashing upon opening