JAVASCRIPT

Sunday, July 27, 2014

Display Overlay Example using JQuery

<html>
<head>
<title>Sample Overlay Test</title>
<link href="css/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>

<style type="text/css">
#displayOverLayDiv {
width: 500px;
height: 500px;
display: none;
}

.overlay {
position: absolute;
top: 0;
left: 0;
display: none;
background-color: black;
background: url("http://javascriptbymallik.blogspot.co.uk/");
}

#frame {
border: 0;
width: 500px;
height: 500px;
}

#open {
border: 0;
width: 175px;
height: 24px;
background-color: #EAF8F8;
font-size: 18 px;
font-weight: bold;
}
</style>

<script type="text/javascript">
$(document).ready(function () {
$('#open').click(function () {
$(".overlay").height($(window).height());
$(".overlay").width($(window).width());
$(".overlay").fadeTo(1000, 0.4);
$("#displayOverLayDiv").dialog({
width: "auto",
height: "auto",
show: {
effect: "slide",
duration: 1500
},
hide: {
effect: "slide",
duration: 1500
},
beforeClose: function () {
$(".overlay").fadeTo(1000, 0);
},
close: function () {
$(".overlay").css("display", "none");
},
resizeStop: function (event, ui) {
$("#frame").height($(this).height());
$("#frame").width($(this).width());
}
});
});
});
</script>
</head>

<body>
<div id='open'>
<a href="#">Click here to Get Overlay</a>
</div>
<div class='overlay'>
<div id='displayOverLayDiv'>
<iframe src="http://javascriptbymallik.blogspot.co.uk/" id="frame"></iframe>
</div>
</div>
</body>
</html>

Monday, February 20, 2012

Page break in CSS or Javascript

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.

Sunday, August 14, 2011

Browser name and version in javascript

<script type="text/javascript">
alert(navigator);
var browserName=navigator.appName;
var userAgent = navigator.userAgent
alert(browserName);
if (browserName=="Microsoft Internet Explorer"){
alert("Microsoft Internet Explorer");
alert("Microsoft Internet Explorer Version : "+navigator.appVersion);
alert(document.documentMode;);

}
else if (browserName=="Netscape" && userAgent.indexOf("Chrome") != -1 ){
alert("Google Chrome");
alert("Google Chrome Version: "+navigator.appVersion);
}
else if(browserName=="Netscape" && userAgent.indexOf("Mozilla") != -1){
alert("Mozilla Firefox");
alert("Mozilla Firefox Version : "+navigator.appVersion);
}else{
alert("Another browser");
}
</script>

Javascript basic functionalities

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

Sunday, July 24, 2011

Validate Empty spaces in Javascript

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.

Convert to Upper or Lower case in Javascript

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

Tuesday, September 21, 2010

More About JAVASCRIPT Libraries

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

Friday, April 9, 2010

Javscript code for not allowing charecters in text box

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;

}

Friday, March 12, 2010

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

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

Friday, September 25, 2009

How to create Dynamic rows in javascript

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

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>

Thursday, September 17, 2009

How to submit form in javascript

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

Sunday, September 6, 2009

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

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

chitak add

How to conver alpabets into upper case using Java script?

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.

Wednesday, September 2, 2009

How to Select table rows in oracle?

Select Query in Oracle

How to update a table in oracle?

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

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.