MY NODE

Showing posts with label JavaScript. Show all posts

Sunday, August 29, 2010

How to round numbers in JavaScript

JavaScript number rounding is done using Math.round
This will round a given number to the nearest whole number

<script type="text/javascript">

var number = 100.58;
number = Math.round(number);
alert(number); //101

</script>

If you do need some decimal points preserved, following code will round the number to the nearest tenth.

<script type="text/javascript">

var number = 100.58;
number = Math.round(number*10)/10;
alert(number); //100.6

</script>

Javascript Go Back Link With History

Here is a really easy way to add a go back link to your page navigation.
This code uses JavaScript to get the browser history for the specific site.

<a href="#" onClick="history.go(-1)">Back</a> 
<input type=button value="Back" onClick="history.go(-1)">

You can change the -1 to any number of pages you need to go back in history :D

Thursday, July 29, 2010

jquery datepicker with current date and custom date format

I searched the net to find a more simpler solution to set the current date with jQuery UI datepicker but didn't find anything. So here is the solution I used. Mixture of both normal JavaScript and jQuery. You can also check out how to use a custom date format with jQuery UI datepicker.

var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var d = year + "-" + month + "-" + day;

$('.date-pick').datepicker({ dateFormat: 'yy-mm-dd' }).val(d);

Monday, May 11, 2009

check only for numbers in JavaScript

This code will show you how to check only for numbers in JavaScript.


<script type="text/javascript">

var input = '112334'; 
var vali_regex = /^[0-9]+$/;

if(input.match(vali_regex))
{
 alert('This is a number');  
}
else
{
 alert('Not a number');
}
</script>

Tuesday, April 28, 2009

How to check upload file extension (JavaScript)

Before uploading a file it's a good idea to check for valid file extensions you want.
Even though you can easily bypass JavaScript validation by disabling JavaScript in the browser, you can prevent genuine user errors by implementing this code.


<html>
<head>
<title>Upload Check</title>
<script type="text/javascript">

function vali_type()
{ 
 var id_value = document.getElementById('up').value;
 
 if(id_value != '')
 { 
  var valid_extensions = /(.jpg|.jpeg|.gif)$/i;   
  if(valid_extensions.test(id_value))
  { 
   alert('OK');
  }
  else
  {
   alert('Invalid File')
  }
 } 
}


</script>
</head>

<body>

<input type="file" name="up" id="up"
onBlur="vali_type()" />

</body>
</html>

var valid_extensions = /(.jpg|.jpeg|.gif)$/i;
Check for .jpg, .jpeg and .gif file extentions in the end of the string
| - OR
i - Case Insensitive
$ - END

Thursday, March 19, 2009

Find JavaScript Errors Easily

If you facing a hell of a time finding JavaScript errors you can use Firefox error console to get descriptive JavaScript errors. There are tools like Firebug, but error console comes built in Firefox so no need to worry about install. You find CSS errors also.

Goto tools -> error console

Thursday, November 20, 2008

How to split a string using javascript - split() method

Following code will show you how to split a string using a given separator.


<head>

<script type="text/javascript">

var my_string = "Hello My Name Is Kusal";
var split_var = my_string.split(" "); //separate by space

alert(split_var[0]); //Hello
alert(split_var[1]); //My
alert(split_var[4]); //Kusal

</script>

</head>

Get Free Sinhala IT Learning Videos Kuppiya.com

Sunday, November 2, 2008

How to use getElementById in JavaScript

Following codes will show you how easy it is to use JavaScript getElementById to manipulate HTML elements.

Example 1 - On mouse over the text will be red, on mouse out it will be black again.


<html>
<head>

<script type="text/javascript">

function chng_color()
{
document.getElementById('my_div').style.color = 'red';
}

function normal_color()
{
document.getElementById('my_div').style.color = 'black';
}

</script>

</head>

<body>

<div id="my_div" onmouseover="chng_color()" onMouseOut="normal_color()">

This is the first example!!!

</div>

</body>
</html>

Example 2 - Get entered text of a text box and display it on a JavaScript alert box.


<html>
<head>

<script type="text/javascript">

function alrt_text()
{
var entered_text = document.getElementById('my_text_box').value;
alert(entered_text);
}

</script>

</head>

<body>

Your Text:
<input type="text" name="my_text_box" id="my_text_box" onBlur="alrt_text()" />

</body>
</html>

*Always remeber to give a id name for your HTML elements before using getElementById()

Get Free Sinhala IT Learning Videos Kuppiya.com

Subscribe To My Blog

Wednesday, September 10, 2008

How to get current URL using JavaScript

Simplest way to get the current browser URL using JavaScript is to use window.location.href
Look at the following code,


<script type="text/javascript">

var url = window.location.href;

document.write(url);

</script>

Get Free Sinhala IT Learning Videos Kuppiya.com

Subscribe To My Blog

Sunday, September 7, 2008

How to reload parent window from a iframe

Lets see how we can reload or refresh parent page from a iframe. This is pretty simple with small piece of JavaScript - top.location.href
Look at the following code it has two pages.

frame.htm - parent


<HTML>
<HEAD>
 <TITLE>Parent window</TITLE>
</HEAD>
<BODY>

<table border="1">
<tr>
<td>This is main</td>
<td><iframe src ="frame2.htm" width="100%">
</iframe></td>
</tr>
</table>

</BODY>
</HTML>

frame2.htm


<HTML>
<HEAD>
 <TITLE>New Document</TITLE>
</HEAD>
<BODY>

<div onClick="top.location.href='frame.php'">
Click here to reload parent page</div>

</BODY>
</HTML>

Get Free Sinhala IT Learning Videos Kuppiya.com

Thursday, August 21, 2008

How to redirect a page using java script - window.location

when you need to redirect a web page using JavaScript you can easily use window.location to redirect a page to anther web page.
Check out the following code


<HEAD>
<SCRIPT language="JavaScript">
<!--
window.location="http://yourURL.com";
//-->
</SCRIPT>
</HEAD>

Get Free Sinhala IT Learning Videos Kuppiya.com

Subscribe To My Blog

Wednesday, June 18, 2008

How to refresh parent window when closing popup window

You open a popup and when a update done in popup window you need to refresh or reload the parent window. How can you reload or refresh your parent? here's how its done.

window.close(); // close the popup

if (window.opener && !window.opener.closed)
{
//if parent available
window.opener.location.reload(); //reload parent
}

Subscribe To My Blog