[musasabi]

Hey everyone.

I'm working on a shift-tracking tool for my employer, and JQuery is behaving oddly. I've got a timeline containing certain information about the employee, and a few draggable and resizable blocks under that timeline indicating when breaks were taken, how long lunch was, etc.

The UI looks something like this:



If I click on the first box and attempt to drag it, the other two snap to new positions:



I have no idea why they're doing that.

Then, if I move a box such that its end extends beyond 5:58pm:



The box will snap to 5:58 when resized.



That trait also manifests when I try to drag the end of a box beyond 5:58.

Here's the code from the pieces you can see in the screenshots. Any help would be sincerely appreciated.

<script type="text/javascript"> 

	$(document).ready(function() {
			$("a.iframe").fancybox({
				'transitionIn'	:	'elastic',
				'transitionOut'	:	'elastic',
				'width'			:	625,
				'height'		:	325,
				'speedIn'		:	600, 
				'speedOut'		:	200,
				'overlayColor'		: '#000',
				'overlayOpacity'	: 0.5,
				'onClosed': function() { 
   					parent.location.reload(true); 
  				 }
			});
	});
</script>
<style type="text/css">
.right_align{
	padding-right:8px;
	text-align:right !important;	
}
.call{
	height:50px !important;
	width:1px !important;
	border:0px !important;
	margin:0px !important;
	padding:0px !important;
	background-color:#b3dbe9 !important;
	display:<?=$inline?> !important;
}
.conversion{
	height:50px !important;
	width:1px !important;
	border:0px !important;
	margin:0px !important;
	padding:0px !important;
	background-color:#feb300 !important;
	display:<?=$inline?> !important;
}
.no_call{
	height:50px !important;
	width:1px !important;
	border:0px !important;
	margin:0px !important;
	padding:0px !important;
	background-color:white !important;
	display:<?=$inline?> !important;
}
.call_container{
	width:782px;
	border: 1px solid #CCC;
	height:50px;	
}
	.box {height: 40px;background-color:#9EC9F3 !important; padding:0px !important;margin:0px !important;display:<?=$inline?>;}
	.hours_container{
		width:782px;
		height:50px;
		border:1px solid #CCC;	
		display:<?=$inline?>;
	}
	.left_div{width:50%;height:100%;display:<?=$inline?>;margin:0px;padding:0px;text-align:left;vertical-align:top;}
	.right_div{width:50%;height:100%;display:<?=$inline?>;margin:0px;padding:0px;text-align:right;vertical-align:top;}
	.close_div{width:100%;height:8px;padding:0px;margin:0px;text-align:right;vertical-align:top;}
	.space_div{height:38px;padding:0px;margin:0px;text-align:left;}
	.space_div2{height:12px;padding:0px;margin:0px;}
	.left_time{width:100%;height:16px;padding:0px;margin:0px;text-align:left;color:#FFF;font-size:10px;}
	.right_time{width:100%;height:16px;padding:0px;margin:0px;text-align:right;color:#FFF;font-size:10px;}
	.back_div{width:100%;height:100%;background-color:#06F;}
	.submit_container{
		display:<?=$inline?>;
		width:100px;	
	}
</style>
	<script>
	function get_date(seconds, div){
		var dataString = 'seconds='+seconds;
		$.ajax({
		  type: 'POST',
		  url: 'http://www.cctts.com/cctts_inc/ajax/get_date.php',
		  data: dataString,
		  success: function(data){ 
		  	$('#'+div).html(data)}
		});	
	}
	function get_offset(time){
		var dataString = 'time='+encodeURI(time)+'&type=offset';
		$.ajax({
		  type: 'POST',
		  url: 'http://www.cctts.com/cctts_inc/ajax/get_date.php',
		  data: dataString,
		  success: function(data){ 
		  	return data;
			}
		});	
	
	}
	function get_width(time1, time2){
		var dataString = 'time1='+encodeURI(time1)+'&time2='+encodeURI(time2)+'&type=width';
		$.ajax({
		  type: 'POST',
		  url: 'http://www.cctts.com/cctts_inc/ajax/get_date.php',
		  data: dataString,
		  success: function(data){ 
		  	return data;
			}
		});	
	}
	function save_block(time1, time2, date, del){
		var btid = $('#btid').val();
		var dataString = 'start='+encodeURI(time1)+'&end='+encodeURI(time2)+'&type=save&date='+date+'&delete='+del+'&btid='+btid;
		$.ajax({
		  type: 'POST',
		  async: false,
		  url: 'http://www.cctts.com/cctts_inc/ajax/get_date.php',
		  data: dataString,
		  success: function(data){ 
		  	console.log(data);
			}
		});	
	}
	function save_blocks(id, date){
		var id_string = $('#blocks_'+id).val();
		var ids = id_string.split("-");
		ids.sort(sortNumber);
		var del = 'true';
		for(block in ids){
			console.log('#start_time_'+ids[block]+ ' ' + '#end_time_'+ids[block]);
			save_block(jQuery.trim($('#start_time_'+ids[block]).html()), jQuery.trim($('#end_time_'+ids[block]).html()), date, del)
			del = 'false';
		}
		
	}
	function remove_box(bid, cid){
		$('#box_'+bid).remove();
		var id_string = $('#blocks_'+cid).val();
		var ids = id_string.split("-");
		for(block in ids){
			if(bid==ids[block])
				ids.splice(block, 1);	
		}
		id_string = ids.join("-");
		$('#blocks_'+cid).val(id_string);
	}
	function add_box(cid){
		var box_id = $('#new_box_id').val();
		$('#new_box_id').val(box_id+1);
		var id_string = $('#blocks_'+cid).val();
		var ids = id_string.split("-");
		ids.push(box_id);
		id_string = ids.join("-");
		
		$('#blocks_'+cid).val(id_string);
		
		var box_html ='<div id="box_'+box_id+'" class="ui-widget-content box"><div class="back_div"><table cellspacing="0" cellpadding="0" style="width:100%;height:100%;margin:0px;padding:0px;"><tr><td class="left_div"></td><td class="right_div"><a href="#" onclick="remove_box('+box_id+','+cid+');return false;"><img src="http://www.cctts.com/cctts_img/close_small.png" title="close" border="0" /></a></td></tr><tr><td class="left_div"><div class="left_time" id="start_time_'+box_id+'"></div></td><td class="right_div"><div class="right_time" id="end_time_'+box_id+'"></div></td></tr></table></div></div>';
		
		$('#hours_container_'+cid).append(box_html);

			$('#box_'+box_id).resizable(
				{
					containment: "#hours_container_"+cid,
					grid:2,
					stop: function(event, ui){
						show_hours(box_id, cid);	
					}
				}
				);
				$('#box_'+box_id).draggable({ 
					containment: "#hours_container_"+cid, 
					axis: "x",
					stop: function(event, ui){
						show_hours(box_id, cid);	
					}}
				); 
	}
	var left_offset = 0;
	var submit;
		$(function() {
			<?
			foreach($date_range as $date){
				foreach($punch_array[$date] as $id=>$punch){
				?>
				$('#box_<?=$id?>').resizable(
				{
					containment: "#hours_container_<?=$punch['container_id']?>",
					grid:2,
					stop: function(event, ui){
						show_hours(<?=$id?>, <?=$punch['container_id']?>);	
					}
				}
				);
				$('#box_<?=$id?>').draggable({ 
					containment: "#hours_container_<?=$punch['container_id']?>", 
					axis: "x",
					stop: function(event, ui){
						show_hours(<?=$id?>, <?=$punch['container_id']?>);	
					}}
				); 
			<? }
			}?>
		});
	function save_hours(punch_id){
		var seconds_start = parseInt($('#box_'+punch_id).offset().left-($('#hours_container_'+punch_id).offset().left+1))*60;
		var seconds_long = parseInt($('#box_'+punch_id).width())*60;
	}
	function show_hours(punch_id, cid){
		var seconds_start = parseInt($('#box_'+punch_id).offset().left-($('#hours_container_'+cid).offset().left+1))*60;
		var seconds_long = parseInt($('#box_'+punch_id).width())*60;
		console.log(seconds_start+' '+seconds_long);
		get_date(seconds_start, 'start_time_'+punch_id);
		get_date(seconds_start+seconds_long, 'end_time_'+punch_id);	
	}
	function pos_block(block_id, cid, seconds){
		var left_px = parseInt($('#hours_container_'+cid).offset().left +seconds);
		var top_px = parseInt($('#hours_container_'+cid).offset().top);
		$('#box_'+block_id).offset({ top: top_px, left: left_px });
	}
	$(document).ready(function() {
 		left_offset = 8;
		<?
		foreach($date_range as $date){
				foreach($punch_array[$date] as $id=>$punch){
					$left = (int)((strtotime(date("Y-m-d")." ".date("H:i:s", strtotime($punch['start'])))-strtotime(date("Y-m-d")." 08:00:00"))/60);
					$width = (int)((strtotime($punch['end'])-strtotime($punch['start']))/60);
		?>
			pos_block(<?=$id?>, <?=$punch['container_id']?>, <?=$left?>);
			$('#box_<?=$id?>').width(<?=$width?>);
		<?
				}
		}
		?>					
	});
	function sortNumber(a,B)/>{
		return a-b;
	}
	</script>
	
................................................................................................................................................

    <div id="table_container" style="border-top:4px solid #ebebeb; padding-top:10px;height:100px;">
    <div style="font-size:20px;font-weight:bold;color:black;">
    Activity Report for <?=$agent_info['firstname']." ".$agent_info['lastname']?>
    <br />
    </div>
    <?php
	foreach($date_range as $date){
		echo '<br><div style="font-weight:bold;font-size:16px;color:black;">Calls for '.$date.'</div>';
		echo '<div class="call_container">';
		$time = '08:00';
		$minutes_since_last_call=0;
		for($i=0;$i<=780;$i++){
			if($calls_array[$date][$time]['conversion']){
				echo '<div class="conversion" title="'.$calls_array[$date][$time]['conversion_count'].' Conversions at: '.$time.'"></div>';
			}else{
				if(array_key_exists($time, $calls_array[$date])){
					echo '<div class="call" title="Call at: '.$time.' Last call: '.$calls_array[$date][$time]['minutes_ago'].' minutes ago"></div>';
					$minutes_since_last_call=0;
				}else{
					echo '<div class="no_call" title="'.$time.'"></div>';
					$minutes_since_last_call++;
				}
			}
			$time = date("H:i", strtotime($time."+1 minute"));
			//ADD TO INACTIVE TIME
			if($calls_array[$date][$time]['minutes_ago']>=5){
				$totals_array[$date]['inactive_time'] += $calls_array[$date][$time]['minutes_ago'];
				$totals_array['inactive_time'] += $calls_array[$date][$time]['minutes_ago'];
			}
			if($calls_array[$date][$time]['conversion'] && $minutes_since_last_call>=5){
				$totals_array[$date]['inactive_time'] -= ($minutes_since_last_call/*-$calls_array[$date][$time]['minutes_ago']*/);
				$totals_array['inactive_time'] -= ($minutes_since_last_call/*-$calls_array[$date][$time]['minutes_ago']*/);
			}
		}
	?>	
      </div>
		
	  <div id="hours_container_<?=$date_key[$date]?>" class="hours_container"> 
            <?
        foreach($punch_array[$date] as $id=>$punch){
		?>
        
		<div id="box_<?=$id?>" class="ui-widget-content box">
        <div class="back_div">
        <table cellspacing="0" cellpadding="0" style="width:100%;height:100%;margin:0px;padding:0px;">
        	<tr>
            	<td class="left_div">
                
                </td>
                <td class="right_div">
                <a href="#" onclick="remove_box(<?=$id?>,<?=$punch['container_id']?>);return false;"><img src="http://www.cctts.com/cctts_img/close_small.png" title="close" border="0" /></a>
                </td>
            </tr>
            <tr>
            	<td class="left_div">
                <div class="left_time" id="start_time_<?=$id?>">
					<?=date("g:i A", strtotime($punch['start']))?>
				</div>
                </td>
                <td class="right_div">
                <div class="right_time" id="end_time_<?=$id?>">
					<?=date("g:i A", strtotime($punch['end']))?>
				</div>
                </td>
            </tr>
        </table>
        </div>
		</div>
        <?
	    }
	    ?>
        </div>
        <div class="submit_container" id="submit_<?=$date_key[$date]?>">
        <? //print_r($blocks_array[$date]);?>
        <input type="submit" value="Add Box" onclick="add_box(<?=$date_key[$date]?>);" />
        <br />
        <input type="hidden" value="<?=implode("-", $blocks_array[$date])?>" id="blocks_<?=$date_key[$date]?>"/>
        <input type="submit" value="Save Hours" onclick="save_blocks(<?=$date_key[$date]?>, '<?=$date?>');" />
        </div>

This post has been edited by musasabi: 10 August 2011 - 02:46 PM