At the moment I have a check list that updates the progress bar once a check-box is clicked, however, I want the progress bar to update according to whatever the percentage is on the check-box. I have spent hours looking for a solution and trying different things but have had no luck. Any help or advice?
DEMO= http://jsfiddle.net/UznQe/
<!DOCTYPE html>
<html>
<head>
<title>Bars for checklist</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="themes/theme1.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8">
<link rel="stylesheet" href="jqm/demos/css/themes/default/jquery.mobile-1.3.2.min.css" />
<script src="jqm/demos/js/jquery.js">
</script>
<script src="jqm/demos/js/jquery.mobile-1.3.2.min.js">
</script>
<script>
$(document).on('pagebeforeshow', '#checklist', function () {
$('input[type="checkbox"]').each(function () {
($(this).is(':checked')) ? $(this).parent().parent().addClass('checked') : $(this).parent().parent().addClass('not-checked');
});
});
$(document).on('click', '.checkBoxLeft', function () {
if ($(this).find('input[type="checkbox"]').is(':checked')) {
$(this).removeClass('checked').addClass('not-checked');
$(this).find('input[type="checkbox"]').attr('checked', false);
} else {
$(this).removeClass('not-checked').addClass('checked');
$(this).find('input[type="checkbox"]').attr('checked', true);
}
var total = $("#theList input[type=checkbox]").length;
var numChecked = $("#theList input[type=checkbox]:checked").length;
if (numChecked == 1) {
$("#progress").css('background', 'red');
} else if (numChecked == 2) {
$("#progress").css('background', 'orange');
} else if (numChecked == 3) {
$("#progress").css('background', 'yellow');
} else {
$("#progress").css('background', 'lime');
}
var prog = numChecked * 100 / total;
$("#progress").css("width", prog + "%");
});
</script>
</head>
<body>
<div data-role="main" class="ui-content">
<div data-role="collapsible">
<h1>Task list</h1>
<div data-role="content">
<ul data-role="listview" id="theList" data-inset="true">
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="15" class="hidden-checkbox"/>
</div>
Task 1 (15%)
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="40"class="hidden-checkbox"/>
</div>
Task 2 (40%)
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="5" class="hidden-checkbox"/>
</div>
Task 3 (5%)
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="10" class="hidden-checkbox"/>
</div>
Task 4 (10%)
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="15"class="hidden-checkbox"/>
</div>
Task 5 (15%)
</li>
<li>
<div class="checkBoxLeft">
<input type="checkbox" name="checkbox-0" id="checkbox-0" value="15" class="hidden-checkbox"/>
</div>
Task 6 (15%)
</li>
</ul>
</div>
</div>
<div class="meter green nostripes">
<span id="progress" style="width: 0%"></span>
</div>
</div>
<style>
.detailListText{
margin: 0 0 0 20px;
}
.checkBoxLeft{
position: absolute;
left: 10px;
top: 28%;
width: 18px;
height: 18px;
background: #d9d9d9;
border-radius: 3px;
}
.hidden-checkbox {
display: none;
}
.not-checked {
background-position: 18px 0;
background-color:#d9d9d9;
}
.checked {
background-position: 0 0;
background-color:#6496bc;
}
.meter {
height: 20px;
position: relative;
margin: 60px 0 20px 0;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(43,194,83)),
color-stop(1, rgb(84,240,84))
);
background-image: -moz-linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
-webkit-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
-moz-box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image:
-webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, rgba(255, 255, 255, .2)),
color-stop(.25, transparent), color-stop(.5, transparent),
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.75, rgba(255, 255, 255, .2)),
color-stop(.75, transparent), to(transparent)
);
background-image:
-moz-linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-moz-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
.animate > span:after {
display: none;
}
</style>
</div>
</body>
</html>
Updated FIDDLE
Instead of counting the number of checked checkboxes, you add up the values of the checked checkboxes:
//calculate percentage
perc = 0;
$("#theList input[type=checkbox]:checked").each(function( index ) {
perc += parseInt($(this).val());
});
if (perc < 15) {
$("#progress").css('background', 'red');
} else if (perc < 30) {
$("#progress").css('background', 'orange');
} else if (perc < 60) {
$("#progress").css('background', 'yellow');
} else {
$("#progress").css('background', 'lime');
}
$("#progress").css("width", perc + "%");
parseInt($(this).val()) gives you an integer representation of the value.
Here is one example in codepen check this.
<form>
<p>
<input type="checkbox" name = "box1"/>
<input type="checkbox"name = "box2" />
<input type="checkbox" name = "box3"/>
</p>
</form>
<div class="progressbar-container">
<div class="progressbar-bar"></div>
<div class="progressbar-label"></div>
</div>
<div class = "ready"></div>
Here is the javascript for this
$(document).ready(function() {
// get box count
var count = 0;
var checked = 0;
function countBoxes() {
count = $("input[type='checkbox']").length;
console.log(count);
}
countBoxes();
$(":checkbox").click(countBoxes);
// count checks
function countChecked() {
checked = $("input:checked").length;
var percentage = parseInt(((checked / count) * 100),10);
$(".progressbar-bar").progressbar({
value: percentage
});
$(".progressbar-label").text(percentage + "%");
}
countChecked();
$(":checkbox").click(countChecked);
});
The changes of the progress bar applied through CSS.
body { margin: 20px 50px; }
h1 { font-size: 1.5em; }
p { margin: 0; }
input[type="checkbox"] {
height: 20px;
width: 20px;
margin-right: 10px;
}
.ready { font-size: 1.5em; }
.ui-progressbar-value { background: lightgreen; }
.progressbar-container {
position: relative;
width: 350px;
}
.progressbar-bar {
height: 25px;
margin: 10px 0;
border-radius: 7px;
}
.progressbar-label {
position: absolute;
top: 2px;
left: 45%;
z-index: 2;
}
Related
How can I make a loop inside currentSlide(1) so I want everytime .each work to add currentSlide(1) then currentSlide(2) then currentSlide(3) and so on.
<div class="approach" id="app">
<style>
#media (max-width: 600px){
.btn {
padding: 2px 2px 2px 2px !important; */
}}
#myBtnContainer{
display: flex;
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
display: none;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 282px;
}
.column:hover{
border: 1px solid #777;
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Content */
.content {
width: 100%;
height: 400px;
overflow: hidden;
/*display: flex;*/
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.content img{
object-fit: cover;
height: auto;
width: 100%;
position: absolute;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
/* Style the buttons */
.btn {
border: none;
outline: none;
padding: 10px 10px;
background-color: #333333;
cursor: pointer;
color: white;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #666;
color: white;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 500px;
}
/* The Close Button */
.close {
color: white !important;
position: absolute;
top: 170px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
.mySlides img{
padding-top: 70px;
background-color: black;
}
div.desc {
padding: 15px;
text-align: center;
}
#media (max-width:600px) {
.close {
color: white !important;
position: absolute;
top: 120px;
right: 25px;
font-size: 45px;
font-weight: bold;
z-index: 1000;
}
.column {
float: left;
display: none;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 83px;
}
}
#media (max-width: 320px){
.column {
float: left;
display: none;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 70px;
}
}
#media only screen and (min-width: 812px) {
.column {
float: left;
display: none;
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 90px;
} }
</style>
<body>
<!-- MAIN (Center website) -->
<div class="container">
<h1>GALLERY</h1>
<div id="myBtnContainer">
<button class="btn" onclick="filterSelection('conversion')"> Conversion</button>
<button class="btn" onclick="filterSelection('fixed-hybrid')"> Fixed Hybrid</button>
<button class="btn" onclick="filterSelection('removal-bar-over-denture')"> Removable Bar Over Denture</button>
<button class="btn" onclick="filterSelection('surgical-guides')"> Surgical Guides</button>
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
</div>
<br>
<!-- Portfolio Gallery Grid -->
<div class="row">
<% #galleries.each do |g| %>
<% [g.image1, g.image2, g.image3, g.image4, g.image5].compact.each_with_index do |image, index| %>
<div class="column <%= g.product_name %>">
<div class="content">
<%= image_tag image.url, style: "width:100%", onclick: "openModal();currentSlide(#{index + 1})" ,class: "hover-shadow cursor"%>
</div>
</div>
<% end %>
<% end %>
<!-- END GRID -->
</div>
<!-- END MAIN -->
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<% #galleries.each do |g| %>
<% [g.image1, g.image2, g.image3, g.image4, g.image5].compact.each_with_index do |image, index| %>
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<%= image_tag image.url, style: "width:100%" %>
</div>
<% end %>
<% end %>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption">hr</p>
</div>
</div>
<script>
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</div>
<script>
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
Looks like you just need an index to interpolate into currentSlide.
Start by removing duplication and instead of checking every related image with <% if g.image1.present? %> put them into an array and iterate over it with:
<% [g.image1, g.image2, g.image3].compact.each_with_index do |image, index|
compact will make sure that only present images are there, so you don't have to use if present any more.
And then use onclick: "openModal();currentSlide(#{index + 1})" (as index starts at 0, and you seem to need it to start from 1)
Update:
<% #galleries.each do |g| %>
<% [g.image1, g.image2, g.image3, g.image4, g.image5].compact.each_with_index do |image, index| %>
<div class="column <%= g.product_name %>">
<div class="content">
<%= image_tag image.url,
alt: "conversion",
style: "width:100%",
onclick: "openModal();currentSlide(#{index + 1})",
class: "hover-shadow cursor" %>
</div>
</div>
I'm following this w3schools.com tutorial to create a toggle switch...
https://www.w3schools.com/howto/howto_css_switch.asp
But for some reason its very hard to press and doesn't work properly on IOS. Any ideas? I tried doing some googleing on it, but I couldn't find anything on it.
Here is the code...
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {display:none;}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
I solved it by doing this...
<div id="SwitchDiv" onclick="if ($('#SwitchInput').attr('checked')) {$('#SwitchInput').attr('checked', false);} else {$('#SwitchInput').attr('checked', true);}">
<label id="Switch" class="switch" style="pointer-events: none;">
<input style="pointer-events: none;" id="SwitchInput" onchange="ClickAlertsCheckbox(this)" type="checkbox" checked>
<span style="pointer-events: none;" class="slider round"></span>
</label>
</div>
I'm using a template found https://bootstrapious.com/p/bootstrap-sidebar (it's the 2nd sidebar option). I have it integrated into a stock MVC5 application and everything works except for whatever is in RenderBody(), it's not responsive to when the sidebar is toggled open/closed. It is responsive when I resize the page, and the sidebar responds appropriately too, but I don't want the sidebar to overlay the contents on RenderBody(). How would I go about fixing that? Thank you in advanced!
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<!-- Scrollbar Custom CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
</head>
<body>
<div class="wrapper">
<!-- Sidebar Holder -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<p>Dummy Heading</p>
<li class="active">
Home
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>Home 1</li>
<li>Home 2</li>
<li>Home 3</li>
</ul>
</li>
<li>
About
Pages
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</nav>
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" id="sidebarCollapse" class="btn btn-info navbar-btn">
<i class="glyphicon glyphicon-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
<!--
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Page</li>
<li>Page</li>
<li>Page</li>
<li>Page</li>
</ul>
</div>-->
</div>
</nav>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<!-- jQuery Custom Scroller CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
</script>
</body>
</html>
Site.css
#import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a, a:hover, a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
/* ---------------------------------------------------
SIDEBAR STYLE
----------------------------------------------------- */
#sidebar {
width: 250px;
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 999;
background: #367fa9;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #3c8dbc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #367fa9;
background: #fff;
}
#sidebar ul li.active > a, a[aria-expanded="true"] {
color: #fff;
background: #3c8dbc;
}
a[data-toggle="collapse"] {
position: relative;
}
a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
content: '\e259';
display: block;
position: absolute;
right: 20px;
font-family: 'Glyphicons Halflings';
font-size: 0.6em;
}
a[aria-expanded="true"]::before {
content: '\e260';
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #3c8dbc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
/* ---------------------------------------------------
CONTENT STYLE
----------------------------------------------------- */
#content {
width: calc(100% - 250px);
padding: 40px;
min-height: 100vh;
transition: all 0.3s;
position: absolute;
top: 0;
right: 0;
}
#content.active {
width: 100%;
}
/* ---------------------------------------------------
MEDIAQUERIES
----------------------------------------------------- */
#media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#content {
width: 100%;
}
#content.active {
width: calc(100% - 250px);
}
#sidebarCollapse span {
display: none;
}
}
I'm trying to style the current/active nav for each page and it's just not working. I am at a loss here. Any help would be greatly appreciated. I am only using one nav for all five "pages" (I prefer the content/"page" to slide while the nav persists).
Here's my .js
if ($.mobile.activePage.attr("id") == "home") {
$('#home_').addClass('.activeNav');
}
if ($.mobile.activePage.attr("id") == "solutions") {
$('#solutions_').addClass('.activeNav');
}
if ($.mobile.activePage.attr("id") == "pension") {
$('#pension_').addClass('.activeNav');
}
if ($.mobile.activePage.attr("id") == "team") {
$('#team_').addClass('.activeNav');
}
if ($.mobile.activePage.attr("id") == "careers") {
$('#careers_').addClass('.activeNav');
}
html:
<nav data-role="navbar"><ul>
<li><a id="home_" href="#home" data-transition="slide">Home</a></li>
<li><a id="solutions_" href="#solutions" data-transition="slide">Solutions</a></li>
<li><a id="pension_" href="#pension" data-transition="slide">Pension</a></li>
<li><a id="team_" href="#team" data-transition="slide">Team</a></li>
<li><a id="careers_" href="#careers" data-transition="slide">Careers</a></li>
</ul></nav>
CSS:
nav {position: fixed; bottom: 0; z-index: 2000;}
nav ul {position: fixed; bottom: 0; width: 100%; list-style-type: none;}
nav ul li {width: 20%; padding: 0; float: left; text-align: center; font-size: 12px; text-align: center;
box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
line-height: 20px;
}
nav ul li a {height: 70px; margin: 0 auto -10px auto; display: block;
background-color: #eeeeee; text-decoration: none; padding-top: 5px;
font-weight: bold; color: #325d8a; text-shadow: 0 1px 1px white;
font-family: Helvetica,Arial,sans-serif !important;
white-space: nowrap; border: 1px solid #201d1d !important;
box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
-moz-box-shadow: inset 0 0 25px #858585;
-webkit-box-shadow: inset 0 0 25px #858585;
box-shadow: inset 0 0 25px #858585;
}
nav ul li a:hover {background-color: #999;}
nav ul li a.activeNav {background-color: red !important;}
Here's your solution. I have removed buttons ID's and compared the active page ID with links href. To override the background color, you need to use background webkits. Below is a working example.
HTML
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>Home</h1>
<nav data-role="navbar">
<ul>
<li>Home
</li>
<li>Solutions
</li>
<li>Pension
</li>
</ul>
</nav>
</div>
</div>
<div data-role="page" id="solutions">
<div data-role="header" data-position="fixed">
<h1>Solutions</h1>
<nav data-role="navbar">
<ul>
<li>Home
</li>
<li>Solutions
</li>
<li>Pension
</li>
</ul>
</nav>
</div>
</div>
<div data-role="page" id="pension">
<div data-role="header" data-position="fixed">
<h1>Pension</h1>
<nav data-role="navbar">
<ul>
<li>Home
</li>
<li>Solutions
</li>
<li>Pension
</li>
</ul>
</nav>
</div>
</div>
JS
$(document).on('pageshow', function () {
var obj = $(document).find('nav[data-role="navbar"] a');
$.each(obj, function (i, val) {
$(this).removeClass('activeNav');
var active = '#' + $.mobile.activePage[0].id;
if ($(this).attr('href') == active) {
$(this).addClass('activeNav');
}
});
});
CSS
nav {position: fixed; bottom: 0; z-index: 2000;}
nav ul {position: fixed; bottom: 0; width: 100%; list-style-type: none;}
nav ul li {width: 20%; padding: 0; float: left; text-align: center; font-size: 12px; text-align: center;
box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
line-height: 20px;
}
nav ul li a {height: 70px; margin: 0 auto -10px auto; display: block;
background-color: #eeeeee; text-decoration: none; padding-top: 5px;
font-weight: bold; color: #325d8a; text-shadow: 0 1px 1px white;
font-family: Helvetica,Arial,sans-serif !important;
white-space: nowrap; border: 1px solid #201d1d !important;
box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
-moz-box-shadow: inset 0 0 25px #858585;
-webkit-box-shadow: inset 0 0 25px #858585;
box-shadow: inset 0 0 25px #858585;
}
nav ul li a:hover {background-color: #999;}
nav ul li a.activeNav {
background: rgb(255,26,0);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmYxYTAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmMWEwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(-45deg, rgba(255,26,0,1) 0%, rgba(255,26,0,1) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,26,0,1)), color-stop(100%,rgba(255,26,0,1)));
background: -webkit-linear-gradient(-45deg, rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%);
background: -o-linear-gradient(-45deg, rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%);
background: linear-gradient(135deg, rgba(255,26,0,1) 0%,rgba(255,26,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1a00', endColorstr='#ff1a00',GradientType=1 );
}
Working example.
I have an issues with my first ASP.MVC 4 project where one page (only bound page so far) is showing the type of the collection at the top of the main content area. I have tried getting rid of it but am at a loss.
I'm pretty sure its something I have done but can't fix it. Any help???
Issue Here
IE9 Debug on item
Controller
Public Class FailuresController
Inherits Controller
Function Index(model As IEnumerable(Of QSmartRectificationProvider.RectificationFaults)) As ActionResult
ViewData("Message") = "Open Faults"
Return View(Session("Failures"))
End Function
End Class
_Layout.vbhtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>QSmart Rectifications</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/themes/base/css", "~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-right">
<nav>
<ul id="menu">
<li>#Html.ActionLink("Log Out", "Index", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required:=false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<p>#DateTime.Now.Year - JCB Excavators LTD</p>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required:=False)
</body>
</html>
Index.vbhtml
#model QSmartRectification.QSmartRectificationProvider.RectificationFaults
#Code
ViewData("Title") = "Open Failures"
End Code
#section featured
<section class="featured">
<div class="content-wrapper" >
<p class="site-title float-left">#Html.ActionLink("QSmart Rectification Sign Off", "Index", "Home")</p>
<input type="image" src="../../Images/Product.png" />
</div>
</section>
End Section
<br />
#Using Html.BeginForm()
#Html.ValidationSummary()
#<fieldset class="fieldset clear-fix">
<legend>Open Faults</legend>
<section class="content">
<ul class="column">
#For Each item As QSmartRectification.QSmartRectificationProvider.RectificationFaults In Model
#<li>
<section class="block">
<img alt="../../Images/Default.png"; src="#String.Format("../../Images/{0}.png", item.MajorAssembly)"/>
<label class="header">Zone</label>
<label>#item.ZoneName</label>
<label class="header">Major Assembly</label>
<label>#item.MajorAssembly</label>
<label class="header">Sub Assembly</label>
<label>#item.SubAssembly</label>
<label class="header">Component Assembly</label>
<label>#item.ComponentAssembly</label>
<label class="header">Business Test</label>
<label>#item.BusinessTest</label>
<label class="header">Fault Code</label>
<label>#item.FaultCode</label>
<label class="header">Fault Code Detail</label>
<label>#item.FaultCodeDetail</label>
</section>
</li>
Next
</ul>
</section>
</fieldset>
End Using
Site.css
html {
margin: 0;
padding: 0;
background-color:#fff;
}
body {
background-color: #fff;
border-top: solid 10px #fff;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}
a {
color: #333;
outline: none;
padding-left: 3px;
padding-right: 3px;
text-decoration: none;
clear:none;
}
b
a:link, a:visited,
a:active, a:hover {
color: #333;
}
a:hover {
text-decoration:underline;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear-fix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
h1, h2, h3,
h4, h5, h6 {
color: #fff;
margin-bottom: 0;
padding-bottom: 0;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.75em;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1.1em;
}
h5, h6 {
font-size: 1em;
}
/* main layout
----------------------------------------------------------*/
.content-wrapper {
margin: 0 auto;
max-width: 960px;
background-color:#fff;
}
#body {
clear: both;
padding-bottom: 35px;
}
footer {
clear: both;
font-size: .8em;
height: 100px;
}
footer .float-left,
footer .float-right {
float: none;
}
footer {
text-align: center;
height: auto;
padding: 10px 0;
}
footer p {
margin: 0;
color:#999;
}
/* menu
----------------------------------------------------------*/
ul#menu {
font-size: 1.3em;
font-weight: 600;
margin: 0;
text-align: right;
}
ul#menu li {
display: inline;
list-style: none;
padding-left: 15px;
}
ul#menu li a {
background: none;
color:#999;
text-decoration: none;
font-size: 2em;
}
ul#menu li a:hover {
color: #333;
text-decoration: none;
}
/* page elements
----------------------------------------------------------*/
/* featured */
.featured {
background-color:#fff;
}
.featured .content-wrapper {
background-color: #eb7c04;
background-image: -ms-linear-gradient(left, #eb7c04 0%, #fff 100%);
background-image: -o-linear-gradient(left, #eb7c04 0%, #fff 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #f8b589), color-stop(1, #fff));
background-image: -webkit-linear-gradient(left, #eb7c04 0%, #fff 100%);
background-image: linear-gradient(left, #eb7c04 0%, #fff 100%);
color: #f8b589;
padding: 5px 40px 5px 40px;
text-align:right;
display:normal;
}
.featured .site-title {
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 3em;
color:#fff;
margin: 20px 0;
padding-top:10px;
}
.featured hgroup.title h1, .featured hgroup.title h2 {
color: #fff;
}
.featured p {
font-size: 1.1em;
}
/* page titles */
hgroup.title {
margin-bottom: 10px;
}
hgroup.title h1, hgroup.title h2 {
display: inline;
}
hgroup.title h2 {
font-weight: normal;
margin-left: 3px;
}
/* features */
section.feature {
width: 300px;
float: left;
padding: 10px;
}
/* ordered list */
ol.round {
list-style-type: none;
padding-left: 0;
}
ol.round li {
margin: 25px 0;
padding-left: 45px;
}
/* content */
article {
float: left;
width: 70%;
}
aside {
float: right;
width: 25%;
}
aside ul {
list-style: none;
padding: 0;
}
aside ul li {
background: url("../Images/bullet.png") no-repeat 0 50%;
padding: 2px 0 2px 20px;
}
label {
padding-right: 20px;
text-indent: -15px;
}
/* ajax login/registration dialog */
.ui-dialog {
font-family: inherit;
font-size: 1.0em;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
border: 0 none;
}
.ui-dialog input {
font-family: inherit;
font-size: 1.25em;
}
.ui-dialog-titlebar {
color: inherit;
font-weight: inherit;
border: 0 none;
background: none;
float: right;
}
.ui-dialog-titlebar-close {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}
.ui-widget-header {
border: 0 none;
background: none;
}
.modal-popup {
}
.modal-popup input[type="text"],
.modal-popup input[type="password"] {
width: 90%;
}
/* info and errors */
.message-info {
border: 1px solid;
clear: both;
padding: 10px 20px;
}
.message-error {
clear: both;
color: #e80c4d;
font-size: 1.1em;
font-weight: bold;
margin: 20px 0 10px 0;
}
.message-success {
color: #7ac0da;
font-size: 1.3em;
font-weight: bold;
margin: 20px 0 10px 0;
}
.error {
color: #e80c4d;
}
/* styles for validation helpers */
.field-validation-error {
color: #e80c4d;
font-weight: bold;
}
.field-validation-valid {
display: none;
}
input[type="text"].input-validation-error,
input[type="password"].input-validation-error {
border: 1px solid #e80c4d;
}
.validation-summary-errors {
color: #e80c4d;
font-weight: bold;
font-size: 1.1em;
}
.validation-summary-valid {
display: none;
}
/********************
* Mobile Styles *
********************/
#media only screen and (max-width: 850px) {
/* header
----------------------------------------------------------*/
header .float-left,
header .float-right {
float: none;
}
/* logo */
header .site-title {
margin: 10px;
text-align: center;
}
/* menu */
nav {
margin-bottom: 5px;
}
ul#menu {
margin: 0;
padding: 0;
text-align: center;
}
ul#menu li {
margin: 0;
padding: 0;
}
/* main layout
----------------------------------------------------------*/
.main-content,
.featured + .main-content {
background-position: 10px 0;
}
.content-wrapper {
padding-right: 10px;
padding-left: 10px;
background-color:#fff;
}
.featured .content-wrapper {
padding: 10px;
}
/* page content */
article, aside {
float: none;
width: 100%;
}
/* ordered list */
ol.round {
list-style-type: none;
padding-left: 0;
}
ol.round li {
padding-left: 10px;
margin: 25px 0;
}
ol.round li.zero,
ol.round li.one,
ol.round li.two,
ol.round li.three,
ol.round li.four,
ol.round li.five,
ol.round li.six,
ol.round li.seven,
ol.round li.eight,
ol.round li.nine {
background: none;
}
/* features */
section.feature {
float: none;
padding: 10px;
width: auto;
}
section.feature img {
color: #999;
content: attr(alt);
font-size: 1.5em;
font-weight: 600;
}
}
.fieldset {
border-radius: -moz-border-radius(15px);
border-radius: -webkit-border-radius(15px);
border-radius: -ms-border-radius(15px);
border-radius:15px;
width: 100%;
background: #f7d7a5;
padding: 3px;
margin-left:10px;
margin-right:10px;
}
.fieldset legend {
background: #CCA383;
padding: 6px;
font-weight: bold;
border-radius: -moz-border-radius(15px);
border-radius: -webkit-border-radius(15px);
border-radius: -ms-border-radius(15px);
border-radius:15px;
}
/* content layouts
----------------------------------------------------------*/
.content {
position: relative;
float: left;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-ms-border-radius: 15px;
border-radius: 15px;
margin-right: 15px;
margin-left: 15px;
}
.content h2
{
font-size: 3em;
font-weight: 600;
color:red;
}
.content label.checkbox {
display: inline;
}
.content input[type="text"],
.content input[type="password"] {
border: 1px solid #e2e2e2;
color: #333;
font-size: 4em;
width: 400px;
}
.content input[type="text"]:focus,
.content input[type="password"]:focus {
border: 1px solid #7ac0da;
}
.content label {
font-size: 4em;
font-weight: 600;
}
.content input[type="submit"],.content input[type="button"] {
background-color: #eb7c04;
background: #eb7c04; /* Old browsers */
background: -moz-linear-gradient(top, #eb7c04 1%, #f1c487 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#eb7c04), color-stop(100%,#f1c487)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eb7c04 1%,#f1c487 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eb7c04 1%,#f1c487 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eb7c04 1%,#f1c487 100%); /* IE10+ */
background: linear-gradient(top, #eb7c04 1%,#f1c487 100%); /* W3C */
border: 4px solid #000;
border-radius: -moz-border-radius(15px);
border-radius: -webkit-border-radius(15px);
border-radius: -ms-border-radius(15px);
border-radius:15px;
cursor: pointer;
font-size: 3em;
font-weight: 600;
padding: 7px;
}
.content ul.column {
width: 100%;
padding: 0;
margin: 10px 0;
list-style-type: none;
}
.content ul.column li {
float: left;
max-width: 230px;
display: inline;
}
.content .block {
margin: 5px;
padding: 10px;
background: #eb7c04;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius:10px;
height: 400px;
width: 200px;
max-height: 400px;
max-width: 200px;
min-height: 400px;
min-width: 200px;
}
.content .block a {
color: #FFF;
}
.content .block img {
width: 89%;
height: 100px;
padding: 5px;
margin: 0px;
background:#fff;
-ms-interpolation-mode: bicubic;
}
.content .block label
{
font-weight: 200;
font-size: 1em;
text-indent: 5px;
display: block;
}
.content .block label.header
{
font-weight: 600;
text-decoration: underline;
}
View Source snippet
<div id="body">
<section class="featured">
<div class="content-wrapper">
<p class="site-title float-left">
QSmart Rectification Sign Off
</p>
<input type="image" src="../../Images/Product.png" />
</div>
</section>
<section class="content-wrapper main-content clear-fix">
System.Linq.OrderedEnumerable`2[QSmartRectification.QSmartRectificationProvider.RectificationFaults,System.Int64] QSmartRectification.QSmartRectificationProvider.RectificationFaults
<br />
<form action="/Failures" method="post">
<div class="validation-summary-valid" data-valmsg-summary="true">
<ul>
<li style="display: none;"></li>
</ul>
</div>
<fieldset class="fieldset clear-fix">
<legend>Open Faults</legend>
<section class="content">
<ul class="column">
<li>
<section class="block">
<img alt="../../Images/Default.png" src="../../Images/Hydraulic System.png" ;="" />
<label class="header">Zone</label>
<label>Wheeled SIP 1</label>
<label class="header">Major Assembly</label>
<label>Hydraulic System</label>
<label class="header">Sub Assembly</label>
<label>Valve Blocks</label>
<label class="header">Component Assembly</label>
<label>Hammer Valve</label>
<label class="header">Business Test</label>
<label>Hammer Hoses</label>
<label class="header">Fault Code</label>
<label>Adjust / Align</label>
<label class="header">Fault Code Detail</label>
<label>Fouling</label>
</section>
</li>
<li>
<section class="block">
<img alt="../../Images/Default.png" src="../../Images/Engine Bay.png" ;="" />
<label class="header">Zone</label>
<label>Wheeled SIP 1</label>
<label class="header">Major Assembly</label>
<label>Engine Bay</label>
<label class="header">Sub Assembly</label>
<label>Air Conditioning</label>
<label class="header">Component Assembly</label>
<label>Compressor</label>
<label class="header">Business Test</label>
<label>Installation</label>
<label class="header">Fault Code</label>
<label>Adjust / Align</label>
<label class="header">Fault Code Detail</label>
<label>Twisted</label>
</section>
</li>
Model snippet from WCF Service
'''<remarks/>
<System.CodeDom.Compiler.GeneratedCodeAttribute("System.Xml", "4.0.30319.17626"), _
System.SerializableAttribute(), _
System.Diagnostics.DebuggerStepThroughAttribute(), _
System.ComponentModel.DesignerCategoryAttribute("code"), _
System.Xml.Serialization.XmlTypeAttribute([Namespace]:="http://schemas.datacontract.org/2004/07/vFrame.Service.Qsmart.Sync")> _
Partial Public Class RectificationFaults
Inherits Object
Implements System.ComponentModel.INotifyPropertyChanged
Private auditScoreField As String
Private businessTestField As String
Private commentField As String
Private componentAssemblyField As String
Private createdByField As String
Private failureIDField As Long
Private failureIDFieldSpecified As Boolean
Private faultField As String
Private faultAreaField As String
Private faultCodeField As String
Private faultCodeDetailField As String
Private fixedByCommentField As String
Private fixedByFaultRectificationIDField As Integer
Private fixedByFaultRectificationIDFieldSpecified As Boolean
Private fixedByIDField As Integer
Private fixedByIDFieldSpecified As Boolean
Private majorAssemblyField As String
Private modelNameField As String
Private shortagePartField As String
Private subAssemblyField As String
Private zoneNameField As String
Ok a couple of things, remove the # symbol from the fieldset element second change the for Each syntax and last it's a recomedation you should use the #html helpers instead using the plain html, you code should see like this
<fieldset class="fieldset clear-fix">
<legend>Open Faults</legend>
<ul>
#For Each item In Model
Dim currentItem = item
#<li>
<section class="content">
<img alt="../../Images/Default.png"; src="#String.Format("../../Images/{0}.png", item.MajorAssembly)"/>
</section>
<label class="header">Zone</label>
<label>#item.ZoneName</label>
</li>
Next
</ul>
UPDATE
Check the Action of your controller, because assuming that you're calling this action from a wcf service, you should passed the data to the view like this
Public Class FailuresController
Inherits Controller
Function Index(model As IEnumerable(Of QSmartRectificationProvider.RectificationFaults)) As ActionResult
ViewData("Message") = "Open Faults"
'Return View(Session("Failures"))
Return View(model) 'this is how the data is sending to the view
End Function
End Class