4 Replies - 830 Views - Last Post: 17 December 2012 - 03:21 AM

#1 south73paw  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 88
  • Joined: 06-October 08

Formatting question re. iOS checklist widget

Posted 17 December 2012 - 01:59 AM

Hi

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! :helpsmilie:

Is This A Good Question/Topic? 0
  • +

Replies To: Formatting question re. iOS checklist widget

#2 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 408
  • View blog
  • Posts: 1,440
  • Joined: 14-September 12

Re: Formatting question re. iOS checklist widget

Posted 17 December 2012 - 02:28 AM

Quote

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.


For that, you could make it as li:nth-child(odd) and it should work :)

regards,
Raghav
Was This Post Helpful? 0
  • +
  • -

#3 south73paw  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 88
  • Joined: 06-October 08

Re: Formatting question re. iOS checklist widget

Posted 17 December 2012 - 02:41 AM

Quote

For that, you could make it as li:nth-child(odd) and it should work :)/>/>


Hi Raghav,

No, that didn't work. Now the first strip of gray is before item one and the next strip is after item 2, then another one after item 4 etc.

The main issue has really been getting rid of the bullet point in the unordered list. I thought that's what
list-style:none;
in the ul tag was supposed to do. If I leave this in the ul tag, the bullets are still visible and I'm pretty sure that's why the vertical alignment of the checkbox and it's label is slightly out of kilter - noticeable in every second gray strip.

I've attached the html and css files (js is in the html file) if it makes things easier too see what I mean. In a regular browser the font is huge, but that's ok - it displays much smaller in Apple's iBooks Author, which is the intended destination.

Thanks

Attached File(s)


This post has been edited by JackOfAllTrades: 17 December 2012 - 07:07 AM
Reason for edit:: Fixed quote tags

Was This Post Helpful? 0
  • +
  • -

#4 raghav.naganathan  Icon User is offline

  • Perfectly Squared ;)
  • member icon

Reputation: 408
  • View blog
  • Posts: 1,440
  • Joined: 14-September 12

Re: Formatting question re. iOS checklist widget

Posted 17 December 2012 - 02:58 AM

Well, I really couldn't understand what you are referring to here when you said bullets before checkbox. I tried your code and this is what it shows.

regards,
Raghav
Was This Post Helpful? 0
  • +
  • -

#5 south73paw  Icon User is offline

  • D.I.C Head

Reputation: 3
  • View blog
  • Posts: 88
  • Joined: 06-October 08

Re: Formatting question re. iOS checklist widget

Posted 17 December 2012 - 03:21 AM

Yep, that's what it's currently displaying like, but it's not quite what I want.

I had wanted items 2, 4, 6, 8 and 10 to have the grey strip over them (i.e. not between items, but on the even items). Hence the li nth-child setting.

This works if the line
list-style: none;
is placed in the ul tag. The bullets were showing when I did this, but I'm now getting the same display as your screen shot (I've been working on this for hours...)

An earlier attempt, using the same css code, is shown below. It demonstrates how I would prefer the grey strip to look like on every 2nd item in the checklist. I hope that makes it clearer.

Thanks

Attached image(s)

  • Attached Image

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1