Bhupendra Tiwari's Blog

Saturday, April 19, 2014

Facebook share functionality

<html>
<head>
<script src="http://connect.facebook.net/en_US/all.js" type="text/javascript"></script>
<script type="text/javascript">
window.fbAsyncInit = function()
{
FB.init({
appId : '420388744727086',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true , // parse XFBML
oauth : true // Enable oauth authentication
});

};

function post_on_wall()
{
FB.login(function(response)
{
if (response.authResponse)
{
var opts = {
message : "Hello",
name : 'Post Title',
link : 'www.postlink.com',
description : 'post description',
picture : 'http://2.gravatar.com/avatar/8a13ef9d2ad87de23c6962b216f8e9f4?s=128&d=mm&r=G'
};

FB.api('/me/feed', 'post', opts, function(response)
{
if (!response || response.error)
{
alert('Posting error occured');
}
else
{
alert('Success - Post ID: ' + response.id);
}
});
}
else
{
alert('Not logged in');
}
}, { scope : 'publish_stream' });
}
</script>
<div id="fb_div">
<h3>Post to your Facebook wall:</h3> <br />
<input type="button" value="Post on Wall" onClick="post_on_wall();" />
</div>
<div id="fb-root"></div>
</html>

Friday, April 18, 2014

Display image after selecting image using jquery

<!DOCTYPE html>

<html>

<head>

<link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>

<meta charset=utf-8 />

<title>JS Bin</title>

<!--[if IE]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<style>

article, aside, figure, footer, header, hgroup,

menu, nav, section { display: block; }

</style>

<script>

function readURL(input) {

if (input.files && input.files[0]) {

var reader = new FileReader();

reader.onload = function (e) {

$('#blah')

.attr('src', e.target.result)

.width(150)

.height(200);

};

reader.readAsDataURL(input.files[0]);

}

}

</script>

</head>

<body>

<input type='file' onchange="readURL(this);" />

<img id="blah" src="#" alt="your image" />

</body>

</html>

Monday, March 31, 2014

Facebook Like funtionality using javascript

<html>
<head>
<title>Facebook Like</title>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1&appId=365679273577837";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
</head>
<body>
<div class="fb-like" data-href="https://www.google.co.in" data-layout="standard" data-action="like" data-show-faces="false" data-share="false" ></div>
</body>
</html>

Sharing functionality on Social Media using javascript

<html>
<head>
<title>Social Media Sharing</title>
<script type="text/javascript">
var url_1 = "https://www.google.co.in" ;
// Twitter Tweet
function goTwitter(title) {
var w = (screen.width-450)/2;
var h = (screen.height-450)/2;
var href = "http://twitter.com/share?text=" + encodeURIComponent(title)+"\n&media_url=http://www.fbrell.com/f8.jpg&url=" + encodeURIComponent(url_1);
var a = window.open(href, 'twitter', 'width=450,height=450,left='+w+',top='+h+',scrollbars=0');
if(a) { a.focus(); }
}
// Google Plus Share
function goGoogle(title, link) {
var w = (screen.width-450)/2;
var h = (screen.height-450)/2;
var href = "https://plus.google.com/share?url="+url_1;
var a = window.open(href, 'google', 'width=450,height=450,left='+w+',top='+h+',scrollbars=0');
if(a) { a.focus(); }
}
// Pinterest Share
function goPinterest(title, link) {
var w = (screen.width-450)/2;
var h = (screen.height-450)/2;
var href = "http://pinterest.com/pin/create/button/?url="+url_1+"&media=http://www.fbrell.com/f8.jpg&description=Google";
var a = window.open(href, 'Pinterest', 'width=750,height=450,left='+w+',top='+h+',scrollbars=0');
if(a) { a.focus(); }
}
// Facebook Share
function pstFaceBook(title,summary,image) {
var d = encodeURIComponent(title);
var image;
if(image!=""){
image = "&p[images][0]="+image;
}else{
image = "";
}
window.open('http://www.facebook.com/sharer.php?s=100&p[url]=' + encodeURIComponent(url_1)+"&p[title]=hello&p[summary]="+summary,"share",'resizable=no width=600 height=400');
}
</script>
</head>
<body>
<a href="javascript:pstFaceBook('Google','Google Home Page','http://www.fbrell.com/f8.jpg');" title="Facebook Share"><img src="http://ijustdid.org/wp-content/uploads/2012/11/Facebook-Share-Button-for-Mobile-300x132.jpg" width="100" height="50"alt="Facebook Share"></a>
<br/>
<a href="javascript:goTwitter('Gogole');" title="Twitter"><img src="http://www.mediabistro.com/alltwitter/files/2011/05/tweet-button.jpg" width="100" height="70"alt="Twitter"></a>
<br/>
<a href="javascript:goGoogle('Name Collection','urlName');" title="Google Share"><img src="http://marketingland.com/wp-content/ml-loads/2013/11/new-gplus-share-button.png" width="100" height="30"alt="Google Share"></a>
<br/>
<br/>
<a href="javascript:goPinterest('Name Collection','urlName');" title="Pinterest Pint"><img src="http://www.nextgenerationchiropractor.com/wp-content/uploads/2013/03/pinterest_pin-it_icon.png" width="100" height="30"alt="Pinterest Pint"></a>
</body>
</html>

Wednesday, February 5, 2014

Search word using third party API (Just like Google Search)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$('#tags').on('keyup', function(e) {
search_content($(this).val());
});
});
function search_content(value){
var split_data=value.replace("+", " ");
$.ajax({
type: 'POST',
url: "http://en.wikipedia.org/w/api.php?action=opensearch&search="+split_data+"&namespace=0",
async: false,
cache: false,
crossDomain: true,
dataType: 'jsonp',
success: function( data, status ) {
var availableTags = [];
$.each(data, function(index, element) {
for(var i=0;i<element.length;i++){
availableTags.push(element[i]);
}
});
$('#tags').autocomplete({
source: availableTags
}); }
});
}
</script>
</head>
<body>

<div class="ui-widget">
<label for="tags">Search Content: </label>
<input id="tags">
</div>
</body>

</html>

Monday, November 25, 2013

Print the page using javascript

<!DOCTYPE html>
<html>
<HEAD>
<title>Print the page using javascript</title>
<SCRIPT LANGUAGE="JavaScript">

</script>

<style>
@media print {
@page { margin: 0; }
body { margin: 1.6cm; }
}
.printtext-content{
border:1px solid #000;
padding:10px;
font-weight:bold;
}
.printtext-content .content-title{
text-align: center;
text-decoration: underline;
font-size: 24px;
}
</style>
</HEAD>
<BODY>
<div >
<div id="printtext">
<div class="printtext-content">
<p><div class="content-title">SAYONARA</div></p>
<p>
As a number of you already know that today is my last day @IndiaNIC . It's hard to imagine that I won't be coming here from tomorrow. Things will be different, life won't be the same.
</p>
<p>
Everybody comes office to work , to gain knowledge , to make money . but it;s the friends and colleagues who give me strength to come everyday at the same place and do the same thing again and again . i made life long friends @IndiaNIC, which is the only thing i cherish about.
</p>
<p>
I want you all to know that I am truly leaving here with mixed feelings; happy about my new career opportunity (really happy), but sad to be leaving such a wonderful friends and colleagues. The last years as a member of IndiaNIC was the best period of my career so far.
</p>
</div>
</div>
<form>
<INPUT NAME="print" TYPE="button" VALUE="Print this Document!" ONCLICK="varitext()">
</form>
</div>
</html>

Thursday, November 21, 2013

Simple banner rotator with jQuery

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
startRotator("#rotator");
})
//Initialise rotate js
function rotateBanners(elem) {
var active = $(elem+" img.active");
var next = active.next();
if (next.length == 0)
next = $(elem+" img:first");
active.removeClass("active").fadeOut(200);
next.addClass("active").fadeIn(200);
}

function prepareRotator(elem) {
$(elem+" img").fadeOut(0);
$(elem+" img:first").fadeIn(0).addClass("active");
}

function startRotator(elem) {
prepareRotator(elem);
setInterval("rotateBanners('"+elem+"')", 2000);
}
</script>

<style>
#rotator img { position: absolute; }
</style>
</head>
<body>

<div id="rotator">
<img height="154" src="C:\Users\Public\Pictures\Sample Pictures\Autumn Leaves.jpg" width="550" />
<img height="154" src="C:\Users\Public\Pictures\Sample Pictures\Garden.jpg" width="550" />
<img height="154" src="C:\Users\Public\Pictures\Sample Pictures\Green Sea Turtle.jpg" width="550" />
<img height="154" src="C:\Users\Public\Pictures\Sample Pictures\Autumn Leaves.jpg" width="550" />
<img height="154" src="C:\Users\Public\Pictures\Sample Pictures\Garden.jpg" width="550" />
<img height="154" src="C:\Users\Public\Pictures\Sample Pictures\Green Sea Turtle.jpg" width="550" />

</div>
</body>
</html>

Subscribe to: Posts (Atom)