dafodil dafodil - 2 months ago 17
CSS Question

Changing background color of header based on status in jsp

I have a jsp with for each loop in it, now i need to change background color of h2 based on fruitStatus(i.e with delivered or inbag)

i mean if it is fruitMapModel.fruitStatus[frutListData.fruitId] is delivered, h2 backgroud color to be blue, if it is 'inbag' red color

<c:forEach var="frutListData" items="${fruitMapModel.fruitList}">
<div id="fruitProgress<c:out value="${frutListData.fruitId}"/>">
<li class="fruit">

<ul class="fruitheader" >
<c:if test="${fruitMapModel.fruitStatus[frutListData.fruitId] == 'inBag' }">
</c:if>
<c:if test="${fruitMapModel.fruitStatus[frutListData.fruitId] == 'delivered' }">
</c:if>
<h2> <c:out value="${fruitMapModel.fruitNameList[frutListData.fruitId]}" /> </h2>
</ul>
</li>
</div>
</c:forEach>


.css file

.fruit h2 {float:left;margin:0 20px 0 0;
padding:14px 20px 13px 20px;
background:#ccc;
font:normal 16px 'museo_sans_rounded700', Arial, Helvetica, sans-serif;
color:#666;text-transform:uppercase;
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
}

.fruitheader {overflow:hidden;}
.fruitheader li {float:left;margin:0 20px 0 0;}


How could i change backgroud color of h2?Please help me on this.

Answer

Just let JSP print the status in class attribute of the HTML element of interest.

<ul class="fruitheader ${fruitMapModel.fruitStatus[frutListData.fruitId]}">

Then it's a matter of specifying the desired styles via CSS.

.fruitheader.inBag h2 { background: red; }
.fruitheader.delivered h2 { background: blue; }

Do note that <c:out> is unnecessary as long as you're on JSP 2.0+ and the value is not controlled by user. See also a.o. what is c:out used for in jsp.