Jan

30

IPhone Slide Effect

By mike@mike-miles.com

One of the cool (in my opinion) stand-out effects of the iphone is the way in which it switches between windows within the same application. The windows slide to the left when going forward), and slide to the right when going back.  This was an effect I wanted to emulate with my Iphone app Points Watcher .

Since my application is web based,  I needed to come up with  a solution that fits my needs.  What I wanted to happen is the user preforms an action (presses a button), it causes a page load (via AJAX) to occur. The results are then loaded into the page and slide in.

To accomplish this I relied on the jquery animate effect;

The animate effect allows you to … well create your own animations. So I decided to apply this effect to my main content DIV when triggering a page load.

This is what happens:  user clicks a button, which will trigger a page load. Using AJAX, I retrieve the new content for the page.  When the content is loaded succesfully I take the main DIV and  change its position 500px to the right (out of the scope of the Iphone browser screen).  I then load the new content into the DIV and using the animate effect slide it to the left 500px (Back to its original position)

Here’s a simple example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//A simple example of Replecating the IPhone slide in effect
function loadPage(page){
	//Using an AJAX call, retrieve the new content to be placed in the DIV
	$('#content').load('',{Page:page},function(){
		//On successful loading of the content
		//Set the DIV's position to relative (to allow for moving it)
		$(this).css('position','relative');
		//Move the DIV to the right 400px
		$(this).css('left',400);
		//Now animate the DIV to move back to the Left 400px
		//Back to its original position
		$(this).animate({left:0},'fast','linear',function(){
			//On completion of the animation set the DIV back to static
			$(this).css('position','static');
		});
	});
}

The effect comes off really well. It functions nearly perfectly to the actual IPhone effect and looks great.

All it takes is a bit more modification to allow for traversing back.  Just needed to throw in a conditional that if we’re going back instead of moving the DIV 400px to the right, we move it to the left (essentially off of the page).  That then cause it to slide in towards the right.

Here’s the modified code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//A simple example of Replecating the IPhone slide in effect
function loadPage(page,back){
	//Using an AJAX call, retrieve the new content to be placed in the DIV
	$('#content').load('',{Page:page},function(){
		//On successful loading of the content
		//Set the DIV's position to relative (to allow for moving it)
		$(this).css('position','relative');
		//Move the DIV to the right 400px
		//Unless We're going back to a page, then move DIV to the left -400px (So it'll slide to the right)
		$(this).css('left',(back ? -400:400));
		//Now animate the DIV to move back to the Left 400px
		//Back to its original position
		$(this).animate({left:0},'fast','linear',function(){
			//On completion of the animation set the DIV back to static
			$(this).css('position','static');
		});
	});
}

Here is an example page, feel free to look at the source code and adapt it for your own needs.

Jun

13

fseek()

By mike@mike-miles.com

There is this nifty function in PHP called fseek().  It allows you to set a pointer to any where in a file (a text file for example).  It comes in handy when your dealing with very large files (like log files, or config files), and today I discoverd it can be very useful if you want to search throu a file backwards.

Which was exactly what I was trying to do.  I needed to traverse a file, starting at the end.  The only solutions I could find infolved reading the whole file into an array, reversing the array and thensearching that way, which completly nullified the point of going the end of the file (I had to read the whole file into memory to get the end).

The solution I came up with, involves using fseek() and fread() (which allows you to read a file byte by byte).  With this function you give it a file, and a string to search for, and it’ll go through the file backwards byte by byte, and return the pointer (byte location in the file) of where the search string occures. (if it doesnt find the string, it’ll return FALSE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<?PHP
function searchFromEnd($filename,$search){
	//first make sure that the file is there, and we can read it
	if(file_exists($filename) && is_readable($filename)){ 
		//open the file for reading
		$fp = fopen($filename,'r');
		//get the length of the search string(minus the first character)
		$size=strlen($search)-1; 
		//get first element in string
		$first=$search[0]; 
		//size of the file
		$file_size=filesize($filename); 
		//set seek pointer to end of the file - size of the string
		$seek=$file_size-$size; 
		//set found to FALSE
		$found=false;
		//while not past the begining of the file
		while($seek>=0){
			//set file pointer to seek value
			fseek($fp,$seek); 
			//read in the first byte from pointer
            $test=fread($fp,1); 
            //if byte is same as the first string character, and  back far enough in file for search length
			if($test==$first && (($seek+$size) <= $file_size) ){ 
				//append enough characters to $test to make it same size as $search
				$test.=fread($fp,$size); 
				//if test value is what we're looking for
				if(strcmp($test,$search)==0){ 
					//return position;
					$found=$seek;
					//set pointer to -1 (exit loop);
					$seek=-1; 
				}else{
					//move back a byte
					$seek--; 
				}
			}else{
				//move back a byte
				$seek--; 
			}
		}
		//close the file
		fclose($fp); 
	}
	//return FALSE or position of search string
	return $found; 
}
?>

A much better method then reading the whole file.

You can download this file from here