Skip to main content

Return to Question

deleted 379 characters in body
Source Link
CoolTapes
CoolTapes
  • 417
  • 5
  • 14

EDIT: Code is updatedway nicer (and faster) now per Simon's suggestions, but still is jerky. Here's the finished version

//helper function
function get_transitions() {
  var size = parseFloat($('#map').css('max-width').slice(0, -2));
  var font = parseFloat($(".map:first").css("font-size").slice(0, -2));
  var fontmax = 100.0;
  var fontmin = 13.0;
  var windowmax = 1000.0;
  var windowmin = 370.0;
  var transitions = 25.0;
  var fontinc = (fontmax - fontmin) / transitions;
  var windowinc = (windowmax - windowmin) / transitions;
  var a = new Array(size, font, fontmax, fontmin, windowmax, windowmin, fontinc, windowinc);
  return a
}

$(document).ready(function(){
  //Function which simulates zoom on the map on pinchin/pinchout
  $('#map').hammer()
    .on("pinchin", function(e) {
      var ascale = get_transitions$(this).css('transform');
      ifscale = (a[0]scale >== a[5])null {
? $(this).css('-webkit-transform') : scale);  
    var x scale = (a[0]scale -== a[7]null ? $(this).toStringcss('-ms-transform') +: 'px';scale);
      scale = $scale.split("#map"" ");
      scale = parseFloat(scale[0].csssubstring({"max-width":x7, "min-width":x,scale[0].length "max-height":x, "min-height":x}1));
      }
      if(a[1]scale > a[3]1) {
        var xscale = (a[1]'scale(' + (scale - a[6].1).toString() + 'px';')');
        $(".map"this).css("font{'transform':scale, '-size"ms-transform':scale, x'-webkit-transform':scale });
      }
    })
    .on("pinchout", function(e) {
      var ascale = get_transitions$(this).css('transform');
      ifscale = (a[0]scale <== a[4])null {
? $(this).css('-webkit-transform') : scale);  
     var xscale = (a[0]scale +== a[7]null ? $(this).toStringcss('-ms-transform') +: 'px';scale);
      scale = $("#map")scale.csssplit({"max-width":x, "min-width":x, "max-height":x," "min-height":x}");
      }scale = parseFloat(scale[0].substring(7, scale[0].length - 1));
  
      if(a[1]scale < a[2]5) {
        var xscale = (a[1]'scale(' + a[6](scale + .1).toString() + 'px';')');
        $(".map"this).css("font{'transform':scale, '-size"ms-transform':scale, x);'-webkit-transform':scale
      }
  });
});

I guess my question is, how can I make this JS run faster, or at least smooth the transition so it's not so jerky?

EDIT: Code is updated (and faster) per Simon's suggestions, but still is jerky

//helper function
function get_transitions() {
  var size = parseFloat($('#map').css('max-width').slice(0, -2));
  var font = parseFloat($(".map:first").css("font-size").slice(0, -2));
  var fontmax = 100.0;
  var fontmin = 13.0;
  var windowmax = 1000.0;
  var windowmin = 370.0;
  var transitions = 25.0;
  var fontinc = (fontmax - fontmin) / transitions;
  var windowinc = (windowmax - windowmin) / transitions;
  var a = new Array(size, font, fontmax, fontmin, windowmax, windowmin, fontinc, windowinc);
  return a
}

$(document).ready(function(){
  //Function which simulates zoom on the map on pinchin/pinchout
  $('#map').hammer()
    .on("pinchin", function(e) {
      var a = get_transitions();
      if(a[0] > a[5]) {
        var x = (a[0] - a[7]).toString() + 'px';
        $("#map").css({"max-width":x, "min-width":x, "max-height":x, "min-height":x});
      }
      if(a[1] > a[3]) {
        var x = (a[1] - a[6]).toString() + 'px';
        $(".map").css("font-size", x);
      }
    })
    .on("pinchout", function(e) {
      var a = get_transitions();
      if(a[0] < a[4]) {
        var x = (a[0] + a[7]).toString() + 'px';
        $("#map").css({"max-width":x, "min-width":x, "max-height":x, "min-height":x});
      }     
      if(a[1] < a[2]) {
        var x = (a[1] + a[6]).toString() + 'px';
        $(".map").css("font-size", x);
      }
  });
});

I guess my question is, how can I make this JS run faster, or at least smooth the transition so it's not so jerky?

EDIT: Code is way nicer (and faster) now per Simon's suggestions. Here's the finished version

$(document).ready(function(){
  //Function which simulates zoom on the map on pinchin/pinchout
  $('#map').hammer()
    .on("pinchin", function(e) {
      var scale = $(this).css('transform');
      scale = (scale == null ? $(this).css('-webkit-transform') : scale);  
      scale = (scale == null ? $(this).css('-ms-transform') : scale);
      scale = scale.split(" ");
      scale = parseFloat(scale[0].substring(7, scale[0].length - 1));
  
      if(scale > 1) {
        scale = ('scale(' + (scale - .1).toString() + ')');
        $(this).css({'transform':scale, '-ms-transform':scale, '-webkit-transform':scale });
      }
    })
    .on("pinchout", function(e) {
      var scale = $(this).css('transform');
      scale = (scale == null ? $(this).css('-webkit-transform') : scale);  
      scale = (scale == null ? $(this).css('-ms-transform') : scale);
      scale = scale.split(" ");
      scale = parseFloat(scale[0].substring(7, scale[0].length - 1));
  
      if(scale < 5) {
        scale = ('scale(' + (scale + .1).toString() + ')');
        $(this).css({'transform':scale, '-ms-transform':scale, '-webkit-transform':scale
      }
  });
});
deleted 178 characters in body
Source Link
CoolTapes
CoolTapes
  • 417
  • 5
  • 14

EDIT: Code is updated (and faster) per Simon's suggestions, but still is jerky

//helper function
function get_transitions() {
  var size = parseFloat($('#map').css('max-width').slice(0, -2));
  var font = parseFloat($(".map:first").css("font-size").slice(0, -2));
  var fontmax = 100.0;
  var fontmin = 13.0;
  var windowmax = 1000.0;
  var windowmin = 370.0;
  var transitions = 25.0;
  var fontinc = (fontmax - fontmin) / transitions;
  var windowinc = (windowmax - windowmin) / transitions;
  var a = new Array(size, font, fontmax, fontmin, windowmax, windowmin, fontinc, windowinc);
  return a
}

$(document).ready(function(){
  //Function which simulates zoom on the map on pinchin/pinchout
  $('#map').hammer()
    .on("pinchin", function(e) {
      var a = get_transitions();
      if(a[0] > a[5]) {
        $("#map").css("max-width",var x = (a[0] - a[7]).toString() + 'px');'px';
        $("#map").css("min{"max-width":x, (a[0] "min- a[7]).toString() + 'px');
       width":x, $("#map").css("max-height":x, (a[0] "min- a[7]).toString() + 'px'height":x});
      }
  $("#map").css("min-height", (a[0] - a[7]).toString if()a[1] +> 'px'a[3]);
 {
     }
   var x = if(a[1] >- a[3]a[6]).toString() {+ 'px';
        $(".map").css("font-size", (a[1] - a[6]).toString() + 'px'x);
      }
    })
    .on("pinchout", function(e) {
      var a = get_transitions();
      if(a[0] < a[4]) {
        $("#map").css("max-width",var x = (a[0] + a[7]).toString() + 'px');'px';
        $("#map").css("min{"max-width":x, (a[0] + a[7]).toString()"min-width":x, +"max-height":x, 'px'"min-height":x});
      }  $("#map").css("max-height", (a[0] + a[7]).toString() + 'px');
        $("#map").css("min-height", if(a[0]a[1] +< a[7]).toString(a[2]) + 'px');{
      }     
   var x = if(a[1] <+ a[2]a[6]).toString() {+ 'px';
        $(".map").css("font-size", (a[1] + a[6]).toString() + 'px'x);
      }
  });
});

//helper function
function get_transitions() {
  var size = parseFloat($('#map').css('max-width').slice(0, -2));
  var font = parseFloat($(".map:first").css("font-size").slice(0, -2));
  var fontmax = 100.0;
  var fontmin = 13.0;
  var windowmax = 1000.0;
  var windowmin = 370.0;
  var transitions = 25.0;
  var fontinc = (fontmax - fontmin) / transitions;
  var windowinc = (windowmax - windowmin) / transitions;
  var a = new Array(size, font, fontmax, fontmin, windowmax, windowmin, fontinc, windowinc);
  return a
}

$(document).ready(function(){
  //Function which simulates zoom on the map on pinchin/pinchout
  $('#map').hammer()
    .on("pinchin", function(e) {
      var a = get_transitions();
      if(a[0] > a[5]) {
        $("#map").css("max-width", (a[0] - a[7]).toString() + 'px');
        $("#map").css("min-width", (a[0] - a[7]).toString() + 'px');
        $("#map").css("max-height", (a[0] - a[7]).toString() + 'px');
        $("#map").css("min-height", (a[0] - a[7]).toString() + 'px');
      }
      if(a[1] > a[3]) {
        $(".map").css("font-size", (a[1] - a[6]).toString() + 'px');
      }
    })
    .on("pinchout", function(e) {
      var a = get_transitions();
      if(a[0] < a[4]) {
        $("#map").css("max-width", (a[0] + a[7]).toString() + 'px');
        $("#map").css("min-width", (a[0] + a[7]).toString() + 'px');
        $("#map").css("max-height", (a[0] + a[7]).toString() + 'px');
        $("#map").css("min-height", (a[0] + a[7]).toString() + 'px');
      }     
      if(a[1] < a[2]) {
        $(".map").css("font-size", (a[1] + a[6]).toString() + 'px');
      }
  });
});

EDIT: Code is updated (and faster) per Simon's suggestions, but still is jerky

//helper function
function get_transitions() {
  var size = parseFloat($('#map').css('max-width').slice(0, -2));
  var font = parseFloat($(".map:first").css("font-size").slice(0, -2));
  var fontmax = 100.0;
  var fontmin = 13.0;
  var windowmax = 1000.0;
  var windowmin = 370.0;
  var transitions = 25.0;
  var fontinc = (fontmax - fontmin) / transitions;
  var windowinc = (windowmax - windowmin) / transitions;
  var a = new Array(size, font, fontmax, fontmin, windowmax, windowmin, fontinc, windowinc);
  return a
}

$(document).ready(function(){
  //Function which simulates zoom on the map on pinchin/pinchout
  $('#map').hammer()
    .on("pinchin", function(e) {
      var a = get_transitions();
      if(a[0] > a[5]) {
        var x = (a[0] - a[7]).toString() + 'px';
        $("#map").css({"max-width":x, "min-width":x, "max-height":x, "min-height":x});
      }
      if(a[1] > a[3]) {
        var x = (a[1] - a[6]).toString() + 'px';
        $(".map").css("font-size", x);
      }
    })
    .on("pinchout", function(e) {
      var a = get_transitions();
      if(a[0] < a[4]) {
        var x = (a[0] + a[7]).toString() + 'px';
        $("#map").css({"max-width":x, "min-width":x, "max-height":x, "min-height":x});
      }     
      if(a[1] < a[2]) {
        var x = (a[1] + a[6]).toString() + 'px';
        $(".map").css("font-size", x);
      }
  });
});
added 69 characters in body
Source Link
CoolTapes
CoolTapes
  • 417
  • 5
  • 14
Source Link
CoolTapes
CoolTapes
  • 417
  • 5
  • 14