12
Ich versuche, in diesen entworfenen Fluss/progress Diagramm zu bauen HTML/CSS/jQuery>Progess Grafik in CSS
und denken kann, nicht, wie die verschiedenen gestapelte Reihen machen umfassen einen Pfeil nach unten und dann einem umgekehrter Pfeil basierend auf der Richtung der vorherigen Reihe mit den Schritten von rechts nach links, dann von links nach rechts, dann von rechts nach links etc ...
Dies muss alles reagieren ... Ich habe es funktioniert Eine traditionelle Art und Weise gemäß Codebeispiel hier -
function sortFlowChartArrows() {
/* clear prev arrow */
$('.arrow-right').each(function() {
$(this).remove();
});
$('.arrow-down').each(function() {
$(this).remove();
});
var windowWidthSize = $(window).width();
if (windowWidthSize >= 450) {
$('.projectStatusWrapper li:not(:last-child)').each(function() {
\t $(this).after("<div class='arrow-right'></div>")
\t
});
}
if (windowWidthSize <= 449) {
$('.projectStatusWrapper li:not(:last-child)').each(function() {
\t $(this).after("<div class='arrow-down'></div>")
\t
});
}
}
sortFlowChartArrows();
$(window).load(function() { sortFlowChartArrows(); });
$(window).resize(function() { sortFlowChartArrows(); });
/* PROJECT FLOW CHART - MAKE ALL LIS SAME HEIGHT */
function makeallflowchartLIsSameHeight() {
/* clear value */
$('.projectStatusWrapper li span').each(function() {
\t $(this).css("height","")
})
var flowchartLIHeight = Math.max.apply(null, $(".projectStatusWrapper li").map(function() {
return $(this).height();
}).get());
console.log(flowchartLIHeight)
$('.projectStatusWrapper li span').each(function() {
\t $(this).css("height",flowchartLIHeight+"px")
});
\t
}
makeallflowchartLIsSameHeight();
$(window).load(function() { makeallflowchartLIsSameHeight(); });
$(window).resize(function() { makeallflowchartLIsSameHeight(); });.projectStatusWrapper {
width: 100%;
float: left; \t
}
.projectStatusWrapper ul {
margin: 0;
padding: 0;
}
.projectStatusWrapper li {
display: inline-table;
padding: 0;
margin: 0;
list-style: none;
border: 2px solid #74b4df; \t
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
margin: 0.5%;
font-weight: 400;
font-family: 'FFMarkWebProHeavy', Helvetica, Arial;
width: 17%;
vertical-align: middle;
text-align: center;
}
.projectStatusWrapper li span {
display: table-cell;
vertical-align: middle;
text-align: center;
padding: 15px 20px;
}
.projectStatusWrapper li.complete {
background-color: #74b4df;
color: #fff;
}
.arrow-right {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #74b4df;
display: inline-block;
vertical-align: middle;
}
.arrow-left {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #74b4df;
display: inline-block;
vertical-align: middle;
float: right;
}
.arrow-down {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #74b4df;
display: inline-block;
vertical-align: middle;
text-align:center;
position: relative;
left: 43.5%;
margin-top: 5px;
margin-bottom: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="projectStatusWrapper">
<ul>
<li class="complete">Step 1</li>
<li class="complete">Step 2</li>
<li>Step 3</li>
<li>Step 4</li>
<li>Step 5</li>
<li>Step 6</li>
<li>Step 7</li>
<li>Step 8</li>
<li>Step 9</li>
<li>Step 10</li>
</ul>
</div>Irgendwelche Ideen, wie man es wie im Design funktioniert?
Was Ihre Zwänge sind, wenn überhaupt? Können Sie beispielsweise Flexbox- oder CSS-Spalten verwenden? (Ich weiß nicht, dass sie helfen würden, aber wenn man sie nicht benutzen kann/kann), wäre es gut, wenn die Leute es wissen. –
Keine Einschränkungen - nur eine gute/intelligente Markup-Lösung, die in einem funktioniert responsive Weise, um die entworfene Lösung widerzuspiegeln. Ich möchte es aber so einfach wie möglich halten. – dubbs