JavaScript

Display Overlay using JQuery

MallikLeave a comment

In this post I would like to explain on how to display an overlay using JQuery Plugin.

To continue with our implementation it is required to download required js and css files from here. It is required to call the below required js and css files in your html page

<link href=”css/jquery-ui.min.css” rel=”stylesheet” type=”text/css” />
http://js/jquery.min.js
http://js/jquery-ui.min.js

 

Step 1: Build HTML Content

Place the below code under HTML body tag. First div of this code is used to place a link on html page to click by customer and second div is used to display the overlay. This overlay contains an iFrame which displays the site : http://malliktalksjava.in

<div id=’open’>
<a href=”#”>Click here to Get Overlay</a>
</div>
<div class=’overlay’>
<div id=’displayOverLayDiv’>

</div>
</div>

 

Step 2: Build Styles for the HTML content

Place the below code in between <style> tag of the header html. This code is used to apply the required basic styles for the above mentioned html content.

#displayOverLayDiv {
width: 500px;
height: 500px;
display: none;
}

.overlay {
position: absolute;
top: 0;
left: 0;
display: none;
background-color: black;
background: url(“http://malliktalksjava.in&#8221;);
}

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

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

 

Step 3: Write the Java Script Logic to display the Overlay

Place below given java script code in between script tag of your html page.

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

Access the application in your browser, then you should be able to see the overlay when you click on the link available in html page.

Click Here to get the complete Sample html file.

 

Other Useful links:

List of Java script MVC Frameworks

Enabling javascript in browsers

Decimal Validation in JavaScript

Creation of Dynamic rows in javascript

Top Javascript Charting Frameworks

 

Example HTML File to display Overlay using JQuery

Mallik1 Comment

<html>
<head>
<title>Sample Overlay Test</title>
<link href=”css/jquery-ui.min.css” rel=”stylesheet” type=”text/css” />
http://js/jquery.min.js
http://js/jquery-ui.min.js

<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://malliktalksjava.in&#8221;);
}

#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’>

</div>
</div>
</body>
</html>

 

Other Useful links:

List of Java script MVC Frameworks

Enabling javascript in browsers

Decimal Validation in JavaScript

Creation of Dynamic rows in javascript

Top Javascript Charting Frameworks

How to Identify Browser Agent in JavaScript

Mallik1 Comment

Here is the Example code to identify the Browser Agent using Java script:

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

Other Useful Links:

Top Java script Charting Frameworks

List of Java script MVC Frameworks

Enabling javascript in browsers

Creation of Dynamic rows in javascript

Top Java script Charting Frameworks

Mallik4 Comments

Building Business Intelligence applications is always require the lot of effort and time. As all already might aware of that the Charting applications comes under the business intelligence applications.

There are many number of java charting frame works are available in the market. Some of them might be opensource, some of them are freeware and others might be premium based frameworks. As per my opinion, implementing the charting applications using java based frameworks takes lot of time and bringing good look and feel is night mare to developers.

In this post, I am planning to put some points about the Java script based charting libraries. If you feel interesting about this, just learn more details in the particular websites.

  • FusionCharts Suite XT: You can build delightful JavaScript charts for web and mobile applications. Charts will be rendered in JavaScript (HTML5) Charts using SVG and VML. It accepts the JSON and XML are the input parameters. You can integrate with the JQuery library. It also provides the API for serviside integration for ASP.NET, PHP, ASP, Java, Ruby on Rails etc. It supports zooming, scrolling and pinning. Provides 90+ chart types in both 2D and 3D. Its a licensed and paid library for production environment.
  • HighCharts : Interactive JavaScript charts for your web projects. These charts will be rendered in JavaScript (HTML5) Charts using SVG and VML. It accepts the JSON as input format. It provides only 2D format charts. It supports zooming and panning support. Its paid for commercial usage and Non-commercial usage is free. It supports 25+ chart types in 2D. Maps and 3D charts are not supported.
  • Google Chart Tools: Google Chart tools display live data on your site. These charts will be rendered in HTML5 charts using SVG and VML. It is free library for all usages. The JavaScript files are loaded directly from Google’s servers. So your application always has to be online to view the charts. 13 chart types in 2D. Maps available as GeoChart.
  • Sencha ExtJS Charts: This is Plugin-free Charting (part of the extJS framework). These charts will be rendered in JavaScript Charts using SVG and VML. It doesn’t supports zooming or panning. 13 chart types in 2D. Maps and 3D charts not supported.
  • Chart.js:It is a easy, object oriented client side graphs for designers and developers. Its a Canvas based charts. It is Free under MIT license. The charts are drawn using Canvas and hence cannot offer any interactivity. 6 chart types are available.
  • Flot: It is an attractive JavaScript plotting for jQuery. It renders in the charts in the form of HTML5 charts using Canvas and VML. It provides 8 chart types in 2D. Maps and 3D charts not supported.Its a free library.
  • jqPlot: It is a Versatile and Expandable jQuery Plotting Plugin and renders in HTML5 charts using Canvas. Ability to provide the 25+ chart types in 2D. Maps and 3D charts not supported. It can be used under GPL and MIT licences. Supports Quintile Pyramid Charts, Engel & Lorenz Curves, Multi-level pie, Block plots.
  • amCharts: It is a Robust JavaScript Charting Tool / Interactive JavaScript Charts. It renders the charts in the format of JavaScript (HTML5) Charts using SVG and VML. It provides the 18 chart types in 2D and 3D. Maps available as part of amMaps package. Only can be used with the paid licence. Support for PDF not available. Zooming and panning support is available.
  • gRaphaël: You can build stunning charts on your website. It renders the charts in the format of JavaScript (HTML5) Charts using SVG and VML. Supports 4 chart types in 2D. Maps and 3D charts are not supported. It can be used under MIT licence. No support for zooming or panning. Provides the Dot Charts.

Understanding of complete libraries helps us in taking a decision before designing the applications. Lets be let me know your inputs on this post.

Source: http://www.fusioncharts.com/javascript-charting-comparison/?utm_source=Competitor-Mailer&utm_medium=email&utm_content=Main-C2A&utm_campaign=GrownUps

Other Useful links:

List of Java script MVC Frameworks

Enabling javascript in browsers

Decimal Validation in JavaScript

Creation of Dynamic rows in javascript

Conversion of string into uppercase

List of Java script MVC Frameworks

Mallik6 Comments

While the Internet is growing up, more demand for Rich Internet applications is growing proportionally. The end user always expecting have the best look and feel, at the same time expecting the larger functionalities with the minor actions made on the application pages.

Java script plays the major role in achieving these goals. When the more logic ends up being executed in the browser, JavaScript front-end code bases grow larger and more difficult to maintain. The way to solve this issue, developers have been turning to MVC frameworks which promise increased productivity and maintainable code.

There are many MVC based java script frameworks have been came into opensource market in the last decade, which helps the developer to build the Rich Internet Applications easy.

Listed below are the few MVC based java script frameworks.

  • ExtJS: Provides powerful big data grids, a modern theme, and plugin-free charting apart from the basic functionalities.Backbone.js: Provides models with key-value binding and custom events, collections, and connects it all to your existing API over a RESTful JSON interface.
  • AngularJS: AngularJS is provide by the Google into internet market. It is a toolset based on extending the HTML vocabulary for your application. It is 100% JavaScript, 100% client side and compatible with both desktop and mobile browsers.
  • Ember.js: As stated on the Ember.js website, Ember.js is “a JavaScript framework for creating ambitious web applications that eliminates boilerplate and provides a standard application architecture”. Provides template written in the Handlebars templating language, views, controllers, models and a router.
  • Knockout: It aims to simplify JavaScript UIs by applying the Model-View-View Model (MVVM) pattern.
  • Agility.js: Using Agility JS, you can write maintainable and reusable browser code without the verbose or infrastructural overhead found in other MVC libraries.
  • CanJS: Focuses on striking a balance between size, ease of use, safety, speed and flexibility. CanJS’s core supports jQuery, Zepto, Dojo, YUI and Mootools.
  • Spine: Spine js a lightweight framework that strives to have the most friendly documentation for any JavaScript framework available.
  • ExtJS: Provides powerful big data grids, a modern theme, and plugin-free charting apart from the basic functionalities.
  • Sammy.js: A small JavaScript framework developed to provide a basic structure for developing JavaScript applications.
  • rAppid.js: Lets you encapsulate complexity into components which can be easy used like HTML elements in your application. It uses a Shadow DOM, which is rendered as valid HTML in the document body or a specific target.
  • Serenade.js: Define templates and render them, handing in a controller and a model to the template. It will get the values from the model and update them dynamically as the model changes. It can be integrated into an existing applications, it plays well with all existing JavaScript code.
  • Kendo UI: Contains the rich jQuery-based widgets, a simple and consistent programming interface, a rock-solid DataSource, validation, internationalization, a MVVM framework, themes, templates and etc.

Enabling javascript in browsers

Mallik5 Comments

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’

Numeric Validation in javaScript

Mallik1 Comment

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