dynamically spanning a div over a grid array
I want to build a dynamic website that displays a kind of link list. The information for my links I have stored in a json-file that looks like that:
{
"name" : "Example 1",
"color" : "#9c88ff",
"serversystems": [
{
"name" : "example 1",
"info" : "example text",
"logo" : "logo.png",
"instances" : [
{
"name" : "subexample 1",
"link" : "#",
"info" : "example text"
},
{
"name" : "subexample 2",
"link" : "#",
"info" : "example text"
},
{
"name" : "subexample 3",
"link" : "#",
"info" : "example text"
},
{
"name" : "subexample 4",
"link" : "#",
"info" : "example text"
}
]
},
{
"name" : "example 2",
"info" : "example text",
"instances" : [
{
"name" : "subexample 1",
"link" : "#",
"info" : "example text"
}
]
},
{
"name" : "example 3",
"info" : "example text",
"logo" : "logo.png",
"instances" : [
{
"name" : "subexample 1",
"link" : "#",
"info" : "example text"
}
]
}
]}
One servertype can consist of a couple of serversystems, which in turn can consist of a couple of serverinstances.
My JavaScript gets all the data from the json-file, creates html-elements and appends them to the wrapper div.
To position these blocks on the website, my wrapper div spans a css grid:
#wrapper {
grid-column: 2;
grid-row: 2;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(auto-fill, 100px);
grid-auto-rows: 100px;
grid-auto-flow: dense;
}
The idea is to have it look roughly like this:
what one servertype "block" should look like
The thing I just can't seem to figure out: as the number of systems and instances varies, the size of these blocks on my website varies as well. How can I use JavaScript to get the height of the final html-block (after appending all it's contents) so that I can make it span a certain amount of columns and rows on the grid?
javascript html css css-grid
asked Jan 19 at 18:21
McMuellermilchMcMuellermilch
13
add a comment |
I want to build a dynamic website that displays a kind of link list. The information for my links I have stored in a json-file that looks like that:
{
"name" : "Example 1",
"color" : "#9c88ff",
"serversystems": [
{
"name" : "example 1",
"info" : "example text",
"logo" : "logo.png",
"instances" : [
{
"name" : "subexample 1",
"link" : "#",
"info" : "example text"
},
{
"name" : "subexample 2",
"link" : "#",
"info" : "example text"
},
{
"name" : "subexample 3",
"link" : "#",
"info" : "example text"
},
{
"name" : "subexample 4",
"link" : "#",
"info" : "example text"
}
]
},
{
"name" : "example 2",
"info" : "example text",
"instances" : [
{
"name" : "subexample 1",
"link" : "#",
"info" : "example text"
}
]
},
{
"name" : "example 3",
"info" : "example text",
"logo" : "logo.png",
"instances" : [
{
"name" : "subexample 1",
"link" : "#",
"info" : "example text"
}
]
}
]}
One servertype can consist of a couple of serversystems, which in turn can consist of a couple of serverinstances.
My JavaScript gets all the data from the json-file, creates html-elements and appends them to the wrapper div.
To position these blocks on the website, my wrapper div spans a css grid:
#wrapper {
grid-column: 2;
grid-row: 2;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(auto-fill, 100px);
grid-auto-rows: 100px;
grid-auto-flow: dense;
}
The idea is to have it look roughly like this:
what one servertype "block" should look like
The thing I just can't seem to figure out: as the number of systems and instances varies, the size of these blocks on my website varies as well. How can I use JavaScript to get the height of the final html-block (after appending all it's contents) so that I can make it span a certain amount of columns and rows on the grid?
javascript html css css-grid
asked Jan 19 at 18:21
McMuellermilchMcMuellermilch
13
i guess you just need to chunk the data into bits that fit the grid and for me its not clear how you want your data to be displayed or what you tried
– john Smith
Jan 19 at 18:29
Thank you for your answer @johnSmith ! I just updated my post a little bit, so that it makes more sense? The linked picture shows what the outcome should look like. My Javascript to make the block of html span over a certain amount of rows is a very ugly pile of a million if statements like "if numOfInstances = x, then elem.setAttribute("class", "span5"). My JS gets the data from the json file and creates html accordingly. I need to figure out how high the created element "would" be, so that I can make it span a fitting amount of rows on the grid.
– McMuellermilch
Jan 19 at 19:50
i would display "subexamples" in a scrollable box so every box can have a the same maximum height, generaly the height of the "subexamples" itself should automatically scale the grid so you wont have to set a height
– john Smith
Jan 19 at 20:15
add a comment |
I want to build a dynamic website that displays a kind of link list. The information for my links I have stored in a json-file that looks like that:
{
"name" : "Example 1",
"color" : "#9c88ff",
"serversystems": [
{
"name" : "example 1",
"info" : "example text",
"logo" : "logo.png",
"instances" : [
{
"name" : "subexample 1",
"link" : "#",
"info" : "example text"
},
{
"name" : "subexample 2",
"link" : "#",
"info" : "example text"
},
{
"name" : "subexample 3",
"link" : "#",
"info" : "example text"
},
{
"name" : "subexample 4",
"link" : "#",
"info" : "example text"
}
]
},
{
"name" : "example 2",
"info" : "example text",
"instances" : [
{
"name" : "subexample 1",
"link" : "#",
"info" : "example text"
}
]
},
{
"name" : "example 3",
"info" : "example text",
"logo" : "logo.png",
"instances" : [
{
"name" : "subexample 1",
"link" : "#",
"info" : "example text"
}
]
}
]}
One servertype can consist of a couple of serversystems, which in turn can consist of a couple of serverinstances.
My JavaScript gets all the data from the json-file, creates html-elements and appends them to the wrapper div.
To position these blocks on the website, my wrapper div spans a css grid:
#wrapper {
grid-column: 2;
grid-row: 2;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(auto-fill, 100px);
grid-auto-rows: 100px;
grid-auto-flow: dense;
}
The idea is to have it look roughly like this:
what one servertype "block" should look like
The thing I just can't seem to figure out: as the number of systems and instances varies, the size of these blocks on my website varies as well. How can I use JavaScript to get the height of the final html-block (after appending all it's contents) so that I can make it span a certain amount of columns and rows on the grid?
javascript html css css-grid
asked Jan 19 at 18:21
McMuellermilchMcMuellermilch
13
I want to build a dynamic website that displays a kind of link list. The information for my links I have stored in a json-file that looks like that:
{
"name" : "Example 1",
"color" : "#9c88ff",
"serversystems": [
{
"name" : "example 1",
"info" : "example text",
"logo" : "logo.png",
"instances" : [
{
"name" : "subexample 1",
"link" : "#",
"info" : "example text"
},
{
"name" : "subexample 2",
"link" : "#",
"info" : "example text"
},
{
"name" : "subexample 3",
"link" : "#",
"info" : "example text"
},
{
"name" : "subexample 4",
"link" : "#",
"info" : "example text"
}
]
},
{
"name" : "example 2",
"info" : "example text",
"instances" : [
{
"name" : "subexample 1",
"link" : "#",
"info" : "example text"
}
]
},
{
"name" : "example 3",
"info" : "example text",
"logo" : "logo.png",
"instances" : [
{
"name" : "subexample 1",
"link" : "#",
"info" : "example text"
}
]
}
]}
One servertype can consist of a couple of serversystems, which in turn can consist of a couple of serverinstances.
My JavaScript gets all the data from the json-file, creates html-elements and appends them to the wrapper div.
To position these blocks on the website, my wrapper div spans a css grid:
#wrapper {
grid-column: 2;
grid-row: 2;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(auto-fill, 100px);
grid-auto-rows: 100px;
grid-auto-flow: dense;
}
The idea is to have it look roughly like this:
what one servertype "block" should look like
The thing I just can't seem to figure out: as the number of systems and instances varies, the size of these blocks on my website varies as well. How can I use JavaScript to get the height of the final html-block (after appending all it's contents) so that I can make it span a certain amount of columns and rows on the grid?
javascript html css css-grid
javascript html css css-grid
asked Jan 19 at 18:21
McMuellermilchMcMuellermilch
13
asked Jan 19 at 18:21
McMuellermilchMcMuellermilch
13
edited Jan 19 at 19:45
McMuellermilch
asked Jan 19 at 18:21
McMuellermilchMcMuellermilch
13
asked Jan 19 at 18:21
McMuellermilchMcMuellermilch
13
asked Jan 19 at 18:21
McMuellermilchMcMuellermilch
13
13
i guess you just need to chunk the data into bits that fit the grid and for me its not clear how you want your data to be displayed or what you tried
– john Smith
Jan 19 at 18:29
Thank you for your answer @johnSmith ! I just updated my post a little bit, so that it makes more sense? The linked picture shows what the outcome should look like. My Javascript to make the block of html span over a certain amount of rows is a very ugly pile of a million if statements like "if numOfInstances = x, then elem.setAttribute("class", "span5"). My JS gets the data from the json file and creates html accordingly. I need to figure out how high the created element "would" be, so that I can make it span a fitting amount of rows on the grid.
– McMuellermilch
Jan 19 at 19:50
i would display "subexamples" in a scrollable box so every box can have a the same maximum height, generaly the height of the "subexamples" itself should automatically scale the grid so you wont have to set a height
– john Smith
Jan 19 at 20:15
add a comment |
i guess you just need to chunk the data into bits that fit the grid and for me its not clear how you want your data to be displayed or what you tried
– john Smith
Jan 19 at 18:29
Thank you for your answer @johnSmith ! I just updated my post a little bit, so that it makes more sense? The linked picture shows what the outcome should look like. My Javascript to make the block of html span over a certain amount of rows is a very ugly pile of a million if statements like "if numOfInstances = x, then elem.setAttribute("class", "span5"). My JS gets the data from the json file and creates html accordingly. I need to figure out how high the created element "would" be, so that I can make it span a fitting amount of rows on the grid.
– McMuellermilch
Jan 19 at 19:50
i would display "subexamples" in a scrollable box so every box can have a the same maximum height, generaly the height of the "subexamples" itself should automatically scale the grid so you wont have to set a height
– john Smith
Jan 19 at 20:15
i guess you just need to chunk the data into bits that fit the grid and for me its not clear how you want your data to be displayed or what you tried
– john Smith
Jan 19 at 18:29
i guess you just need to chunk the data into bits that fit the grid and for me its not clear how you want your data to be displayed or what you tried
– john Smith
Jan 19 at 18:29
Thank you for your answer @johnSmith ! I just updated my post a little bit, so that it makes more sense? The linked picture shows what the outcome should look like. My Javascript to make the block of html span over a certain amount of rows is a very ugly pile of a million if statements like "if numOfInstances = x, then elem.setAttribute("class", "span5"). My JS gets the data from the json file and creates html accordingly. I need to figure out how high the created element "would" be, so that I can make it span a fitting amount of rows on the grid.
– McMuellermilch
Jan 19 at 19:50
Thank you for your answer @johnSmith ! I just updated my post a little bit, so that it makes more sense? The linked picture shows what the outcome should look like. My Javascript to make the block of html span over a certain amount of rows is a very ugly pile of a million if statements like "if numOfInstances = x, then elem.setAttribute("class", "span5"). My JS gets the data from the json file and creates html accordingly. I need to figure out how high the created element "would" be, so that I can make it span a fitting amount of rows on the grid.
– McMuellermilch
Jan 19 at 19:50
i would display "subexamples" in a scrollable box so every box can have a the same maximum height, generaly the height of the "subexamples" itself should automatically scale the grid so you wont have to set a height
– john Smith
Jan 19 at 20:15
i would display "subexamples" in a scrollable box so every box can have a the same maximum height, generaly the height of the "subexamples" itself should automatically scale the grid so you wont have to set a height
– john Smith
Jan 19 at 20:15
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54270073%2fdynamically-spanning-a-div-over-a-grid-array%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54270073%2fdynamically-spanning-a-div-over-a-grid-array%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
i guess you just need to chunk the data into bits that fit the grid and for me its not clear how you want your data to be displayed or what you tried
– john Smith
Jan 19 at 18:29
Thank you for your answer @johnSmith ! I just updated my post a little bit, so that it makes more sense? The linked picture shows what the outcome should look like. My Javascript to make the block of html span over a certain amount of rows is a very ugly pile of a million if statements like "if numOfInstances = x, then elem.setAttribute("class", "span5"). My JS gets the data from the json file and creates html accordingly. I need to figure out how high the created element "would" be, so that I can make it span a fitting amount of rows on the grid.
– McMuellermilch
Jan 19 at 19:50
i would display "subexamples" in a scrollable box so every box can have a the same maximum height, generaly the height of the "subexamples" itself should automatically scale the grid so you wont have to set a height
– john Smith
Jan 19 at 20:15