Jquery Component

For this project, you will be creating a simple Jquery display widget. The purpose of this widget is to feature different pieces of content. It is like a tab navigator, except each tab draws a line from the tab to the content.

The widget has two main parts.

1) On the left hand side are a series of small, rectangular boxes (the tabs). These boxes contain HTML.

2) On the right hand side is a display area

When you click on one of the small rectangular boxes:

1. An ajax call retrieves content specified by the box you clicked on

2. The content is loaded in the right hand display area

3. Color lines are drawn around the rectangular box and a specified content div.

4. A line is drawn connecting the rectangular box and the specified content div


Left hand side

1. Support any number of rectangles

2. CSS control of the look and feel of the rectangles

3. Asynchronous loading of content. NO PAGE REFRESH.

Right hand side

4. CSS control of the look and feel of the main display container (width, etc)


5. CSS control of the color of the lines drawn.

6. Ability to specify the color of the lines on a per-rectangle basis (different color for each rectangle)

7. Ability to specify the thickness of the lines

8. Ability to specify the gutter width between the rectangle and the content

Note on the Line:

Sometimes, there may be a lot of rectangles. This means that they will not always be able to draw the connecting line straight across to the content div. But the connecting line needs to be able to connect to the specified content div regardless of this. To do this, it should create a connection using 90 degree angles.

An example of this is included in the image provided. However, ONLY ONE LINE WILL BE RENDERED AT A TIME. The example is just to show you what the line should look like when rendered if it cannot be drawn directly across. The lines must NOT use angles to connect.


This project is the first in a series of projects we will need completed in a fairly short time frame. Additional work is available for the right resource. We would like to see this developed using JQUERY if possible, tight javascript if not. Most of the project is very straightforward, the main point of interest being in how you decide to draw the connecting line.

Thank you for your interest, we look forward to working with you.

Skills: CSS, Javascript, jQuery / Prototype

See more: you may not need jquery, rectangle lines, rectangle line, purpose means, not always right, line rectangle, jquery 2.1 0, jquery 2, jquery 1.11 2, jquery 1.11 0, jquery 1.11, degree navigator, connect html javascript, ajax frame work, javascript draw line, ajax asynchronous, small jquery, jquery image, Hand draw, point interest, jquery css content, html image click css, jquery feature, jquery component, main container

About the Employer:
( 1 review ) Brooklyn, United States

Project ID: #1243041

Awarded to:


I can make this in a jQuery plugin. That way it is easy to use. My concept for drawing the lines is layed out in a PM. Please check it.

$350 USD in 5 days
(4 Reviews)

10 freelancers are bidding on average $308 for this job


Hi! I m ready for this

$300 USD in 5 days
(72 Reviews)

lets do it now...... ready to start your work. Thanks Ace

$250 USD in 5 days
(59 Reviews)

Hi, this is Reakoo.

$250 USD in 5 days
(12 Reviews)

hello, I would like to do this job. please contact me asap. Thanks, md

$400 USD in 15 days
(2 Reviews)

Please check PMB.

$300 USD in 10 days
(3 Reviews)

Hi! I m interested

$300 USD in 5 days
(3 Reviews)

Hi We have checked your requirements. Quality job assured. Plz check pmb. Thanks Paulsolution.

$500 USD in 10 days
(4 Reviews)

Sir we are too people one is designer and one developer it will be please for us to complete your project, Our expertise in the design side are css html jquery ajax xml and json and some desgn [login to view URL]

$100 USD in 7 days
(0 Reviews)

Hi, I've gone through details and saw the attached image. This can be easily done using CSS and Javascript. -- Thanks Silinic

$200 USD in 2 days
(0 Reviews)

I do it betterly.........

$230 USD in 3 days
(0 Reviews)