Solved

Ajax and Static Content in Jquery tabs

Posted on 2011-02-18
3
680 Views
Last Modified: 2012-05-11
Hi Guys and Gals-

I am using the Flowplayer.org/tools/tabs/ to create my search result windows in a real estate application. The issue I am having is the use of Ajax, vs Static content inside a DIV. I dont want my visitors to have to wait for content to download on each tab just to get their results. According to the documentation, adding the ajax setting in the JS call allows you to tun all on to ajax, however I only want that last two tabs to use ajax to call in external content, and the first to load static or DIV content.


<!DOCTYPE html>
<html>
 <head>
	<title>jQuery Tools standalone demo</title>
 
	<!-- include the Tools -->
	<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
	 
 
	<!-- standalone page styling (can be removed) -->
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>	
 
 
	
	<!-- tab styling -->	
	<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs-no-images.css"/>
	 
	
	<!-- skin 2 -->
	<style>
	
	
	/* alternate colors: skin2 */
	ul.skin2 a {
		background-color:#89a;		
		color:#fff !important;
	}
	
	/* mouseover state */
	ul.skin2 a:hover {
		background-color:#678;
	}
	
	/* active tab */
	ul.skin2 a.current {
		background-color:#4F5C6A;
		border-bottom:2px solid #4F5C6A;	
	}
	
	/* tab pane with background gradient */
	div.skin2 div {
		min-height:200px;
		color:#fff;	
		background:#234 url(http://static.flowplayer.org/img/global/gradient/h300.png) repeat-x scroll 0 -50px;
		
		/* IE6 does not support PNG24 images natively */
		_background:#4F5C6A;
	}
	</style>
</head>
 
<body>
 
 
<!-- tabs -->
<ul class="css-tabs skin2">
	<li><a href="#">Tab 1</a></li>
	<li><a href="#">Second tab</a></li>
	<li><a href="#">A ultra long third tab</a></li>
</ul>
 
<!-- panes -->
<div class="css-panes skin2">
	<div>
	
		<img src="http://static.flowplayer.org/img/title/eye192.png" alt="Flying screens" style="float:left;margin:0 30px 20px 0" />
	
		<h2>Lorem ipsum dolor sit amet</h2>
		
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem.
		</p>
		
		<p>
			Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam. 
		</p>			
		
		<br clear="all" />
		
	</div>
	
	<div>
		<p>
			Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui, molestie sed, tristique sit amet, blandit eu, turpis. Mauris hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed molestie dui quam vitae dui.
		</p> 
		<p>
			Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget tortor. Maecenas id augue. Vivamus interdum nulla ac dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus eget dui volutpat molestie.
		</p>
	</div>
	
	<div>
		<p>
			Maecenas at odio. Nunc laoreet lectus vel ante. Nullam imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
		</p>
		
		<p>
			In sed dolor. Etiam eget quam ac nibh pharetra adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis nisi. Vivamus at enim. Integer semper imperdiet massa. Vestibulum nulla massa, pretium quis, porta id, vestibulum vitae, velit.
		</p>
	</div>
</div>
 
<!-- activate tabs with JavaScript -->
<script> 
$(function() {
	$("ul.skin2").tabs("div.skin2 > div");
});
</script>
 
 
 
</body>
 
</html>

Open in new window

0
Comment
Question by:jfergy
  • 2
3 Comments
 
LVL 28

Accepted Solution

by:
Pravin Asar earned 250 total points
ID: 34934381
I have used jquery tabs , which works good with the situation you described.

Look at

http://jqueryui.com/demos/tabs/


http://jqueryui.com/demos/tabs/#event-show
0
 

Author Comment

by:jfergy
ID: 34976590
Hey, follow up question. How do I add multiple tab containers to a page dynamically. As the number of containers will change? The support data does not seem to dscuss this

Thanks
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 34979580
To add tabs dynamically.


tabs( "add" , url , label , [index] )


e.g.

$(document).ready(function()
{
      $("#tabs").tabs();
               // add after first tab
      $("#tabs").tabs( "add" , "http://www.yahoo.com" ,"NEW TAB", 1 );
               // append the tab
      $("#tabs").tabs( "add" , "http://www.yahoo.com" ,"NEW TAB");
      return;
}

0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question