Docstoc

Javascript_HTML_CSS project_

Document Sample
Javascript_HTML_CSS project_ Powered By Docstoc
					JavaScript/HTML/CSS project:

General description:
The product is online web editor that edit/create a DIV.
The objects can be edited inside the DIV are:
   1. Text (Unicode)
   2. Images
Text will be editable (style, location).
Both elements can be multiple added to the div.
Both elements can be defined as hyperlink (in the text it can be part of it).

More details:
When open the online tool, a small floating menu will appear (the menu should be
moveable).
The edit area (that finally saved as DIV) will be with default size and centered in the
browser but the user will be able to change location and size.
The menu will have the following items (icons):
           a. Open existing XML
           b. Save/save as
           c. Close
           d. add text area
                Add a segment (containing text or links) into the div.
                This element should be drag able and resizable
           e. add image
                Define a dimension and position for the image,
                This element is drag able and resizable.
           f. mark as hyper-link
                The user should mark a text in the div area (can be part of the text in
                single text area), when clicking the "mark as link", a small pop-up
                should appear displaying an input field for the URL itself.
                Absolute/relative addresses should be controlled by the object (by
                changing the JS code!!!).
                Validation can allow/disallow code interaction, and moreover the
                validation function should check the input entered.
           g. Text style bar
                This bar holds the following elements:
                 bold style
                 italic style
                 underline style
                 color style
                 background style
                 border style
                 font style
                * This bar is relevant only when part of the text is marked.
           h. A small segment which hold to GUI elements for handling the div
                dimension and position.
           i. Flex-div style bar
                 background color
                 border style
                 shadow/filter
                 on load event
                 on end event
                      Events:
                      Fade-in / fadeout/ slide up / slide down
           j. Create button.
              This object in the end of the editing process (when submitting the
              data) needs to create a valid XML holding the div information.
           k. View mode
              opens existing XML for view only.

Browsers
The editor tool as well as the result product (the DIV) should run on FF2 (and higher),
IE6 (and higher) browsers.

Technology
The code should be pure JAVASCRIPT.
The object should be written in object oriented style (prototype/otherwise).

Testing
The behavior of the final DIV should be the same when the DIVs containers are DIV,
TABLE, TD, SPAN, BODY, and FIELDSET.

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:31
posted:2/23/2010
language:English
pages:2