1

I am trying to set the positions of the div tags I have in my web site. When the web page is loaded I have written a method to fetch the the existing div tags from my database. The reason why I do this is because the position of the div tags needs to be changed. Therefore the current div tag order is stored in the database. The function I have used to dynamically change the div tags are as below, This method is executed after invoking Window.onLoad()

function changeDivPosition (){

    getNewPosts().then(data=>{


        for(var i=0;i<data.newPosts.length;i++) {
            var divId=data.newPosts[i].id
            var divX=data.newPosts[i].xPosition;
            var divY=data.newPosts[i].yPosition;
            console.log(divId,divX,divY)
            var styles = `${'#'+divId}{
                           display:flex;
                           flex-wrap: wrap;
                           flex-direction:row;
                            align-content: space-around;
                            order: ${i};
                           };
                             }`
            $('#'+divId).offset({top:divY, left:divX});
            console.log(styles)
            var styleSheet = document.createElement("style")
            styleSheet.type = "text/css"
            styleSheet.innerText = styles
            document.head.appendChild(styleSheet)


        }

    })
}

The "data" array retrieves json data as follows,

 0: {_id: '61371ea7d14cd809b8cf3872',  id: 'mostPop', xPosition: 285, yPosition: -328.6000061035156}
1: {_id: '61371fe4d14cd809b8cf388c', id: 'sidebar-wrapper', xPosition: 0, yPosition: 0}
2: {_id: '61371ea9d14cd809b8cf387e',  id: 'itemDiscount', xPosition: 285, yPosition: 217.1999969482422}
3: {_id: '61371fe9d14cd809b8cf388e',  id: 'newArr', xPosition: 285, yPosition: 20}

This method manages to change the order of the div tags I want , but all the div tags are positioned together even though I set the X and Y coordinates. As shown in the below image,

enter image description here

I would like to understand what needs to be changed in order to properly render the layout as shown below enter image description here

George Silva
  • 385
  • 5
  • 13
  • is the order (ie: that returned from db) not sufficient when combined with some decent CSS to order the DIVs in the proper manner? – Professor Abronsius Oct 10 '21 at 08:23
  • Sorry , I did not understand what meant by "decent css", will you be able to showcase such a method? – George Silva Oct 10 '21 at 08:47
  • What I mean is with correct CSS rules ( perhaps using flexbox with row-wrap ) you can rely on css to position all elements in the order in which they are written to page rather than try to physically position each with specific x & y coordinates. – Professor Abronsius Oct 10 '21 at 09:20
  • Is there any source that you can refer me to, so that I can follow it and check it out – George Silva Oct 10 '21 at 09:28

1 Answers1

0

At least you are generating and appending an invalid CSS rule. Let's simplify the example just to the problem part:

var divId = 'mostPop'; 
var i = 1; 
var css = 
`${'#'+divId}{
    display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    align-content: space-around;
    order: ${i};
    };
}`;
console.log(css);

Output:

#mostPop{
  display:flex;
  flex-wrap: wrap;
  flex-direction:row;
  align-content: space-around;
  order: 1;
  };
}

Can you see what's wrong with the CSS rule? An extra };

It should be:

var styles = 
   `${'#'+divId}{
      display:flex;
      flex-wrap: wrap;
      flex-direction:row;
      align-content: space-around;
      order: ${i};
    }`;
Reflective
  • 3,854
  • 1
  • 13
  • 25
  • Yes my mistake thank you for that , I corrected it , but I do not think that it was the issue, since I am still getting the same output – George Silva Oct 10 '21 at 09:11
  • Now your CSS will work, until now it was just ignored. Correct it to fit your requirements. If there was an code snippet I would correct it, but I'm not sure what should be achieved. You should do it yourself. – Reflective Oct 10 '21 at 09:18
  • I see, I have actually included a new image to show how the layout should actually render now – George Silva Oct 10 '21 at 09:28