Showing posts with label Java Scripts. Show all posts

Sunday, November 1, 2015

Disable Refresh F5 Button in Javascript

11/01/2015 06:31:00 PM Mohamed Ileeyas No comments

How to Disable F5 Refresh Button in Javascript

<Script language="javascript">
function checkKeyCode(evt)
{

var evt = (evt) ? evt : ((event) ? event : null);
var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
if(event.keyCode==116)
{
evt.keyCode=0;
return false
}
}
document.onkeydown=checkKeyCode;
</script>

Disable F5 Refresh Button in Asp.net and c#

How to Allow Only Numeric Values in Asp.net

9/06/2015 11:36:00 AM Mohamed Ileeyas No comments

Java Script function only Integers values in Textbox

In Asp.net Programming some time we need only enter Numeric value in text-boxes like EmpolyeeId, Telephone Number, Mobile Number and so on.

We can use JavaScript for this kind of problem. To allow only numerical values in Asp.net Textboxes.

JavaScript Function:

function isNumberKey()

{

if(!(((event.keyCode>=48&&event.keyCode<=57) || (event.keyCode>=96&&event.keyCode<=105))||(event.keyCode==8) || (event.keyCode==9) || (event.keyCode==37) || (event.keyCode==39) || (event.keyCode==46) || (event.keyCode==190)))

event.returnValue=false;

}

Asp.net:

Calling the above function from Asp.net Textbox control:

<label> Empolyee Id</label>

<asp:TextBox ID="txtEmpID" runat="server" onkeydown="isNumberKey();">

<asp:TextBox>

HTML:

<label> Empolyee Id</label>

How to Allow Only Numeric Values in Asp.net Using Javascript

Copy Text value From Another Text Box using asp.net

12/24/2011 02:16:00 PM Mohamed Ileeyas No comments

<head runat="server">
<title>Untitled Page</title>

<script type="text/javascript">
function FillBilling(f) {
if(f.billingtoo.checked == true) {
f.billingname.value = f.shippingname.value;
f.billingcity.value = f.shippingcity.value;
}
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<b>Mailing Address</b>
<br><br>

Name:
<asp:TextBox runat="server" ID="shippingname" name="shippingname" />
<br>
City:
<asp:TextBox runat="server" ID="shippingcity" name="shippingcity" />
<br>
<asp:CheckBox runat="server" ID="billingtoo" name="billingtoo" onclick="FillBilling(this.form)" />
<br />
Name:
<asp:TextBox ID="billingname" runat="server" name="billingname" />
<br>
City:
<asp:TextBox runat="server" id="billingcity" name="billingcity" />
</div>
</form>
</body>
</html>

Five UI tips for Web apps

10/13/2011 03:42:00 PM Mohamed Ileeyas No comments

Here are five things you can do to make your Web apps have UIs that work better for your users.

1: JavaScript/AJAX should not override basic browser controls

Recently, I was using one of my bank’s websites, and I noticed some peculiar behavior. There was a date field, and when you clicked it, a calendar popped up; at the same time, the cursor in the date box was active. I tried to use the “Backspace” key to clear out the existing data, but instead of working as if I was in the input box, my browser behaved like I wasn’t and sent me to the previous page.

This is bad behavior, and I see it all too often. Using these JavaScript and AJAX controls can bring a lot of the desktop-like UI experience to the Web app sphere, but you should make sure that the expected browser behavior is not broken in the process.

2: Proper form behavior

If there is one thing that annoys visitors, it is being presented with a large number of input fields but the TAB button does not go from one field to another in the expected order. Along the same lines, it is also annoying when the Enter button does not submit the form at all, or it acts as if a button other than “Submit” was clicked for the current form.

Always test your forms (especially ones with many input controls) to ensure that the TAB order is correct and that the Enter button submits the form as expected.

3: Don’t use images for text

When the Web was young, people went nuts trying to get the “perfect” Web layout. The “solution” was often to make the site one big image and slice it up. After a while, reality set in, especially bandwidth, and

Page Load Alert Box

10/04/2011 10:55:00 AM Mohamed Ileeyas No comments

Page Load Alert Box using javascript
<html>
<head>
<SCRIPT LANGUAGE="javascript">

</SCRIPT>
</head>
<body></body>
</html>

Nice Java script Examples

4/29/2011 03:15:00 PM Mohamed Ileeyas No comments

Java script preloader

4/27/2011 06:37:00 PM Mohamed Ileeyas No comments

<html>
<head>
<title>Preload Image Page</title>
<script language="JavaScript1.1">
<!-- begin hiding

/*
Preload Image With Update Bar Script (By Marcin Wojtowicz [one_spook@hotmail.com])
Submitted to and permission granted to Dynamicdrive.com to feature script in it's archive
For full source code to this script and 100's more, visit http://dynamicdrive.com
*/

// You may modify the following:
 var locationAfterPreload = "http://dynamicdrive.com" // URL of the page after preload finishes
 var lengthOfPreloadBar = 150 // Length of preload bar (in pixels)
 var heightOfPreloadBar = 15 // Height of preload bar (in pixels)
 // Put the URLs of images that you want to preload below (as many as you want)
 var yourImages = new Array("http://yourdomain.com/test1.gif","http://yourdomain.com/test2.gif")

// Do not modify anything beyond this point!
if (document.images) {
 var dots = new Array() 
 dots[0] = new Image(1,1)
 dots[0].src = "black.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
 dots[1] = new Image(1,1)
 dots[1].src = "blue.gif" // color of bar as preloading progresses (same note as above)
 var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
 var loaded = new Array(),i,covered,timerID
 var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() { 
 for (i = 0; i < yourImages.length; i++) { 
  preImages[i] = new Image()
  preImages[i].src = yourImages[i]
 }
 for (i = 0; i < preImages.length; i++) { 
  loaded[i] = false
 }
 checkLoad()
}
function checkLoad() {
 if (currCount == preImages.length) { 
  location.replace(locationAfterPreload)
  return
 }
 for (i = 0; i <= preImages.length; i++) {
  if (loaded[i] == false && preImages[i].complete) {
   loaded[i] = true
   eval("document.img" + currCount + ".src=dots[1].src")
   currCount++
  }
 }
 timerID = setTimeout("checkLoad()",10) 
}
// end hiding -->
</script>

</head>

<body bgcolor="#FFFFFF">

<center>
<font size="4">Please be patient while some images<br>
are being preloaded...</font><p>
0%
<script language="JavaScript1.1">
<!-- begin hiding
// It is recommended that you put a link to the target URL just in case if the visitor wants to skip preloading
// for some reason, or his browser doesn't support JavaScript image object.
if (document.images) {
 var preloadBar = ''
 for (i = 0; i < yourImages.length-1; i++) {
  preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
 }
 preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
 document.write(preloadBar)
 loadImages()
}
document.write('<p><small><a href="javascript:window.location=locationAfterPreload">Skip Preloading</a>  |  <a href="http://dynamicdrive.com/">Script Credits</a></small></p>')
// end hiding -->
</script>
</center>
</body>
</html>

Display Label Error Message in JavaScript

2/23/2011 11:59:00 AM Mohamed Ileeyas 1 comment

This is Script for error display

<script type="text/javascript" language=javascript>
   function valid()
   {
   var Name = document.getElementById('name');

   if (Name.value == '' || Name.value == "null") {
   document.getElementById('lblName').innerHTML = "Enter Your Name";
   } else {
   var re = /^[a-zA-Z]+$/;

   if (!Name.value.match(re)) {
   document.getElementById('lblName').innerHTML = "Enter Valid Name";
   }
   else {
   document.getElementById('lblName').innerHTML = "";
   }
   }
}
</script>

HTML

<tr style="padding-top:15px">
   <td style="color: #595627;font-size:12;font-family:verdana; font-weight:normal;">Name
   </td>
   <td><input type="text" value="" name="username" id="name" style="width:230px"/></td>
   </tr>
   <tr>
   <td colspan="2"><label id="lblName" style="padding-left:80px; color:red;font-size:12;font-family:verdana; font-weight:normal;" ></label> </td>
   </tr>

Simplest way to change images on Mouse Over through JavaScript

1/03/2011 10:56:00 AM Mohamed Ileeyas No comments

Many times we use to give some effects when users mouse overs an element. Sometimes we change the colors, sometimes we change sizes. Many times we also change the images on which users put their mouses on. Many times we use to change the texts in the images which is also done by changing the whole image on mouse over. Many times we see that images remain totally same on mouse over, just the color of the image is changed, which is also done by changing the whole image.

Many times we may have used large JavaScript files to achieve this effect to change images on mouse overs. Here is the simplest way to change the images on mouse over through JavaScript. You need to assign a namefor the image you want to change. Then you can use JavaScript on the properties of the image, identifying it by its name. Just using the following code, you can access the Image class of JavaScript and play with its properties. Just checkout the simplest example.

<html>
<head>
    <script language="Javascript">
        image1=new Image
        image1.src="/images/picture1.jpg"
        image2=new Image
        image2.src="/images/picture2.jpg"
    </script>
</head>
<body>
<a href="location1.htm" onMouseOver="document.picture.src=image2.src" onMouseOut="document.picture.src=image1.src" >
    <img name="picture" src="/images/picture1.jpg" alt="My Image" />
</a>
</body>
</html>

This is a very light and easy way to do this task. Its very effective and does the job satisfactorily.

Simplest way to change images on Mouse Over through JavaScript

How To: Disable Form Submit on Enter Key Press

12/22/2010 07:11:00 PM Mohamed Ileeyas No comments

The post Enter Key as the Default Button describes how to set the default behaviour for enter key press. However, sometimes, you need to disable form submission on Enter Key press. If you want to prevent it completely, you need to use OnKeyPress handler on tag of your page.

The javascript code should be:

<script language="JavaScript">
function disableEnterKey(e)
{
   var key;
   if(window.event)
   key = window.event.keyCode; //IE
   else
   key = e.which; //firefox

   return (key != 13);
}
</script>
If you want to disable form submission when enter key is pressed in an input field, you must use the function above on the OnKeyPress handler of the input field as follows

<input disableenterkey(event)”="" name="”txtInput”" onkeypress="”return" type="”text”" />

Subscribe Now!

Sunday, November 1, 2015

How to Disable F5 Refresh Button in Javascript

Disable F5 Refresh Button in Asp.net and c#

Sunday, September 6, 2015

Java Script function only Integers values in Textbox

How to Allow Only Numeric Values in Asp.net Using Javascript

Saturday, December 24, 2011

Thursday, October 13, 2011

1: JavaScript/AJAX should not override basic browser controls

2: Proper form behavior

3: Don’t use images for text

Tuesday, October 4, 2011

Friday, April 29, 2011

Wednesday, April 27, 2011

Wednesday, February 23, 2011

Monday, January 3, 2011

Simplest way to change images on Mouse Over through JavaScript

Wednesday, December 22, 2010

Popular Posts

Total Pageviews

Subscribe To

Followers

Labels

Blog Archive

Fans in World Wide