11 Replies Latest reply on Jan 6, 2009 9:47 AM by Newsgroup_User

    scrolling list in spry menu

    throbbin_robin
      Hi

      I have a vertical spry menu with about 20 items in one sub menu. When this is shown on the website it is longer than the webpage. I'd like to have it restricted so you can only see maybe 10 items, then when you reach the bottom with the mouse the list scrolls up automatically.

      Can anyone help, or is this simply not possible with Spry?

      Thanks!
      G.
        • 1. Re: scrolling list in spry menu
          Level 7
          It's probably possible if you edit the CSS to make one or more ULs set to
          overflow auto with a height. However, and this is simply a suggestion, you
          might want to consider a more robust, feature-rich menu system that
          automatically does window edge detection to reposition sub-menus. If you are
          interested, post back and I'll show you an example.

          --
          Al Sparber - PVII
          http://www.projectseven.com
          The Finest Dreamweaver Menus | Galleries | Widgets
          http://www.projectseven.com/go/pop
          The Ultimate DW Menu System




          "throbbin robin" <webforumsuser@macromedia.com> wrote in message
          news:gjqpjo$cpr$1@forums.macromedia.com...
          > Hi
          >
          > I have a vertical spry menu with about 20 items in one sub menu. When this
          > is
          > shown on the website it is longer than the webpage. I'd like to have it
          > restricted so you can only see maybe 10 items, then when you reach the
          > bottom
          > with the mouse the list scrolls up automatically.
          >
          > Can anyone help, or is this simply not possible with Spry?
          >
          > Thanks!
          > G.
          >

          • 2. scrolling list in spry menu
            throbbin_robin Level 1
            Hi Al

            Thanks for replyng.

            I'm trying the overflow option, but it looks really messy (doesn't seem to be possible to hide the scrollbars and make scrolling automatic). So, yes please, do show me an example of window edge detection.

            Regards

            Gordon.
            • 3. Re: scrolling list in spry menu
              Level 7
              Sure. This page is PMM2 in default mode and edge detection kicks in when you
              make your window short. Try this page with your browser maximized, then make
              your window shorter:
              http://www.projectseven.com/products/menusystems/pmm2/testing/edge-detect/

              Of course, if you make your window ridiculously short, you can get the menu
              bottom to be below the window edge.

              This page is a default PMM2 menu, with the long menu section set to scroll,
              via simple CSS edit:
              http://www.projectseven.com/products/menusystems/pmm2/testing/edge-detect/

              This is easy to do with PMM2 because we rewrite the DOM to add special hooks
              for all parts of the menu to facilitate easy customization/

              --
              Al Sparber - PVII
              http://www.projectseven.com
              The Finest Dreamweaver Menus | Galleries | Widgets
              http://www.projectseven.com/go/pop
              The Ultimate DW Menu System




              "throbbin robin" <webforumsuser@macromedia.com> wrote in message
              news:gjr797$hp$1@forums.macromedia.com...
              > Thanks for replyng.
              >
              > I'm trying the overflow option, but it looks really messy. Yes, please do
              > show me an example of window edge detection.
              >
              > Regards.

              • 4. Re: scrolling list in spry menu
                Level 7
                "Al Sparber - PVII" <pviiteam@projectSPAseven.com> wrote in message
                news:gjree5$9dc$1@forums.macromedia.com...


                > This page is a default PMM2 menu, with the long menu section set to
                > scroll, via simple CSS edit:
                > http://www.projectseven.com/products/menusystems/pmm2/testing/edge-detect/
                >
                > This is easy to do with PMM2 because we rewrite the DOM to add special
                > hooks for all parts of the menu to facilitate easy customization/

                The URL for the second page should be:
                http://www.projectseven.com/products/menusystems/pmm2/testing/edge-detect/index2.htm

                • 5. Re: scrolling list in spry menu
                  throbbin_robin Level 1
                  Al, these look good, thanks. I'm not going to have much time in the next day or two but will certainly report back...
                  • 6. Re: scrolling list in spry menu
                    throbbin_robin Level 1
                    Hi again Al

                    I'm new to all this but it looks like I need to purchase your softwre to make my list work like this. Sorry, but have no budget for this. I really need to get it working with basic Dreamwvr Spry.

                    Thanks anyway,
                    Gordon.
                    • 7. Re: scrolling list in spry menu
                      Level 7
                      Hi Gordon,

                      Spry does not have edge detection capabilities, but you should be able to
                      get scrolling handled by assigning an ID to the UL element you want to
                      scroll and then writing an ID selector rule in your CSS to set a height and
                      overflow auto.

                      --
                      Al Sparber - PVII
                      http://www.projectseven.com
                      The Finest Dreamweaver Menus | Galleries | Widgets
                      http://www.projectseven.com/go/pop
                      The Ultimate DW Menu System




                      "throbbin robin" <webforumsuser@macromedia.com> wrote in message
                      news:gjtov2$f4j$1@forums.macromedia.com...
                      > Hi again Al
                      >
                      > I'm new to all this but it looks like I need to purchase your softwre to
                      > make
                      > my list work like this. Sorry, but have no budget for this. I really need
                      > to
                      > get it working with basic Dreamwvr Spry.
                      >
                      > Thanks anyway,
                      > Gordon.
                      >

                      • 8. Re: scrolling list in spry menu
                        .V1 Level 5
                        Well Spry Doesn't have the edge detection that PPM has but that doesn't mean there aren't ways to mimic such behavior.

                        The Spry Effect library has allot great extensions to get information about elements ( Spry.Effect.getDimensions is probably what you will need ) So you can get the heigh of each menu. Than get the window size, and if its smaller than the height of menus, set the width of the menu's with an overflow:auto.

                        If you are willing to learn, there are always ways to do it. With out paying for it. Spry has all the functionality you need, its just your job to link each part to it to create the specific functionality that you desire.

                        For example, you can use SpryDOMUtils.js to set the style attributes, and the required elements (using the the Spry Element Selector (labs.adobe.com/technologies/spry/docs.html has good documentation about it)) and you combine the height checks using the forEach function that is attached to the Spry Element selector (it loops through you results)

                        But than again, like Al mentioned above, setting it static inside the CSS would also work.
                        • 9. Re: scrolling list in spry menu
                          Level 7
                          "V1 Fusion" <info@3rd-eden.com> wrote in message
                          news:gjtt52$kji$1@forums.macromedia.com...
                          > Well Spry Doesn't have the edge detection that PPM has but that doesn't
                          > mean
                          > there aren't ways to mimic such behavior.

                          Mimic, ape, yes, sure. What's missing is finesse, which should be evident to
                          the discerning eye when operating both menus. I understand you've made a
                          niche for yourself as a spry community expert - but it's comments like this
                          that get me irked and compel me to revert to candidness - but I won't :-)
                          Suffice it to say, edge detection and dynamic repositioning is a bit more
                          complex and beyond the capabilities of the average Dreamweaver user.

                          Spry is free and in that regard is worth every penny it costs :-)

                          > The Spry Effect library has allot great extensions to get information
                          > about
                          > elements ( Spry.Effect.getDimensions is probably what you will need ) So
                          > you
                          > can get the heigh of each menu. Than get the window size, and if its
                          > smaller
                          > than the height of menus, set the width of the menu's with an
                          > overflow:auto.
                          >
                          > If you are willing to learn, there are always ways to do it. With out
                          > paying
                          > for it. Spry has all the functionality you need, its just your job to link
                          > each
                          > part to it to create the specific functionality that you desire.
                          >
                          > For example, you can use SpryDOMUtils.js to set the style attributes, and
                          > the
                          > required elements (using the the Spry Element Selector
                          > (labs.adobe.com/technologies/spry/docs.html has good documentation about
                          > it))
                          > and you combine the height checks using the forEach function that is
                          > attached
                          > to the Spry Element selector (it loops through you results)
                          >
                          > But than again, like Al mentioned above, setting it static inside the CSS
                          > would also work.

                          That's not exactly what I said. What I said was to assign an ID (or a class
                          if more than one menu needs this effect) to the UL tag for the menu section
                          that needs to scroll and then to write a CSS selector that sets a height
                          (not a width) and overflow to auto. If Gordon posts an example page I'd be
                          happy to tell him exactly what to do.

                          --
                          Al Sparber - PVII
                          http://www.projectseven.com
                          The Finest Dreamweaver Menus | Galleries | Widgets
                          http://www.projectseven.com/go/pop
                          The Ultimate DW Menu System






                          • 10. scrolling list in spry menu
                            throbbin_robin Level 1
                            quote:

                            Originally posted by: Newsgroup User
                            "V1 Fusion" <info@3rd-eden.com> wrote in message
                            news:gjtt52$kji$1@forums.macromedia.com...

                            ...What I said was to assign an ID (or a class
                            if more than one menu needs this effect) to the UL tag for the menu section
                            that needs to scroll and then to write a CSS selector that sets a height
                            (not a width) and overflow to auto. If Gordon posts an example page I'd be
                            happy to tell him exactly what to do.

                            --
                            Al Sparber - PVII
                            http://www.projectseven.com
                            The Finest Dreamweaver Menus | Galleries | Widgets
                            http://www.projectseven.com/go/pop
                            The Ultimate DW Menu System




                            Al, I'm definitely out of my depth here. I've tried lots of variations with heights & overflows but can't get it to look right and scroll automatically without a scrollbar. You'll see from the attached code there's a submenu of continents and another submenu of countries within each of these. The submenu for Europe is the only really big one now but I'd need the scroll feature to apply to all as more countries will be added as the website (hopefully) grows. I guess I'd want each menu to be limited to about 300 px in height. If you can show me how then I'd be delighted.

                            Also, the top layer (including 'home', 'general features', 'specific features' etc looks fine on Firefox, Safari & Opera, but on IE it has 'home' & 'general resources' onthe same line. Can you tell me why?

                            Thanks!
                            • 11. Re: scrolling list in spry menu
                              Level 7
                              Hi Robin,

                              I can't see any attachments.

                              Create a test folder on your web server and upload your page with the menu.
                              Then go here and send an email to our support email address with a link to
                              the page:
                              http://www.projectseven.com/support/index.htm

                              I'll give you the code to do what you want, if it's possible with spry.

                              --
                              Al Sparber - PVII
                              http://www.projectseven.com
                              The Finest Dreamweaver Menus | Galleries | Widgets
                              http://www.projectseven.com/go/pop
                              The Ultimate DW Menu System




                              "throbbin robin" <webforumsuser@macromedia.com> wrote in message
                              news:gk04su$nvo$1@forums.macromedia.com...
                              >
                              quote:

                              Originally posted by: Newsgroup User
                              > "V1 Fusion" <info@3rd-eden.com> wrote in message
                              > news:gjtt52$kji$1@forums.macromedia.com...
                              >
                              > ...What I said was to assign an ID (or a class
                              > if more than one menu needs this effect) to the UL tag for the menu
                              > section
                              > that needs to scroll and then to write a CSS selector that sets a height
                              > (not a width) and overflow to auto. If Gordon posts an example page I'd be
                              > happy to tell him exactly what to do.