messed with the shifting of tiles (move them individually now), still…

… need to do more

android/JoynMeSwipeTileActivity/assets/www/src/index.html

@@ -15,18 +15,28 @@
 
 <div class="tileContainer" id="r1">
       <ul>
-      <li><a href="#" id="t1">event one</a></li>
-      <li><a href="#" id="t2">event two</a></li>
+	   <li><a href="#" id="t0">event one</a></li>
+      <li><a href="#" id="t1">event two</a></li>
+      <li><a href="#" id="t2">event three</a></li>
       </ul>
 </div>
 
+<div class="clear"></div>
+
 <div class="tileContainer" id="r2">
       <ul>
       <li><a href="#" id="t3">event one</a></li>
       <li><a href="#" id="t4">event two</a></li>
       </ul>
 </div>
 
+<div class="tileContainer" id="r3">
+      <ul>
+      <li><a href="#" id="t5">event one</a></li>
+      <li><a href="#" id="t6">event two</a></li>
+      </ul>
+</div>
+
 <!--
  <div data-role="page" id="swipemenu">
   <div data-role="header">

android/JoynMeSwipeTileActivity/assets/www/src/jquery-mobile-custom.css

@@ -82,3 +82,8 @@
 .ui-btn-down-r { border: 1px solid #225377; background: #79ae21; font-weight: bold; color: #fff; text-shadow: 0 -1px 1px #225377; background-image: -moz-linear-gradient(top, #bc770f, #e6590c); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #bc770f),color-stop(1, #e6590c));   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#bc770f', EndColorStr='#e6590c')"; }
 .ui-btn-down-r a.ui-link-inherit { color: #fff; }
 .ui-btn-up-r, .ui-btn-hover-r, .ui-btn-down-r { font-family: Helvetica, Arial, sans-serif; }
+
+
+.clear{
+clear:both;
+}

android/JoynMeSwipeTileActivity/assets/www/src/jquery-mobile-custom.js

@@ -8,9 +8,11 @@ $(function(){
 			// remove any existing swipe areas
 			$('.divSwipe').remove();
 			// add swipe event to the list item, removing it first (if it exists)
-			$('ul li').unbind('swiperight').bind('swiperight', function(e){
+			$('ul li').unbind('swiperight').bind('swiperight click', function(e){ // FIXME remove click for the phone
 				// reference the just swiped list item
 				var $li = $(this);
+				var tileId = e.target.id;
+
 				// remove all swipe divs first
 				$('.divSwipe').remove();
 				// create buttons and div container
@@ -28,7 +30,7 @@ $(function(){
 				// insert swipe div into list item
 				$li.prepend($divSwipe);
 
-				var name = '#r1';
+				var name = '#t0';
 
 				$(name).animate({
 				    marginLeft: "3in",
@@ -48,5 +50,52 @@ $(function(){
 					$('body').unbind('tap');
 				});
 			});
+
+			// copied above and editing it now lol
+
+			$('ul li').unbind('swipeleft').bind('swipeleft', function(e){
+				// reference the just swiped list item
+				var $li = $(this);
+				var tileId = e.target.id;
+
+				// remove all swipe divs first
+				$('.divSwipe').remove();
+				// create buttons and div container
+				var $divSwipe = $('<div class="divSwipe"></div>');
+				var $myBtn01 = $('<a>Button One</a>')
+								.attr({
+									'class': 'aSwipeBtn ui-btn-up-b',
+									'href': 'page.html'
+								});
+				var $myBtn02 = $('<a>Button Two</a>')
+								.attr({
+									'class': 'aSwipeBtn ui-btn-up-e',
+									'href': 'page.html'
+								});
+				// insert swipe div into list item
+				$li.prepend($divSwipe);
+
+				var name = '#r1';
+
+				$(name).animate({
+				    marginLeft: "-3in",
+			  	}, 400 );
+
+				// insert buttons into divSwipe
+
+				//$divSwipe.prepend($myBtn01,$myBtn02).show(1000);
+
+				// add escape route for swipe menu
+				$('body').bind('tap', function(e){
+					// if the triggering object is a button, fire it's tap event
+					if (e.target.className.indexOf('aSwipeBtn') >= 0) $(e.target).trigger('click'); 
+					// remove any existing cancel buttons
+					$('.divSwipe').remove();
+					// remove the event
+					$('body').unbind('tap');
+				});
+			});
+
+})
 
-})
+// to get what was clicked on, look at function(event) -> event is important because that what was clicked on. not $li. event.target.id (get the id of the targeted thing)

android/JoynMeSwipeTileActivity/assets/www/src/tile/tile.css

@@ -37,5 +37,11 @@ li {
 
 
     .tileContainer{
-      width: 320px;
+      /*width: 320px;*/
+	  overflow:hidden;
     }
+
+	#t1 {
+	position:absolute;
+left:100px;
+	}