jquery: Taste Text Blinken macht die Taste springen

Gegeben:jquery: Taste Text Blinken macht die Taste springen

html:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
    </style> 
    <script type="text/javascript" 
     src="http://maps.googleapis.com/maps/api/js?key=bla-bla-bla&sensor=false&libraries=geometry"> 
    </script> 
    <script type="text/javascript" src="jquery.min.js"></script> 
    <script type="text/javascript" src="sdr.js"></script> 
</head> 
    <body> 
    <div style="display: table; height: 100%; width: 100%;"> 
     <div id="data" style="display: table-row; height: 20px;"> 
      <div style="display: table-cell;"> 
       <input id="btnPoint" type="button" value="Mark the point" onclick="markPoint()" /> 
       Point: <input id="txtPoint" type="text" /><br /> 
       <input id="btnPolygon" type="button" value="Mark the polygon" /> 
       Polygon: <input id="txtPolygon" type="text" /> 
      </div> 
     </div> 
     <div style="display: table-row; "> 
      <div id="map_canvas" style="display: table-cell;"></div> 
     </div> 
    </div> 
    </body> 
</html>

sdr.js:

var map; 
var pointMarker; 

$(document).ready(initialize); 

function initialize() { 
    var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
    var myOptions = { 
     zoom : 7, 
     center : chicago, 
     mapTypeId : google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map($('#map_canvas')[0], myOptions); 
    pointMarker = new google.maps.Marker({ 
    position: map.getCenter() 
    }); 

    $('#btnPoint').css('width', $('#btnPoint').outerWidth()); 
    $('#btnPoint').css('height', $('#btnPoint').outerHeight()); 
    $('#btnPoint').each(function() { 
     var elem = $(this); 
     var title = elem.val(); 
     setInterval(function() { 
      if (!elem.val()) { 
       elem.val(title); 
      } else if (elem.data('listener')) { 
       elem.val(''); 
      } 
     }, 500); 
    }); 
} 

function placePointMarker(location) { 
    pointMarker.setPosition(location); 
    pointMarker.setTitle(location.lat() + "," + location.lng()); 
    pointMarker.setMap(map); 
    var text = Math.round(location.lat() * 1000)/1000 + ',' + Math.round(location.lng() * 1000)/1000 
    $('#txtPoint').val(text); 
} 

function markPoint() { 
    var listener = $('#btnPoint').data('listener'); 
    if (listener) { 
     google.maps.event.removeListener(listener); 
     $('#btnPoint').removeData('listener'); 
    } else { 
     $('#btnPoint').data('listener', google.maps.event.addListener(map, 'click', function(event) { 
      placePointMarker(event.latLng); 
     })); 
    } 
}

Alles, was ich bin versucht, um die „Mark machen Der Punkt "Button blinkt beim Klicken und hört auf zu blinken, wenn erneut geklickt wird. Das Problem ist, dass es die Position zu ändern scheint, wenn ich den Schaltflächentext entferne und ihn wiederherstelle. Es sieht so aus, als ob der Knopf springt. Ich habe keine Idee warum. Jemand?

Quelle

2012-03-29 mark

Ihre Frage zu beantworten, versuchen, den Wert der Schaltfläche auf ein Leerzeichen statt einer leeren Zeichenfolge festlegen:

$('#btnPoint').each(function() { 
    var elem = $(this); 
    var title = elem.val(); 
    setInterval(function() { 
     if (!elem.val()) { 
      elem.val(title); 
     } else if (elem.data('listener')) { 
      elem.val(' '); 
     } 
    }, 500); 
});

Sie wollen auch könnten eine explizite Marge für die Schaltflächen festlegen zu ihnen machen Linie .

input[type=button] { margin: 2px; }

Quelle

2012-03-29 22:41:05 Pete

Einstellung in den Weltraum hat den Job gemacht. Vielen Dank. – mark

+1 für den Rand Tipp - nochmals vielen Dank. – mark

jquery: Taste Text Blinken macht die Taste springen

Antwort

Verwandte Themen