Solved

Drawing lines with Javascript/Jquery?

Posted on 2012-04-11
9
625 Views
Last Modified: 2012-04-11
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
0
Comment
Question by:bamapie
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37833361
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.
0
 

Author Comment

by:bamapie
ID: 37834380
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?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37834697
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.
0
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 

Author Comment

by:bamapie
ID: 37834770
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>
</ul>
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37834842
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.
0
 

Author Comment

by:bamapie
ID: 37834854
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.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 37834904
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?
0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 37835035
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.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <title>Untitled</title>
  <style>
    *{margin:0 auto;padding:0}
    body {
      text-align:center;
      background-color:#000
    }
    #wrap {
      position:relative;
      width:120px;
      height:300px;
    }
    #list {
      list-style:none;
      position:absolute;
      top:20px;
      left:40px
    }
    #list li {
      width:98px;
      height:28px;
      line-height:30px;
      background-color:#ccc;
      border:1px solid #000
    }
    #line {
      list-style:none;
      position:absolute;
      top:20px;
      left:20px
    }
    #line li {
      width:20px;
      height:30px;
      line-height:30px
    }
   </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
    $('#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');
        }
    });  
  });
  </script>

</head>
<body>
<div id="wrap"> 
  <ul id="line">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul> 
  <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>
	</ul>
</div>


</body>
</html>

Open in new window

And the background image:Bracket pngResults:Results
0
 

Author Closing Comment

by:bamapie
ID: 37835382
Fantastic.  Thanks so much.
0

Featured Post

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

732 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question