Asp.Net: June 2013

Friday, 7 June 2013

How To Call a JavaScript Function at Regular Intervals Or Execute Function Every n Seconds in C# Asp.Net

How To Call a JavaScript Function at Regular Intervals Or Execute Function Every n Seconds in C# Asp.Net

Program:

.Aspx File:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Run JavaScript function at specific intervals of time</title>
<script type="text/javascript">
var count = 0;
function changeColor() {

// Call function with 500 milliseconds gap
setInterval(starttimer, 500);
}
function starttimer() {
count += 1;
var oElem = document.getElementById("divtxt");
oElem.style.color = oElem.style.color == "red" ? "blue" : "red";
document.getElementById("lbltxt").innerHTML = "Your Time Starts: " + count;
}
</script>
</head>
<body>
<div id="divtxt">
<label id="lbltxt" style="font:bold 24px verdana" />
</div>
<button onclick="changeColor();">Start Timer</button>
</body>
</html>

Live Demo:

Run JavaScript function at specific intervals of time

How To Start and Stop a Timer in JavaScript Or Function Execution Start and Stop in JavaScript in C# Asp.Net

How To Start and Stop a Timer in JavaScript Or Function Execution Start and Stop in JavaScript in C# Asp.Net

Program:

.Aspx File:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Run JavaScript function at specific intervals of time</title>
<script type="text/javascript">
var count = 0, chkfn = null;
function changeColor() {
// Call function with 1000 milliseconds gap
chkfn = setInterval(starttimer, 1000);
}
function starttimer() {
count += 1;
var oElem = document.getElementById("divtxt");
oElem.style.color = oElem.style.color == "red" ? "blue" : "red";
document.getElementById("pcount").innerHTML = "Your Time Starts: " + count;
}
function stoptimer() {
clearInterval(chkfn);
chkfn = null;
count = 0;
document.getElementById("pcount").innerHTML = '';
}
</script>
</head>
<body>
<div id="divtxt">
<p id="pcount" style="font:bold 24px verdana"></p>
</div>
<button onclick="changeColor();">Start Timer</button>
<button onclick="stoptimer();">Stop Timer</button>
</body>
</html>

Live Demo:

Run JavaScript function at specific intervals of time

How To Make jQuery Slideshow Example Or jQuery Simple Image Slideshow Example in C# Asp.Net

How To Make jQuery Slideshow Example Or jQuery Simple Image Slideshow Example in C# Asp.Net

Program:

.Aspx File:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Slideshow</title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var currentPosition = 0;
var slideWidth = 500;
var slides = $('.slide');
var numberOfSlides = slides.length;
setInterval(changePosition, 3000);
slides.wrapAll('<div id="slidesHolder"></div>');
slides.css({ 'float': 'left' });
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
function changePosition() {
if (currentPosition == numberOfSlides - 1) {
currentPosition = 0;
}
else {
currentPosition++;
}
moveSlide();
}
function moveSlide() {
$('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
}
});
</script>
<style type="text/css">
#slideshow #slideshowWindow
{
width:500px;
height:257px;
margin:0;
padding:0;
position:relative;
overflow:hidden;
}
#slideshow #slideshowWindow .slide
{
margin:0;
padding:0;
width:500px;
height:257px;
float:left;
position:relative;
}
</style>
</head>
<body>
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide"><b>Welcome to fantasyaspnet.blogspot.in SlideShow Image1</b> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjASKNPbyeeKwC9V_FupmEF69AiRLL4rTnwZGvFlaTZoupvDzhyphenhyphenuaNrmzL7WfgGXe_OLEadRqZMbuKOi4EiO9kgORlLZ6Ai3xqaq1t5LWLeeOpJBErAf4FxxvZzpo51_CI8_yE-TFdGHdc/s450/SaveWater.jpg" /> </div>
<div class="slide"><b>Welcome to fantasyaspnet.blogspot.in SlideShow Image2</b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiHdMz-IfE4QL3waFcuPWIx-fWBp8vedOQouTeJnMFrEwMbEQvGM4ii8eVB7wLAF8dGKvbi5XeIC5XHOB4zGEhyFV5TUrT2sbDVlaP7YKOiWFjiMaFuOFqYVPDbrUNncGlwLPWt1IUPZ8/s300/Hopetoun_falls2.jpg" /> </div>
<div class="slide"><b>fantasyaspnet.blogspot.in SlideShow Image3</b><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAu_Qgxk2Mt2TQypPDI82jOFfT-lazx0Fxk0QMn3ACnSNTcN4CdL6ou5NTFC1HWNSNhonWQ9kf5Sj2smGFgoBJ_1MF_jF4luaDP_BqTIalXWl2U1ZM4ojd2_rFW93r3tPvtT38ZxdMzuk/s300/slideshowImage.jpg" /> </div>
</div>
</div>
</body>
</html>

Live Demo:

Simple Slideshow

Welcome to fantasyaspnet.blogspot.in SlideShow Image1

Welcome to fantasyaspnet.blogspot.in SlideShow Image2

fantasyaspnet.blogspot.in SlideShow Image3

How To Make jQuery Read and Parse JSON String using ParseJSON Method in C# Asp.Net

How To Make jQuery Read and Parse JSON String using ParseJSON Method in C# Asp.Net

Program:

.Aspx File:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Read and Parse Data using ParseJSON method</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
var name = '';
var jsonstr = '[{"UserName":"Sizar","UserID":"1"},{"UserName":"surani","UserID":"2"}]';
var obj = $.parseJSON(jsonstr);
$.each(obj, function () {
name += this['UserName'] + "<br/>";
});
$('#divjson').html(name); ;
})
</script>
</head>
<body>
<div id="divjson">
</div>
</body>
</html>

Live Demo:

jQuery Read and Parse Data using ParseJSON method

How To Make Simple jQuery Image Slideshow Example with Text Overlay in c# Asp.Net

How To Make Simple jQuery Image Slideshow Example with Text Overlay in c# Asp.Net

Program:

.Aspx File:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Simple Slideshow with text overlay Example in Asp.net</title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var currentPosition = 0;
var slideWidth = 500;
var slides = $('.slide');
var numberOfSlides = slides.length;
setInterval(changePosition, 3000);
slides.wrapAll('<div id="slidesHolder"></div>');
slides.css({ 'float': 'left' });
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
function changePosition() {
if (currentPosition == numberOfSlides - 1) {
currentPosition = 0;
}
else {
currentPosition++;
}
moveSlide();
}
function moveSlide() {
$('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
}
});
</script>

<style type="text/css">

#slideshow {

position: relative;
}
#slideshow #slideshowWindow {
height: 257px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 500px;
}
#slideshow #slideshowWindow .slide {
height: 257px;
margin: 0;
padding: 0;
position: relative;
width: 500px;
}
#slideshow #slideshowWindow .slide .slideText {
background-image: url("http://www.webchief.co.uk//blog/simple-jquery-slideshow/greyBg.png");
background-repeat: repeat;
color: #FFFFFF;
font-family: Myriad Pro,Arial,Helvetica,sans-serif;
height: 130px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 130px;
width: 100%;
}
#slideshow #slideshowWindow .slide .slideText a:link, #slideshow #slideshowWindow .slide .slideText a:visited {
color: #FFFFFF;
text-decoration: none;
}
#slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p {
color: #FFFFFF;
margin: 10px 0 0 10px;
padding: 0;
}
</style>
</head>
<body>
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide1.jpg" />
<div class="slideText">
<h2 class="slideTitle">Slide 1</h2>
<p class="slideDes">fantasyaspnet.blogspot.com will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.</p>
<p class="slideLink"><a href="#">click here</a></p>
</div>
</div>
<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide2.jpg" />
<div class="slideText">
<h2 class="slideTitle">Slide 2</h2>
<p class="slideDes">fantasyaspnet.blogspot.com will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.</p>
<p class="slideLink"><a href="#">click here</a></p>
</div>
</div>
<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide3.jpg" />
<div class="slideText">
<h2 class="slideTitle">Slide 3</h2>
<p class="slideDes">fantasyaspnet.blogspot.com will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.</p>
<p class="slideLink"><a href="#">click here</a></p>
</div>
</div>
</div>
</div>
</body>
</html>

Live Demo:

jQuery Simple Slideshow with text overlay Example in Asp.net

Slide 1

fantasyaspnet.blogspot.com will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.

click here

Slide 2

fantasyaspnet.blogspot.com will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.

click here

Slide 3

fantasyaspnet.blogspot.com will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.

click here

How TO Make jQuery Image Slideshow with Next Previous Button Options in C# Asp.Net

How TO Make jQuery Image Slideshow with Next Previous Button Options in C# Asp.Net

Program:

.Aspx File:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Simple image slideshow with next previous button in Asp.net</title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var currentPosition = 0;
var slideWidth = 500;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 3000;
//Assign a timer, so it will run periodically
slideShowInterval = setInterval(changePosition, speed);
slides.wrapAll('<div id="slidesHolder"></div>')
slides.css({ 'float': 'left'
});
//set #slidesHolder width equal to the total width of all the slides
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
$('#slideshow').prepend('<span class="nav" id="leftNav">Move Left</span>')
.append('<span class="nav" id="rightNav">Move Right</span>');
manageNav(currentPosition);
//tell the buttons what to do when clicked
$('.nav').bind('click', function () {
//determine new position
currentPosition = ($(this).attr('id') == 'rightNav') ? currentPosition + 1 : currentPosition - 1;
//hide/show controls
manageNav(currentPosition);
clearInterval(slideShowInterval);
slideShowInterval = setInterval(changePosition, speed);
moveSlide();
});
function manageNav(position) {
if (position == 0) {
$('#leftNav').hide()
}
else {
$('#leftNav').show()
}
if (position == numberOfSlides - 1) {
$('#rightNav').hide()
}
else { $('#rightNav').show() }
}
function changePosition() {
if (currentPosition == numberOfSlides - 1) {
currentPosition = 0;
manageNav(currentPosition);
}
else {
currentPosition++;
manageNav(currentPosition);
}
moveSlide();
}
function moveSlide() {
$('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
};
});
</script>
<style type="text/css">

#slideshow {
position: relative;
}
#slideshow #slideshowWindow {
height: 257px;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
width: 500px;
}
#slideshow #slideshowWindow .slide {
height: 257px;
margin: 0;
padding: 0;
position: relative;
width: 500px;
}
#slideshow #slideshowWindow .slide .slideText {
background-image: url("http://www.webchief.co.uk//blog/simple-jquery-slideshow/greyBg.png");
background-repeat: repeat;
color: #FFFFFF;
font-family: Myriad Pro,Arial,Helvetica,sans-serif;
height: 130px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
top: 130px;
width: 100%;
}
#slideshow #slideshowWindow .slide .slideText a:link, #slideshow #slideshowWindow .slide .slideText a:visited {
color: #FFFFFF;
text-decoration: none;
}
#slideshow #slideshowWindow .slide .slideText h2, #slideshow #slideshowWindow .slide .slideText p {
color: #FFFFFF;
margin: 10px 0 0 10px;
padding: 0;
}
.nav
{
display:block;
text-indent:-10000px;
position:absolute;
cursor:pointer;
}
#leftNav
{
top:223px;
left:320px;
width:94px;
height:34px;
background-image:url(http://www.webchief.co.uk/blog/simple-jquery-slideshow/previous.png);
background-repeat:no-repeat;
z-index:999;
}
#rightNav
{
top:225px;
left:450px;
width:53px;
height:26px;
background-image:url(http://www.webchief.co.uk/blog/simple-jquery-slideshow/next.png);
background-repeat:no-repeat;
z-index:999;
}
</style>
</head>
<body>
<div id="slideshow">
<div id="slideshowWindow">
<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide1.jpg" />
<div class="slideText">
<h2 class="slideTitle">Slide 1</h2>
<p class="slideDes">http://fantasyaspnet.blogspot.in/ will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.</p>
<p class="slideLink"><a href="#">click here</a></p>
</div>
</div>
<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide2.jpg" />
<div class="slideText">
<h2 class="slideTitle">Slide 2</h2>
<p class="slideDes">http://fantasyaspnet.blogspot.in/ will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.</p>
<p class="slideLink"><a href="#">click here</a></p>
</div>
</div>

<div class="slide">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide3.jpg" />
<div class="slideText">
<h2 class="slideTitle">Slide 3</h2>
<p class="slideDes">http://fantasyaspnet.blogspot.in/ will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.</p>
<p class="slideLink"><a href="#">click here</a></p>
</div>
</div>
</div>
</div>
</body>
</html>

Live Demo:

jQuery Simple image slideshow with next previous button in Asp.net

Slide 1

http://fantasyaspnet.blogspot.in/ will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.

click here

Slide 2

http://fantasyaspnet.blogspot.in/ will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.

click here

Slide 3

http://fantasyaspnet.blogspot.in/ will offer best articles on Asp.net, c#, SQL Server, jQuery and many more technologies.

click here

How TO Make jQuery Image Slideshow with Semi-Transparent Caption Example in C# Asp.Net

How TO Make jQuery Image Slideshow with Semi-Transparent Caption Example in C# Asp.Net

Program:

.Aspx File:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JQuery Photo Slider with Semi Transparent Caption</title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//Execute the slideShow
slideShow();
});
function slideShow() {
//Set the opacity of all images to 0
$('#slideshow a').css({ opacity: 0.0 });
//Get the first image and display it (set it to full opacity)
$('#slideshow a:first').css({ opacity: 1.0 });
//Set the caption background to semi-transparent
$('#slideshow .caption').css({ opacity: 0.7 });
//Resize the width of the caption according to the image width
$('#slideshow .caption').css({ width: $('#slideshow a').find('img').css('width') });
//Get the caption of the first image from REL attribute and display it
$('#slideshow .content').html($('#slideshow a:first').find('img').attr('rel'))
.animate({ opacity: 0.7 }, 400);
//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('gallery()', 3000);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('#slideshow a.show') ? $('#slideshow a.show') : $('#slideshow a:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('#slideshow a:first') : current.next()) : $('#slideshow a:first'));
//Get next image caption
var caption = next.find('img').attr('rel');
//Set the fade in effect for the next image, show class has higher z-index
next.css({ opacity: 0.0 })
.addClass('show')
.animate({ opacity: 1.0 }, 1000);
//Hide the current image
current.animate({ opacity: 0.0 }, 1000)
.removeClass('show');

//Set the opacity to 0 and height to 1px
$('#slideshow .caption').animate({ opacity: 0.0 }, { queue: false, duration: 0 }).animate({ height: '1px' }, { queue: true, duration: 300 });
//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
$('#slideshow .caption').animate({ opacity: 0.7 }, 100).animate({ height: '100px' }, 500);
//Display the content
$('#slideshow .content').html(caption);
}
</script>
<style type="text/css">
body{
font-family:arial
}
.clear {
clear:both
}
#slideshow {
position:relative;
height:360px
}
#slideshow a {
float:left;
position:absolute;
}
#slideshow a img {
border:none;
}
#slideshow a.show {
z-index:500
}
#slideshow .caption {
z-index:600;
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}
#slideshow .caption .content {
margin:5px
}
#slideshow .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="slideshow">
<a href="#" class="show">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide1.jpg" alt="1" height="300" rel="<h3>Slide1 Sample</h3>"/>
</a>
<a href="#">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide2.jpg" alt="2" height="300" rel="<h3>Slide2 Example</h3>"/>
</a>
<a href="#">
<img src="http://www.webchief.co.uk//blog/simple-jquery-slideshow/slide3.jpg" alt="3" height="300" rel="<h3>Slide3 Example</h3>"/>
</a>
<div class="caption"><div class="content"></div></div>
</div>
<div class="clear"></div>
</form>
</body>
</html>

Live Demo:

JQuery Photo Slider with Semi Transparent Caption

How TO Make Drop down Menu with CSS Or jQuery Menu with Sub menu Example Using jQuery in C# Asp.net And Html

How TO Make Drop down Menu with CSS Or jQuery Menu with Sub menu Example Using jQuery in C# Asp.net And Html

Program:

.Aspx File:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Simple Dropdown Menu </title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('.menu ul li').hover(
function () {
$('.sub_menu', this).stop(true, true).slideDown(); /*slideDown the subitems on mouseover*/
}, function () {
$('.sub_menu', this).stop(true, true).slideUp(); /*slideUp the subitems on mouseout*/
});
});
</script>
<style type="text/css">
.menu{
width:600px;
font-family: verdana, Segoe UI;
background-color:#B52025;
margin:0 auto;
height:38px;
border: 1px solid #B34C00;
border-radius: 4px; /*To make the corners rounded in IE*/
-moz-border-radius: 4px; /*this is for mozilla*/
-webkit-border-radius: 4px; /*chrome and other browsers*/
box-shadow: 0 1px 1px #dddddd inset;
-moz-box-shadow: 0 1px 1px #dddddd inset;
-webkit-box-shadow: 0 1px 1px #dddddd inset;
}
.menu ul{
padding:0px;
margin: 0px;
list-style: none;
}
.menu ul li{
display: inline-block;
float:left;
position: relative;
}
.menu ul li a{
color:#ffffff;
text-decoration: none;
display: block;
padding:10px 15px;
}
.menu ul li a:hover{
background-color: #E2C7C8;
}
.sub_menu{
position: absolute;
background-color: #FDEAEB;
width:200px;
top:38px;
left:0px;
display:none; /*hide the subitems div tag initially*/
border-bottom:4px solid #B52025; /*just to add a little more good look*/
}
.sub_menu ul li{
width:200px;
}
.sub_menu ul li a{
color:black;
text-decoration: none;
display: block;
padding:10px 15px;
}
.sub_items ul li a:hover{
background-color: #FDEAEB;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<div class="sub_menu">
<ul>
<li><a href="#">The Company</a></li>
<li><a href="#">The Website</a></li>
<li><a href="#">The author</a></li>
</ul>
</div>
</li>
<li><a href="#">Tutorials</a>
<div class="sub_menu">
<ul>
<li><a href="#">Asp.net Tutorials</a></li>
<li><a href="#">Jquery Tutorials</a></li>
<li><a href="#">Sql Tutorials</a></li>
<li><a href="#">Other tutorials</a></li>
</ul>
</div>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">Advertise</a></li>
</ul>
</div>
</body>
</html>

Live Demo:

Simple Dropdown Menu

How TO Make Rounded Corner CSS for DIV without Images in C# Asp.Net

How TO Make Rounded Corner CSS for DIV without Images in C# Asp.Net

Program:

.Aspx File:

<html>
<head>
<title>Rounded Corner DIV </title>
<style type="text/css">

#samplecss
{
width:200px;
background-color:#FDEAEB;
border: 2px solid #E2C7C8;
padding: 5px;
text-align:center;
border-radius: 10px; /*To make the corners rounded in IE*/
-moz-border-radius: 10px;/*this is for mozilla*/
-webkit-border-radius: 10px; /*chrome and other browsers*/
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div id="samplecss">
<h4>DIV1 Example</h4>
</div>
</td>
<td>
<div id="samplecss">
<h4>DIV2 Example</h4>
</div>
</td>
<td>
<div id="samplecss">
<h4>DIV3 Example</h4>
</div>
</td>
</tr>
</table>
</body>
</html>

Live Demo:

Rounded Corner DIV

DIV1 Example

DIV2 Example

DIV3 Example

How To Create Goog.le Short Urls in JavaScript using Google URL Shortener API Example in C# Asp.net

How To Create Goog.le Short Urls in JavaScript using Google URL Shortener API Example in C# Asp.net

Program:

.Aspx File:

<html>
<head>
<title>URL Shortener using Google API. http://goo.gl </title>
<script src="https://apis.google.com/js/client.js" type="text/javascript"> </script>
</head>
<script type="text/javascript">
function makeRequest() {
var Url = document.getElementById("longurl").value;
var request = gapi.client.urlshortener.url.insert({
'resource': {
'longUrl': Url
}
});
request.execute(function (response) {

if (response.id != null) {
str = "<b>Long URL:</b>" + Url + "<br>";
str += "<b>Test Short URL:</b> <a href='" + response.id + "'>" + response.id + "</a><br>";
document.getElementById("result").innerHTML = str;
}
else {
alert("Error: creating short url \n" + response.error);
}
});
}
function load() {
gapi.client.setApiKey('AIzaSyDV5_Ca9cEVSFaiLkyzGIcDcbnV_4CiA0o');
gapi.client.load('urlshortener', 'v1', function () { document.getElementById("result").innerHTML = ""; });
}
window.onload = load;
</script>
<body>
<h2> URL Shortener using Google API. http://goo.gl </h2>
<table>
<tr>
<td>Enter Long URL:</td>
<td>
<input type="text" id="longurl" name="url" size="30" value="http://fantasyaspnet.blogspot.in/" />
</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Create Short Url" onclick="makeRequest();" /></td>
</tr>
<tr>
<td colspan="2">
<div id="result"></div>
</td>
</tr>
</table>
</body>
</html>

Live Demo:

URL Shortener using Google API. http://goo.gl

Enter Long URL:

How To Hide Embed YouTube Video Controls OR YouTube Iframe Embed Code Hide Controls in C# Asp.Net

How To Hide Embed YouTube Video Controls OR YouTube Iframe Embed Code Hide Controls in C# Asp.Net

Program:

Method 1:

Live Demo:

Method 2:

Live Demo:

How TO Get JSON Data/Response From URL in JavaScript Using jQuery in C# Asp.Net

How TO Get JSON Data/Response From URL in JavaScript Using jQuery in C# Asp.Net

Program:

Method 1:

Method 2:

How To Change Page Title with jQuery Dynamically in C# Asp.Net

How To Change Page Title with jQuery Dynamically in C# Asp.Net

Program:

Method 1 :

Method 2 :

How To Add More or Less Link to Text OR Show More Link to Shorten Text to Display Rest of Text Using jQuery in C# Asp.Net

How To Add More or Less Link to Text OR Show More Link to Shorten Text to Display Rest of Text Using jQuery in C# Asp.Net

Program:

.Aspx File:

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

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

<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<title>jQuery Add More/Less link to Text</title>
<script type="text/javascript">
$(function () {
var showChar = 120, showtxt = "more", hidetxt = "less";
$('.more').each(function () {
var content = $(this).text();
if (content.length > showChar) {
var con = content.substr(0, showChar);
var hcon = content.substr(showChar, content.length - showChar);
var txt = con + '<span class="dots">...</span><span class="morecontent"><span>' + hcon + '</span>  <a href="" class="moretxt">' + showtxt + '</a></span>';
$(this).html(txt);
}
});
$(".moretxt").click(function () {
if ($(this).hasClass("sample")) {
$(this).removeClass("sample");
$(this).text(showtxt);
} else {
$(this).addClass("sample");
$(this).text(hidetxt);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
<style type="text/css">
body{
font-family: Calibri, Arial;
margin: 0px;
padding: 0px;
}
.more {
width: 400px;
background-color: #f0f0f0;
margin: 10px;
}
.morecontent span {
display: none;
}
</style>
</head>
<body>
<div class="more">
Welcome to fantasyaspnet.blogspot.in. It's Technical blog related to Microsoft Technologies.
It's Technical blog related to Microsoft Technologies. It's Technical blog related
to Microsoft Technologies
</div>
<div class="more">
fantasyaspnet.blogspot.in offers many Microsoft related articles. Welcome to fantasyaspnet.blogspot.in.
It's Technical blog related to Microsoft Technologies.
It's Technical blog related to Microsoft Technologies. It's Technical blog related
to Microsoft Technologies
</div>
<div class="more">
It's Technical blog related to Microsoft Technologies.
It's Technical blog related to Microsoft Technologies. It's Technical blog related
to Microsoft Technologies
</div>
</body>
</html>

Live Demo:

jQuery Add More/Less link to Text

Welcome to fantasyaspnet.blogspot.in. It's Technical blog related to Microsoft Technologies. It's Technical blog related to Microsoft Technologies. It's Technical blog related to Microsoft Technologies

fantasyaspnet.blogspot.in offers many Microsoft related articles. Welcome to fantasyaspnet.blogspot.in. It's Technical blog related to Microsoft Technologies. It's Technical blog related to Microsoft Technologies. It's Technical blog related to Microsoft Technologies

It's Technical blog related to Microsoft Technologies. It's Technical blog related to Microsoft Technologies. It's Technical blog related to Microsoft Technologies

Pages

Friday, 7 June 2013

Slide 1

Slide 2

Slide 3

Slide 1

Slide 2

Slide 3

DIV1 Example

DIV2 Example

DIV3 Example

URL Shortener using Google API. http://goo.gl