locked
getting position of div inside of viewBox

    Question

  • Hello All,

    I'm trying to create some graphic flyouts that need to be positioned according the position of div's inside of a winJS.UI.ViewBox.

    Have a look at the attached image. The green horizontal bar a the multi-coloured bar are both created when I instantiate a page control. They inspect some data and run through a loop populating the container div with different length divs. 

    Now I want to create the green and grey info flyouts(the box saying 'so far you'se spent 1,230 less than you planned to by today') and the need to be specifically positioned. 

    Does anyone have any suggestions about how one could go about this?

    Wednesday, September 5, 2012 3:30 PM

Answers

  • Hi

    I've managed to find a working solution. What I do is create a resize handler attached to the containing div. Then when it gets dispatched I use jquery to find the element's x position inside the div.

    targetDiv.onresize = resizeHandler.bind(targetDiv); function resizeHandler() { var leftpos = $("::last-child", this).position().left; console.log("hey I'm at " + leftpos); var test = document.createElement('div'); test.appendChild(triangle); test.id = 'flyOutDiv'; test.style.position = 'relative'; test.style.backgroundColor = '#94c700'; test.style.width = '245px'; test.style.height = '80px'; test.style.top = '-120px'; test.style.left = leftpos-122 + 'px';

    if ($('#flyOutDiv', this)) { $('#flyOutDiv',this).remove(); } this.appendChild(test); };







    Thursday, September 6, 2012 12:53 PM

All replies

  • Simply position the flyouts (or save the position of there they should be) when you are laying out the colored divs.

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, September 5, 2012 3:34 PM
    Moderator
  • But I'm not sure of what the position would be because I'm using a viewbox. So I have a dynamic amount of divs being added to the viewbox and I'm  setting their width using fractional values. This means that somewhere in the viewbox code it's translating those fractional values into x position coordinates based on the overall width of the viewbox div (which is also dynamic)

    So all I'm doing is in my loop is saying this div's fractional value is x and then append it to the viewbox.  The viewbox itself handles the layout and positioning based on the fractional values I give it. If I had the width of the viewbox I could do the calculations myself but as I said previously it is dynamic.
    Wednesday, September 5, 2012 9:27 PM
  • This would have to be all part of the same ViewBox, otherwise you will need to do the math manually outside of the viewbox.  Get the ratio of the size you are drawing at vs the size of the viewbox and position the elements.  There are no shortcuts here!

    -Jeff


    Jeff Sanders (MSFT)

    Thursday, September 6, 2012 12:48 PM
    Moderator
  • Hi

    I've managed to find a working solution. What I do is create a resize handler attached to the containing div. Then when it gets dispatched I use jquery to find the element's x position inside the div.

    targetDiv.onresize = resizeHandler.bind(targetDiv); function resizeHandler() { var leftpos = $("::last-child", this).position().left; console.log("hey I'm at " + leftpos); var test = document.createElement('div'); test.appendChild(triangle); test.id = 'flyOutDiv'; test.style.position = 'relative'; test.style.backgroundColor = '#94c700'; test.style.width = '245px'; test.style.height = '80px'; test.style.top = '-120px'; test.style.left = leftpos-122 + 'px';

    if ($('#flyOutDiv', this)) { $('#flyOutDiv',this).remove(); } this.appendChild(test); };







    Thursday, September 6, 2012 12:53 PM