Lesson 14: dropTop

In this lesson, we’re going to use our HTML and CSS skills to build a virtual desktop environment that acts as a launching pad for your favorite places and applications on the web.


Click Here to see a finished version of the project that you will be creating below.

Project Setup

droptop_directoryComplete the following steps to get started building the dropTop project.

  • Create a root folder in code anywhere called droptop
  • Create an index.html file in the new root folder
  • Create a style.css file in the new root folder
  • Create a droptop.js file in the new root folder
  • Create an images folder inside the root folder

Project Files

Write the code in the two PDF files into the corresponding html and css files that you previously created.


Download and extract the zip file below, and then upload each of the images into your images folder:


Copy the code below into the droptop.js file.

//moving the div left a bit is completely optional
//but should have the effect of growing the image from the middle.
$(this).stop().animate({"height": "90px", "width": "90px", "left":"0px","top":"0px"}, 100,'swing');
$(this).stop().animate({"height": "50px", "width": "50px", "left":"15px","top":"15px"}, 100,'swing');
jQuery.fn.center = function() {
return this.each(function(){
var el = $(this);
var h = el.height();
var w = el.width();
var w_box = $(window).width();
var h_box = $(window).height();
var w_total = (w_box - w)/2; //400
var h_total = (h_box - h)/2;
var css = {"position": 'absolute', "left": w_total+"px", "top":
function show_note() {
function hide_note() {