jQuery counter to count up to a target number

<span class=”timer”></span>
<hr/>
<span id=”help”>From: 50 – To: 2500 / Over 5000 Milli-Seconds</span>

(function($) {
$.fn.countTo = function(options) {
// merge the default plugin settings with the custom options
options = $.extend({}, $.fn.countTo.defaults, options || {});

// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(options.speed / options.refreshInterval),
increment = (options.to – options.from) / loops;

return $(this).each(function() {
var _this = this,
loopCount = 0,
value = options.from,
interval = setInterval(updateTimer, options.refreshInterval);

function updateTimer() {
value += increment;
loopCount++;
$(_this).html(value.toFixed(options.decimals));

if (typeof(options.onUpdate) == ‘function’) {
options.onUpdate.call(_this, value);
}

if (loopCount >= loops) {
clearInterval(interval);
value = options.to;

if (typeof(options.onComplete) == ‘function’) {
options.onComplete.call(_this, value);
}
}
}
});
};

$.fn.countTo.defaults = {
from: 0,  // the number the element should start at
to: 100,  // the number the element should end at
speed: 1000,  // how long it should take to count between the target numbers
refreshInterval: 100,  // how often the element should be updated
decimals: 0,  // the number of decimal places to show
onUpdate: null,  // callback method for every time the element is updated,
onComplete: null,  // callback method for when the element finishes updating
};
})(jQuery);

jQuery(function($) {
$(‘.timer’).countTo({
from: 50,
to: 2500,
speed: 5000,
refreshInterval: 50,
onComplete: function(value) {
console.debug(this);
}
});
});

Advertisements

jQuery – Click event doesn’t work on dynamically generated elements

The click() binding you’re using is called a “direct” binding which will only attach the handler to elements that already exist. It won’t get bound to elements created in the future. To do that, you’ll have create a “delegated” binding by using on():

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.

Here’s what you’re looking for:

$("h2").on('click', 'p.test', function() {
    alert('you clicked a p.test element');
});

The above works for those using jQuery version 1.7+. If you’re using an older version, refer to the previous answer below
Try using live()

$("button").click(function(){
    $("h2").html("<p class='test'>click me</p>")
});   


$(".test").live('click', function(){
    alert('you clicked me!');
});

Or there’s a new-fangled way of doing it with delegate()

$("h2").delegate("p", "click", function(){
    alert('you clicked me again!');
});

jquery attr(‘checked’,’checked’) works only once

If you face this kinda issue in jquery like if you checked multiple boxes by jquery and after that remove the checked property and again click to checked multiple checkboxes . Some time it never works .

Use prop(‘checked’, true / false) instead of removeAttr

$('input[name=foo]').prop('checked',true);
$('input[name=foo]').prop('checked',false);

JS jQuery – check if value is in array

You are comparing a jQuery object (jQuery('input:first')) to strings (the elements of the array).Change the code in order to compare the input’s value (wich is a string) to the array elements:

if(jQuery.inArray(jQuery("input:first").val(), ar)!=-1)

The inArray method returns -1 if the element wasn’t found in the array, so as your bonus answer to how to determine if an element is not in an array, use this : 

if(jQuery.inArray(el,arr)==-1){// the element is not in the array};

Google Maps v3 hide elements (roads, roadsigns, etc)

you are trying to use the new Styled Map features of thev3 Maps API. Here’s a very basic example of how you could use the above style in a simple map

<!DOCTYPE html><html><head><metahttp-equiv="content-type"content="text/html; charset=UTF-8"/><title>Google Maps Dark Water Style Demo</title><scriptsrc="http://maps.google.com/maps/api/js?sensor=false"type="text/javascript"></script></head><body><divid="map"style="width:550px;height:300px;"></div><scripttype="text/javascript">var myStyle =[{
         featureType:"administrative",
         elementType:"labels",
         stylers:[{ visibility:"off"}]},{
         featureType:"poi",
         elementType:"labels",
         stylers:[{ visibility:"off"}]},{
         featureType:"water",
         elementType:"labels",
         stylers:[{ visibility:"off"}]},{
         featureType:"road",
         elementType:"labels",
         stylers:[{ visibility:"off"}]}];var map =new google.maps.Map(document.getElementById('map'),{
       mapTypeControlOptions:{
         mapTypeIds:['mystyle', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.TERRAIN]},
       center:new google.maps.LatLng(30,0),
       zoom:3,
       mapTypeId:'mystyle'});

     map.mapTypes.set('mystyle',new google.maps.StyledMapType(myStyle,{ name:'My Style'}));</script></body></html>

hides labels with country names.

To hide an area you have to create your own overlay – some polygon or overlay map type.

When you want to show only an area of the map, it might be also a good idea to limit viewable area of the map.