Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Fully functional on the iPhone, including looking good at most zoom l…

…evels.
  • Loading branch information...
commit 20a7783e9ca716f8ac3da9ed670253a8795fca89 1 parent c3a4c14
@jqr jqr authored
View
5 jquery-demo.html
@@ -8,8 +8,11 @@
<script src="jquery/iphone-style-checkboxes.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
<style type="text/css">
+ body {
+ padding: 10px;
+ }
.css_sized_container .iPhoneCheckContainer {
- width: 300px;
+ width: 250px;
}
</style>
View
88 jquery/iphone-style-checkboxes.js
@@ -48,16 +48,16 @@
// Automatically resize the control
if (options.resizeContainer) {
var max = (onlabel.width() > offlabel.width()) ? onlabel.width() : offlabel.width();
- container.css({ width: max + handle.width() + 24 });
+ container.css({ width: max + handle.width() + 15 });
}
- offlabel.css({ width: container.width() - 12 });
+ offlabel.css({ width: container.width() - 5 });
- var rightside = container.width() - handle.width() - 8;
+ var rightside = container.width() - handle.width() - 6;
if (elem.is(':checked')) {
handle.css({ left: rightside });
- onlabel.css({ width: rightside });
+ onlabel.css({ width: rightside + 4 });
offspan.css({ marginRight: -rightside });
} else {
handle.css({ left: 0 });
@@ -65,51 +65,71 @@
onspan.css({ marginLeft: -rightside });
}
- // When the mouse comes up, leave drag state
- $(document).mouseup(function(e) {
- if ($.iphoneStyle.clicking != handle) { return false }
-
- if (!$.iphoneStyle.dragging) {
- var is_onstate = elem.attr('checked');
- elem.attr('checked', !is_onstate);
- } else {
- var p = (e.pageX - $.iphoneStyle.dragStartPosition) / rightside;
- elem.attr('checked', (p >= 0.5));
- }
-
- $.iphoneStyle.clicking = null;
- $.iphoneStyle.dragging = null;
- elem.change();
-
+ // A mousedown anywhere in the control will start tracking for dragging
+ var down = function(e) {
+ e.preventDefault();
+ $.iphoneStyle.clicking = handle;
+ var x = e.pageX || e.changedTouches[0].pageX;
+ $.iphoneStyle.dragStartPosition = x - (parseInt(handle.css('left')) || 0);
return false;
- });
-
+ };
+
+ container.mousedown(down);
+ container.each(function() { this.addEventListener('touchstart', down, false); });
+
+
// As the mouse moves on the page, animate if we are in a drag state
- $(document).mousemove(function(e) {
+ var move = function(e) {
if ($.iphoneStyle.clicking != handle) { return }
-
+ e.preventDefault();
+
if (e.pageX != $.iphoneStyle.dragStartPosition) {
$.iphoneStyle.dragging = true;
}
- var p = (e.pageX - $.iphoneStyle.dragStartPosition) / rightside;
+ var x = e.pageX || e.changedTouches[0].pageX;
+
+ var p = (x - $.iphoneStyle.dragStartPosition) / rightside;
if (p < 0) { p = 0; }
if (p > 1) { p = 1; }
handle.css({ left: p * rightside });
- onlabel.css({ width: p * rightside });
+ onlabel.css({ width: p * rightside + 4 });
offspan.css({ 'marginRight': -p * rightside });
onspan.css({ 'marginLeft': -(1 - p) * rightside });
return false;
- });
+ };
+
+ $(document).mousemove(move);
+ document.addEventListener('touchmove', move, false);
- // A mousedown anywhere in the control will start tracking for dragging
- container.mousedown(function(e) {
- $.iphoneStyle.clicking = handle;
- $.iphoneStyle.dragStartPosition = e.pageX - (parseInt(handle.css('left')) || 0);
+
+ // When the mouse comes up, leave drag state
+ var up = function(e) {
+ if ($.iphoneStyle.clicking != handle) { return false }
+ e.preventDefault();
+
+ if (!$.iphoneStyle.dragging) {
+ var is_onstate = elem.attr('checked');
+ elem.attr('checked', !is_onstate);
+ } else {
+ var x = e.pageX || e.changedTouches[0].pageX;
+
+ var p = (x - $.iphoneStyle.dragStartPosition) / rightside;
+ elem.attr('checked', (p >= 0.5));
+ }
+
+ $.iphoneStyle.clicking = null;
+ $.iphoneStyle.dragging = null;
+ elem.change();
+
return false;
- });
+ };
+
+ $(document).mouseup(up);
+ document.addEventListener('touchend', up, false);
+
// Animate when we get a change event
elem.change(function() {
@@ -117,13 +137,13 @@
new_left = (is_onstate) ? rightside : 0;
handle.animate({ left: new_left }, options.duration);
- onlabel.animate({ width: new_left }, options.duration);
+ onlabel.animate({ width: new_left + 4 }, options.duration);
onspan.animate({ marginLeft: new_left - rightside }, options.duration);
offspan.animate({ marginRight: -new_left }, options.duration);
});
// Disable text selection
- $(container, onlabel, offlabel, handle).mousedown(function() { return false; });
+ $(container, onlabel, offlabel, handle).mousedown(function(e) { e.preventDefault(); return false; });
if ($.browser.ie) {
$(container, onlabel, offlabel, handle).bind('startselect', function() { return false; });
}
View
5 prototype-demo.html
@@ -9,8 +9,11 @@
<script src="prototype/iphone-style-checkboxes.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
<style type="text/css">
+ body {
+ padding: 10px;
+ }
.css_sized_container .iPhoneCheckContainer {
- width: 300px;
+ width: 250px;
}
</style>
View
70 prototype/iphone-style-checkboxes.js
@@ -27,19 +27,19 @@ var iPhoneStyle = function(selector_or_elems, options) {
if (options.resizeHandle) {
var min = (onlabel.getWidth() < offlabel.getWidth()) ? onlabel.getWidth() : offlabel.getWidth();
- handle.setStyle({width: min - 8 + 'px'});
+ handle.setStyle({width: min + 'px'});
}
if (options.resizeContainer) {
var max = (onlabel.getWidth() > offlabel.getWidth()) ? onlabel.getWidth() : offlabel.getWidth();
container.setStyle({width: max + handle.getWidth() + 12 + 'px'});
}
- offlabel.setStyle({width: container.getWidth() - 12 + 'px'});
+ offlabel.setStyle({width: container.getWidth() - 5 + 'px'});
- var rightside = container.getWidth() - handle.getWidth() - 4;
+ var rightside = container.getWidth() - handle.getWidth() - 3;
if (elem.checked) {
handle.setStyle({ left: rightside + 'px' });
- onlabel.setStyle({ width: rightside + 'px' });
+ onlabel.setStyle({ width: rightside + 4 + 'px' });
offspan.setStyle({ 'marginRight': rightside + 'px' });
} else {
handle.setStyle({ left: 0 });
@@ -52,43 +52,43 @@ var iPhoneStyle = function(selector_or_elems, options) {
var p = handle.positionedOffset().first() / rightside;
new Effect.Tween(null, p, Number(is_onstate), { duration: options.duration / 1000 }, function(p) {
handle.setStyle({ left: p * rightside + 'px' });
- onlabel.setStyle({ width: p * rightside + 'px' });
+ onlabel.setStyle({ width: p * rightside + 4 + 'px' });
offspan.setStyle({ 'marginRight': -p * rightside + 'px' });
onspan.setStyle({ 'marginLeft': -(1 - p) * rightside + 'px' });
});
};
- document.observe('mouseup', function(e) {
+ var down = function(e) {
e.stop();
- if (iPhoneStyle.clicking == handle) {
- if (!iPhoneStyle.dragging) {
- var is_onstate = elem.checked;
- elem.writeAttribute('checked', !is_onstate);
- } else {
- var p = (Event.pointerX(e) - iPhoneStyle.dragStartPosition) / rightside;
- elem.writeAttribute('checked', (p >= 0.5));
- }
- iPhoneStyle.clicking = null;
- iPhoneStyle.dragging = null;
- elem.change();
- }
- });
+ iPhoneStyle.clicking = handle;
+ var x = Event.pointerX(e) || e.changedTouches[0].pageX;
+ iPhoneStyle.dragStartPosition = x - (Number(handle.style.left.replace(/px$/, "")) || 0);
+ Event.stop(e);
+ };
- document.observe('mousemove', function(e) {
+ container.observe('mousedown', down);
+ container.observe('touchstart', down);
+
+
+ var move = function(e) {
if (iPhoneStyle.clicking == handle) {
e.stop();
- if (Event.pointerX(e) != iPhoneStyle.dragStartPosition) {
+ var x = Event.pointerX(e) || e.changedTouches[0].pageX;
+ if (x != iPhoneStyle.dragStartPosition) {
iPhoneStyle.dragging = true;
}
- var p = (Event.pointerX(e) - iPhoneStyle.dragStartPosition) / rightside;
+ var p = (x - iPhoneStyle.dragStartPosition) / rightside;
if (p < 0) { p = 0; }
if (p > 1) { p = 1; }
handle.setStyle({ left: p * rightside + 'px' });
- onlabel.setStyle({ width: p * rightside + 'px' });
+ onlabel.setStyle({ width: p * rightside + 4 + 'px' });
offspan.setStyle({ 'marginRight': -p * rightside + 'px' });
onspan.setStyle({ 'marginLeft': -(1 - p) * rightside + 'px' });
}
- });
+ };
+
+ document.observe('mousemove', move);
+ document.observe('touchmove', move);
container.observe('mousedown', function(e) {
e.stop();
@@ -97,10 +97,28 @@ var iPhoneStyle = function(selector_or_elems, options) {
return false;
});
+ var up = function(e) {
+ if (iPhoneStyle.clicking == handle) {
+ e.stop();
+ if (!iPhoneStyle.dragging) {
+ var is_onstate = elem.checked;
+ elem.writeAttribute('checked', !is_onstate);
+ } else {
+ var x = Event.pointerX(e) || e.changedTouches[0].pageX;
+ var p = (x - iPhoneStyle.dragStartPosition) / rightside;
+ elem.writeAttribute('checked', (p >= 0.5));
+ }
+ iPhoneStyle.clicking = null;
+ iPhoneStyle.dragging = null;
+ elem.change();
+ }
+ };
+ document.observe('touchend', up);
+ document.observe('mouseup', up);
// Disable text selection
- // [container, onlabel, offlabel, handle].invoke('observe', 'mousedown', function(e) { Event.stop(e); return false; });
+ [container, onlabel, offlabel, handle].invoke('observe', 'mousedown', function(e) { e.preventDefault(); return false; });
if (Prototype.Browser.IE) {
- [container, onlabel, offlabel, handle].invoke('observe', 'startselect', function(e) { Event.stop(e); });
+ [container, onlabel, offlabel, handle].invoke('observe', 'startselect', function(e) { Event.stop(e); return false; });
}
});
};
View
15 style.css
@@ -16,11 +16,11 @@
left: 0;
background: url(images/slider_left.png) no-repeat;
z-index: 2;
- padding-left: 4px; }
+ padding-left: 3px; }
.iPhoneCheckHandleRight {
height: 100%;
width: 100%;
- padding-right: 4px;
+ padding-right: 3px;
background: url(images/slider_right.png) no-repeat top right;
z-index: 2; }
.iPhoneCheckHandleCenter {
@@ -41,20 +41,25 @@ label.iPhoneCheckLabelOn, label.iPhoneCheckLabelOff {
position: absolute;
width: auto;
top: 0;
+ padding-top: 5px;
overflow: hidden; }
label.iPhoneCheckLabelOn {
color: #fff;
background: url(images/on.png) no-repeat;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6);
left: 0;
- padding: 5px 0 0 8px;
+ padding-top: 5px;
z-index: 1; }
+ label.iPhoneCheckLabelOn span {
+ padding-left: 8px;
+ }
label.iPhoneCheckLabelOff {
color: #8B8B8B;
background: url(images/off.png) no-repeat right 0;
text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6);
text-align: right;
- right: 0;
- padding: 5px 8px 0 0; }
+ right: 0; }
+ label.iPhoneCheckLabelOff span {
+ padding-right: 8px;
}
Please sign in to comment.
Something went wrong with that request. Please try again.