Sunday, August 31, 2014
Introducing Project Wing
Project Wing is a Google[x] project that is developing a delivery system that uses self-flying vehicles. As part of our research, we built a vehicle and traveled to Queensland, Australia for some test flights. There, we successfully delivered a first aid kit, candy bars, dog treats, and water to a couple of Australian farmers. We’re only just beginning to develop the technology to make a safe delivery system possible, but we think that there’s tremendous potential to transport goods more quickly, safely and efficiently.
Tuesday, August 12, 2014
Example HTML File to display Overlay using JQuery
Copy past the below html code into one html file then access the html in browser to see the Overlay functionality.
<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://malliktalksjava.in”);
}
#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>
<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://malliktalksjava.in”);
}
#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>
Subscribe to:
Posts (Atom)