Vertical text, horizontal image scroll bars and window on JS

Hello,

We are looking for JS developer who can implement following project:

1. We need to implement a scroll bar on pure JS (please read details below)

2. We need to implement horizontal scroll on pure JS (please read details below)

3. We need to implement dragable window with voting panel (please read details below)

In both cases you are not allowed to use any third party libraries like jQuery or similar. Everything should be done by you and only you. Scripts should work on IE (above 7.*), FF (above 2.*) and Opera.

Good luck

p.s. Since we have negative experience with developers without a rating we have following requirement for them: if you have done zero projects at freelancer and you want to win a project then you will need to provide us a demo script showing that you can do it.

The project could be divided into three small scripts which you will need to implement on JS. The price of each of them is 10 USD. Total budget of that project is 30 USD.

First part:

List of files which should be used: arrow-right.png, arrow-left.png, button-1.png, button-2.png, button-3.png, button-4.png, button-5.png, button-6.png.

The amount of items to scroll could be any from 1 up to N elements. You have to implement similar to jQuery non stop carousel. Case you do not know what it is I will show you by example. Let’s say we have to display 5 elements out of 6 total elements. When you click right arrow once, first element will disappear and 6th element will be displayed at the end. When you click right arrow again, second element will disappear and first element will be displayed at the end of the list. So user could scroll to left or right non stop. For example the same principle is used in Nokia mobiles for menu elements.

So we have to agree in advance which format you prefer to use to get following information: total amount of elements, file names of that elements and how much elements you should displayed.

http://www.thomaslanciaux.pro/jquery/jquery_carousel.htm

You can use that move affect, if I remember correctly it is done by math sin() function.

Second part:

List of files which should be used: arrow-down.png, arrow-up.png, elevator-line.png, elevator.png.

Everything is easy to do; here is the sample JS code which you can use in your project:

http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

All you need is to implement scrolling via arrows or via ‘elevator’ (I have no idea what is the correct term for naming it). The main problem is that you do not know the height of the internal contents; we cannot predict how much text we will have inside. So you need to use JS to calculate height. Plus please create everything in the way so I could easily modify images and predefined technical data (height of the elevator line and etc, if you will use any).

Third part:

List of files which should be used: window.png, stars-active.png and stars-inactive.png.

Since I was not sure how you are going to implement stars panel I have prepared only two modes. There are two options to create that panel: first you can create 5 images with 5 different states of stars (from 1 to 5) or second one when you use two images overlapping each other. As a background you will use inactive stars and later give appropriate width to overlapped active stars image, so user will see only part of it (active stars). It is up to you to make a decision how you will do it. All we need is to have 5 links (#1 - #5) bases on the stars user selected.

As for movable window I think everything is clear, I have attached sample.jpg file so you can see how it look on web site. All we need is to add dragging option to it. You can see sample at fastproxyservers.org, please click on the link ‘show on map’.

CSS HTML JavaScript Software Architecture

Project ID: #897751

About the project