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>

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

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