Enhancing javascript to execute faster

Question

I have a script that adjusts the height of the div data-role="content"></div> to be that of the window, minus the height of the footer and header. Everything runs fine but when a page is loaded via ajax into the DOM, I get a little flicker while the content area's height is set

    <script>

      (function() {
        var fixgeometry = function() {
          /* Some orientation changes leave the scroll position at something
           * that isn't 0,0. This is annoying for user experience. */
          scroll(0, 0);

          /* Calculate the geometry that our content area should take */
          var header = $(".ui-header:visible");
          var footer = $(".ui-footer:visible");
          var content = $(".ui-content:visible");
          var viewport_height = $(window).height();

          var content_height = viewport_height - header.outerHeight() - footer.outerHeight();

          /* Trim margin/border/padding height */
          content_height -= (content.outerHeight() - content.height());
          content.height(content_height);
        }; /* fixgeometry */

        $(document).ready(function() {
          $(window).bind("orientationchange resize pageshow", fixgeometry);
        });
      })();



</script>

Its really noticible when its tested on a mobile device and it caused my images, which are percent based, to take a moment, then adjust after the script has run. Here's a link to jsFiddle

Is there anyway to optimize this script so that the flickering effect is gone?

Gajotres · Accepted Answer · 2013-07-25 22:30:07Z

4

Don't use javascript when CSS is more then enough, not to mention faster option.

There an easy solution for your problem, give your div with a data-role="content" a class name or an id. For example lets say you gave it id = content, then this CSS will stretch your content div:

#content {
    position: absolute;
    top: 40px;
    right: 0;
    bottom: 40px;
    left : 0;
}

Bottom and top is set to 40px to compensate for header and footer.

Working example: http://jsfiddle.net/Gajotres/PMrDn/45/

Basically if javascript is not used in this case there will be no flickering. This method is also used when Google maps API v3 is used with jQuery Mobile, you can find it HERE if you want a proof.

answered Jul 25, 2013 at 22:30

Gajotres

57.3k16 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mhartington Over a year ago

Thanks, I saw that post before but didn't it would apply to my situation. Seeing the JSfiddle definitely made it clear it would help.

Collectives™ on Stack Overflow

Enhancing javascript to execute faster

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related