Generate valid HTML inside label elements

Fixes gh-4

README.md

@@ -30,9 +30,9 @@ Pointer, touch, and mouse events are supported.
 
 Download the [production version][min] (4kb) or the [development version][max] and grab the [CSS][css].
 
-[min]: https://raw.github.com/timmywil/jquery.onoff/0.3.6/dist/jquery.onoff.min.js
-[max]: https://raw.github.com/timmywil/jquery.onoff/0.3.6/dist/jquery.onoff.js
-[css]: https://raw.github.com/timmywil/jquery.onoff/0.3.6/dist/jquery.onoff.css
+[min]: https://raw.github.com/timmywil/jquery.onoff/0.4.0/dist/jquery.onoff.min.js
+[max]: https://raw.github.com/timmywil/jquery.onoff/0.4.0/dist/jquery.onoff.js
+[css]: https://raw.github.com/timmywil/jquery.onoff/0.4.0/dist/jquery.onoff.css
 
 ### With AMD
 
@@ -68,8 +68,8 @@ However, you can also start with the generated HTML to avoid [FOUC](http://en.wi
 <div class="onoffswitch">
   <input type="checkbox" class="onoffswitch-checkbox" id="myonoffswitch" />
   <label class="onoffswitch-label" for="myonoffswitch">
-    <div class="onoffswitch-inner"></div>
-    <div class="onoffswitch-switch"></div>
+    <span class="onoffswitch-inner"></span>
+    <span class="onoffswitch-switch"></span>
   </label>
 </div>
 ```
@@ -188,15 +188,16 @@ var instance = $input.onoff('instance');
 
 ## Release History
 
-**0.3.6** *6/23/2014* Updated `package.json`  
-**0.3.5** *5/12/2014* Fixed regression with iOS devices  
-**0.3.4** *3/26/2014* Update pointertouch  
-**0.3.3** *3/11/2014* Fire change event when checked is changed async  
-**0.3.2** *3/11/2014* Container now inherits classes from the checkbox  
-**0.3.1** *3/3/2014* Minor pointertouch update  
-**0.3.0** *3/3/2014* Update to full-blown pointertouch  
-**0.2.4** *3/3/2014* Integrate [jquery.event.pointertouch](https://github.com/timmywil/jquery.event.pointertouch) into build.  
-**0.1.0** *1/15/2014* First release
+- **0.4.0** *10/30/2014* Corrected content inside label element
+- **0.3.6** *6/23/2014* Updated `package.json`
+- **0.3.5** *5/12/2014* Fixed regression with iOS devices
+- **0.3.4** *3/26/2014* Update pointertouch
+- **0.3.3** *3/11/2014* Fire change event when checked is changed async
+- **0.3.2** *3/11/2014* Container now inherits classes from the checkbox
+- **0.3.1** *3/3/2014* Minor pointertouch update
+- **0.3.0** *3/3/2014* Update to full-blown pointertouch
+- **0.2.4** *3/3/2014* Integrate [jquery.event.pointertouch](https://github.com/timmywil/jquery.event.pointertouch) into build.
+- **0.1.0** *1/15/2014* First release
 
 ## Acknowledgements
 Thanks go out to the team at [proto.io](http://proto.io/) and their elegant CSS.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "onoff",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "ignore": [
     "**/.*",
     "node_modules",

dist/jquery.onoff.css

@@ -25,6 +25,7 @@
 }
 
 .onoffswitch-inner {
+  display: block;
   width: 200%;
   margin-left: -100%;
   -webkit-transition: margin 0.2s ease-in;
@@ -60,6 +61,7 @@
 
 .onoffswitch-switch {
   position: absolute;
+  display: block;
   top: 0;
   bottom: 0;
   right: 40px;

dist/jquery.onoff.js

@@ -1,4 +1,4 @@
-/** jquery.onoff - v0.3.6 - 2014-06-23
+/** jquery.onoff - v0.4.0 - 2014-10-30
 * https://github.com/timmywil/jquery.onoff
 * Copyright (c) 2014 Timmy Willison; Licensed MIT */
 (function(global, factory) {
@@ -168,7 +168,7 @@
 			// Inner
 			var $inner = $label.find('.onoffswitch-inner');
 			if (!$inner.length) {
-				$inner = $('<div/>')
+				$inner = $('<span/>')
 					.addClass('onoffswitch-inner')
 					.prependTo($label);
 			}
@@ -177,7 +177,7 @@
 			// Switch
 			var $switch = $label.find('.onoffswitch-switch');
 			if (!$switch.length) {
-				$switch = $('<div/>')
+				$switch = $('<span/>')
 					.addClass('onoffswitch-switch')
 					.appendTo($label);
 			}

onoff.jquery.json

@@ -2,7 +2,7 @@
   "name": "onoff",
   "title": "On-Off Toggle Switches",
   "description": "Interactive, accessible toggle switches for the web",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "homepage": "https://github.com/timmywil/jquery.onoff",
   "author": {
     "name": "Timmy Willison",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery.onoff",
-  "version": "0.3.6",
+  "version": "0.4.0",
   "description": "Interactive, accessible toggle switches for the web",
   "repository": "timmywil/jquery.onoff",
   "license": "MIT",

src/onoff.js

@@ -115,7 +115,7 @@
 			// Inner
 			var $inner = $label.find('.onoffswitch-inner');
 			if (!$inner.length) {
-				$inner = $('<div/>')
+				$inner = $('<span/>')
 					.addClass('onoffswitch-inner')
 					.prependTo($label);
 			}
@@ -124,7 +124,7 @@
 			// Switch
 			var $switch = $label.find('.onoffswitch-switch');
 			if (!$switch.length) {
-				$switch = $('<div/>')
+				$switch = $('<span/>')
 					.addClass('onoffswitch-switch')
 					.appendTo($label);
 			}

src/onoff.scss

@@ -32,6 +32,7 @@ $switchMargin: 4px;
 }
 
 .onoffswitch-inner {
+  display: block;
 	width: 200%;
 	margin-left: -100%;
 	transition: margin $animationTime $easing;
@@ -62,6 +63,7 @@ $switchMargin: 4px;
 
 .onoffswitch-switch {
 	position: absolute;
+  display: block;
 	top: 0; bottom: 0;
 	right: $width - $switchWidth - ($switchMargin * 2) - ($borderSize * 2);
 	width: $switchWidth; margin: $switchMargin;

test/onoff_test.js

@@ -137,8 +137,8 @@ require({
 				['<div class="onoffswitch">',
 					'<input class="onoffswitch-checkbox">',
 					'<label class="onoffswitch-label">',
-						'<div class="onoffswitch-inner"></div>',
-						'<div class="onoffswitch-switch"></div>',
+						'<span class="onoffswitch-inner"></span>',
+						'<span class="onoffswitch-switch"></span>',
 					'</label>',
 				'</div>'].join(''),