4
\$\begingroup\$

I have next/previous buttons on my site and all they do is slide sections of the site from left to right and vice versa, it is smooth and looks good on a desktop but on mobile devices it is a bit slow and jumpy. 

if (type == "prev") {
    $(this).hide('drop', { direction: 'right' }, 600, function () { $('#dv' + page).show('drop', { direction: 'left' }, 600), $("input:text:visible:not([readonly]):first").focus(); });
} else {
    $(this).hide('drop', { direction: 'left' }, 600, function () { $('#dv' + page).show('drop', { direction: 'right' }, 600), $("input:text:visible:not([readonly]):first").focus(); });
}

Uses the built in jQuery functions to slide the current page out and the next/previous page in based on the current page number, then sets the focus on the first input box.

This was as simple as I could think to do it but maybe there is a better smoother way to do left/right transitions?

Improve this question
\$\endgroup\$
1
  • \$\begingroup\$ There is not much to code review really. You will have more luck on Stackoverflow. \$\endgroup\$
    – konijn
    Apr 7, 2014 at 13:40

1 Answer 1

Reset to default
5
\$\begingroup\$

It sounds like the issue isn't really the code, just the performance of the hardware: A mobile device just can't redraw everything as fast as a desktop browser. Writing stuff in single lines does not increase performance!

However, you could try the hardware acceleration "hack" shown and explained here.

You should also consider using CSS transforms to do the actual animation, rather than jQuery's position: absolute trickery. All modern browsers (with the exception of Opera Mobile) support it, and such transforms are always hardware accelerated.

Lastly, since this is Code Review, I'd advice you to get rid of the repetition in your code:

var PAGE_SWAP_DURATION = 600; // define this once

function swapPage(outgoingPage, incomingPage, type) {
  var outDirection = type === "prev" ? "right" : "left",
      inDirection  = type === "prev" ? "left" : "right";

  outgoingPage.hide('drop', { direction: outDirection }, PAGE_SWAP_DURATION, function () {
    incomingPage.show('drop', { direction: inDirection }, PAGE_SWAP_DURATION, function () {
      // wait for the animation to finish; this is a complex selector
      // so it may cause the browser to stutter
      incomingPage.find("input:text:visible:not([readonly]):first").focus();
    });
  });
}

Apropos that selector: If possible, it would be better to find the correct input ahead of time, rather than run and re-run such a complex query on each page swap.

For instance, you could map out what inputs belong to what pages when the site first loads, and link them to their respective pages with .data(). Or you could give the inputs IDs or class names, which will make the selector much simpler.

Improve this answer
\$\endgroup\$
7
  • \$\begingroup\$ Thanks for the optimization tip. I did .find to make it more dynamic so we would not have to modify the JS should extra fields be added in the future. But I will look at binding the inputs as suggested and see if that helps with the speed of it all. So css transitions are faster/smoother on mobile devices? I will also look at those for the transition effect and post back the results. \$\endgroup\$
    – Jake
    Apr 8, 2014 at 22:18
  • \$\begingroup\$ @Jake Yes, CSS transforms are generally smoother because they use the GPU. How much smoother depends on the browser, the hardware, and of course content being transformed. So YMMV, but it should help. As for the selector, I think you'll see the most improvement by simply running it after the animation is done (as in the code above). But if you can simplify it, or run it ahead of time, all the better. \$\endgroup\$
    – Flambino
    Apr 8, 2014 at 22:45
  • \$\begingroup\$ I am using ASP.NET MVC for the site, so all fields are given an ID automatically based on their model name so can't really use the id as a dynamic selector. I do plan on changing it to a class selector though and just add the page number as a class to the first input for each page. should see roughly a 80% performance improvement \$\endgroup\$
    – Jake
    Apr 8, 2014 at 23:01
  • \$\begingroup\$ @Jake Nice - I suspected it'd be a significant boost, but that's impressive. But note that it'll only impact the animation if it's being run at the same time - which you should still avoid. But a nice improvement in its own right, though, so definitely go for it. \$\endgroup\$
    – Flambino
    Apr 8, 2014 at 23:58
  • \$\begingroup\$ Just on quick question regarding the use of CSS instead. How do I trigger the CSS animations to begin on the click event of a link/button? I have the classes set up, do I just add the transition class using JS? \$\endgroup\$
    – Jake
    Apr 9, 2014 at 21:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.