[TUT] Online Desktop Part 1 - Movable Icon
I’ve decided that I will write a selection of tutorials over the case of a few months… maybe longer explaining how to go about creating an online desktop application. The tutorials will tell you step by step how to go about creating your very own online desktop, starting with the very basic stuff to give you an idea of how to create an online desktop, moving onto the harder more complex side of it.
So lets get started on the first tutorial.
Creating movable icons.
Level: the level of this tutorial is not too hard, and should help you gain a basic understanding javascript, html and a bit of css.
Step one : Create the basic html layout
Most of you readers should already know how ot do this but to help the people that have only just started out in the field
First let Create the doctype. The Doctype tells the browser what type of HTML is use in the website today we will be using XHTML Strict
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Next let go about and create he actually content holders.
<html>
<head>
<title>Online Desktop- ICons.</title><style type=”text/css”>
</style><script language=”JavaScript” type=”text/javascript”>
</script></head>
<body></body>
</html>
“<html></html>” This holds all the information about the site, contents, meta data.
“;<head></head>” This holds all the header information such as the title and scripts you want to be ran on load
“<title></title>” This is basically what it sounds like, it holds all the title information e.g look at the top of your browser you should see “Wheresmy.tv”; in the title bar that’s what these tags do, they also give you site a title so it easier for search engines to render your site on their pages.
“<style></style” This will hold all your CSS data this is used to make you page look all pretty 
“<script></script>” for the purpose of this tutorial <script> tags will be use to hold our javascript in.
“<body></body>” Now we come to our Body tags these are where all our displayed content will go and allows it to render on the screen.
Step 2: Content
This step will show you where to place the content ready to be displayed.
The first bit of content will be the icon itself
<b class=’icon’ id=’text’ >Web</B>
right that’s the icon ready, Note if you was the view the page now there will be no style or functionality to it as we will apply that later. For now all that will show is “Web”. The Javascript bit of this icon will come in the next tutorial.
you code should now look like this
<html>
<head>
<title>Online Desktop- ICons.</title><style type=”text/css”>
</style><script language=”JavaScript” type=”text/javascript”>
</script></head>
<body>
<b class=’icon’ id=’text’ >Web</B>
</body></html>
Step 3: Style
Lets give some style to this bad boy, this step will help you in giving your icon the “ICON” look instead of just a piece of text.
We need to now add content into the “<style></style>” tags beacuse we have style that may not be compatible with older browsers we want to hide it from them, the easiest way to do that is wrap the code in a comment block. All that the comment block does is make the older browser think that its a comment and will hide all the rendering part, however the newer browsers are smart enough to know that what going on with the comment and will actually render the code.
So all we need to put in the style tag is
<!–
–>
Thats it now the style will be ingnored in the earlier browsers.
Now lets get on with the style, first we will make an icon
.icon {?
position: absolute;
background-color: #ffdead;
border: 1px solid #800000;
width: 50px;
height: 50px;
cursor: hand;}
As you can see this will add a background to a box that is 50px by 50px, and apply a solid border of 1px. I can hear you saying well whats the cursor attribute, well all this does is change your mouse cursor from the standard look to a hand whenever the icons is hovered over.
How about when we want to click and move the icon do we want the same cursor style well i know I don’t so I went on a applied this style to my page
.moveable {
position: absolute;
cursor: move;
}
All that does is change the cursor to the cross with arrows on each end.
Your code should now look like….
<html>
<head>
<title>Online Desktop- ICons.</title><style type=”text/css”>
<!–.icon {?
position: absolute;
background-color: #ffdead;
border: 1px solid #800000;
width: 50px;
height: 50px;
cursor: hand;}
.moveable {
position: absolute;
cursor: move;
} ?
–>
</style><script language=”JavaScript” type=”text/javascript”>
</script></head>
<body>
<b class=’icon’ id=’text’ >Web</B>
</body></html>
Step 4: The fun stuff…Functionallity
First lets do what we did with the style sheet and place the comment tags inside the “<script></script>” tags
Next lets add the code first lets define the global variable for later use
var selObj = null;
After that lets create the move function
function moveHandler(e){
if (e == null) { e = window.event }?
if (e.button<=1&&dragOK ){
selObj.style.left=e.clientX-dragXoffset+’px’;
selObj.style.top=e.clientY-dragYoffset+’px’;
return false;
}
}
This will give you icons and what ever you add in the future the ability to move this is basically done by alerting bits of styling on the fly.
First it checks to see if e has a value if not it will give it the window even that is happening at that time this can be a click double click or a keyboard press.
Then it will check to see if the event is a button click if and then checks if it is ok to drag the icon
Next to allow this move function to be reset after the icons has stopped moving
function cleanup(e) {
document.onmousemove=null;
document.onmouseup=null;
selObj.style.cursor=orgCursor;
dragOK=false;
}
Now lets do the dragging handler this will make sure that the item is being dragged and not at the end of a move
function dragHandler(e){
var htype=’-moz-grabbing’;
if (e == null) { e = window.event; htype=’move’;}?
var target = e.target != null ? e.target : e.srcElement;
selObj=target;
orgCursor=target.style.cursor;
if (target.className==”moveable”||target.className==”icon”) {
target.style.cursor=htype;
dragOK=true;
dragXoffset=e.clientX-parseInt(selObj.style.left);
dragYoffset=e.clientY-parseInt(selObj.style.top);
document.onmousemove=moveHandler;
document.onmouseup=cleanup;
return false;}
}
Thats it for the scripting inside the <script> tags but we haven’t finished in the java scripting department yet we now need to add some javascript to within the body too. This is due to the level of execution needed.
<script language=”JavaScript” type=”text/javascript”>
<!–
var orgCursor=null; // The original Cursor (mouse) Style so we can restore it
var dragOK=false; // True if we’re allowed to move the element under mouse
var dragXoffset=0; // How much we’ve moved the element on the horozontal
var dragYoffset=0; // How much we’ve moved the element on the verticle
document.getElementById(’text’).style.left=’10px’; // places the icon at top left
document.getElementById(’text’).style.top=’20px’;// places the icon at top left
//–>
</script>
Right thats it for the icon movement you should now end up with a script sort of like this
<html>
<head>
<title>Online Desktop- ICons.</title><style type=”text/css”>
<!–.icon {?
position: absolute;
background-color: #ffdead;
border: 1px solid #800000;
width: 50px;
height: 50px;
cursor: hand;?
}
.moveable {position: absolute;
cursor: move;
}–>
</style>
<script language=”JavaScript” type=”text/javascript”>
<!–var selObj = null;
function moveHandler(e){
if (e == null) { e = window.event }?
if (e.button<=1&&dragOK){
selObj.style.left=e.clientX-dragXoffset+’px’;
selObj.style.top=e.clientY-dragYoffset+’px’;
return false;
}
}function cleanup(e) {
document.onmousemove=null;
document.onmouseup=null;
selObj.style.cursor=orgCursor;
dragOK=false;
}function dragHandler(e){
var htype=’-moz-grabbing’;
if (e == null) { e = window.event; htype=’move’;}?
var target = e.target != null ? e.target : e.srcElement;
selObj=target;
orgCursor=target.style.cursor;
if (target.className==”moveable”||target.className==”icon”) {
target.style.cursor=htype;
dragOK=true;
dragXoffset=e.clientX-parseInt(selObj.style.left);
dragYoffset=e.clientY-parseInt(selObj.style.top);
document.onmousemove=moveHandler;
document.onmouseup=cleanup;
return false;}
}
document.onmousedown=dragHandler;//–>
</script></head>
<body>
<b class=’icon’ id=’text’ >Web</B><script language=”JavaScript” type=”text/javascript”>
<!–
var orgCursor=null; // The original Cursor (mouse) Style so we can restore it
var dragOK=false; // True if we’re allowed to move the element under mouse
var dragXoffset=0; // How much we’ve moved the element on the horozontal
var dragYoffset=0; // How much we’ve moved the element on the verticle
document.getElementById(’text’).style.left=’10px’; // places the icon at top left
document.getElementById(’text’).style.top=’20px’;// places the icon at top left
//–>
</script>
</body></html>
Congratulations your first icon, Next time we will add some more functionality to this and make a web based web browser.
Thanks for reading
Wheresmy.tv
Loading ...
Recent Comments