Friday, September 18, 2009
Small and simple Javascript Codes to change/alter image from older to new one then again change to earlier image when roll out from image. In the image roll-over/alter_image script of the previous session, the code for changing the image was placed inside the event handlers. This is fine if there are one [...]
To open a popup window we use window.open method in javascript:
Syntax:
window.open(url,”windowname”,[windowfeatures]);
URL: Denotes,URL of the page to open in the new window.
windowname: Denotes name of the popup window. The name can be used to refer this window again.
windowfeatures: These contains strings seperated by commas which refers the windows features in off and on mode OR 0 [...]
There may be one more function that you have to use with length attribute to count words in textbox and textarea that is:
split function with argument as delimiter: this has the property to split the objects value in array according to given arguments. In the example given below we use split(” “) ,this means split [...]
Also filed in
|
|
If you want to count character written in textbox or textarea simply use:
length attribute with elements value.
Demo:
Text Length:
<textarea id="character_write" rows="5" cols="50" onkeyup="getElementById(’character_length’).value=this.value.length"></textarea>
<input type="text" name="character_length" id="character_length">
Also filed in
|
|
we simply use parseInt() function to convert string into integer:
Example1:
parseInt(”34px”);
Output: 34
Example2:
Size:
<script type="text/javascript">function incre()
{
var increase = 10;
wid = parseInt(document.getElementById(’style_class’).style.width);
document.getElementById(’style_class’).style.width = wid + increase;
}</script>
<table border="0">
<tbody>
<tr>
<td id="style_class" style="width: 80px; height: 50px; background-color: red;"></td>
</tr>
</tbody></table>
<strong>Size:</strong>
<input onclick="getElementById(’style_class’).style.width=’100′" name="botton" type="button" value="Size to 100" /> <input onclick="getElementById(’style_class’).style.width=’120′" name="botton" type="button" value="Size to 120" /> <input onclick="incre()" name="botton" type="button" value="Increase by +10" />
style attributes are easily applicable to javascript code.
object.style.styleattribute
There is one basic rule you have to follow that is: if there is two name in style attribute like margin-left etc. write the first name(name before hyphen) as it is while the first letter of second name should be capital so:
margin-left = marginLeft
margin-top = marginTop
backgorund-color = backgroundColor
but [...]
For hidding or display element inside body tag or for hiding HTML tag, we generally use display method with element id or name.Simply write document.getElementById(elementid).style.display=’none’ for hiding element and document.getElementById(elementid).style.display=” to redisplay that element.we can name of the element in place of getElementById(elementid) document.formname.elementname.style.display=” or ‘none’
use:
style.display
<table id="table_id">
<tr>
<td>Content Of table
</td>
</tr>
<tr>
<td>
<input type="text" name="name" [...]
Also filed in
|
|
To Focus the elements of form:
Use:
focus()
<script>
function foc_on_text(id)
{
document.getElementById(id).focus();
}
</script>
<a href="javascript:foc_on_text(’text_name1′);">focus text1</a> <a href="javascript:foc_on_text(’text_name2′);">focus text2</a><br>
<input type="text" name="text_name1" id="text_name1" ><br>
<input type="text" name="text_name2" id="text_name2">
Demo:
function foc_on_text(id)
{
document.getElementById(id).focus();
}
focus text1 focus text2
Also filed in
|
|
To select content or text from form element:
use:
select();
Example:
<script>
function all_select_content()
{
document.getElementById(’select_all_content’).select();
}
</script>
<textarea id="select_all_content" rows="5" cols="30">Select content from textarea just click the botton below.</textarea>
<input type="button" name="button" value="Select all" onclick="all_select_content()">
Demo:
function all_select_content()
{
document.getElementById(’select_all_content’).select();
}
Select content from textarea just click the button below.
Also filed in
|
|
We can use a javascript function getElementById() in place of form name.
Example:
<script>
function use_of_getelement()
{
var text = document.getElementById(‘text_box_text’).value;
alert("you have written "+text);
}
</script>
<input id="text_box_text" type="text" value="Just Write Something" />
<input onclick="use_of_getelement()" name="button" type="button" value="Show My Text" />
Demo:
function use_of_getelement()
{
var text = document.getElementById(’text_box_text’).value;
alert(’you have written “‘+text+’”‘);
}
Also filed in
|
|
<script>
function add_favorite(){
if (window.sidebar){
// Mozilla Firefox Bookmark
window.sidebar.addPanel(document.title,‘http://www.computereducationworld.com’,"");
}
else if( window.external ){
// IE Favorite
window.external.AddFavorite(‘http://www.computereducationworld.com’,document.title);
[...]
Also filed in
|
|
for disable any element inside or outside form just make disabled attribute to true
disabled=”true”
<script type="text/javascript">
function enableField(action,button)
{
document.form1.name.disabled=action;
}</script>
<form name="form1">
<div id="demo_of_post">
<input name="name" type="type" value="textbox" />
<input id="enable_disable_text" onclick="enableField(true,’Enable’)" name="enable_disable_text" type="button" value="Disable" /></div>
</form>
Also filed in
|
|
function result()
{
try{
document.form1.Input.value=eval(form1.Input.value);
}
catch(e){
alert(’oops! wrong use of operators’);
}
}
<script type="text/javascript">function result()
{
try{
document.form1.Input.value=eval(form1.Input.value);
}
catch(e){
alert(‘oops! wrong use of operators’);
}
}</script>
<form>
<table border="4">
<tbody>
<tr>
<td>
<input name="Input" size="16" type="text" /></td>
</tr>
<tr>
<td>
<input onclick="form1.Input.value += ‘1′" name="one" type="button" value=" 1 " />
<input onclick="form1.Input.value += ‘2′" name="two" type="button" value=" 2 " />
<input onclick="form1.Input.value += ‘3′" name="three" type="button" value=" 3 " />
<input onclick="form1.Input.value += ‘ + ‘" name="plus" type="button" value=" + " />
<input [...]
Also filed in
|
|
Experts Says:
“callback function throws an exception in IE8 mode. This means that even if your code is written defensively, it will get called and cause an error”.
the only solution is to remove call and use try/catch method to rectify this error.
This problem could also happened in jQuery.
Example:
<script>
function callback_create_error()
{
//some code;
}
</script>
<a href="javascript:void(0)" onclick="try{callback_create_error();}catch(e){alert(’error found!’)}">test</a>
[...]
scroll your page using scrollTop. This code will scroll your window with respect to top
<script language=‘javascript’>
function move_up() {
document.body.scrollTop = 0;
}
</script>
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
<body>
contents…
<a href="javascript:move_up()">top</a>
</body>
Also filed in
|
|
Here is the javascript code for checking all the checkboxes using checkbox and button inside an html document. Here is two script for both function.
Example1:
<script>
function checkAll()
{
var inputs = document.getElementsByTagName(’input’);
var checkboxes = [];
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == ‘checkbox’) {
inputs[i].checked =true;
}
}
}
</script>
<input type="button" name="check" value="Check All" onclick="checkAll()">
<input type="checkbox" name="check1">
<input type="checkbox" name="check2">
Example2:
<html>
<head>
<script [...]
Also filed in
|
|