iPhone-Style Navigation:AJAX + Rotate (Part II)

This is the sequel of previous tutorial discussing how to make iPhone style navigation. Once I promised to talk about how to implement AJAX and how to add cookie onto the script we have made before, right? But there will be a little change on the plan. Well, there’s a comment from a friend on the previous post. He told me what if the navigation can be rotated and the menu inside can also be rotated (just like the container). Brilliant! That comment finally helps me decide to change the cookie implementation into rotation. So, there will be the way to implement AJAX and Rotation technique in today’s post.

Dynamically Get the Next Content
The technique that we use to show the chosen content is just the same as the last technique, what is so different is that the way we fetch the chosen content. On the previous technique, we use static HTML to make the whole content. Now, we are going to use AJAX to get the content from the menu that we choose.

The menu that we choose will automatically search for its own content. If the content is provided in our DOM, the content will directly be showed. If there’s not in the DOM, we will call the content by using AJAX and then show it.

To implement AJAX, we make use jQuery built-in function, $.ajax(), with parameter : url, async and success. Besides different fetching technique from previous post, the checking process of menu (whether it has submenu or not) will also be a bit altered.

$.ajax({
	url: selectedPage,
	async: false,
	success: function(html) {

		selectedParent.after(html);
		resetMargin(defaultWidth);
		checkChild();

		$(selectedDiv).children('.header').prepend('').bind('click', function () {

			selectedParent	= $(this).parents('.additional-block');
			sliderMargin	= - (parseInt(selectedParent.css('margin-left')) - defaultWidth) + 'px';
			$('.slider').animate({marginLeft: sliderMargin}, transition);

			$('.additional-block').removeClass('selected');
			$(selectedParent).prev('.additional-block').addClass('selected');
		});

		doAnimate(selectedDiv, selectedMargin, defaultWidth, slidingMargin);
	}
});

If on the previous we only check whether the target of the menu is on our DOM or not (in order to know if there are any submenus), in this session we make AJAX do this task.

function checkChild() {

	$('.menu a').each(function() {

	thisObj	= $(this);
	thisLink= thisObj.attr('rel');

	if(thisLink != '') {

		$.ajax({
   		url : thisLink,
			async: false,
			success : function () {
      		thisObj.addClass('has-child');
  			}
  		});
						}
	});
}

To make the click function on the menu be able to run on the added element (the content called by AJAX) inside the DOM, we will make a jQuery built in function named .live(). The function will scan all elements that are added to the DOM and attach the handler and function to the elements.

$('.menu a').live('click', function(event) {
	//Do stuff
}

Rotate!
This technique is the most interesting for me. We will make the container (in this case is iPhone) rotates and, automatically, will also rotate the content. What we need for this technique is a jQuery built in function called .animate(), and an additional plugin to do the rotation from zachstronaut. Unfortunatelly, the plugin only supports Webkit, Safari, Chrome and Firefox 3.5.

Besides the function and plugin, we also need to change the html structure that we have by adding an additional div before div binder. This action is taken in order to avoid the content to overflow from iPhone pict while we rotate it.

					Indonesian Super League
				

Arema Malang
Persebaya Surabaya
Persib Bandung
Persija Jakarta
Persipura Jayapura
Sriwijaya FC

Rotation Technique
The secret of the rotation is by rotating the container (iPhone) for about 90 degree and then rotate the content to the first position by setting the degree also into 90. To rotate back the iPhone to its default position, we only need to do the same technique and setting the number into 0 degree.

$('#rotate').toggle(

	function() {

		$('#container').animate({rotate: '90deg'}, transition, function() {

			$('.binder').animate({
				rotate: '-90deg',
				height: verticalWidth+'px',
				width: horizontalWidth+'px',
				marginLeft: '-3.9em',
				marginTop: '3.9em'
			}, 500);

			$('.additional-block').animate({height: verticalWidth+'px', width: horizontalWidth+'px'}, transition, function() {

				resetMargin(horizontalWidth);
				resetSlider(horizontalWidth);
				defaultWidth = horizontalWidth;

			});
		});
	},

	function() {

		$('#container').animate({rotate: '0deg'}, transition, function() {

			$('.binder').animate({
				rotate: '0deg',
				height: horizontalWidth+'px',
				width: verticalWidth+'px',
				marginLeft: '0em',
				marginTop: '0em'
			}, 500);

			$('.additional-block').animate({height: horizontalWidth+'px', width: verticalWidth+'px'}, transition, function() {
				resetMargin(verticalWidth);
				resetSlider(verticalWidth);
				defaultWidth = verticalWidth;
			});
		});
	}
);

Since there’s a rotation, the div slider position will automatically in such a mess. So, we need a function to reset the slider, a function that can read the div content that is being showed, and then count the total previous div content so that it will be timed that with the width of the container. The rest, it then manage the position of the slider.

function resetSlider(width) {

	prevSiblings	= $('.selected').prevAll('.additional-block').length;
	currentMargin	= - (prevSiblings * width);

	$('.slider').css('margin-left', currentMargin);

}

Ok, this is it; an iPhone style navigation which is able to take data content with AJAX and is able to be rotated as you like it! Thanks for reading, guys. You can get regular useful updates about web-stuff by subscribing webstuffshare RSS feed or webstuffshare FREE Email subscription. If you like this post, your sharing and feedback would be very appreciated