Solved

Ajax and Static Content in Jquery tabs

Posted on 2011-02-18
3
686 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 29

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 29

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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Suggested Solutions

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

752 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