Asp.net Codes

Showing posts with label Jquery. Show all posts

Tuesday, February 4, 2014

jQuery Plugin to Create Quizzes-SlickQuiz

As we know that creating a quiz is really a complicated task. So help the developer and reduce the coding part we are going to introduce a jquery Quiz plugin...

Click here to check Demo

Download Zip File

Wednesday, May 15, 2013

Facebook Login and friend list - Post on User Wall and Friends Wall javascript SDK

Facebook Login and friend list - Post on User Wall and Friends Wall javascript SDK

<html>
<head>
    <title>Facebook Get Logged in User Details UserName,Email,Profile Image</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

</head>
<body>

<script>

// publish to friend wall
function postonwall(src){
         FB.init({
            appId:'Application ID', cookie:true,
            status:true, xfbml:true
         });
var str=src;
var n=str.split("/");

         FB.ui({ method:'feed',from:'User ID',to:n[3] ,
            message: ''},

function(response) {
    if (response && response.post_id) {

    } else {

    }
}
);
}

</script>

<script>

// Post on User Timeline

      FB.init({appId: "Application ID", status: true, cookie: true});

      function postToFeed() {

        // calling the API ...
        var obj = {
          method: 'feed',
          redirect_uri: 'http://localhost',
          link: 'https://developers.facebook.com/docs/reference/dialogs/',
          picture: 'http://fbrell.com/f8.jpg',
          name: 'Facebook Dialogs',
          caption: 'Reference Documentation',
          description: 'Using Dialogs to interact with users.'
        };

        function callback(response) {
          document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
        }

        FB.ui(obj, callback);
      }

    </script>

<script>
function publish_to_wall(){
FB.ui({ method: 'stream.publish', message: 'This is a simple post to appshack.tv' });
}
</script>

    <script>
// Load the SDK Asynchronously
(function(d) {
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) { return; }
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
} (document));

// Init the SDK upon load
window.fbAsyncInit = function() {
FB.init({
appId: 'Application ID', // App ID
channelUrl: '//' + window.location.hostname + '/channel', // Path to your Channel File
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});

// listen for and handle auth.statusChange events
FB.Event.subscribe('auth.statusChange', function(response) {
if (response.authResponse) {
// user has auth'd your app and is logged into Facebook
var uid = "http://graph.facebook.com/" + response.authResponse.userID + "/picture";
        FB.api('/me', function(me)
        {
        document.getElementById('Id').innerHTML = me.id;
        document.getElementById('auth-displayname').innerHTML = me.name;
        document.getElementById('Email').innerHTML = me.email;
        document.getElementById('link').innerHTML = me.link;
        document.getElementById('locale').innerHTML=me.locale;
        document.getElementById('DOB').innerHTML = me.birthday;
        document.getElementById('profileImg').src = uid;
        document.getElementById('Gender').innerHTML = me.gender;



       FB.api('/me/friends', function(response)
       {
        for(i=0;i<response.data.length;i++)
            {
                $(document.createElement("img")).attr({ src: 'https://graph.facebook.com/'+response.data[i].id+'/picture', title: response.data[i].name,onClick:'postonwall(this.src)'}).appendTo('.divContainer');
            }
        });


        })
        document.getElementById('auth-loggedout').style.display = 'none';
        document.getElementById('auth-loggedin').style.display = 'block';
        }
        else
        {
            // user has not auth'd your app, or is not logged into Facebook
            document.getElementById('auth-loggedout').style.display = 'block';
            document.getElementById('auth-loggedin').style.display = 'none';
        }});
        $("#auth-logoutlink").click(function() { FB.logout(function() { window.location.reload(); }); });
        }

    </script>

    <h1>
        Facebook Login Authentication Example</h1>
    <div id="auth-status">
        <div id="auth-loggedout">
            <div class="fb-login-button" autologoutlink="true" scope="email,user_checkins">
                Login with Facebook</div>
        </div>
        <div id="auth-loggedin" style="display: none; border: solid 1px #000; width: 231px;
            height: auto;">
            <img id="profileImg" width="100px" height="100px" onClick="postToFeed()" /><a href="#" id="auth-logoutlink"
                style="float: right; font-weight: bold; text-decoration: none;">logout</a>
            <br />
            <b>User-ID :</b><span id="Id"></span>
            <br />
            <b>Name :</b><span id="auth-displayname"></span><br />
            <b>Gender: </b><span id="Gender"></span>
            <br />
            <b>locale: </b><span id="locale"></span>
            <br />
            Your Date of Birth :, <span id="DOB"></span><br/>
            <br />
            <b>Email: </b><span id="Email"></span>
            <br />
            <b>link: </b><span id="link"></span>
            <br />
        </div>
        <div class="divContainer">
        </div>
    </div>
</body>
</html>

Wednesday, April 10, 2013

Gallery Image Zoom

<head>

<title>jQuery Zoom Image on Mouse Hover using jQuery Image Zoom Plugin</title>

#gallery_01 img{border:2px solid white;width: 96px;}

.active img{border:2px solid #333 !important;}

</style>

</head>

<body>

<div>

<a href="#" class="active" data-image="images/small/image1.png"

data-zoom-image="images/large/image1.jpg">

</div>

$(document).ready(function() {

$("#img1").elevateZoom({ gallery: 'gallery_01', cursor: 'pointer', galleryActiveClass: "active" });

$("#img1").bind("click", function(e) {

var ez = $('#img1').data('elevateZoom');

ez.closeAll();

$.fancybox(ez.getGalleryList());

return false;

});

</script>

</body>

</html>

Dowlload Code

Zoom Image

Jquery Image Zoom On Mousehover

Here you need to place three dimension of single image

a. Thumbnail - 100 x 67 pixels

b. Small - 411 x 274 pixels

c. Large - 1280 x 854 pixels

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BasicExample.aspx.cs" Inherits="BasicExample" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery inner Zoom Image on Mouse Hover</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="js/jquery.elevatezoom.min.js" type="text/javascript"></script>
</head>
<body>
    <div>
    <img id="img1" src="images/small/image1.png" data-zoom-image="images/large/image1.jpg"/>

     <img id="img2" src="images/small/image2.png" data-zoom-image="images/large/image2.jpg"/>
    </div>
     <script type="text/javascript">
         $(function() {
         $("#img1").elevateZoom({
             zoomType:"inner",
             cursor:"crosshair"
             });

         });
</script>
</body>
</html>

Download the Code

Tuesday, January 8, 2013

Jquery dropdown validation

Test for jQuery validate() plugin

Html Code here

	<html xmlns="http://www.w3.org/1999/xhtml"><head>
	<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
	<title>Test for jQuery validate() plugin</title>

	<link href="css/screen.css" media="screen" type="text/css" rel="stylesheet">

	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="http://jquery.bassistance.de/validate/lib/jquery.metadata.js"></script>
	<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>

	<script type="text/javascript">
	// only for demo purposes
	$.validator.setDefaults({
	submitHandler: function() {
	alert("submitted!");
	}
	});

	$.metadata.setType("attr", "validate");

	$(document).ready(function() {

	$("#selecttest").validate();
	});
	</script>

	<style type="text/css">
	.block { display: block; }
	form.cmxform label.error { display: none; }
	</style>

	</head>
	<body>


	<div id="main">



	<form id="selecttest" novalidate="novalidate">
	<p>
	<label for="cname">Name</label>
	<em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
	</p>
	<p>
	<label for="cemail">E-Mail</label>
	<em>*</em><input id="cemail" name="email" size="25" class="required email" />
	</p>
	<p>
	<label for="curl">URL</label>
	<em> </em><input id="curl" name="url" size="25" class="url" value="" />
	</p>
	<p>
	<label for="ccomment">Your comment</label>
	<em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
	</p>

	<p>
	<label for="jungle">Please select a jungle noun</label><br>
	<select validate="required:true" title="Please select something!" name="jungle" id="jungle" class="error">
	<option value=""></option>
	<option value="1">Buga</option>
	<option value="2">Baga</option>
	<option value="3">Oi</option>
	</select><label for="jungle" generated="true" class="error" style="display: inline;">Please select something!</label>
	</p>







	<p><input type="submit" value="Validate Selecttests"></p>
	</form>



	</div>




	</body></html>