I broke down the code I used yesterday, to its absolute bare minimum, and then realized I'm not using HTML 5 at all:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="logo">
</div>
<div id="infobox">
<h2 id="statustext"/>
</div>
</body>
</html>
Here's the script.js file referred to above:
$(function(){
var banana = $("#logo");
var statustext = $("#statustext");
var defaulttxt = "Drag the banana!";
var dragtxt = "Dragging the banana!";
statustext.text(defaulttxt);
banana.draggable({
drag: function(event, ui){
statustext.text(dragtxt);
},
stop: function(event, ui){
statustext.text(defaulttxt);
}
});
});
And here's the stylesheet:
body {
background:#3B4D61 repeat 0 0;
margin:0;
padding:0;
}
h2 {
color:#D1D8DF;
display:block;
font:bold 15px/10px Tahoma, Helvetica, Arial, Sans-Serif;
text-align:center;
}
#infobox {
position:absolute;
width:300px;
bottom:20px;
left:50%;
margin-left:-150px;
padding:0 20px;
background:rgba(0,0,0,0.5);
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
z-index:999;
}
#logo {
position:absolute;
width:450px;
height:150px;
top:40%;
left: 30%;
background:url(bananas.png) no-repeat 0 0;
cursor:move;
z-index:700;
}
However, I've replaced the content of the HTML file with a few of the samples from here, without any problem; in other words, if the HTML 5 canvas were to be needed, it could seamlessly be incorporated into my NetBeans Platform application:
https://developer.mozilla.org/en/Canvas_tutorial/Basic_usage
