Open main menu

CDOT Wiki β



In this individual assignment you will be creating a dynamic in-page floating popup that cannot be dismissed even though it has a close button.

Your code only needs to work in Firefox, though I expect it will be simple enough to work in any modern browser.

Plagiarism Rules

No group work for this assignment, one person per one submission. You may look at reference information on the web but you're expected to write 100% of the code yourself.

In other words the plagiarism rules for this assignment are the same as usual at Seneca.


Submit your file(s) to Moodle. Degree students also need to host it on matrix since there's an ajax component (don't forget to mention the link in your submission).

The deadline for this assignment is the 2nd of August. Late penalty is 10% per day. Even if your assignment is 5 days late or more - you still need to submit a satisfactory assignment to pass the course.

This assignment is worth 10% of your final grade.


You can start with an empty page, and:

  1. Create an absolutely positioned element (225x300 pixels or so) containing:
    1. A title at the top,
    2. A close button in the top right corner (just draw an X and put it there), and
    3. An image (use any image you like).
  2. The image will be a link to
  3. The user can move the mouse over the image and click on it, the target will open in the parent window (nothing special so far).
  4. You will prevent the user from clicking the close button like this:
    1. Any time the mouse moves close (a few pixels) to the close button your floating element will move slightly.
    2. If the mouse pointer is near the bottom of the image - it should move a few pixels higher. If the mouse is at the left - it will move to the right, etc.
    3. You must be careful to prevent the user from hiding the popup by tricking it to go off-screen into either direction. If the popup was moving left and it got to the left edge of the page - it should move either up or down, wherever there is room.
  5. An expert will be able to close the popup (without using development tools) in only one way: make the window so small that the popup has nowhere to move and the X button can be clicked.
  6. Degree students only: load all the contents of the popup (title, image, and link) using Ajax.