JAVASCRIPT

PAge break in CSS or Javascript

2012-02-20T09:02:00.000-08:00

While printing an html web page might require to display the specific content in different pages like below. The paragraph 1must be displayed on page1, paragraph 2 should move to page-2 and paragraph 3 should move to page-3.

<p> paragraph 1: some text here</p>
<p> paragraph 2: some other text</p>
<p>paragraph 3: some other extra text </p>

This would be more easier with the “page-break-before:always” or “page-break-after:always” properties which were there in the CSS from the CSS Version 2.0.
To move the above paragraphs into different pages by writing the style classes as below:

<style>
.pageBreak{
page-break-after:always;
}
</style>
<p class=” pageBreak”> paragraph 1: some text here</p>
<p class=” pageBreak”> paragraph 2: some other text</p>
<p>paragraph 3: some other extra text </p>
In place of above code, we can also write as below:

<style>
.pageBreak{
page-break-before:always;
}
</style>
<p> paragraph 1: some text here</p>
<p class=” pageBreak”> paragraph 2: some other text</p>
<p class=” pageBreak”>paragraph 3: some other extra text </p>

Sometimes the above may cause discrepancies while printing the page, So It would be more suggestible to use the media type above the style class as mentioned below:
<style>
@media print
{
.pageBreak {page-break-after:always}
}
</style>
<p class=” pageBreak”> paragraph 1: some text here</p>
<p class=” pageBreak”> paragraph 2: some other text</p>
<p>paragraph 3: some other extra text </p>

The above paragraphs can also be written as below:
<style>
@media print
{
.pageBreak
{
page-break-after:always;
page-break-before:always;
}
}
</style>
<p> paragraph 1: some text here</p>
<p class=” pageBreak”> paragraph 2: some other text</p>
<p>paragraph 3: some other extra text </p>

Page break can be implemented dynamically by using the dom function as mentioned below:
document.getElementById("someElementId").style.pageBreakAfter="always";

Limitations:
The page-break styles work with the following block elements: BLOCKQUOTE, BODY, CENTER, DD, DIR, DIV, DL, DT, FIELDSET, FORM, Hn, LI, LISTING, MARQUEE, MENU, OL, P, PLAINTEXT, PRE, UL, XMP.
Only applicable to Cascading Style Sheets 2 specification
Only applicable to Internet Explorer 4.x and later at this stage - adding page breaks will not cause any ill effects on other browsers.
Do NOT try and use within a table - they won't work. To make use of this functionality try to close the table and place the page break and open a new table and continue with it.

Browser name and version in javascript

2011-08-14T11:10:00.000-07:00

Javascript basic functionalities

2011-08-14T11:09:00.000-07:00

document.getElementById("divId").style.margin='20px 20px 20px 20px';
document.getElementById("divId").style.marginTop='-2px';
document.getElementById("divId").style.marginBottom='-2px';
document.getElementById("divId").style.marginLeft='-2px';
document.getElementById("divId").style.marginRight='-2px';

document.getElementById("divId").style.padding='20px 20px 20px 20px';
document.getElementById("divId").style.paddingBottom='1px';
document.getElementById("divId").style.paddingTop='1px';
document.getElementById("divId").style.paddingLeft='1px';
document.getElementById("divId").style.paddingRight='1px';

document.getElementById("divId").style.height='146px';
document.getElementById("divId").style.width='146px';

document.getElementById("divId").style.position='relative';

document.getElementById("divId").style.display = 'NONE';
document.getElementById("divId").style.display = 'BLOCK';

document.getElementById("divId").style.visibility="visible";

document.getElementById("divId").style.backgroundColor="#CDDBF0";

Validate Empty spaces in Javascript

2011-07-24T08:41:00.001-07:00

function checkSpaces(elm , fieldName){
var name = elm.value
name = name.replace(/(\s+)+/g," ");
if(name == "" || name == " "){
alert(fieldName +" should not allow empty spaces");
elm.focus();
return true;
}
return false;
}

Check alpha numeric value in javascript.

2011-07-24T08:36:00.000-07:00

Convert to Upper or Lower case in Javascript

2011-07-24T07:29:00.000-07:00

function convertToUpper(field){
field.value = field.value.toUpperCase();
field.value = field.value.toLowerCase();
}

More About JAVASCRIPT Libraries

2010-09-21T20:40:00.001-07:00

Java Script Libraries ....... Coming soon.....

Javscript code for not allowing charecters in text box

2010-04-09T08:07:00.000-07:00

Some times we may have the requirement to not allow the characters into text input such as rupees or telephone no. In this case calling the below function onkeypress event is the better practice. This method doesn't allow the user to enter the characters except numerals and decimal value.

var isNS4 = (navigator.appName=="Netscape")?1:0;

function checkCharacter(event){

if(!isNS4){

if(event.keyCode == 8 || event.keyCode == 0 ) return true;

if(event.keyCode < 46 || event.keyCode > 57 ) {

event.returnValue = false;

}

else{

if(event.which == 8 || event.which == 0 ) return true;

if(event.which < 46 || event.which > 57 ) {

return false;

}

Sorry to all.................

2010-03-12T21:33:00.000-08:00

From the last few days i was busy with the work so that i was unble to post the posts on this page...

I think this will discuraging to you but in the soon i am going to update this blog with new things.....

How to create Dynamic rows in javascript

2009-09-25T06:46:00.001-07:00

Please create a html file with this code and check the functionality:

<html>
<head>
<script LANGUAGE="JavaScript">
function addRow(tableID){
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "text";
    element1.name = "empNo";
    cell1.appendChild(element1);

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type = "text";
    cell2.appendChild(element2);

    var cell3 = row.insertCell(2);
    var element3 = document.createElement("textarea");
    element3.setAttribute("name","mytextarea");
    element3.setAttribute("cols","10");
    element3.setAttribute("rows","1");
    cell3.appendChild(element3);
}
function deleteRow(tableID) {

    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;
    if(rowCount > 1) {
    table.deleteRow(rowCount - 1);
}

}
</script>
</head>
<body>
<form name="f1" id="f1">
<input type="button"value="Add" onclick="addRow('datatable')">
<table id="datatable" cellspacing="0" border="1" bgcolor="#738711">
<tbody>
<tr>
<td><input type="text" ></td><td><input type="text"></td><td><textarea rows="1" cols="10"></textarea></td>

<td><a href="javascript:void(0);" onclick="deleteRow('datatable')" >Remove</a></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

Dynamic rows in Javascript

2009-09-25T06:43:00.000-07:00

Create a demo.html with this code and try to see the functionality

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function addRow(div,value,x){

    var ni = document.getElementById(div);
    var numi = document.getElementById(value);
    var num = (document.getElementById(value).value -1)+ 2;
    numi.value = num;

    var divIdName = "my"+num+x+"Div";
    var newdiv = document.createElement(div);
    newdiv.setAttribute("id",divIdName);
    newdiv.innerHTML = "<table width=\'100%\' class=\'listTable\' >"
                        +"<tr class=\'listTR"+(num%2)+"\' onMouseOver=this.style.backgroundColor=\'DEDEBE\' onMouseOut=this.style.backgroundColor=\'\'>"
                        +"<td><input type='text' name='studNo'/></td>"
                        +"<td><input type='text' name='studName'/></td>"
                        +"<td><a href=\"javascript:;\" class=\"menu\" onclick=\"removeEvent(\'"+divIdName+"\',\'"+div+"\')\">Remove</a></td>"
                        +"</tr></table>";
    ni.appendChild(newdiv);
}
function removeEvent(divNum,div){
    var d = document.getElementById(div);
    var olddiv = document.getElementById(divNum);
    d.removeChild(olddiv);
}
</script>
</head>
<body>
<form action="">
    <table>
    <tr bgcolor="#737328"><td>
        <table>
        <tr><td>Student No</td><td>Student Name</td><td>Actions</td></tr>
        <tr><td><input type="text" name="studNo"/></td><td><input type="text" name="studName"/></td><td> </td></tr>
        </table>
        </td></tr>
        <tr bgcolor="#737328"><td>
            <input type="hidden" name="theValue" id="theValue" value="0"/>
        <div id="myDiv"></div>
        </td></tr>
        <tr>
        <td><p><a href="javascript:;" onclick="addRow('myDiv','theValue','');"><strong>Add More</strong></a></p></td>
        </tr>
    </table>
</form>
</body>
</html>

How to submit form in javascript

2009-09-17T07:22:00.000-07:00

function submitForm1()
{
document.formName.action = "storeEmployee.do" //This is struts action
document.formName.submit();

}

The action is specified in the fist line and submit() submits the action.
You can specify the action in the form tag also as shown below.

<form name="formName" action= "storeEmployee.Do" />

This type of submit generally used in the fallowing situations.
1. When you want to submit the request from hyperlink
2. One action is already assigned to the submit button of the form then another submit button can use javascript submit() method as shown above

How to check the field has charecters or not in Java script?

2009-09-06T04:13:00.000-07:00

The below function shows the how to check the string contains specified characters or not

function checkChars(){
var val = document.formName.elementName.value;
var chars = '.#$%^&!)(_ ';
var flag = false;
for(i=0; i ch_data = val.charAt(i);
for(j=0; j if(ch_data==chars.charAt(j)){
flag = false;
break;
}
flag=true;
}
if(flag){
return false;
}
}
return true;
}

chitka add

2009-09-06T03:54:00.000-07:00

chitak add

2009-09-06T03:30:00.000-07:00

How to conver alpabets into upper case using Java script?

2009-09-06T03:14:00.000-07:00

The below function is used to convert the aplabets into upper case

function convertToUpper(){
var field1 = document.formName.elementName

field1.value = field1.value.toUpperCase();
}

Example :
If the formName is StudentForm and element name is student id like stud100

Then ,
function convertToUpper(){
var field1 = document.StudentForm.StudentId

field1.value = field1.value.toUpperCase();

}

gives the value as STUD100.

How to Select table rows in oracle?

2009-09-02T07:29:00.001-07:00

Select Query in Oracle

How to update a table in oracle?

2009-09-02T07:22:00.000-07:00

Oracle query for Update all the rows in a table:

Syntax:
UPDATE tablename SET fieldname='value'

Query:

UPDATE STUDENT SET CLASS = 'IV'

You can update a single row by using the where condition. The query is as fallows

UPDATE STUDENT SET CLASS = 'IV' WHERE STUDENT_ID = 100;

How to create a table in Oracle

2009-09-02T07:12:00.000-07:00

We can create the table using the Query:

Syntax :

CREATE TABLE tableName (fieldName1 datatype(size), fieldName2 datatype(size) ,........etc);

Example:

CREATE TABLE STUDENT
(
STUDENT_ID NUMBER(5),
STUDENT_NAME VARCHAR(30),
CLASS VARCHAR(5)
);

In the above example STUDENT is the table name, STUDENT_ID , STUDENT_NAME ,
CLASS are the columns of the table student with the respective data types.

Check null field using getElemenytById in Java script.

2009-09-01T06:59:00.000-07:00

How to check the field is Numeric or Not ?

2009-09-01T06:42:00.000-07:00

The small example shows the validation for the field is numeric or not:

<script type='text/javascript'>

function isNumeric(elem, helperMsg){

     var numericExpression = /^[0-9]+$/;

     if(elem.value.match(numericExpression)){

             return true;

     }else{

             alert(helperMsg);

             elem.focus();

             return false;

     }

}

</script>

<form>

Enter Phone No : <input type='text' id='numbers'/>

<input type='button'

     onclick="isNumeric(document.getElementById('numbers'), 'Numbers Only Please')"

     value='Check Field' />

</form>

How to Validate Emain in Java script?

2009-08-31T09:15:00.000-07:00

How to check two decimal validation in java script?

2009-08-31T08:34:00.000-07:00

Null check function in Javascript.

2009-08-31T08:31:00.000-07:00

function checkNullField()

{

var field1 = document.formName.fieldName.value;

if(field1 == '')

{

alert("Field Name is empty");

return false;

}

else

{

return true;

}

Once you call this function in your jsp as return checkNullField(); then this function will return false if the field is empty else it will return true.

How to use javacript files in jsp ?

2009-08-31T08:20:00.000-07:00

The javascript files are normal text files which have the .js extention.

Once you create the .js file Yiou can extend the .js file into you html or Jsp pages.

< script language="javascript" src="js/demo.js"/ >

The above tag shows the syntax of how to extend the demo.js into your jsp or html page.

js is the folder name and demo.js is the javascript file name.

How do I enable JavaScript in my browser?

2009-08-31T08:17:00.000-07:00

To enable java script in you browser, please follow the instructions below:

Internet Explorer (6.0)

1. Select 'Tools' from the top menu
2. Choose 'Internet Options'
3. Click on the 'Security' tab
4. Click on 'Custom Level'
5. Scroll down until you see section labled 'Scripting'
6. Under 'Active Scripting', select 'Enable' and click OK

Netscape Navigator (4.8)

1. Select 'Edit' from the top menu
2. Choose 'Preferences'
3. Choose 'Advanced'
4. Choose 'Scripts & Plugins'
5. Select the 'Enable JavaScript' checkbox and click OK

Mozilla Firefox (1.0)

1. Select 'Tools' from the top menu
2. Choose 'Options'
3. Choose 'Web Features' from the left navigation
4. Select the checkbox next to 'Enable JavaScript' and click OK

Mozilla Firefox (1.5)

1. Select 'Tools' from the top menu
2. Choose 'Options'
3. Choose 'Content' from the top navigation
4. Select the checkbox next to 'Enable JavaScript' and click OK

Apple Safari (1.0)

1. Select 'Safari' from the top menu
2. Choose 'Preferences'
3. Choose 'Security'
4. Select the checkbox next to 'Enable JavaScript'

Please post if any suggessions and any doubts about this.

Java script basics

2009-08-09T02:39:00.000-07:00

Java script is a Programming language which is helpful in developing the client side validations. Using the java script one can develop the forms for the user or validations for the form. It is very helpful for the developer when they are developing web based applications.