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();
}