Monday, 21 April 2014

JQuery - Part IV

jQuery Restrict to Allow Only Numbers in Textbox in Asp.net

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
$('#txtNumeric').keydown(function(e) {
if (e.shiftKey || e.ctrlKey || e.altKey) {
e.preventDefault();
} else {
var key = e.keyCode;
if (!((key == 8) || (key == 46) || (key >= 35 && key <= 40) || (key >= 48 && key <= 57) || (key >= 96 && key <= 105))) {
e.preventDefault();
}
}
})
})
</script>

jQuery How to Get Mouse Cursor Position<script type="text/javascript">

$(function() {
$(document).mousemove(function(e) {
$('#lbltxt').html("X Axis: "+e.pageX+"<br/>"+ "Y Axis: "+e.pageY);
})
})
</script>


Disable Specific Dates in jQuery UI Datepicker

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript">
var Alldays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
var disableDates = ["2012/11/26", "2012/11/28", "2012/12/05"]; // yyyy/MM/dd
var disableDays = ["Saturday", "Sunday"];
function ShowDisableDates(date) {
ymd = date.getFullYear() + "/" + ("0" + (date.getMonth() + 1)).slice(-2) + "/" + ("0" + date.getDate()).slice(-2);
day = new Date(ymd).getDay();
if ($.inArray(ymd, disableDates) < 0 && $.inArray(Alldays[day], disableDays) < 0) {
return [true, "enabled", "Book Now"];
} else {
return [false, "disabled", "Sold Out"];
}
}
$(function() {
$("#datepicker").datepicker({beforeShowDay:ShowDisableDates});
});
</script>


jQuery: Convert Text to UpperCase or LowerCase

<script type="text/javascript">
$(function() {
// Convert to UpperCase
$('#txtName').keyup(function() {
this.value = this.value.toUpperCase();
});
// Convert to LowerCase
$('#txtLocation').keyup(function() {
this.value = this.value.toLowerCase();
})
})
</script>

How to Call Asp.net Server Side method from jQuery

$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "yourpage.aspx/yourmethod",
data: "{}",
dataType: "json",
success: function(data) {
//Write functionality to display data
},
error: function(result) {
alert("Error");
}
});


jQuery Uploading Multiple Files using Asp.net with Uploadify Plugin

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="uploadify.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.uploadify.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#file_upload").uploadify({
'swf': 'uploadify.swf',
'uploader': 'Handler.ashx',
'cancelImg': 'cancel.png',
'buttonText': 'Select Files',
'fileDesc': 'Image Files',
'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
'multi': true,
'auto': true
});
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="file_upload" runat="server" />
</div>

Handler.ashx 
<%@ WebHandler Language="C#" Class="Handler" %>

using System.Web;

public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
HttpPostedFile uploadFiles = context.Request.Files["Filedata"];
string pathToSave = HttpContext.Current.Server.MapPath("~/UploadFiles/") + uploadFiles.FileName;
uploadFiles.SaveAs(pathToSave);
}
public bool IsReusable {
get {
return false;
}
}
}


jQuery Upload Multiple Files using Asp.net with Multiple File Upload Plugin Example

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.MultiFile.js" type="text/javascript"></script>
<asp:FileUpload ID="file_upload" class="multi" runat="server" />
<asp:Button ID="btnUpload" runat="server" Text="Upload"
onclick="btnUpload_Click" /><br />
<asp:Label ID="lblMessage" runat="server" />

protected void btnUpload_Click(object sender, EventArgs e)
{
HttpFileCollection fileCollection = Request.Files;
for (int i = 0; i < fileCollection.Count; i++)
{
HttpPostedFile uploadfile = fileCollection[i];
string fileName = Path.GetFileName(uploadfile.FileName);
if (uploadfile.ContentLength > 0)
{
uploadfile.SaveAs(Server.MapPath("~/UploadFiles/") + fileName);
lblMessage.Text += fileName + "Saved Successfully<br>";
}
}
}

jQuery UI Virtual Keyboard Plugin Example

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css"rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link href="css/keyboard.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.keyboard.js"></script>
<script src="js/jquery.keyboard.extension-typing.js" type="text/javascript"></script>
<script type="text/javascript">
<script type="text/javascript">
$(document).ready(function () {
$('#txtkeyboard').keyboard()
});
</script>


Add Blinking text using jQuery | Blinking Effect to Text in jQuery

script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
blinkeffect('#txtblnk');
})
function blinkeffect(selector) {
$(selector).fadeOut('slow', function() {
$(this).fadeIn('slow', function() {
blinkeffect(this);
});
});
}
</script>


Change Page Title with jQuery Dynamically

Method 1:

<script type="text/javascript">
$(function() {
$(document).attr("title", "Change Page Title with jQuery");
});
</script>
Method 2:

<script type="text/javascript">
$(function() {
$('title').text("New Title");
});
</script>


jQuery setInterval() Function Example in JavaScript

<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>

jQuery SpellCheck Plugin

  1. <script type='text/javascript' src='/JavaScriptSpellCheck/extensions/jquery-1.6.4.min.js' ></script>
  2. <script type='text/javascript' src='/JavaScriptSpellCheck/include.js' ></script>
  3. <script type='text/javascript' src='/JavaScriptSpellCheck/extensions/fancybox/jquery.fancybox-1.3.4.pack.js' ></script>
  4. <link rel="stylesheet" href="/JavaScriptSpellCheck/extensions/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
  5.  
  6. <script type='text/javascript'>
  7.  $(function() { $('textarea').spellAsYouType();});
  8. </script>
  9.    
  10. <textarea name="myTextArea"  id="myTextArea" cols="50" rows="8">Hello Worlb. This Examplee iss implemented uisng jQuery and the $() selactor.</textarea>
  11.  
  12. <input type="button" value="Spell Check" onclick="$('#myTextArea').spellCheckInDialog({popUpStyle:'fancybox',theme:'clean'})">


<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
$('#btnCheck').click(function () {
var txt = $('#txtName');
if (txt.val() != null && txt.val() != '') {
alert('you entered text ' + txt.val())
}
else {
alert('Please enter text')
}
})
});
</script>


Simple jQuery Modal POPUP Window Example

<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.content a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.content{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.content p{
clear: both;
color: #555555;
text-align: justify;
}
.content p a{
color: #d91900;
font-weight: bold;
}
.content .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.content .x:hover{
cursor: pointer;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type='text/javascript'>
$(function(){
var overlay = $('<div id="overlay"></div>');
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});

$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});

$('.click').click(function(){
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
return false;
});
});
</script>
</head>
<body>
<div class='popup'>
<div class='content'>
<img src='http://www.developertips.net/demos/popup-dialog/img/x.png' alt='quit' class='x' id='x' />
<p>
Welcome to Aspdotnet-Suresh.com. Please use above search option which was there in top right side to get help with many of articles.
<br/>
<br/>
<a href='' class='close'>Close</a>
</p>
</div>
</div>         
<div id='container'>
<a href='' class='click'><h2><b>Click Here to See Popup! </b></h2></a> <br/>
</div>


jQuery Calculate Page Load Time in JavaScript

JavaScript Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery calculate page load time in javascript</title>
<script type="text/javascript">
var beforeload = new Date().getTime();
window.onload = gettimeload;
function gettimeload() {
var aftrload = new Date().getTime();
// Time calculating in seconds
time = (aftrload - beforeload) / 1000
document.getElementById("lbltxt").innerHTML = "Your Page took <font color='red'><b>" + time + "</b></font> Seconds to Load";
}
</script>
</head>
<body>
<div>
<label id="lbltxt" />
</div>
</body>
</html>

jQuery Code


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery calculate page load time in javascript</title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var beforeload = new Date().getTime();
window.onload = gettimeload;
function gettimeload() {
var aftrload = new Date().getTime();
// Time calculating in seconds
time = (aftrload - beforeload) / 1000
$("#lbltxt").text(time);
}
});
</script>
</head>
<body>
<div>
your Page took
<label id="lbltxt" style="font-weight:bold; color:Red"></label>
Seconds to Load
</div>
</body>
</html>

jQuery Show DIV, Hide DIV, Toggle DIV Content Example

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
$('.showhide').click(function() {
$(".slidediv").slideToggle();
});
});
</script>
<style type="text/css">
.slidediv{
width: 30%;
padding:20px;
background:#EB5E00;
color:#fff;
margin-top:10px;
border-bottom:5px solid #FFF;
display:none;
}
</style>
<div class="slidediv">
Welcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.com
Welcome to Aspdotnet-Suresh.com
</div>

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)