Drawing lines with Javascript/Jquery?

I'd like to draw straight lines using DHTML somehow, to frame <li> elements.  Basically point from the center of one to the center of another, bracket-style.

See image attached.

Thanks for your help.

lines bracketing <li> elements
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
You could use the HTML 5 canvas features if you are not too concerned with supporting older browsers. You could create a narrow canvas alongside the menu and draw lines on it using javascript.

Otherwise, you could create small square divs alongside each menu item and load either a vertical yellow line or a bracket end as a background image into each div as required to form the desired bracket. You would need three images, a vertical line, a top "L" bracket and a bottom "L" bracket.
bamapieAuthor Commented:
I don't care about compatibility with older browsers.  We'll be using the latest version of Firefox.

You know, I guess I mean for my question to be even more basic than this.  

Like...how do I get the exact left edge coordinates of an <li> element?  How would I get the vertical midpoint coordinates of an <li> element?

Then...how would I draw a line from there to somewhere else?
Tom BeckCommented:
If the <li> is a specified height and absolute positioned, the center point could be found easily. <li>s are block elements, so they have hard edges like divs that can be easily found.

First, how do you anticipate the user interaction. Do you want them to click on an <li> then click another and your javascript draws a line between the two? Or do you want a line drawn as they drag the mouse?

To draw a line with canvas you provide two sets of x/y coordinates and connect with a line of specified thickness and color.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

bamapieAuthor Commented:
No, there will be no interactive drawing.  These "bracket" lines are in response to settings they have made, in other parts of the interface.

The <li> elements are not absolute-positioned.

<ul id="sortable">
<li id="liStep_22" class="ActiveListItem unselectable"style="cursor:pointer;" onclick="liConfigStep_Click(this, event);">Golden Brands 9...</li>
<li id="liStep_10" class="ui-state-default-DRAGLIST unselectable" style="cursor:pointer;" onclick="liConfigStep_Click(this, event);">(2.) Open lids ...</li>
<li id="liStep_15" class="ui-state-default-DRAGLIST unselectable" style="cursor:pointer;" onclick="liConfigStep_Click(this, event);">Tank 1 - Water ...</li>
<li id="liStep_11" class="ui-state-default-DRAGLIST unselectable" style="cursor:pointer;" onclick="liConfigStep_Click(this, event);">(3.) Tank 1 - M...</li>
<li id="liStep_14" class="ui-state-default-DRAGLIST unselectable" style="cursor:pointer;" onclick="liConfigStep_Click(this, event);">Tank 1 - Start ...</li>
<li id="liStep_19" class="ui-state-default-DRAGLIST unselectable" style="cursor:pointer;" onclick="liConfigStep_Click(this, event);">Mixer A BU Read...</li>
<li id="liStep_16" class="ui-state-default-DRAGLIST unselectable" style="cursor:pointer;" onclick="liConfigStep_Click(this, event);">UDL Testing</li>
<li id="liStep_18" class="ui-state-default-DRAGLIST unselectable" style="cursor:pointer;" onclick="liConfigStep_Click(this, event);">Tank 2 - Premix...</li>
<li id="liStep_23" class="ui-state-default-DRAGLIST unselectable" style="cursor:pointer;" onclick="liConfigStep_Click(this, event);">Apples</li>
Tom BeckCommented:
Then don't use HTML 5 canvas. It is best used for animations and interactive drawing. Use the second method; small divs next to each <li> with the bracket sections as background images. Choose images based on where you wan the bracket to appear.

In actuality, you only need one background image for each small <div> or <li> and just adjust the background-position top to show either a top bracket, middle line or bottom bracket.
bamapieAuthor Commented:
Yeah, I get the div thing.  But I really feel, it's the problem of positioning them that is going to be the most difficult.  There's always a big mess when you're sifting through the positioning properties.
Tom BeckCommented:
It can be made to work. You would need the menu and the bar on the side to be inside a container that is position:relative. Then you can use position:absolute for the menu items and side bars. Need a sample?
Tom BeckCommented:
Here's a sample. The menu and side bar are positioned independently of the rest of the page so you need only position the container (#wrap) on the page where needed. I used some jquery to draw a bracket from the fourth menu item to the ninth. You can script your javascript to do something similar based on your criteria. I used one background image for the side bar <li>s where needed. Note that the bracket ends point exactly to the centers of the menu items.
<html lang="en-US">
    *{margin:0 auto;padding:0}
    body {
    #wrap {
    #list {
    #list li {
      border:1px solid #000
    #line {
    #line li {
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    $('#line li').each(function(i){
        if(i == 3){
            $(this).css('background', 'url(media/bracket.png) no-repeat 0 0');
        if(i > 3 && i < 7){
            $(this).css('background', 'url(media/bracket.png) no-repeat 0 -30px');
        if(i == 7){
            $(this).css('background', 'url(media/bracket.png) no-repeat 0 -60px');

<div id="wrap"> 
  <ul id="line">
  <ul id="list">
		<li><a href="#/australia/">Australia</a></li>
		<li><a href="#/austria/">Austria</a></li>
		<li><a href="#/belgium/">Belgium</a></li>
		<li><a href="#/brazil/">Brazil</a></li>
		<li><a href="#/canada/">Canada</a></li>
		<li><a href="#/denmark/">Denmark</a></li>
		<li><a href="#/finland/">Finland</a></li>
		<li><a href="#/france/">France</a></li>
		<li><a href="#/germany/">Germany</a></li>


Open in new window

And the background image:Bracket pngResults:Results

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
bamapieAuthor Commented:
Fantastic.  Thanks so much.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.