Display Overlay using JQuery


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


<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

Client Tools required to pre-install to access or create a new Open Shift application


I have faced hell lot of issues when I started implementing the Openshift sample application. I thought of sharing my experience with everybody so that it will help if there is any issue during others project implementation. Most important thing in accessing the application is to install the client tools in your machine.

In this post I would like to explain about the Client tools required, install the tools in to windows machine and check the installation status of the tools.

Install Client Tools:

For Windows based desktop it is required to install the three client tools as mentioned below:

1) Ruby: All open shift tools runs on the Ruby, this is the basic software that is required to install. Download suitable Ruby installer for your desktop from Ruby Down loads page and install the by accepting all default options. After the installation is completed, to verify that the installation is working run:

RubyRunningStatus

2) Git Client: Git is used to synchronize local application source and your OpenShift application. Download and install the latest version of Git for Windows. After installing the git, it is required to ensure that git is added into your system PATH. If it is not added, make sure to add it manually in system environment variables.

After installing the git, you can check the git version installed in machine using below command.

GitVersion

3) Openshift client: After Ruby and git installed properly, run the openshift client tools bundled in the ruby installer.

OpenshiftClinet

After installation completes, run the rhc command as below, then complete list of options to be displayed.

RHCOptions

 

Other Useful Links:

Openshift – The Open Hybrid Cloud Application Platform by Red Hat