2 Replies Latest reply on Oct 4, 2013 8:03 AM by ladobeugm

    Custom Scrollbar: Nesting it in a symbol

    ladobeugm Level 1

      This is based upon another post (http://forums.adobe.com/thread/1144336) that Zaxist started awhile back in the summertime. He showed how you can make a custom scrollbar using the JQuery Custom Content Scrollbar plugin. Sure enough, it works. If you text field is on the stage. Nest it in a symbol? And it stops working. No, you still get a scrollbar but it's the generic one the browser produces and I need one that works in all browsers, including Firefox. Tried all sorts of paths to the symbol, but I still keep getting the generic scrollbar.

       

      I've got a file in Dropbox that illustrates this rather easily. The area on the left is what Zaxist produced....and works. The one on the right is the one I produced from the nested symbol. To see it from the resulting HTML file, just click the link button and it'll slide in on the screen.

       

      https://www.dropbox.com/s/iuud0f97dgvveho/scrollbar_nested.zip

        • 1. Re: Custom Scrollbar: Nesting it in a symbol
          ladobeugm Level 1

          UPDATE: So I played around some more regarding this issue and I found something interesting in the following series of files:

           

          https://www.dropbox.com/s/1glmftv6uim4zwm/scrollbar_nested2.zip

           

          In this instance I removed the LINK button and just had the content text box appear immediately with HTML inserted into the copy text field. In this case, the scrollbar appeared.

           

          So it seems to me the issue is that because I'm insinuating a click action with that link button that inserts the HTML dynamically, that seems to be the reason the JQuery Custom Content Scrollbar does not appear and instead we get the plain vanilla scrollbar instead.

           

          Basically, I want Rocky Road to show up.

           

          Here's the code I'm calling at in CompositionReady:

          var stage = sym.getComposition().getStage()

           

          yepnope({nope:[ 'jquery.mCustomScrollbar.css',

                               'jquery.mousewheel.min.js',

                               'jquery.mCustomScrollbar.js',

                               'jquery-ui-1.8.21.custom.min.js',

                               'jquery-1.8.3.min.js',

                              ],complete: init});

              function init (){

                      sym.$("copied").mCustomScrollbar({

                          scrollInertia:500,

                          scrollEasing:"easeOutCirc",                    

                          scrollButtons:{

                              enable:true

                                  }

                          });

                      sym.getComposition().getStage().getSymbol('content').$('copy').mCustomScrollbar({

                          scrollInertia:500,

                          scrollEasing:"easeOutCirc",                    

                          scrollButtons:{

                              enable:true

                                  }

                          });

              }

          sym.$('copied').html('<p>Lots of text goes here</p>')

          sym.getComposition().getStage().getSymbol('content').$('copy').html('<p>Lots of text goes here</p>')

          Didn't think it was necessary to add all that text from my .html.

           

          So does it make more sense to place it somewhere else?

          1 person found this helpful
          • 2. Re: Custom Scrollbar: Nesting it in a symbol
            ladobeugm Level 1

            OK, solved it. Placed the following inside of my button symbol on click:

            buttons.reset();

            sym.getSymbol("btnLink").$("back").css({opacity: 1});

            var stage = sym.getComposition().getStage()

            stage.$("content").animate({top: 855}, { easing: "easeOutQuad", duration: 1000 });

            sym.getComposition().getStage().getSymbol('content').$('copy').html('<p>Lots of text goes here</p>')

            sym.getComposition().getStage().getSymbol('content').$('copy').mCustomScrollbar({

                            scrollInertia:500,

                            scrollEasing:"easeOutCirc",                    

                            scrollButtons:{

                                enable:true

                                    }

                            });

            WB = 1;

            OK, this actually works and the following files show just that:

             

            https://www.dropbox.com/s/000m1t1wozxj2kq/scrollbar_final.zip

             

            Here's the one issue I will encounter eventually. So let's say I have 10 buttons on the stage calling that same exact mCustomScrollbar script. If I had it in the compositionReady, I of course, could use it just once. That was the original plan. Now I'm stuck reusing it over and over again in each of my buttons click events. Some way I can consolidate this?