When a friend was looking over my work, he remarked how it would be nicer to see a preview of the applet, rather than it stalling the whole browser simply because you visited the page.
I've just added JQuery to my site, so I guessed this should be easy to implement. Ideally I wanted a play button where the applet should be, clicking on it would swap the div with the play button for an applet.
Here's what I came up with:
Code:
<script src="../../assets/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
// Create a run button in the div where the applet would be - div is named after applet
$(document).ready(function(){
appletRunButton("eye4anEye", 400, 350, "preview.png");
});
// Create the run button - optionally add a preview graphic the same size as the applet
function appletRunButton(name, width, height, preview){
var div_id = "#"+name;
$(div_id).width(width);
$(div_id).height(height);
var run_html = '';
var top = ((height/2) - 25);
if(preview === undefined); else{
run_html += '<img src="'+preview+'" />';
top -= height;
}
run_html += '<div id="runimg">';
run_html += '<img src="http://www.robotacid.com/assets/run.png" /></div>';
$(div_id).html(run_html);
var img = "#runimg";
$(div_id).css({cursor: "pointer", border:"solid 1px #333"});
$(img).css({position:"relative", top:top, left:((width/2) - 25), zindex:2});
$(div_id).click(function(){
appletHtml(name, width, height);
});
}
// Create applet html in the div reserved for the applet
function appletHtml(name, width, height){
var div_id = "#"+name;
var string = '<applet code="'+name+'" archive="'+name+'.jar" width="'+width+'" height="'+height+'" mayscript="true">';
string += '<param name="image" value="loading.gif" />';
string += '<param name="boxmessage" value="Loading Processing software..." />';
string += '<param name="boxbgcolor" value="#FFFFFF" />';
string += ' To view this content, you need to install Java from <a href="http://java.com">java.com</a>';
string += '</applet>';
$(div_id).html(string);
}
</script>
A tided up version is here:
http://www.robotacid.com/PBeta/eye4anEye/index.html
Haven't cross browser tested it yet, but it's certainly more user friendly. We all know how annoying it is when a video auto-streams on a web page - that's why they all have play buttons now.
What are other people's thoughts on this?
Pages: 