0

I am wondering if it is possible and how one should approach a problem when:

  1. You want your page to be responsive
  2. You want to add custom background elements to your page (for example lines that connect different divs).

(click!)

Now. I would like to these divs to rearrange as they need to. I would like these lines to connect to the centre of these divs. I agree to make these lines disappear on smaller screens but as long as it is ok I would like to keep them visible.

The problem could be applied to any kind of layout when you want to connect things with custom lines or components. I guess there is a solution with a lot of Javascript coding which I don't mind but I think that in the end these lines would be a part of DOM objects... and I have a feeling that it's wrong as I assume that DOM elements should carry data not graphics layout...

How should I tackle something like this?

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
NowNick
  • 294
  • 2
  • 15
  • 1
    Are the lines, that connect the divs, actual visual elements? – Sunny Patel May 09 '14 at 19:18
  • What do you mean? I am not sure I understood your comment. The thing I want is just a responsive line that goes between divs :) And yes. The lines should be visible, I am trying to make a page layout like an electric circuit :) – NowNick May 09 '14 at 20:23
  • @LaughDonor I *think* he is asking for lines to connect any elements together regardless of their position, in which case it is very hard to do – Zach Saucier May 09 '14 at 20:23
  • 1
    @MikołajNowak Please see [this question](http://stackoverflow.com/questions/6278152/drawing-a-line-between-two-draggable-divs) and [this one](http://stackoverflow.com/q/21864989/2065702) – Zach Saucier May 09 '14 at 20:25
  • Yes. That is kind of think I would like to have in here :) So... there's no magic library like JQuery? :( – NowNick May 09 '14 at 20:25
  • Yes, that is indeed difficult to do, since you would have to create some form of hierarchy and structure, like a [BTree](http://en.wikipedia.org/wiki/Binary_search_tree). – Sunny Patel May 09 '14 at 20:25
  • Alright I see. Thank you very much guys. Thanks to the links posted by @ZachSaucier I have found jsPlumb and many other libraries which might be useful :) – NowNick May 09 '14 at 20:36
  • that's not exactly responsive-friendly ... is it really needed in your project? can it be only on desktop and not mobile? i had a similar problem once and i decided to drop the "connecting lines" for handheld devices – valerio0999 May 12 '14 at 13:45
  • I just hoped I could still have them on tablets. I guess I could live without having the lines on smartphones. But thanks it's a good idea as they are not essential :) – NowNick May 13 '14 at 14:38

0 Answers0