Closed

JavaScript Room Selection on the map

This project received 4 bids from talented freelancers with an average bid price of $80 USD.

Get free quotes for a project like this
Employer working
Skills Required
Project Budget
$30 - $100 USD
Total Bids
4
Project Description

It should be one [url removed, login to view] (or html) page (there could be also related js files, css and images).
On that page should be:
1. #1 TextBox where user can enter numbers of the rooms separated by comma to disable them on the map for SUITE 100.
2. #2 TextBox where user can enter numbers of the rooms separated by comma to disable them on the map for SUITE 110.
3. Apply button – it disables rooms entered separated by comma into TextBoxes in #1and #2
4. Image map “[url removed, login to view]”
5. Span html element (id=’spSelectedRoom’) which shows selected room.


Enabled room – it’s area on the map filled with Gold color like on “[url removed, login to view]” image
Disabled room - it’s area on the map filled with grey color
Selecting room – it’s area on the map under mouse cursor selected in 2px red border color, more intensive background color and some text hint information like ”You are selecting: Suite 100, Room 5 ”
Selected room – it’s area on the map after user clicked on it. Border color changed to Green with intensive background in “Selecting room”

When user clicked on the room (ex #5), spSelectedRoom span element should say message: You have selected: Room 5, Suite 100. "SelectRoom" function should be called to fill that element with the message (see about function below).

More details please see here: [url removed, login to view] selections should work in same way using same plugin (or you can provide me some better solution) and jQuery.

By default when page loads all rooms are enabled but if there are some values in js declared arrays
var DisabledRoomsSuite100Arr = [ “2”, “5”, “7”, ... ]
var DisabledRoomsSuite110Arr = [ “3”, “8”, “12”, ... ]
then these rooms should be disabled by default when page loads.
Also User can disable any room when entered numbers of them into #1 or #2 text box and press button “apply”, it should add values of disabled rooms to declared arrays above.
Requirements for code:
There should be javascript function called
function DisableRoom(SuiteNumber, RoomNumber), SuiteNumber – 100 or 110, RoomNumber – 1-16 or “Break Room”, “It Room”
This function should be called to disable any room on the page.
So, if user entered “2,5,11” string into TextBox #1 and “3,5,12,15” into TextBox #2 then press button “Apply”, “DisableRoom”function should be called 7 times and disable entered rooms on the map.

function SelectRoom(SuiteNumber, RoomNumber) - same parameters, this function should be called to fill message in spSelectedRoom span element

You should provide me with project where you created area html map (ex. [url removed, login to view])

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online