Concluído

Long List with custom Jquery scrollbar

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.

Habilidades: CSS, HTML5, Javascript, jQuery / Prototype

Veja mais: jquery custom scrollbar, scroll bar css android, custom scroll javascript, jquery scrollbar rounded corners, custom jquery scrollbar ipad, list scrollbar, jquery list items scroll bar, custom scrollbar css, cross browser scrollbar css, ipad list jquery, cross browser custom scrollbar css, scrollbar jquery, jquery scrollbar, list javascript, you may not need jquery, why we need jquery, why is google so much better, why google is better, ul com, ui icons, top resume, super android 17, square android, resume with no experience, resume style

Acerca do Empregador:
( 12 comentários ) South Jordan, United States

ID do Projeto: #1337955

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 para esse trabalho

PHPsoldier

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

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

hi, i can do this for you and i have read the [url removed, login to view] check your pm.

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

hi, I like to work wih you. thanks

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