13 Replies Latest reply on Oct 19, 2016 10:08 AM by kerrishotts

    Simple animation when clicking on a cell

    fbartolom

      I would like to show a simple animation when the user clicks on a cell by first setting it to grey and the again to white before swithing to the otehr page. I use this code for that:

      td.addEventListener('mouseup', function (event) {
        touched(event.target);
        });
        td.addEventListener('mousedown', function (event) {
        mousedown(event.target);
        });
      

      And then

      function touched(td) {
        td.style.backgroundColor = "white";
        setTimeout(function() {
        window.location.href ="testTable.html";
        }, 400)
      
      
      }
      
      
      function mousedown(td) {
        td.style.backgroundColor = "#DDDDDD";
        setTimeout(function() {
        }, 300)
      
      }
      

      This code works seamlessly when accessing the page by a browser, conversly when I access it by the phonegap app all the animations disappear. Why it is so, and there exists a standard phonegap way to attain this effect?

        • 1. Re: Simple animation when clicking on a cell
          VectorP Level 4

          1. You're asking at the wrong place, because this has nothing to do with Phonegap.

          Phonegap is a tool to build your executable app from your assets. It doesn't interprete and execute your client side script.

           

          2. If things don't work as expected, something is interpreted different from your expectations in the device webview component.

          I would guess that you are getting a javascript error on the use of 'td', which is an undefined variable. You could use the console to check for errors. Also, you should test in multiple devices and operating systems to see what webviews support such 'liberally coded' script fragment.

          Another possibility would be that your CSP prevents inline script from being executed.

          I'd suggest you first display the object type value for td.addEventListener  to see if the script code is executed and the method is defined at all.

          • 2. Re: Simple animation when clicking on a cell
            fbartolom Level 1

            Perhaps I answer both of your doubts by highlighting that the thing works fine by being accessed by browser. Of course td was assigned, I just sent a chunk of code: this is the complete function:

            function addTable() {

                var myTableDiv = document.getElementById("myDynamicTable");

                var table = document.createElement('TABLE');

                table.border='1';

                var tableBody = document.createElement('TBODY');

                table.appendChild(tableBody);

               

                for (var i=0; i<10; i++){

              var tr = document.createElement('TR');

              tableBody.appendChild(tr);

              for (var j=0; j<1; j++){

                       var td = document.createElement('TD');

                       td.width='400';

                td.addEventListener('mouseup', function (event) {

              touched(event.target);

              });

              td.addEventListener('mousedown', function (event) {

              mousedown(event.target);

              });

              td.value=i;

              td.appendChild(document.createTextNode("Cell " + i + "," + j));

              tr.appendChild(td);

                   }

                }

                myTableDiv.appendChild(table);

            }

             

            My even more PhoneGap centered question is whether there exists a standard way to reproduce the iOS or Android effect when touching a cell in a table.

            • 3. Re: Simple animation when clicking on a cell
              VectorP Level 4

              Perhaps I answer both of your doubts by highlighting that the thing works fine by being accessed by browser

              You seem to assume that the rendering engines of 'the browser' (which one?) is identical to the engine in the webview (which one?). This, however, is not the case, and that's why you'll find even more than just one 'support table's online, which highlight the html/css/script elements that are and aren't supported for various browsers and webviews.

               

              Have you checked whether or not the 'mouse' events are fired at all in a mobile webview environment? You may also want to try with 'touchstart' and 'touchend'.

               

              See also for instance

              Touch/pointer events test results

              • 4. Re: Simple animation when clicking on a cell
                fbartolom Level 1

                It is surely fired as the button action is indeed performed. It is just the brief change of colors not to happen.

                • 5. Re: Simple animation when clicking on a cell
                  VectorP Level 4

                  OK.

                  What is the object type value for 'td.style.backgroundColor' just prior to your accessing it?

                  • 6. Re: Simple animation when clicking on a cell
                    fbartolom Level 1

                    I  really have no cueue about it, it should be a color, if JS were typed.

                    • 7. Re: Simple animation when clicking on a cell
                      VectorP Level 4

                      No, I asked about the object type.

                       

                      Could you please code:

                       

                      alert("Types are: 1-"

                        + typeof td

                        + " 2-"

                        + typeof td.style

                        + " 3-"

                        + typeof td.style.backgroundColor);

                       

                      just prior to your

                      td.style.backgroundColor = "white";

                       

                      And also, I would suggest to replace 'white' by '#ffffff'.

                      • 8. Re: Simple animation when clicking on a cell
                        fbartolom Level 1

                        Ok, I did it: 1-Object, 2-Object, 3-string.

                        • 9. Re: Simple animation when clicking on a cell
                          VectorP Level 4

                          Great. So you were right: the objects are defined and the events are fired.

                          So, perhaps the colors are changed so quickly, that you don't see it.

                           

                          I would most likely not have coded:

                           

                          td.style.backgroundColor = "#DDDDDD"; 

                            setTimeout(function() { 

                            }, 300) 

                           

                          but rather:

                           

                            setTimeout(function() { 

                             td.style.backgroundColor = "#DDDDDD"; 

                            }, 300) 

                          • 10. Re: Simple animation when clicking on a cell
                            kerrishotts Adobe Community Professional

                            Thoughts:

                            • You're redirecting to "testTable.html" after the cell is tapped. Why? Is that the same file as the one you're trying to animate?
                            • You aren't using touch events. Mouse events are simulated on mobile web views and their implementation is not ideal. Use "touchstart" and "touchend". Better yet, use a gesture library that supports "tap" events or a fast click library that lets you use "click" regardless of desktop/mobile.
                            • You aren't using event delegation. Attaching an event handler to every cell is bad form, memory intensive, and although you've currently only got ten cells, it will not scale (event handling will become progressively slower as you add more cells). Attach event handlers to the the table (or parent DIV if the table gets replaced often) that check to see if `event.target.matches("td")` and then act accordingly.
                            • Don't set ".value" on an element. Use `.setAttribute("data-value", value)` OR `.dataset.value=value`.
                            • Don't use JavaScript for this kind of animation. You can easily get by with using a `td:active` CSS rule as long as there is a touch event handler present. Doing so also fixes a bug in your code:  if the user releases their mouse button or touch on another cell, the previous cell remains highlighted. Using `:active` lets the web view manage the cell colors correctly.
                            • I suggest learning how to use remote debugging tools (Safari for iOS and Google Chrome for Android). These make debugging your apps much easier than having to generate alert()s or just guessing at what's going on.
                            • 11. Re: Simple animation when clicking on a cell
                              fbartolom Level 1

                              Correct. If I do as you said the grey color is shown, I wonder why in the other case it did not show. I need to act with the timers as in my iPhone the effect is much faster than on the browser.

                              • 12. Re: Simple animation when clicking on a cell
                                fbartolom Level 1

                                testTable is the detail page to be opened. For that matter I am still short of a way to send information to it accoding to the touched cell so to allow it to load its appropriate contents. I have the delay as otherwise the effect on the cell would not appear.

                                 

                                I tried using touchstart and touchend but no event was triggered. If this works I wonder why I should adopt other libraries.

                                 

                                Ok, that would do if I encounter performance issues. Presently I ignore how to know which cell was clicked if I put the handler in the table.

                                 

                                The value just serves to give dummy values to the cells. I do not see any other use for it. Again I do not know if that could be used to pass values to the detail page.

                                 

                                I am not that proficient with CSS; please post the css code to reproduce this effect if that may be done simply by CSS;

                                 

                                Of course I use the Chrome debugging tool.

                                • 13. Re: Simple animation when clicking on a cell
                                  kerrishotts Adobe Community Professional

                                  testTable is the detail page to be opened. For that matter I am still short of a way to send information to it accoding to the touched cell so to allow it to load its appropriate contents. I have the delay as otherwise the effect on the cell would not appear.

                                  OK -- in which case, I would avoid page navigation until you're sure your animation works. Then add it back when you are satisfied with the animation (otherwise, it will get in the way of your verification).

                                   

                                  As for passing information -- you should adopt the Single Page Architecture model for hybrid apps. Then passing information is as simple as calling a method to render your view, posting a notification, or using a router object. But if you don't wish to pursue that, you could use `localStorage` or `sessionStorage`. Those aren't guaranteed to be persistent, but they're good enough for passing data around. Example:

                                   

                                      localStorage.setItem("some-object", JSON.stringify({a:1, b:2}));

                                      JSON.parse(localStorage.getItem("some-object")) ==> {a:1, b:2}

                                   

                                  You only need the JSON.stringify/JSON.parse methods if you're storing objects since localStorage stores everything as a string.

                                   

                                  I tried using touchstart and touchend but no event was triggered. If this works I wonder why I should adopt other libraries.

                                   

                                  Fast response time. You don't have to, but your users may think your app is slow otherwise.

                                   

                                  Ok, that would do if I encounter performance issues. Presently I ignore how to know which cell was clicked if I put the handler in the table.

                                   

                                  `event.target` will tell you which element was touched. You can use `event.target.matches("td")` to ensure that if the user taps on something that's not a cell that nothing happens.

                                   

                                  Alternatively, if you need to map a touched cell to a database item, you'd typically store the primary key or something on the row (assuming the id applies to the entire row):

                                   

                                      tr.setAttribute("data-id", "primary-key-id");

                                   

                                  and then you could get it in your handler with

                                   

                                      event.target.parentElement.getAttribute("data-id")

                                   

                                  The value just serves to give dummy values to the cells. I do not see any other use for it. Again I do not know if that could be used to pass values to the detail page.

                                   

                                  See above.

                                   

                                  I am not that proficient with CSS; please post the css code to reproduce this effect if that may be done simply by CSS;

                                   

                                      td {

                                          background-color:#FFFFFF;

                                      }

                                      td:active {

                                          background-color:#DDDDDD;

                                      }

                                   

                                  Keep in mind you need a touch handler -- otherwise mobile devices won't apply the :active rules. Since you'll have something that takes the user to the detail page, you'll be fine meeting that requirement. If your mouse events don't work on this, switch to touch events.

                                   

                                  Of course I use the Chrome debugging tool.

                                   

                                  To be clear, you're using chrome://inspect with your device attached via USB, right? I just want to be certain of your setup.