Apr 18, 2011

A Simple Rounded Corner Slide Tabbed Box (Content Slider) using jQuery

Object:

1. To create a content slider.

2. It must have rounded corner content box.

3. It should be cross browser compatible (not using css3 rounded corner style...etc)

4. Random link on tabs should not create any problem in sliding.(means infolinks, kontera...etc)

5. It should be simple.

In my earlier post, I discussed Simple Slide Tabbed box(Content Slider) using jQuery. But, there is no rounded corner in the content box and there is problem in sliding when infolinks/kontera shows links on tabs. I have fixed both issues. See following image:

jquery content slider

For rounded corner, I like CSS liquid round corners. In the demo, you will get multiple rounded corner panels. I am using following structure for rounded corner:


<div class="liquid-round">
    <div class="top"><span></span></div>
    <div class="center-content">	
		<div class="title"></div>
		...Panel Content...
	</div>	
    <div class="bottom"><span></span></div>
</div>

Structure for tabbed content:


<div class="container">
			<div class="TabMenu">	
			<span>
					...menu1...
			</span>
			<span>
					...menu2...
			</span>
			
			</div>
			<div class="ContentFrame">
				<div class="AllTabs">
					<div class="TabContent">
						...content 1...
					</div>
					<div class="TabContent">
						...content 2...
					</div>
				</div>
			</div>
</div>

To fix sliding problem on link of infolinks, I have modified jQuery code:


$(document).ready(function(){
				//Initialize
				//Set the selector in the first tab
				$(".container .TabMenu span:first").addClass("selector");
							
				//Basic hover action
				$(".container .TabMenu span").mouseover(function(){
					$(this).addClass("hovering");
				});
				$(".container .TabMenu span").mouseout(function(){
					$(this).removeClass("hovering");
				});				
				
				//Add click action to tab menu
				$(".container .TabMenu span").click(function(){
					//Remove the exist selector
					$(".selector").removeClass("selector");
					//Add the selector class to the sender
					$(this).addClass("selector");
					
					//Find the width of a tab
					var TabWidth = $(".TabContent:first").width();
					if(parseInt($(".TabContent:first").css("margin-left")) > 0)
						TabWidth += parseInt($(".TabContent:first").css("margin-left"));
					if(parseInt($(".TabContent:first").css("margin-right")) >0)
						TabWidth += parseInt($(".TabContent:first").css("margin-right"));
					//But wait, how far we slide to? Let find out
					var newLeft = -1* $(".TabMenu>span").index(this) * TabWidth;
					//Ok, now slide
					$(".AllTabs").animate({
						left: + newLeft + "px"
					},1000);
				});
			});

Enjoy jQuery!!!