admin管理员组文章数量:1391969
I have an application that has a <nav> selection list of items that will dynamically open in an <article> area. Each item is defined as a <div> in the <article> area with display:none, until each is activated by a JavaScript function as the user clicks selections in the <nav>. As they appear in the <article> area, they show up in the sequence they are defined in the <article>. The salient and somewhat pseudo parts of the code are shown below.
I would like each div to show up in the sequence that the user clicks, and not in the sequence the divs are laid out. So if the user selects item002 then item001, the respective divs would show in the sequence item002, item001.
I've been trying to find a way to do this with flex column layout by dynamically changing the order of the article divs, something like:
document.getElementById(shID).order = myOrdervar;
So far nothing I've tried has worked, and I can't find documentation on flex telling me if this is even possible. Does anyone have a technique for changing the display sequence of the article divs, with or without flex?
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font: 1em Helvetica;
background: #999999;
}
#main {
min-height: 500px;
margin: 0;
padding: 0;
display: flex;
flex-flow: column;
}
#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
border-radius: 7pt;
background: #dddd88;
height: 600px;
flex: 3 1 60%;
order: 2;
flex-flow: column;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
height: 600px;
flex: 1 6 20%;
order: 1;
overflow: auto;
}
header, footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
/* Too narrow to support three columns */
@media all and (max-width: 640px) {
#main, #page {
flex-direction: column;
}
#main > article, #main > nav, #main > aside {
/* Return them to document order */
order: 0;
flex-direction: column;
}
#main > nav, #main > aside, header, footer {
min-height: 50px;
max-height: 50px;
}
}
</style>
<script language="javascript" type="text/javascript">
var globalOrder = 1;
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID + '-show').style.display != 'none') {
document.getElementById(shID + '-show').style.display = 'none';
document.getElementById(shID).style.display = 'flex';
document.getElementById(shID).style.order = globalOrder;
globalOrder++;
}
else {
document.getElementById(shID + '-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
<style type="text/css">
/* This CSS is used for the Show/Hide functionality. */
.more {
display: none;
border-top: 0px solid #666;
border-bottom: 0px solid #666;
}
.showSquid {
display: block;
border-top: 0px solid #666;
border-bottom: 0px solid #666;
}
a.showLink, a.hideLink {
text-decoration: none;
font-size: 1.0em;
font-family: 'MergeLight', Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
padding-left: 0px;
border-top: 0px solid #666;
border-bottom: 0px dotted #36f;
}
a.hideLink {
background: transparent url(up.gif) no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
color: white;
}
</style>
</head>
<body>
<header>
Sources
</header>
<div id='main'>
<nav>
<a href='#' id='Wilmington Wind-show' class='showLink' onclick='showHide("Wilmington Wind");return false;'>
Wilmington Wind
</a><br>
<a href='#' id='ArtMachine.mp3-show' class='showLink' onclick='showHide("ArtMachine.mp3");return false;'>
Art Machine
</a><br>
<a href='#' id='Breathing-original.mp3-show' class='showLink' onclick='showHide("Breathing-original.mp3");return false;'>
Breathing
</a><br>
<a href='#' id='ToroidMachine-show' class='showLink' onclick='showHide("ToroidMachine");return false;'>
</a>
</nav>
<article>
<div id='Wilmington Wind' class='more' style="flex-direction: column;">
Wilmington Wind<br>
</div>
<div id='ArtMachine.mp3' class='more' style="flex-direction: column;">
Art Machine<br>
</div>
<div id='Breathing-original.mp3' class='more' style="flex-direction: column;">
Breathing
</div> <!-- Breathing-original.mp3 -->
</article>
<footer>© 2017</footer>
</div>
</body>
</html>
I have an application that has a <nav> selection list of items that will dynamically open in an <article> area. Each item is defined as a <div> in the <article> area with display:none, until each is activated by a JavaScript function as the user clicks selections in the <nav>. As they appear in the <article> area, they show up in the sequence they are defined in the <article>. The salient and somewhat pseudo parts of the code are shown below.
I would like each div to show up in the sequence that the user clicks, and not in the sequence the divs are laid out. So if the user selects item002 then item001, the respective divs would show in the sequence item002, item001.
I've been trying to find a way to do this with flex column layout by dynamically changing the order of the article divs, something like:
document.getElementById(shID).order = myOrdervar;
So far nothing I've tried has worked, and I can't find documentation on flex telling me if this is even possible. Does anyone have a technique for changing the display sequence of the article divs, with or without flex?
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font: 1em Helvetica;
background: #999999;
}
#main {
min-height: 500px;
margin: 0;
padding: 0;
display: flex;
flex-flow: column;
}
#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
border-radius: 7pt;
background: #dddd88;
height: 600px;
flex: 3 1 60%;
order: 2;
flex-flow: column;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
height: 600px;
flex: 1 6 20%;
order: 1;
overflow: auto;
}
header, footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
/* Too narrow to support three columns */
@media all and (max-width: 640px) {
#main, #page {
flex-direction: column;
}
#main > article, #main > nav, #main > aside {
/* Return them to document order */
order: 0;
flex-direction: column;
}
#main > nav, #main > aside, header, footer {
min-height: 50px;
max-height: 50px;
}
}
</style>
<script language="javascript" type="text/javascript">
var globalOrder = 1;
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID + '-show').style.display != 'none') {
document.getElementById(shID + '-show').style.display = 'none';
document.getElementById(shID).style.display = 'flex';
document.getElementById(shID).style.order = globalOrder;
globalOrder++;
}
else {
document.getElementById(shID + '-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
<style type="text/css">
/* This CSS is used for the Show/Hide functionality. */
.more {
display: none;
border-top: 0px solid #666;
border-bottom: 0px solid #666;
}
.showSquid {
display: block;
border-top: 0px solid #666;
border-bottom: 0px solid #666;
}
a.showLink, a.hideLink {
text-decoration: none;
font-size: 1.0em;
font-family: 'MergeLight', Arial, Verdana, Helvetica, sans-serif;
font-weight: bold;
padding-left: 0px;
border-top: 0px solid #666;
border-bottom: 0px dotted #36f;
}
a.hideLink {
background: transparent url(up.gif) no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
color: white;
}
</style>
</head>
<body>
<header>
Sources
</header>
<div id='main'>
<nav>
<a href='#' id='Wilmington Wind-show' class='showLink' onclick='showHide("Wilmington Wind");return false;'>
Wilmington Wind
</a><br>
<a href='#' id='ArtMachine.mp3-show' class='showLink' onclick='showHide("ArtMachine.mp3");return false;'>
Art Machine
</a><br>
<a href='#' id='Breathing-original.mp3-show' class='showLink' onclick='showHide("Breathing-original.mp3");return false;'>
Breathing
</a><br>
<a href='#' id='ToroidMachine-show' class='showLink' onclick='showHide("ToroidMachine");return false;'>
</a>
</nav>
<article>
<div id='Wilmington Wind' class='more' style="flex-direction: column;">
Wilmington Wind<br>
</div>
<div id='ArtMachine.mp3' class='more' style="flex-direction: column;">
Art Machine<br>
</div>
<div id='Breathing-original.mp3' class='more' style="flex-direction: column;">
Breathing
</div> <!-- Breathing-original.mp3 -->
</article>
<footer>© 2017</footer>
</div>
</body>
</html>
-
Not much we can do when there is no working code snippet reproducing the issue, and of course you can change
orderusing javascript. Optionally you can swap element position in the markup with script. – Asons Commented Nov 15, 2017 at 16:29
3 Answers
Reset to default 3The parent element needs display: flex; — in your case, that's the <article> element.
Add this in your <style> element:
article {
display: flex;
}
You miss the .style part in document.getElementById(shID).order=myOrdervar;:
document.getElementById(shID).style.order=myOrdervar;
If it helps, I wrote that
body {
font-family: Verdana;
font-size: 12pt;
}
.questions {
/* width: 600px; */
max-width: 600px;
}
.question {
padding: 1em;
margin-bottom: 30px;
border: 1px solid black;
}
.question-label {
font-weight: bold;
padding: 1em;
background-color: blue;
color: white;
}
.propositions {
display: flex;
flex-direction: column;
}
.proposition {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
margin-top: 2px;
/* transition: 2s ease; */
/* transition-duration: 2s; */
}
.proposition-label {
padding: 1em;
/* background: yellow; */
flex-grow: 1;
}
.proposition-buttons {
padding: 1em;
/* background: red; */
width: 150px;
text-align: center;
}
.propositions .p1 {
background: green;
order: 1;
}
.propositions .p2 {
background: yellow;
order: 2;
}
.propositions .p3 {
background: aqua;
order: 3;
}
.propositions .p4 {
background: gray;
order: 4;
}
.question .legend {
font-size: .8em;
font-style: italic;
margin-top: 1em;
}
a.proposition-btn {
display: inline-block;
background: white;
color: black;
/*width: 1.5em;
height: 1.5em;*/
padding: .25em;
border: 1px solid grey;
}
a.proposition-btn:hover {
background: black;
color: white;
}<html>
<head>
<link href="assets/fontawesome-6.4.0/css/all.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script>
const reps = [];
//
function updateOrder(questionNum, propositionNum, nextOrder) {
for(i = 0; i < nextOrder.length; i++) {
const value = nextOrder[i];
const idProposition = 'q' + questionNum + '_p' + value;
const divProposition = document.getElementById(idProposition);
divProposition.style.order = i + 1;
}
// input
const inputId = 'rep' + questionNum;
const input = document.getElementById(inputId);
const nextValue = nextOrder.join('-');
input.value = nextValue;
}
//
function down(questionNum, propositionNum) {
const order = reps[questionNum];
const pos = order.indexOf(propositionNum);
if(pos == 3) {
console.log('Deja en bas');
return;
}
const nextOrder = [];
for(i = 0; i < pos; i++) {
nextOrder.push(order[i]);
}
nextOrder.push(order[pos + 1]);
nextOrder.push(propositionNum);
for(i = pos + 2; i < order.length; i++) {
nextOrder.push(order[i]);
}
reps[questionNum] = nextOrder;
updateOrder(questionNum, propositionNum, nextOrder);
}
//
function up(questionNum, propositionNum) {
const order = reps[questionNum];
const pos = order.indexOf(propositionNum);
if(pos == 0) {
console.log('Deja en gaut');
return;
}
const nextOrder = [];
for(i = 0; i < pos -1; i++) {
nextOrder.push(order[i]);
}
nextOrder.push(propositionNum);
nextOrder.push(order[pos - 1]);
for(i = pos + 1; i < order.length; i++) {
nextOrder.push(order[i]);
}
reps[questionNum] = nextOrder;
updateOrder(questionNum, propositionNum, nextOrder);
}
</script>
</head>
<body>
<div class="questions">
<input type="hidden" name="rep1" id="rep1" value="1-2-3-4" />
<script>
reps[1] = [1, 2, 3, 4];
</script>
<div class="question" id="q1">
<div class="question-label">
1. Quel est votre jour préféré ?
</div>
<div class="propositions">
<div class="proposition p1" id="q1_p1">
<div class="proposition-label">
Lundi
</div>
<div class="proposition-buttons">
<a href="#" class="proposition-btn" onclick="down(1, 1)">Down</a>
<a href="#" class="proposition-btn" onclick="up(1, 1)">Up</a>
</div>
</div>
<div class="proposition p2" id="q1_p2">
<div class="proposition-label">
Mardi
</div>
<div class="proposition-buttons">
<a href="#" class="proposition-btn" onclick="down(1, 2)">Down</a>
<a href="#" class="proposition-btn" onclick="up(1, 2)">Up</a>
</div>
</div>
<div class="proposition p3" id="q1_p3">
<div class="proposition-label">
Mercredi
</div>
<div class="proposition-buttons">
<a href="#" class="proposition-btn" onclick="down(1, 3)">Down</a>
<a href="#" class="proposition-btn" onclick="up(1, 3)">Up</a>
</div>
</div>
<div class="proposition p4" id="q1_p4">
<div class="proposition-label">
Jeudi
</div>
<div class="proposition-buttons">
<a href="#" class="proposition-btn" onclick="down(1, 4)">Down</a>
<a href="#" class="proposition-btn" onclick="up(1, 4)">Up</a>
</div>
</div>
</div>
<div class="legend">
Classez les propositions à l'aide des flèches (en haut celle qui vous correspond le plus).
</div>
</div>
</div>
</body>
</html>本文标签： htmlDynamically change CSS flex order via JavaScript based on user event orderStack Overflow
版权声明：本文标题：html - Dynamically change CSS flex order via JavaScript based on user event order - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744732308a2622121.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论