HTML5 Chat Room Template - Repost - open to bidding

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

Get free quotes for a project like this
Project Budget
$30 - $250 USD
Total Bids
Project Description

I plan on making an HTML5 chat website. I am struggling with a proper layout for the actual chat room. I need a single page build with: HTML5 compatible markup, CSS3 styles, and jQuery javascript (if needed). My website will also be using Twitter Bootstrap, which is a CSS/Javascript framework, so please build this with that in mind as well. You will provide an HTML5 compliant page that utilizes the full browser window height, and changes dynamically to fit the user's browser if resized.

See additional details.

## Deliverables

The chat room has 4 main areas:

Top Navigation bar: 40 pixels height, 100% screen width. This will already be done by Twitter Bootstrap, but you should include it in your final product.

Chat text area: This will be the most dynamic as far as width and height go. It should use any width and height of the browser that any other areas are not using. In other words, it should be 100% screen width, minus the space that the roster area takes up. It shoulbe 100% screen height, minus the space the top navigation bar and bottom chat input area take up. This is where the chat messages will be displayed to the user.

Roster area: This is where the user list will appear, to show everyone who is in the chat room. Fixed width (I don't care how wide it is in your deliverables, as long as it's adjustable.) and 100% screen height, minus the space the top navigation bar and the bottom chat input area take up.

Chat input area: Bottom of the screen - this is where the user will type his or her message to be sent to the chat room. It should be a fixed height, and should be 100% screen width, minus some space for a "send" button.

The idea is to have the page resize the areas (mainly the chat text area) when the browser is resized. Since the page will always take up 100% of the browser height, the page should never need a scroll bar from the browser. The chat text area will need a scroll bar, however.

The fixed width and fixed height areas will need to be adjustable by me afterwards.

Please use Twitter Bootstrap as a starting framework to build the page. This means that jQuery should be used as a Javascript framework, if any is needed.

Design should be HTML5 and CSS3 compliant and show properly in the following browsers: IE7, IE8, IE9 as well as the latest versions of: Firefox, Chrome, Opera, and Safari. It does not have to be compatible with mobile or tablet browsers, but I will give you a bonus for tablet-device compatibility.

Please see mock-up design attached.

Please also see <> for an example of what I'm looking for. I do not need the chat functionality, only the layout. I do not need an exact replica of the site given as an example. Just something close.

Skills Required

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