Remaining Characters Counter

To find out how many characters remaining in input box or textarea when user type, like we see in Twitter or Delicious and other sites as well.

twiiter-character-counter

Add this code in your input box or textarea.

onfocus="characterCount(250, this.id, 'whyMeCount');"  and  maxlength="250"

where,
250 is the number of characters you what the box should take. You can change it as per your need.
whyMeCount is the id (#whyMeCount) of the html element where you want to display the count
and, whyMe id the id of the element on which we need to count characters on.

Example: 
<textarea id="whyMe" onfocus="characterCount(250, this.id, 'whyMeCount');" maxlength="250"></textarea>
<div id="whyMeCount"></div>

Now, add this JavaScript function in your script tag

function characterCount( text_max, boxId, countId ){
	var text_length = $( '#' + boxId ).val().length;
	if(text_length > 0) {
		$( '#' + countId ).html((text_max-text_length) + ' characters remaining');
	} else {
		$( '#' + countId ).html(text_max + ' characters remaining');
	}
	
	$( '#' + boxId ).on('keyup blur', function() {
		text_length = $( '#' + boxId ).val().length;
		var text_remaining = text_max - text_length;
		$( '#' + countId ).html(text_remaining + ' characters remaining');
	});
}

Generate and Download .ics file for an event using jQuery

Here is the code to generate and download the .ics file for an event using jQuery.

var todayDate	= new Date();
var msgData	= todayDate.toISOString();
var startDate	= e.start.toISOString();
var endDate	= e.end.toISOString();

var icsMSG1 = "BEGIN:VCALENDARrnVERSION:2.0rnPRODID:https://www.google.com/rnBEGIN:VEVENTrnUID:https://www.google.com/rnDTSTAMP:" + msgData + "ZrnDTSTART:" + startDate + "rn";

var icsMSG2 = '';
if(endDate != '') {
    icsMSG2 = "DTEND:" + endDate +"rn";
}

icsMSG3 = "SUMMARY:" + title + "rnEND:VEVENTrnEND:VCALENDAR";

icsMSG = icsMSG1 + icsMSG2 + icsMSG3;

$('.test-ics').click(function(){
    window.open( "data:text/calendar;charset=utf8," + escape(icsMSG));
});

and, add this line in your html code

<div><a class="test-ics">Add to Calendar</a></div>

replace e.start with your event start date & time
replace e.end with your event end date & time
replace title with your event title

Add onClick event on form input with multiple checkbox

To add a javascript onclick event on a form input with multiple checkbox, use this alternative method:

$options = array(); 
foreach($roles as $value => $label) { 
  $options[] = array( 
    'name' => $label, 
    'value' => $value, 
    'onClick' => 'showDiv(this)' 
  ); 
} 
echo $form->input('Role', array('options' => $options, ...)); 

But why use inline javascript? You could do this with one line of mootools:

$('input[id^=ModelRole][type=checkbox]').addEvent('click', showDiv);
(replace 'Model' with the name of your model)

And I’m sure it’s just as easy (or easier) in jQuery or other frameworks.

Add Custom Marker in Google Maps

To add custom Marker in Google Maps add the following code in your JavaScript


var image = 'custom-marker.png';
  var myLatLng = new google.maps.LatLng(40.6743890, -73.9455);
  var Marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });

See full Code:

var map;
var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);

var stylez = [
    {
      featureType: "all",
      elementType: "all",
      stylers: [
        { saturation: -100 } // <-- THIS
      ]
    }
];

var mapOptions = {
    zoom: 11,
    center: brooklyn,
    mapTypeControlOptions: {
         mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz']
    }
};

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var image = 'custom-marker.png';
  var myLatLng = new google.maps.LatLng(40.6743890, -73.9455);
  var Marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });

var mapType = new google.maps.StyledMapType(stylez, { name:"Grayscale" });
map.mapTypes.set('tehgrayz', mapType);
map.setMapTypeId('tehgrayz');

Google Maps in Grayscale

In V3 of the api they have introduced StyledMaps.

They’ve even provided a tool for you to generate the code for the styles you like. Slide the “Saturation” all the way down and you’ve got grayscale going on!

The following example displays a grayscale map of Brooklyn:

var map;
var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);

var stylez = [
    {
      featureType: "all",
      elementType: "all",
      stylers: [
        { saturation: -100 } // <-- THIS
      ]
    }
];

var mapOptions = {
    zoom: 11,
    center: brooklyn,
    mapTypeControlOptions: {
         mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz']
    }
};

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var mapType = new google.maps.StyledMapType(stylez, { name:"Grayscale" });    
map.mapTypes.set('tehgrayz', mapType);
map.setMapTypeId('tehgrayz');