New Topic/Question
Reply
I have a widget using HTML5, Javascript and CSS3. It's doing what I want (checklist for an iBooks Author widget for the iPad), but I can't seem to get the CSS formatting right. My code is below:
CSS:
@charset "utf-8";
/* CSS Document */
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 22px;
text-align: left;
}
h1 {
font-family: Verdana, Geneva, sans-serif;
font-size: 30px;
font-weight: bold;
color: #FF0000;
border-bottom-width: medium;
border-bottom-style: solid;
text-align: center;
padding: 0.4em, 1em;
margin: 3px;
}
#stats { float: right; margin-right: 15px; }
#image { float: right; }
.reset { font-size: medium; margin-left: 5px;}
div.col {
float: left;
margin: 5px 0px;
padding: 2px 2px;
}
ul {
padding: 3px;
margin: 3px;
}
li {
clear: left;
font-size: 22px;
padding: 6px 6px 6px 20px;
margin: 3px;
list-style: none;
}
li input {
float: left;
margin-right: 10px;
width: 50px;
height: 30px;
}
li:nth-child(even) {
background-color: #eee;
}
/* clearfix */
/*list:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }*/
item {
clear: both;
display: block;
border-bottom: 1px solid #EEE;
}
.completed {
text-decoration: line-through;
}
footer {
display: block;
margin-top: 35px;
text-align: right;
font-size: small;
}
HTML and Javascript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="checklistFormatting.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var total = 10
var listdata = []; // data structure array of booleans
var completed = 0;
// check if already in localStorage, item stored as json object
var storedData = localStorage.getItem("listData");
if (storedData) {
// convert to array
listdata = JSON.parse(storedData);
}
else {
// initialize data as false (nothing complete)
for (var i=0; i < total; i++) {
listdata[i] = false;
}
}
// User click checkbox, toggle & store
function checkBoxEvent() {
// figure out what element this is
var id = $(this).attr("id").replace(/[a-z]/g, "");
num = parseInt(id);
// toggle value in array
listdata[num] = (listdata[num]) ? false : true
// store array back to localstorage
localStorage.setItem("listData", JSON.stringify(listdata));
// change classes
if (listdata[num]) { markComplete(num); }
else { unmarkComplete(num); }
}
// mark item as complete
function markComplete(num) {
$('#cb'+num).attr('checked', true);
$('#item'+num).addClass('completed');
completed = completed + 1;
updateCompleted();
}
// unmark item as complete
function unmarkComplete(num) {
$('#cb'+num).attr('checked', false);
$('#item'+num).removeClass('completed');
completed = completed - 1;
updateCompleted();
}
// delete all data
function resetList() {
localStorage.clear();
// reload page to unmark everything
window.location.href=window.location.href
}
// update stats of items completed
function updateCompleted() {
$('#completed').html(completed);
$('#perc').html(100*completed/total);
}
// on document load
$(document).ready(function() {
// loop through list items
for (var i=0; i < total; i++) {
if (listdata[i]) {
// mark items as complete if complete
markComplete(i);
}
}
// attach checkBoxEvent to checkbox and list item
$('.cbox').click(checkBoxEvent);
$('.str').click(checkBoxEvent);
});
</script>
</head>
<body>
<header>
<div id="image"><img src="ACGlogo.gif"></div>
<br />
<h1>Year 9 Website Checklist</h1>
</header>
<!-- STATS -->
<div id="stats">
Complete: <span id="completed">0</span> of 10 (<span id="perc">0</span>%)
<span class="reset"><a href="javascript:resetList()" onclick="return confirm('This will erase all data, continue?');">RESET</a></span>
</div>
<!--Checklist Items-->
<ul>
<li>
<div id="no10" class="col"><input type="checkbox" id="cb10" class="cbox"></div>
<div id="item10" class="col str">Item One</div>
</li>
<li>
<div id="no1" class="col"><input type="checkbox" id="cb1" class="cbox"></div>
<div id="item1" class="col str">Item Two</div>
</li>
<li>
<div id="no2" class="col"><input type="checkbox" id="cb2" class="cbox"></div>
<div id="item2" class="col str">Item Three</div>
</li>
<li>
<div id="no3" class="col"><input type="checkbox" id="cb3" class="cbox"></div>
<div id="item3" class="col str">Item Four</div>
</li>
<li>
<div id="no4" class="col"><input type="checkbox" id="cb4" class="cbox"></div>
<div id="item4" class="col str">Item Five</div>
</li>
<li>
<div id="no5" class="col"><input type="checkbox" id="cb5" class="cbox"></div>
<div id="item5" class="col str">Item Six</div>
</li>
<li>
<div id="no6" class="col"><input type="checkbox" id="cb6" class="cbox"></div>
<div id="item6" class="col str">Item Seven</div>
</li>
<li>
<div id="no7" class="col"><input type="checkbox" id="cb7" class="cbox"></div>
<div id="item7" class="col str">Item Eight</div>
</li>
<li>
<div id="no8" class="col"><input type="checkbox" id="cb8" class="cbox"></div>
<div id="item8" class="col str">Item Nine</div>
</li>
<li>
<div id="no9" class="col"><input type="checkbox" id="cb9" class="cbox"></div>
<div id="item9" class="col str">Item Ten</div>
</li>
</ul>
<footer>
<p>Use this checklist to make sure that your website meets the minimum requirements.</p>
</footer>
</body>
</html>
In the CSS, when I put
list-style:none;in the ul tag, it's ignored - bullet points appear to the left of the checkboxes.
When I moved it to the li tag, the bullets disappear, but then the li:nth-child doesn't work properly - goes in between items 1 and 2, then between items 3-4, 5-6 etc, rather than on every second checklist item.
I hope that makes sense!
Can anyone point out where I'm going wrong? As I mentioned, the javascript is working (data persists, strikethrough appears when checkbox or label checked, reset and stats options work) - it's just the formatting.
Thanks for any help you could give me. I've been looking at this for hours!
MultiQuote
| 