7 Replies Latest reply on Aug 7, 2014 7:51 AM by Preran

    Use jQueryUI slider within adobe edge animate.

    Manfred Specht

      I am looking for a way to use jQueryUI slider within adobe edge animate.

       

      I have to build a boilerplate, that our designers are able to use for building different sliders. But when I use the .slider()-function, I always get the error:

       

      Uncaught TypeError: Object #<Object> has no method 'replace' at edge.2.0.0.min.js:135

       

      I think, the cause is, that jQueryUI builds an a-tag, in order to have a slider.

       

      Do you know a way to fix that? The only way I found on the web was, to use .draggable(). But that is of no use for us. We need .slider().

        • 1. Re: Use jQueryUI slider within adobe edge animate.
          bdominguez2007

          Same problem here...

           

          1. Uncaught TypeError: Object #<Object> has no method 'replace' edge.2.0.0.min.js:135
            1. (anonymous function)edge.2.0.0.min.js:135
            2. d.cssedge.2.0.0.min.js:135
            3. t.widget._refreshValuejquery-ui-1.10.3.custom.min.js:6
            4. (anonymous function)jquery-ui-1.10.3.custom.min.js:6
            5. t.widget.valuejquery-ui-1.10.3.custom.min.js:6
            6. (anonymous function)jquery-ui-1.10.3.custom.min.js:6
            7. t.widget._slidejquery-ui-1.10.3.custom.min.js:6
            8. (anonymous function)jquery-ui-1.10.3.custom.min.js:6
            9. t.widget._mouseDragjquery-ui-1.10.3.custom.min.js:6
            10. (anonymous function)jquery-ui-1.10.3.custom.min.js:6
            11. e.widget._mouseMovejquery-ui-1.10.3.custom.min.js:6
            12. (anonymous function)jquery-ui-1.10.3.custom.min.js:6
            13. o._mouseCapture._mouseDistanceMet._mouseDelayMet._mouseMoveDelegatejquery-ui-1.10.3.custom.min.js:6
            14. f.event.dispatchjquery-1.7.1.min.js:3
            15. h.handle.ijquery-1.7.1.min.js:3
          • 3. Re: Use jQueryUI slider within adobe edge animate.
            squizzypouet Level 1

            Hi,

             

            I am having the same problem ... does anybody have a solution ?

             

            Cheers,

            Steven

            • 4. Re: Use jQueryUI slider within adobe edge animate.
              Fagan Level 1

              same problem here too!!

              • 5. Re: Use jQueryUI slider within adobe edge animate.
                squizzypouet Level 1

                Hey,

                 

                I maybe have a "solution" but it's really not an official one.

                 

                It seems that the bug comes when edge runtime tries to reed and camelize the slider's CSS attributes.

                I really NOT guarantee that the modification I propose won't have any side effect ... do it at your own risks !  But it seems to work fine for me =)


                The file to edit is edge.4.0.1.min.js, the minified version of edge.4.0.1.js,

                 

                I think the problem is in this function :

                 

                edge.4.0.1.js , line 4600 

                $.prototype.css = function (k, v) {

                            var r = css.apply(this, arguments),

                                cache,

                                kc,

                               camelize = function(str) {

                                    return str.replace(/^-ms-/, "ms-").replace(/-([a-z]|[0-9])/ig, function (s, l) { return String(l).toUpperCase(); });

                                };

                 

                This function is used to camelize CSS attributes.

                It seems that when the edge runtime reads the sliders css properties, instead of having a string, an object is returned ... so the quickest / easiest fix (but maybe not the best) I found is to test if the parameter is an object, and if yes, transform it into a string

                 

                You don't need to apply this modification to edge.4.0.1.js, this is just to explain what I did in the min version to "fix" the bug.

                $.prototype.css = function (k, v) {

                            var r = css.apply(this, arguments),

                                cache,

                                kc,

                                camelize = function(str) {

                 

                         

                                   if(typeof str == 'object')

                                      str = Object.keys(str)[0];

                 

                                    return str.replace(/^-ms-/, "ms-").replace(/-([a-z]|[0-9])/ig, function (s, l)                     { return String(l).toUpperCase(); });

                                          };

                 

                Now you have to apply the modification to the minified version

                 

                edge.4.0.1.min.js, line 148, col 92 :

                 

                Locate this part of code : 

                line 148 :          return a.replace(/^-ms-/,"ms-")   

                 

                and add this instruction in front of it : 

                if(typeof a == 'object')a = Object.keys(a)[0];

                 

                So you should have :

                if(typeof a == 'object')a = Object.keys(a)[0]; return a.replace(/^-ms-/,"ms-")   

                 

                There are now two possibilities : You can replace the file in your project but it will be overwritten each time you will save your modifications. (to avoid that, you can remove the writing permission on it). This option does not permit to use the preview feature.

                 

                Otherwise you can "patch" your version of edge animate, so you can use the preview and you wont need to replace the file each time you save.

                 

                Of course :::  /!\ Do a backup first ! /!\

                 

                For Mac OSX : Right click on Adobe Edge Animate CC 2014.app and select "show package content", then the file is located in

                Contents/Resources/js_framework/source/

                 

                You will need to get the writing rights on this file to modify it :  (CMD+i) when the file is highlighted in the finder, then click on the locker, type your password, add a new user by clicking on the "+" icon, select your user and put the permission on Read / Write

                 

                I hope it will help some other people who had problems with that. Again, please do a backup first !!!

                 

                Steven

                1 person found this helpful
                • 6. Re: Use jQueryUI slider within adobe edge animate.
                  Fagan Level 1

                  WOW ... just WOW. This is a great reply!!!!

                   

                   

                  I hope the edge animate team are watching!

                  • 7. Re: Use jQueryUI slider within adobe edge animate.
                    Preran Adobe Employee

                    Hi squizzypouet,

                     

                    Thank you for sharing your solution.

                     

                    Fagan: Yes, we are listening.    The product team tells me that the issue is with JQuery's $.prototype.css . It does not handle key values which are non-string. The issue is being fixed in the next Edge Animate update that does not have a built in jQuery. The date of release, however, will be announced here as soon as it is officially confirmed.

                     

                    Until then, we request your patience with this issue.

                     

                    Thanks,

                    Preran