Long List with custom Jquery scrollbar

Concluído Postado Dec 12, 2011 Pago na entrega
Concluído Pago na entrega

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:

General

1. All code must be cross browser compatible (IE6 need not be supported)

2. All css and JavaScript must validate on the w3c validators (we are flexible on this if there is a valid reason why the code won't validate - i.e. vendor specific css for rounded corners).

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

Container

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.

Scrollbar

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.

Behavior

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.

This should all be pretty straight forward for anyone with decent Javascript experience. This is a small part of a larger project, so we are looking for someone to do an amazing with the expectation of more work in the future.

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.

CSS HTML5 JavaScript jQuery / Prototype

ID do Projeto: #1337955

Sobre o projeto

4 propostas Projeto remoto Ativo em Dec 13, 2011

Concedido a:

mustardamus

I have read the spec. Twice ;) Simple task that should take no longer than 2h.

$50 USD em 1 dia
(5 Comentários)
3.2

4 freelancers estão ofertando em média $50 nesse trabalho

PHPsoldier

########################################################################################################################## DEAR SIR, JQUERY EXPERT HERE. CAN DO IT. MANY THANKS... #################################### Mais

$50 USD em 1 dia
(18 Comentários)
4.8
farwees123

hi, I like to work wih you. thanks

$40 USD in 3 dias
(0 Comentários)
0.0