Share your pages on Social Networking websites


To share your pages on social Networking sites is an easy Task now.

You can share your page to your friend on their WhatsApp also.

Click Here to download the script needed to run WhatsApp share.

<script type="text/javascript">if(typeof wabtn4fg==="undefined"){wabtn4fg=1;h=document.head||document.getElementsByTagName("head")[0],s=document.createElement("script");s.type="text/javascript";s.src="http://www.itrusoft.com/blogbysid/blogfiles/whatsapp-button.js";h.appendChild(s);}</script>

replace the existing URL with your site URL and link the whatsapp JS to it.

<?php
$shareSource = urlencode('blogbysid.wordpress.com');
$shareActualUrl = 'https://blogbysid.wordpress.com/2013/09/03/google-maps-in-grayscale/';
$shareActualTitle = 'Google Maps in Grayscale';
$shareUrl = urlencode($shareActualUrl);
$shareTitle = urlencode($shareActualTitle);
$shareDescription = urlencode('This example displays a grayscale saturation in Google maps:');
$shareImgSrc = urlencode('https://blogbysid.files.wordpress.com/2013/09/gray-google-map.jpg');
$hashtags = 'blogbysid'; // comma separated list of hashtags, with no # on them
?>

replace these title, links with yours

The below code generates the link to share your page on respective pages

<a title="WhatsApp" href="whatsapp://send" data-text="<?php echo $shareActualTitle; ?>" data-href="<?php echo $shareActualUrl; ?>" class="wa_btn wa_btn_s">WhatsApp</a>

<a title="Facebook" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $shareUrl; ?>&t=<?php echo $shareTitle; ?>">Facebook</a>

<a title="Twitter" target="_blank" href="https://twitter.com/share?text=<?php echo $shareTitle; ?>&url=<?php echo $shareUrl; ?>&hashtags=<?php echo $hashtags; ?>">Twitter</a>

<a title="Google Plus" target="_blank" href="https://plus.google.com/share?url=<?php echo $shareUrl; ?>">Google Plus</a>

<a title="LinkedIn" target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo $shareUrl; ?>&title=<?php echo $shareTitle; ?>&summary=<?php echo $shareDescription; ?>&source=<?php echo $shareSource; ?>">LinkedIn</a>

<a title="Pinterest" target="_blank" href="https://pinterest.com/pin/create/button/?url=<?php echo $shareUrl; ?>&media=<?php echo $shareImgSrc; ?>&description=<?php echo $shareDescription; ?>">Pinterest</a>
Advertisements

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:VCALENDAR\r\nVERSION:2.0\r\nPRODID:https://www.google.com/\r\nBEGIN:VEVENT\r\nUID:https://www.google.com/\r\nDTSTAMP:" + msgData + "Z\r\nDTSTART:" + startDate + "\r\n";

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

icsMSG3 = "SUMMARY:" + title + "\r\nEND:VEVENT\r\nEND: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

Convert a Menu to a Dropdown for Small Screens


We come across the digital world where the technology is at its pace. As the time passes the websites are compatible to mobile devices, but still there are some issues due to which the website cannot be made device compatible. So, what to in this case.

Here comes the solution:

The HTML

The HTML for these two menus is different. As far as I know, you can’t style <select>and <option> elements to look and behave like <a>s or vice versa. So we need both. You could just put both in the markup. That’s what Five Simple Steps does:

<nav> 

  <ul> 
    <li><a href="/" class="active">Home</a></li> 
    <li><a href="/collections/all">Books</a></li> 
    <li><a href="/blogs/five-simple-steps-blog">Blog</a></li> 
    <li><a href="/pages/about-us">About Us</a></li> 
    <li><a href="/pages/support">Support</a></li> 
  </ul> 
  
  <select> 
    <option value="" selected="selected">Select</option> 
    
    <option value="/">Home</option> 
    <option value="/collections/all">Books</option> 
    <option value="/blogs/five-simple-steps-blog">Blog</option> 
    <option value="/pages/about-us">About Us</option> 
    <option value="/pages/support">Support</option> 
  </select> 

</nav>

Let’s go with that for now.

The CSS

By default we’ll hide the select menu with display: none;. This is actually good for accessibility, as it will hide the redundant menu from screen readers.

nav select {
  display: none;
}

Then using media queries, we’ll do the switcheroo at some specific width. You can determine that on your own (here’s some standard breakpoints).

@media (max-width: 960px) {
  nav ul     { display: none; }
  nav select { display: inline-block; }
}

But now you gotta maintain two menus?

Well yeah, that’s one concern. Maybe your menus are created dynamically and you can’t control the output easily. Maybe you and hand crafting menus but want to make sure you don’t accidentally get your menus out of sync. One way we can fight this is to dynamically create the dropdown menu from the original.

Using jQuery, we can do that with just a few lines of code:

// Create the dropdown base
$("<select />").appendTo("nav");

// Create default option "Go to..."
$("<option />", {
   "selected": "selected",
   "value"   : "",
   "text"    : "Go to..."
}).appendTo("nav select");

// Populate dropdown with menu items
$("nav a").each(function() {
 var el = $(this);
 $("<option />", {
     "value"   : el.attr("href"),
     "text"    : el.text()
 }).appendTo("nav select");
});

Then to make the dropdown menu actually work…

$("nav select").change(function() {
  window.location = $(this).find("option:selected").val();
});

Source: www.css-tricks.com

Email validation in javascript without using regular expression


"THARIKIDA"

<html>
<head>
<title>Email Validation</title>

function validate()
{
var str;
var t=1;
str =document.getElementById(’email’).value;
if(document.getElementById(’email’).value==””)
{
alert(“Empty”);

}
var res = str.split(‘@’);
if(str.split(‘@’).length!=2)
{
alert(“zero @ OR morethan one @ “);
t=0;
}
var part1=res[0];
var part2=res[1];

// part1
if(part1.length==0)
{
alert(“no content bfr @”);
t=0;
}
if(part1.split(” “).length>2)
{
alert(“Invalid:Space before @”)
t=0;
}

//chk afr @ content:  part2
var dotsplt=part2.split(‘.’);  //alert(“After @ :”+part2);
if(part2.split(“.”).length {
alert(“dot missing”);
t=0;
}
if(dotsplt[0].length==0 )
{
alert(“no content b/w @ and dot”);
t=0;
}
if(dotsplt[1].length4)
{alert(“err aftr dot”);
t=0;
}

if(t==1)
alert(“woooooooooooooooooooowwwww…it is a valid email”);

}


</head>

<body>
<label>
<input type=”text” name=”email” id=”email”  />
<input type=”button” name=”btnok” onclick=”validate()” />
</label>
</body>
</html>

View original post

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');