This project is super simple. We have a list in the basic format <ul><li>content</li></ul> and we need someone to style the container and add a custom jquery scrollbar. See the attached image. Here are the specifications:
1. All code must be cross browser compatible (IE6 need not be supported)
3. Please link to the google code api versions of jquery and jquery UI ([url removed, login to view])
4. You can just use you favorite Sans font for everything, we'll style the font how we want later
1. Width and height of the list parent container 560x210 px.
2. Rounded corners via CSS3 (using vendor specific code where necessary) - the corners can just be square for the versions of IE that don't support rounded corners.
3. Each <li> should contain child elements to hold columns for "date", "title", "instructor", "duration"/"viewed". The columns do not need header rows.
1. Scrollbar should be creating using Jquery - we like this plugin: [url removed, login to view] but if you have a better solution (smaller, faster, etc.) you may use it.
2. Scrollbar must include mouswheel support
3. Scrolling the list should also be possible via the up and down arrow keys once the list has focus. Arrows should move item to item and scroll the list up/down one item once the top or bottom of the container element is reached.
3. IMPORTANT: Content must be scrollable with touch devices - IPAD and Android
4. The height of the scroll handle should represent the height of the visible content and the height of the scroll bar the height of the total content.
1. The progress bar under the length indicator must be implement with an element inside of an element using background colors. We need to be able to dynamically control the amount of red that shows at run time so that we can show how much of the content has been viewed. So please design the code in such a way that we can manipulate the DOM to get the effect.
2. When hovering over any list item the text should change to green (#00ff00) and the green border should appear with css rounded corners.
3. When clicking any list item the actions menu should appear at the mouse pointer but should never appear outside the boundaries of the list's parent container (see attached image).
4. The actions menu should disappear when the mouse leaves the menu.
5. The actions menu height must not be static as some menu items ("resume" and "add"/"remove") may not always be visible.
5. Long text in the "title" column and the "name" columns should be concatenated with text-overflow:ellipsis if they get too long.
Please us the attached sprite for the icons in the actions menu. It is divided into boxes that are 25 px X 25px.
If you have read the spec and want to be considered for the project please put "I have read the spec" in your message when you bid.